body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); line-height:1.55; -webkit-font-smoothing: antialiased; }

a { color: inherit; }

.nav { position: sticky; top: 0; z-index: 20; background: rgba(11,11,15,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }

.nav-cta { background: var(--accent); color:#0b0b0f; font-weight:600; font-size:0.85rem; padding:9px 18px; border-radius:8px; text-decoration:none; transition:background 0.15s; }

.nav-login { color: var(--fg-2); font-size:0.85rem; font-weight:600; text-decoration:none; padding:9px 4px; transition:color 0.15s; }

.page-hero { padding: 72px 0 56px; text-align:center; }

.eyebrow { display:inline-flex; align-items:center; gap:8px; background: var(--accent-soft); border:1px solid var(--accent-ring); color: var(--accent-hi); font-size:0.78rem; font-weight:600; padding:6px 14px; border-radius:99px; margin-bottom:22px; }

h1 { font-size: 2.6rem; line-height:1.1; letter-spacing:-0.03em; margin:0 0 18px; font-weight:800; }

.page-hero p { font-size:1.1rem; color: var(--fg-2); max-width:600px; margin:0 auto; }

/* jump nav */
  .jumpnav { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding: 0 0 64px; }

.jumpnav a { font-size:0.82rem; font-weight:600; color:var(--fg-2); background:var(--surface); border:1px solid var(--border); padding:8px 16px; border-radius:99px; text-decoration:none; transition: all 0.15s; }

.jumpnav a:hover { color:var(--fg); border-color:var(--border-bright); }

.fsection { padding: 72px 0; border-top: 1px solid var(--border); }

.fsection-head { display:flex; align-items:center; gap:14px; margin-bottom:40px; }

.fsection-head .icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }

.icon.i-cyan   { background: rgba(77,212,224,0.12); color: var(--cyan); }

.icon.i-accent { background: var(--accent-soft); color: var(--accent-hi); }

.icon.i-magenta{ background: rgba(232,121,168,0.12); color: var(--magenta); }

.icon.i-warn   { background: rgba(251,191,36,0.12); color: var(--warn); }

.icon.i-success{ background: rgba(52,211,153,0.12); color: var(--success); }

.icon.i-danger { background: rgba(248,113,113,0.12); color: var(--danger); }

.fsection-head h2 { font-size:1.7rem; margin:0 0 4px; font-weight:800; letter-spacing:-0.02em; }

.fsection-head p { margin:0; color: var(--fg-2); font-size:0.95rem; }

.flist { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }

.fitem { background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px 22px; }

.fitem h3 { margin:0 0 8px; font-size:0.98rem; font-weight:700; display:flex; align-items:center; gap:8px; }

.fitem h3 .tick { color: var(--success); font-size:0.85rem; }

.fitem p { margin:0; color: var(--fg-2); font-size:0.88rem; }

/* account history preview */
  .lookup-layout { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; align-items:stretch; }

.lookup-layout .flist { grid-template-columns:1fr; gap:12px; }

.lookup-layout .fitem { padding:14px 16px; }

.lookup-layout .fitem h3 { margin-bottom:5px; font-size:0.9rem; }

.lookup-layout .fitem p { font-size:0.78rem; line-height:1.45; }

.history-preview { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 20px 60px -20px rgba(0,0,0,0.6); }

.history-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); background:var(--surface-2); }

.history-title { color:var(--fg-3); font-size:0.78rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }

.history-actions { display:flex; align-items:center; gap:6px; }

