.top-nav { display:flex; justify-content:space-between; align-items:center;
  padding:0 22px; margin-bottom:22px; height:56px;
  background:var(--glass); border:1px solid var(--border);
  border-radius:14px; backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 4px 20px rgba(0,0,0,0.18); }
.top-nav .nav-brand { font-weight:800; letter-spacing:-0.03em; font-size:18px;
  color:var(--ink); display:flex; align-items:center; gap:10px;
  text-decoration:none; }
.top-nav .nav-brand .logo-j { width:30px; height:30px; display:inline-flex;
  align-items:center; justify-content:center;
  font-weight:900; font-size:22px; color:#C8A7FF;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  text-shadow: 0 0 10px rgba(155,92,255,0.85),
               0 0 20px rgba(155,92,255,0.55),
               0 0 32px rgba(155,92,255,0.35);
  letter-spacing:-0.05em; padding-bottom:2px; }
.top-nav .nav-tabs { display:flex; gap:2px; height:100%; align-items:center; }
.top-nav .nav-tab { position:relative; padding:0 18px; height:100%;
  display:flex; align-items:center; color:var(--ink-mid);
  text-decoration:none; font-size:13.5px; font-weight:500;
  transition:color 0.15s; }
.top-nav .nav-tab:hover { color:var(--ink); }
.top-nav .nav-tab.active { color:var(--ink); }
.top-nav .nav-tab.active::after { content:""; position:absolute;
  left:18px; right:18px; bottom:-1px; height:2px;
  background:linear-gradient(90deg, #9B5CFF, #C89AFF);
  border-radius:2px 2px 0 0;
  box-shadow: 0 0 12px rgba(155,92,255,0.5); }
.top-nav .nav-right { display:flex; align-items:center; gap:10px; }
.top-nav .new-btn { padding:8px 14px; border-radius:999px;
  background:linear-gradient(135deg, #9B5CFF, #C89AFF);
  color:white; text-decoration:none; font-size:13px; font-weight:600;
  box-shadow:0 2px 12px rgba(155,92,255,0.35),
             inset 0 1px 0 rgba(255,255,255,0.25);
  transition:transform 0.15s, box-shadow 0.15s; }
.top-nav .new-btn:hover { transform:translateY(-1px);
  box-shadow:0 4px 18px rgba(155,92,255,0.55),
             inset 0 1px 0 rgba(255,255,255,0.3); }
.top-nav .nav-user { display:flex; align-items:center; gap:10px;
  padding:6px 12px 6px 6px; border-radius:999px;
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  text-decoration:none; color:var(--ink-mid); font-size:13px; }
.top-nav .nav-user:hover { color:var(--ink); background:rgba(255,255,255,0.06); }
.top-nav .nav-user img { width:28px; height:28px; border-radius:50%; }

@media (max-width:768px) {
  .top-nav { height:auto; padding:10px 14px; flex-wrap:wrap; gap:8px; }
  .top-nav .nav-tabs { order:3; width:100%; overflow-x:auto; }
  .top-nav .nav-tab { padding:10px 12px; font-size:13px; }
  .top-nav .nav-tab.active::after { bottom:0; left:12px; right:12px; }
}

.dash-grid { display:grid; grid-template-columns: 280px 1fr; gap:20px;
  align-items:start; }
@media (max-width: 768px) { .dash-grid { grid-template-columns: 1fr; } }

.side { display:flex; flex-direction:column; gap:16px; }
.section-hd { font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:10px; padding-left:4px; }

.profile-card { padding:18px; background:var(--glass); border:1px solid var(--border);
  border-radius:16px; display:flex; gap:14px; align-items:center;
  backdrop-filter:blur(20px); }
.profile-card { position: relative; overflow: hidden; }
.profile-card::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(155,92,255,0.20), transparent 60%);
  pointer-events: none; }
.profile-card > * { position: relative; z-index: 1; }
.profile-card .avatar { width:60px; height:60px; border-radius:50%;
  border:2px solid rgba(155,92,255,0.5);
  box-shadow: 0 0 20px rgba(155,92,255,0.35); }
.profile-body { flex:1; min-width:0; }
.profile-name { font-weight:700; font-size:15px; }
.profile-handle { color:var(--ink-dim); font-size:12px; margin-bottom:6px; }
.profile-stats { display:flex; gap:10px; font-size:12px; color:var(--ink-mid);
  flex-wrap:wrap; }