.history-add { background:transparent; border:1px dashed rgba(251,191,36,0.45); border-radius:7px; color:#f59e0b; padding:5px 9px; font:600 0.72rem var(--font-ui); }

.history-filter { background:var(--surface-2); border:1px solid var(--border-2); border-radius:7px; color:var(--fg-2); padding:5px 7px; font:0.72rem var(--font-ui); }

.history-body { flex:1; padding:8px 0; }

.history-item { display:grid; grid-template-columns:82px 18px 1fr; gap:0 7px; padding:9px 14px; }

.history-date { padding-top:2px; text-align:right; }

.history-date-main { color:var(--fg-3); font:0.66rem/1.4 var(--font-mono); }

.history-date-rel { color:#888897; font-size:0.62rem; }

.history-marker { display:flex; flex-direction:column; align-items:center; padding-top:4px; }

.history-dot { width:9px; height:9px; border:2px solid var(--surface); border-radius:50%; background:var(--accent); z-index:1; }

.history-dot.bio { background:var(--cyan); }

.history-dot.avatar { background:var(--magenta); }

.history-line { width:2px; min-height:35px; flex:1; margin-top:2px; background:var(--border-2); }

.history-item:last-child .history-line { visibility:hidden; }

.history-content { min-width:0; padding-bottom:6px; }

.history-label { margin-bottom:4px; font-size:0.78rem; font-weight:700; }

.history-value { font-size:0.73rem; line-height:1.5; }

.history-old { color:var(--fg-3); text-decoration:line-through; }

.history-new { color:var(--cyan); }

.history-arrow { margin:0 5px; color:var(--fg-3); }

.history-diff { margin-top:5px; padding:4px 7px; font-size:0.7rem; line-height:1.45; word-break:break-word; }

.history-diff.old { color:var(--fg-3); background:rgba(248,113,113,0.1); border-left:2px solid var(--danger); text-decoration:line-through; }

.history-diff.new { background:rgba(52,211,153,0.08); border-left:2px solid var(--success); }

.history-avatar-pair { display:flex; align-items:center; gap:8px; margin-top:7px; }

.history-avatar { width:40px; height:40px; border:2px solid var(--border-2); border-radius:50%; object-fit:cover; }

.history-footer { display:flex; justify-content:space-between; gap:12px; padding:10px 14px; border-top:1px solid var(--border); color:var(--fg-3); font:0.62rem var(--font-mono); }

/* mock live panel (matches index.html) */
  .mock-panel { background: var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6); margin-top:28px; }

.mock-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); background: var(--surface-2); }

.mock-head .title { font-size:0.82rem; font-weight:700; letter-spacing:0.03em; color: var(--fg-2); }

.live-pill { display:flex; align-items:center; gap:6px; background: rgba(248,113,113,0.12); color: var(--danger); font-size:0.72rem; font-weight:700; padding:4px 10px; border-radius:99px; }

.live-pill .dot { width:6px; height:6px; border-radius:50%; background: var(--danger); animation: pulse 1.6s infinite; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }

.mock-stats { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; padding:14px 18px; border-bottom:1px solid var(--border); font-size:0.8rem; color: var(--fg-2); }

.mock-stats b { color: var(--fg); font-family: var(--font-mono); }

.mock-metrics { display:flex; align-items:center; gap:18px; margin-left:auto; }

.mock-metric { display:flex; align-items:center; gap:5px; }

.mock-body { padding:14px 18px; display:flex; flex-direction:column; gap:10px; font-size:0.82rem; max-height:220px; overflow:auto; -webkit-overflow-scrolling:touch; }

.mock-line { color: var(--fg-2); }

.mock-line .u { font-weight:600; }

.mock-line.join { color: rgba(126,200,227,0.65); }

.mock-line.gift { color: #f59e0b; }

.cta-band { background: linear-gradient(135deg, var(--surface-2), var(--surface)); border:1px solid var(--border); border-radius:20px; padding:56px 40px; text-align:center; margin: 40px auto 0; }

.cta-band h2 { font-size:1.8rem; margin:0 0 12px; font-weight:800; letter-spacing:-0.02em; }

.cta-band p { color: var(--fg-2); margin:0 0 26px; }

.btn { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:0.92rem; padding:13px 26px; border-radius:9px; text-decoration:none; transition: all 0.15s; }

.btn-primary { background: var(--accent); color:#0b0b0f; }

.btn-primary:hover { background: var(--accent-hi); transform: translateY(-1px); }

footer { border-top:1px solid var(--border); padding: 40px 0; }

@media (max-width: 860px) {
    h1 { font-size:2rem; }
    .flist { grid-template-columns: 1fr; }
    .lookup-layout { grid-template-columns:1fr; }
    .nav-links, .nav-actions > .nav-login, .nav-actions > .nav-cta { display:none; }
    .mobile-nav { display:block; }
  }

@media (max-width: 480px) {
    .nav .wrap { padding: 0 16px; }
    .nav-actions { gap:10px; }
    .page-hero { padding: 48px 0 32px; }
    h1 { font-size:1.7rem; }
    .fsection { padding: 48px 0; }
    footer .wrap { flex-direction:column; align-items:flex-start; }
  }