.profile-stats .pnl-pos { color:var(--moss); }
.profile-stats .pnl-neg { color:var(--rust); }

.peers { padding:12px; background:var(--glass); border:1px solid var(--border);
  border-radius:16px; backdrop-filter:blur(20px); }
.peer-card { display:flex; gap:10px; align-items:center; padding:10px;
  border-radius:10px; text-decoration:none; color:inherit;
  transition:background 0.15s; }
.peer-card:hover { background:rgba(255,255,255,0.04); }
.peer-card img { width:36px; height:36px; border-radius:50%; }
.peer-name { font-weight:600; font-size:14px; }
.peer-sub { color:var(--ink-dim); font-size:12px; }

.main { min-width:0; }
.feed { display:flex; flex-direction:column; gap:10px; }
.feed-row { display:flex; gap:14px; padding:16px 18px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid var(--border);
  text-decoration:none; color:inherit;
  transition:border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  backdrop-filter:blur(20px);
  position:relative;
  overflow:hidden; }
.feed-row::before { content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:linear-gradient(180deg, transparent, var(--accent) 30%,
    var(--accent-2) 70%, transparent);
  opacity:0; transition:opacity 0.18s; }
.feed-row:hover { border-color:var(--border-strong); transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(155,92,255,0.10); }
.feed-row:hover::before { opacity:0.9; }
.feed-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(155,92,255,0.25); }
.feed-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.feed-hd { display:flex; gap:8px; align-items:center; font-size:12.5px;
  flex-wrap:wrap; }
.feed-name { font-weight:700; color:var(--ink); }
.feed-action-text { color:var(--ink-dim); font-size:12px; }
.feed-kind { color:var(--accent-2); text-transform:uppercase;
  letter-spacing:0.14em; font-size:9.5px; font-weight:700;
  padding:3px 9px; border-radius:999px;
  background:rgba(155,92,255,0.14); border:1px solid rgba(155,92,255,0.32);
  display:inline-flex; align-items:center; gap:4px; }
.feed-kind.badge-trade.pnl-pos { color:#4ADE80;
  background:rgba(74,222,128,0.10); border-color:rgba(74,222,128,0.35); }
.feed-kind.badge-trade.pnl-neg { color:#F87171;
  background:rgba(248,113,113,0.10); border-color:rgba(248,113,113,0.35); }
.feed-followed-tag { color:var(--accent-2); font-size:10.5px;
  padding:2px 8px; border-radius:999px;
  background:rgba(155,92,255,0.10); border:1px solid rgba(155,92,255,0.28);
  display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.feed-ts { color:var(--ink-dim); margin-left:auto; font-variant-numeric:tabular-nums;
  font-size:11.5px; }
.feed-text { color:var(--ink-mid); font-size:13.5px; line-height:1.55;
  word-break:break-word; }
.is-followed-item { border-color:rgba(155,92,255,0.28); }

.feed-header-bar { display:flex; justify-content:space-between;
  align-items:flex-end; margin-bottom:14px; padding:0 4px; gap:14px;
  flex-wrap:wrap; }
.feed-title { margin:0; font-size:22px; letter-spacing:-0.02em;
  font-weight:800;
  background:linear-gradient(120deg, #FFFFFF 0%, #C89AFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.feed-subtitle { margin:4px 0 0; color:var(--ink-dim); font-size:12.5px; }
.feed-filters { display:flex; gap:6px; align-items:center; justify-content:center;
  padding:4px; border-radius:12px;
  background:rgba(255,255,255,0.03); border:1px solid var(--border); }
.filter-pill { padding:7px 14px; border-radius:999px; border:none;
  background:transparent; color:var(--ink-mid); cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600;
  transition:background 0.15s, color 0.15s; }
.filter-pill:hover { color:var(--ink); }
.filter-pill.active { background:linear-gradient(135deg, #9B5CFF, #C89AFF);
  color:white;
  box-shadow:0 2px 12px rgba(155,92,255,0.30); }
.empty.small { padding:20px 10px; font-size:12px; }


/* --- Landing Styles --- */
.landing { min-height:100vh; display:flex; align-items:center;
  justify-content:center; padding:20px; }
.landing-card { padding:56px 44px; text-align:center;
  background:var(--glass); border:1px solid var(--border);
  border-radius:24px; backdrop-filter:blur(28px);
  -webkit-backdrop-filter:blur(28px); max-width:440px;
  box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.landing-logo { width:96px; height:96px; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  font-size:72px; font-weight:900; color:#C8A7FF;
  font-family:"SF Pro Display", -apple-system, Inter, sans-serif;
  text-shadow: 0 0 20px rgba(155,92,255,0.9),
               0 0 40px rgba(155,92,255,0.55),
               0 0 70px rgba(155,92,255,0.35);
  letter-spacing:-0.05em; }
.landing-card h1 { font-size:36px; margin:0 0 10px; letter-spacing:-0.03em;
  font-weight:800;
  background:linear-gradient(135deg, #F3E9DC, #C8A7FF);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.landing-card p { color:var(--ink-mid); margin:0 0 28px; font-size:14.5px;
  line-height:1.5; }
.discord-btn { display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px;
  background:linear-gradient(135deg, #5865F2, #7983F5);
  color:white; text-decoration:none; border-radius:12px;
  font-weight:600; font-size:15px;
  box-shadow:0 4px 16px rgba(88,101,242,0.4),
             inset 0 1px 0 rgba(255,255,255,0.25); }
.discord-btn:hover { transform:translateY(-1px);
  box-shadow:0 6px 24px rgba(88,101,242,0.55); }

/* --- Settings Styles --- */
.settings-grid { max-width:720px; }
.setting-card { padding:22px; background:var(--glass);
  border:1px solid var(--border); border-radius:16px; margin-bottom:16px;
  backdrop-filter:blur(20px); }
.setting-card h3 { margin:0 0 4px; font-size:14px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--ink-mid); }
.setting-card p { color:var(--ink-dim); font-size:13px; margin:0 0 14px; }
.identity-row { display:flex; align-items:center; gap:18px; }
.identity-row img { width:80px; height:80px; border-radius:50%;
  border:2px solid rgba(229,165,90,0.4); }
.identity-row .id-body .id-name { font-size:18px; font-weight:700; }
.identity-row .id-body .id-handle { color:var(--ink-dim); font-size:13px; }
.identity-row .id-body .id-last { color:var(--ink-dim); font-size:11px;
  margin-top:6px; letter-spacing:0.08em; }
.danger-btn { padding:10px 18px; border-radius:10px;
  background:rgba(182,85,59,0.14); border:1px solid rgba(182,85,59,0.4);
  color:var(--rust); text-decoration:none; font-size:13.5px;
  font-weight:600; display:inline-block; }
.danger-btn:hover { background:rgba(182,85,59,0.24); }
.setting-input { width:100%; padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  color:var(--ink); font-family:inherit; font-size:14px;
  margin-bottom:10px; box-sizing:border-box; }
.save-btn { padding:8px 16px; border-radius:10px;
  background:linear-gradient(135deg, #9B5CFF, #C89AFF); color:white;
  border:none; cursor:pointer; font-size:13px; font-weight:600;
  font-family:inherit;
  box-shadow:0 2px 10px rgba(155,92,255,0.3); }
.save-btn:hover { transform:translateY(-1px); }
.toggle-row { display:flex; align-items:center; gap:10px;
  margin-bottom:14px; cursor:pointer; color:var(--ink); font-size:14px; }
.toggle-row input { width:18px; height:18px; accent-color:#9B5CFF; }

/* --- New Entry Styles --- */
.new-wrap { max-width:640px; margin:0 auto; }
.new-card { padding:26px; background:var(--glass);
  border:1px solid var(--border); border-radius:18px;
  backdrop-filter:blur(24px) saturate(140%); }
.new-tabs { display:flex; gap:6px; margin-bottom:20px;
  padding:4px; background:rgba(0,0,0,0.2); border-radius:12px; }
.new-tab { flex:1; padding:10px; text-align:center; border-radius:8px;
  cursor:pointer; color:var(--ink-mid); font-size:13px; font-weight:600;
  transition:background 0.15s, color 0.15s; }
.new-tab.on { background:var(--glass-strong); color:var(--ink); }
.new-card label { display:block; font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:6px; }
.new-card select, .new-card input, .new-card textarea { width:100%;
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  color:var(--ink); font-family:inherit; font-size:14px;
  margin-bottom:14px; box-sizing:border-box; }
.new-card textarea { min-height:140px; resize:vertical;
  font-family:inherit; line-height:1.6; }
.new-card .row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.new-card .row > div { min-width:0; }
.new-card .submit-row { display:flex; gap:12px; align-items:center; }
.new-card .submit-btn { padding:12px 24px; border-radius:12px;
  background:linear-gradient(135deg, #9B5CFF, #C89AFF); color:white;
  border:none; cursor:pointer; font-size:14px; font-weight:600;
  font-family:inherit;
  box-shadow:0 4px 14px rgba(155,92,255,0.35); }
.new-card .submit-btn:hover { transform:translateY(-1px); }
.new-card .status { color:var(--ink-mid); font-size:13px; }
.new-hd { margin-bottom:16px; text-align:center; }
.new-hd h1 { margin:0; font-size:26px; letter-spacing:-0.02em; }
.new-hd p { margin:6px 0 0; color:var(--ink-dim); font-size:13.5px; }

.attach-row { display:flex; gap:10px; margin: -6px 0 10px; align-items:center; }
.attach-btn, .annotate-btn { padding:8px 14px; border-radius:10px;
  border:1px dashed var(--border-strong);
  background:rgba(255,255,255,0.03); color:var(--ink-mid);
  cursor:pointer; font-family:inherit; font-size:12.5px;
  font-weight:600; }
.attach-btn:hover, .annotate-btn:hover { border-color:var(--accent-2);
  color:var(--ink); background:rgba(155,92,255,0.08); }
.attach-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.attach-thumb { position:relative; width:92px; height:92px;
  border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.attach-thumb img { width:100%; height:100%; object-fit:cover; }
.attach-thumb .rm { position:absolute; top:4px; right:4px;
  width:22px; height:22px; border:none; border-radius:50%;
  background:rgba(0,0,0,0.7); color:white; cursor:pointer;
  font-size:12px; line-height:1; }

/* Annotate modal — Excalidraw overlay */
.anno-modal { position:fixed; inset:0; background:rgba(0,0,0,0.7);
  z-index:100; display:none; align-items:center; justify-content:center;
  padding:24px; }
.anno-modal.open { display:flex; }
.anno-panel { background:#0F0B1A; border-radius:18px;
  width:100%; max-width:1100px; height:calc(100vh - 48px);
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--border-strong); }
.anno-top { display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--border); }
.anno-top .h { font-weight:700; color:var(--ink); flex:1; }
.anno-top button { padding:8px 14px; border-radius:10px; border:none;
  font-family:inherit; font-size:13px; cursor:pointer; }
.anno-top .save { background:linear-gradient(135deg, #9B5CFF, #C89AFF);
  color:white; font-weight:600; }
.anno-top .cancel { background:rgba(255,255,255,0.06); color:var(--ink); }
#anno-editor { flex:1; min-height:0; }

/* --- Social / Directory Styles --- */
.everyone-grid { display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px; }
.everyone-card { padding:18px; background:var(--glass);
  border:1px solid var(--border); border-radius:16px;
  text-decoration:none; color:inherit; display:flex;
  flex-direction:column; gap:12px; transition:border-color 0.15s;
  backdrop-filter:blur(20px); }
.everyone-card:hover { border-color:var(--border-strong); }
.everyone-top { display:flex; gap:12px; align-items:center; }
.everyone-top img { width:52px; height:52px; border-radius:50%; }
.ev-display { font-weight:700; font-size:15px; }
.ev-handle { color:var(--ink-dim); font-size:12px; }
.me-badge { display:inline-block; padding:2px 8px; margin-left:6px;
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  border-radius:999px; background:rgba(229,165,90,0.18);
  color:var(--accent); border:1px solid rgba(229,165,90,0.4);
  vertical-align:middle; }
.everyone-stats { display:flex; gap:10px; font-size:12px; color:var(--ink-mid);
  flex-wrap:wrap; }
.everyone-preview { color:var(--ink-mid); font-size:13px; line-height:1.5;
  padding:10px 12px; background:rgba(255,255,255,0.03);
  border:1px solid var(--border); border-radius:10px;
  max-height:80px; overflow:hidden; }
.everyone-last { color:var(--ink-dim); font-size:11px;
  letter-spacing:0.08em; }