/* ==========================================================
   SHARED DESIGN SYSTEM — glass + grid + white/black/yellow
   Used across every page of the site. Edit tokens here to
   re-skin the whole site (brand name, colors, etc.)
   ========================================================== */

:root{
  --paper:#FAFAF7;
  --paper-2:#F2F1EB;
  --ink:#0B0B0C;
  --ink-soft:#1D1D1F;
  --graphite:#54545A;
  --line:rgba(11,11,12,0.08);
  --line-strong:rgba(11,11,12,0.14);
  --signal:#FFD400;
  --signal-deep:#E6BE00;
  --glass:rgba(255,255,255,0.55);
  --glass-strong:rgba(255,255,255,0.72);
  --glass-border:rgba(255,255,255,0.65);
  --glass-dark:rgba(255,255,255,0.06);
  --glass-dark-border:rgba(255,255,255,0.12);
  --radius:22px;
  --radius-sm:14px;
  --shadow-soft:0 8px 40px rgba(11,11,12,0.07);
  --shadow-lift:0 20px 60px rgba(11,11,12,0.14);
  --danger:#E5484D;
  --success:#2E9E5B;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--signal); color:var(--ink); }

h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.05;
}

.mono{ font-family:'IBM Plex Mono',monospace; letter-spacing:0.01em; }

a{color:inherit;text-decoration:none;}
img,svg{display:block;}

.wrap{ max-width:1320px; margin:0 auto; padding:0 48px; }
.wrap-narrow{ max-width:920px; margin:0 auto; padding:0 48px; }

/* ---------- grid-paper texture ---------- */
.grid-field{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 90%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 90%);
  pointer-events:none;
}
.grid-field.dark{
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px);
}
.grid-field.full{ -webkit-mask-image:none; mask-image:none; opacity:0.6; }

/* ---------- nav ---------- */
header{ position:fixed; top:0; left:0; right:0; z-index:100; padding:22px 0; }
.nav-inner{ max-width:1320px; margin:0 auto; padding:0 48px; display:flex; align-items:center; justify-content:space-between; }
.nav-glass{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:var(--glass); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-border); border-radius:100px; padding:10px 12px 10px 26px; box-shadow:var(--shadow-soft);
}
.logo{ display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:700; font-size:19px; }
.logo .mark{ width:30px;height:30px;border-radius:9px;background:var(--ink);display:flex;align-items:center;justify-content:center;position:relative; }
.logo .mark::after{ content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:var(--signal);top:6px;right:6px; }
.logo .mark i{ width:16px;height:16px;color:var(--paper); }
.logo .x{ color:var(--signal-deep); }

nav.links{ display:flex; align-items:center; gap:32px; font-size:14.5px; font-weight:500; color:var(--ink-soft); }
nav.links a{ opacity:0.75; transition:opacity .2s ease; }
nav.links a:hover, nav.links a.active{ opacity:1; }
nav.links a.active{ color:var(--signal-deep); font-weight:600; }

.nav-cta{ display:flex; align-items:center; gap:10px; }

.btn{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  padding:11px 20px; border-radius:100px; border:1px solid var(--line-strong);
  background:transparent; cursor:pointer; font-family:'Inter',sans-serif;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease;
}
.btn i{ width:16px; height:16px; }
.btn-ghost:hover{ background:rgba(11,11,12,0.04); }
.btn-solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.btn-signal{ background:var(--signal); color:var(--ink); border-color:var(--signal); }
.btn-signal:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(255,212,0,0.35); }
.btn-lg{ padding:15px 26px; font-size:15px; }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

/* ---------- page header (inner pages) ---------- */
.page-hero{ position:relative; padding:170px 0 80px; overflow:hidden; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.14em; color:var(--graphite); background:var(--glass-strong); border:1px solid var(--glass-border);
  padding:8px 16px 8px 12px; border-radius:100px; backdrop-filter:blur(10px); margin-bottom:24px;
}
.eyebrow .dot{ width:7px;height:7px;border-radius:50%;background:var(--signal-deep); }
.page-hero h1{ font-size:clamp(38px, 4.6vw, 62px); margin-bottom:22px; max-width:780px; }
.page-hero p.lede{ font-size:17.5px; line-height:1.65; color:var(--graphite); max-width:560px; }

/* ---------- generic sections ---------- */
section{ position:relative; padding:110px 0; }
.section-head{ max-width:640px; margin-bottom:64px; }
.kicker{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:var(--signal-deep); margin-bottom:18px; }
.kicker::before{ content:''; width:22px;height:2px; background:var(--signal-deep); }
.section-head h2{ font-size:clamp(30px,3.4vw,44px); margin-bottom:16px; }
.section-head p{ color:var(--graphite); font-size:16px; line-height:1.65; }

.dark-band{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.dark-band .kicker{ color:var(--signal); }
.dark-band .kicker::before{ background:var(--signal); }
.dark-band .section-head p{ color:rgba(250,250,247,0.6); }

/* ---------- glass panel base ---------- */
.glass-panel{
  background:var(--glass); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--shadow-soft);
}
.glass-strong{
  background:var(--glass-strong); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--shadow-soft);
}

/* ---------- bento / feature cards ---------- */
.bento{ display:grid; grid-template-columns:repeat(6, 1fr); gap:22px; }
.b-card{
  background:var(--glass-strong); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--glass-border); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow-soft);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.b-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.b-card .b-icon{ width:46px;height:46px;border-radius:13px;background:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:22px; }
.b-card .b-icon i{ width:22px;height:22px;color:var(--paper); }
.b-card.accent .b-icon{ background:var(--signal); }
.b-card.accent .b-icon i{ color:var(--ink); }
.b-card h3{ font-size:20px; margin-bottom:10px; font-weight:600; }
.b-card p{ font-size:14.5px; color:var(--graphite); line-height:1.6; }

.b-span-2{ grid-column:span 2; }
.b-span-3{ grid-column:span 3; }
.b-span-4{ grid-column:span 4; }
.b-span-6{ grid-column:span 6; }

/* ---------- forms ---------- */
.field-group{ margin-bottom:20px; }
.field-label{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--ink-soft); }
.field-input, .field-select, .field-textarea{
  width:100%; padding:13px 16px; font-size:14.5px; font-family:'Inter',sans-serif;
  background:rgba(255,255,255,0.6); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease;
}
.field-input:focus, .field-select:focus, .field-textarea:focus{
  outline:none; border-color:var(--signal-deep); box-shadow:0 0 0 4px rgba(255,212,0,0.18);
}
.field-textarea{ resize:vertical; min-height:120px; }
.field-hint{ font-size:12.5px; color:var(--graphite); margin-top:7px; }
.field-error{ font-size:12.5px; color:var(--danger); margin-top:7px; display:none; }
.field-row{ display:flex; align-items:center; justify-content:space-between; }
.checkbox-row{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--graphite); }
.checkbox-row input{ width:16px;height:16px; accent-color:var(--ink); }
.divider-text{ display:flex; align-items:center; gap:14px; color:var(--graphite); font-size:12.5px; margin:26px 0; }
.divider-text::before, .divider-text::after{ content:''; flex:1; height:1px; background:var(--line-strong); }
.social-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); font-size:14px; font-weight:600;
  background:rgba(255,255,255,0.5); cursor:pointer; transition:background .2s ease;
}
.social-btn:hover{ background:rgba(255,255,255,0.85); }
.social-btn i{ width:18px;height:18px; }

/* ---------- pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.price-card{
  background:var(--glass-strong); backdrop-filter:blur(18px) saturate(160%); border:1px solid var(--glass-border);
  border-radius:var(--radius); padding:38px; box-shadow:var(--shadow-soft); display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease; position:relative;
}
.price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.price-card.feat{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.price-card.feat .p-desc{ color:rgba(250,250,247,0.6); }
.price-card.feat .p-feature{ color:rgba(250,250,247,0.82); }
.price-card.feat .p-feature i{ color:var(--signal); }
.price-badge{
  position:absolute; top:-13px; right:32px; background:var(--signal); color:var(--ink); font-size:11.5px; font-weight:700;
  padding:6px 14px; border-radius:100px; text-transform:uppercase; letter-spacing:0.06em;
}
.p-plan{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--signal-deep); margin-bottom:16px; }
.price-card.feat .p-plan{ color:var(--signal); }
.p-amount{ font-family:'Fraunces',serif; font-size:42px; font-weight:600; margin-bottom:6px; }
.p-amount span{ font-family:'Inter',sans-serif; font-size:15px; font-weight:500; color:var(--graphite); }
.price-card.feat .p-amount span{ color:rgba(250,250,247,0.6); }
.p-desc{ font-size:13.5px; color:var(--graphite); margin-bottom:26px; }
.p-features{ display:flex; flex-direction:column; gap:13px; margin-bottom:30px; flex:1; }
.p-feature{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft); }
.p-feature i{ width:16px;height:16px; color:var(--signal-deep); flex-shrink:0; }
.p-feature.off{ opacity:0.4; }
.p-feature.off i{ color:var(--graphite); }
.price-card .btn{ justify-content:center; width:100%; }
.billing-toggle{
  display:inline-flex; align-items:center; gap:4px; background:var(--paper-2); border:1px solid var(--line);
  border-radius:100px; padding:5px; margin-bottom:14px;
}
.billing-toggle button{
  border:none; background:transparent; padding:9px 18px; border-radius:100px; font-size:13.5px; font-weight:600;
  color:var(--graphite); cursor:pointer; font-family:'Inter',sans-serif; transition:all .2s ease;
}
.billing-toggle button.active{ background:var(--ink); color:var(--paper); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; padding:24px 4px; cursor:pointer;
  font-size:16px; font-weight:600;
}
.faq-q i{ width:18px;height:18px; color:var(--graphite); transition:transform .3s ease; flex-shrink:0; }
.faq-item.open .faq-q i{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-a{ max-height:200px; }
.faq-a p{ padding:0 4px 24px; font-size:14.5px; color:var(--graphite); line-height:1.65; max-width:640px; }

/* ---------- table ---------- */
.data-table{ width:100%; border-collapse:collapse; }
.data-table th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--graphite);
  font-weight:700; padding:12px 16px; border-bottom:1px solid var(--line-strong);
}
.data-table td{ padding:16px; font-size:14px; border-bottom:1px solid var(--line); }
.data-table tr:last-child td{ border-bottom:none; }
.status-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:100px; }
.status-pill.on-track{ background:rgba(46,158,91,0.12); color:var(--success); }
.status-pill.behind{ background:rgba(229,72,77,0.12); color:var(--danger); }
.status-pill.ahead{ background:rgba(255,212,0,0.2); color:#8A6D00; }

/* ---------- dashboard shell ---------- */
.dash-shell{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.dash-sidebar{
  background:var(--glass-strong); backdrop-filter:blur(20px); border-right:1px solid var(--line);
  padding:28px 20px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh;
}
.dash-sidebar .logo{ margin-bottom:32px; padding-left:8px; }
.dash-nav-item{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; font-size:14px; font-weight:500;
  color:var(--ink-soft); transition:background .2s ease;
}
.dash-nav-item i{ width:18px;height:18px; }
.dash-nav-item:hover{ background:rgba(11,11,12,0.05); }
.dash-nav-item.active{ background:var(--ink); color:var(--paper); }
.dash-nav-spacer{ flex:1; }
.dash-main{ padding:36px 44px; }
.dash-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:36px; }
.dash-topbar h1{ font-size:26px; }
.dash-avatar{ width:38px;height:38px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;color:var(--paper);font-family:'Fraunces',serif;font-size:14px;overflow:hidden; }
.dash-avatar img, .lb-avatar img{ width:100%;height:100%;object-fit:cover; }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:32px; }
.stat-card{
  background:var(--glass-strong); backdrop-filter:blur(16px); border:1px solid var(--glass-border);
  border-radius:var(--radius-sm); padding:24px; box-shadow:var(--shadow-soft);
}
.stat-card .stat-label{ font-size:12.5px; color:var(--graphite); font-weight:600; margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.stat-card .stat-label i{ width:14px;height:14px; color:var(--signal-deep); }
.stat-card .stat-value{ font-family:'Fraunces',serif; font-size:30px; font-weight:600; }
.stat-card .stat-delta{ font-size:12px; color:var(--success); margin-top:6px; font-weight:600; }
.stat-card .stat-delta.down{ color:var(--danger); }

/* ---------- footer ---------- */
footer{ padding:80px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3, 0.8fr); gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line); }
.footer-brand p{ color:var(--graphite); font-size:14px; line-height:1.6; max-width:280px; margin-top:18px; }
.footer-col h5{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; color:var(--graphite); margin-bottom:18px; }
.footer-col a{ display:block; font-size:14px; color:var(--ink-soft); padding:7px 0; opacity:0.8; }
.footer-col a:hover{ opacity:1; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:32px; font-size:13px; color:var(--graphite); }
.footer-social{ display:flex; gap:14px; }
.footer-social a{ width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center; }
.footer-social i{ width:15px;height:15px; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- misc ---------- */
.center-card{ max-width:440px; margin:0 auto; }
.split-auth{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.auth-visual{ background:var(--ink); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:60px; }

@media (max-width:1080px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .b-span-2,.b-span-3,.b-span-4,.b-span-6{ grid-column:span 2; }
  .pricing-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .dash-shell{ grid-template-columns:1fr; }
  .dash-sidebar{ display:none; }
  .split-auth{ grid-template-columns:1fr; }
  .auth-visual{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .wrap,.wrap-narrow{ padding:0 22px; }
  nav.links{ display:none; }
  .stat-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .dash-main{ padding:24px; }
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ==========================================================
   ADDITIONAL SHARED COMPONENTS
   ========================================================== */

/* ---------- 404 ---------- */
.error-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; text-align:center; padding:40px; }
.error-code{ font-family:'Fraunces',serif; font-size:clamp(90px,14vw,160px); font-weight:600; line-height:1; letter-spacing:-0.03em; }
.error-code .zero{ color:var(--signal-deep); }

/* ---------- stepper (onboarding) ---------- */
.stepper{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:44px; }
.stepper .s-dot{ width:34px;height:34px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:13px; font-weight:700; background:var(--paper-2); border:1px solid var(--line-strong); color:var(--graphite); }
.stepper .s-dot.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.stepper .s-dot.done{ background:var(--signal); color:var(--ink); border-color:var(--signal); }
.stepper .s-line{ width:44px; height:2px; background:var(--line-strong); }
.onboard-step{ display:none; }
.onboard-step.active{ display:block; }
.pick-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pick-chip{
  display:flex; align-items:center; gap:10px; padding:16px; border-radius:var(--radius-sm); border:1.5px solid var(--line-strong);
  cursor:pointer; font-size:14px; font-weight:600; transition:all .2s ease; background:rgba(255,255,255,0.4);
}
.pick-chip i{ width:18px;height:18px; color:var(--graphite); }
.pick-chip.selected{ border-color:var(--signal-deep); background:rgba(255,212,0,0.12); }
.pick-chip.selected i{ color:var(--signal-deep); }
.goal-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); }
.goal-row input[type="range"]{ width:180px; accent-color:var(--ink); }

/* ---------- roadmap timeline ---------- */
.timeline{ position:relative; padding-left:36px; }
.timeline::before{ content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--line-strong); }
.timeline-item{ position:relative; padding-bottom:40px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{ position:absolute; left:-36px; top:2px; width:20px;height:20px; border-radius:50%; background:var(--paper); border:3px solid var(--line-strong); }
.timeline-item.shipped .timeline-dot{ border-color:var(--success); background:var(--success); }
.timeline-item.progress .timeline-dot{ border-color:var(--signal-deep); background:var(--signal); }
.timeline-item.planned .timeline-dot{ border-color:var(--line-strong); background:var(--paper); }
.timeline-tag{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:4px 10px; border-radius:100px; margin-bottom:10px; }
.timeline-item.shipped .timeline-tag{ background:rgba(46,158,91,0.12); color:var(--success); }
.timeline-item.progress .timeline-tag{ background:rgba(255,212,0,0.2); color:#8A6D00; }
.timeline-item.planned .timeline-tag{ background:var(--paper-2); color:var(--graphite); }

/* ---------- blog ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{
  background:var(--glass-strong); backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column;
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.blog-card .blog-thumb{ height:150px; background:linear-gradient(135deg, var(--ink), var(--ink-soft)); position:relative; display:flex; align-items:center; justify-content:center; }
.blog-card .blog-thumb i{ width:34px;height:34px; color:var(--signal); }
.blog-card .blog-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.blog-tag{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--signal-deep); margin-bottom:10px; }
.blog-card h3{ font-size:17px; margin-bottom:10px; }
.blog-card p{ font-size:13.5px; color:var(--graphite); line-height:1.6; margin-bottom:16px; flex:1; }
.blog-meta{ font-size:12px; color:var(--graphite); display:flex; align-items:center; gap:8px; }

/* ---------- long-form prose (blog post, legal pages) ---------- */
.prose{ max-width:720px; margin:0 auto; }
.prose h2{ font-size:26px; margin:44px 0 16px; }
.prose h3{ font-size:20px; margin:32px 0 12px; }
.prose p{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:18px; }
.prose ul, .prose ol{ margin:0 0 18px 22px; }
.prose li{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:8px; }
.prose strong{ font-weight:700; }
.prose .updated{ font-size:13px; color:var(--graphite); margin-bottom:36px; }

/* ---------- settings tabs ---------- */
.settings-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:32px; }
.settings-tabs button{
  border:none; background:transparent; padding:14px 18px; font-size:14px; font-weight:600; color:var(--graphite);
  cursor:pointer; font-family:'Inter',sans-serif; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.settings-tabs button.active{ color:var(--ink); border-bottom-color:var(--signal-deep); }
.settings-panel{ display:none; }
.settings-panel.active{ display:block; }
.danger-zone{ border:1px solid rgba(229,72,77,0.3); background:rgba(229,72,77,0.05); border-radius:var(--radius-sm); padding:22px; }

@media (max-width:900px){
  .pick-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-grid{ grid-template-columns:1fr; }
}

/* ==========================================================
   COURSES MODULE
   ========================================================== */

/* ---------- course catalog ---------- */
.course-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.course-card{
  background:var(--glass-strong); backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column;
}
.course-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.course-thumb{ height:150px; background:var(--paper-2); position:relative; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); }
.course-thumb-badge{ width:64px;height:64px;border-radius:18px;background:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--shadow-soft); }
.course-thumb-badge img{ width:100%;height:100%;object-fit:contain;padding:12px; }
.course-thumb-badge i{ width:28px;height:28px; color:var(--signal); }
.course-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.course-body h3{ font-size:18px; margin-bottom:8px; }
.course-body p{ font-size:13.5px; color:var(--graphite); line-height:1.6; margin-bottom:16px; flex:1; }
.course-price-row{ display:flex; align-items:center; justify-content:space-between; }
.course-price{ font-family:'Fraunces',serif; font-size:20px; font-weight:600; }
.course-price.free{ color:var(--success); }
.enrolled-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--success); background:rgba(46,158,91,0.12); padding:5px 11px; border-radius:100px; }

/* ---------- course viewer shell ---------- */
.course-shell{ display:grid; grid-template-columns:270px 1fr; min-height:100vh; }
.course-sidebar{ background:var(--paper-2); border-right:1px solid var(--line); padding:22px 16px; overflow-y:auto; height:100vh; position:sticky; top:0; }
.course-sidebar h4{ font-size:15px; margin-bottom:4px; }
.course-sidebar .back-link{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--graphite); margin-bottom:18px; }
.lesson-nav-item{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:9px; font-size:13.5px; color:var(--ink-soft); cursor:pointer; }
.lesson-nav-item:hover{ background:rgba(11,11,12,0.05); }
.lesson-nav-item.active{ background:var(--ink); color:var(--paper); font-weight:600; }
.lesson-nav-item .ln-num{ width:22px;height:22px;border-radius:50%;background:rgba(11,11,12,0.08);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0; }
.lesson-nav-item.active .ln-num{ background:rgba(255,255,255,0.2); }
.course-tabs{ display:flex; gap:4px; margin:18px 0 0; border-top:1px solid var(--line); padding-top:18px; }
.course-tabs button{ flex:1; border:1px solid var(--line-strong); background:rgba(255,255,255,0.5); padding:9px; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; }
.course-tabs button.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.course-main{ padding:44px 60px; max-width:820px; }

/* ---------- revision note content blocks ---------- */
.rn-block{ margin-bottom:22px; }
.rn-heading{ font-family:'Fraunces',serif; font-size:24px; font-weight:600; margin-bottom:6px; }
.rn-text{ font-size:15.5px; line-height:1.75; color:var(--ink-soft); }
.rn-formula{
  background:var(--paper-2); border:1px solid var(--line-strong); border-radius:10px; padding:18px 22px;
  font-family:'IBM Plex Mono',monospace; font-size:15px; text-align:center; color:var(--ink);
}
.rn-diagram{ border-radius:12px; overflow:hidden; border:1px solid var(--line-strong); }
.rn-diagram img{ width:100%; display:block; }
.rn-diagram-caption{ font-size:12.5px; color:var(--graphite); text-align:center; padding:10px; background:var(--paper-2); }
.rn-important{
  display:flex; gap:12px; background:rgba(255,212,0,0.12); border-left:3px solid var(--signal-deep);
  border-radius:8px; padding:16px 18px; font-size:14.5px; color:var(--ink-soft); line-height:1.6;
}
.rn-important i{ width:18px;height:18px; color:var(--signal-deep); flex-shrink:0; margin-top:2px; }
.rn-callout{ display:flex; gap:12px; background:var(--paper-2); border-radius:8px; padding:16px 18px; font-size:14.5px; color:var(--ink-soft); line-height:1.6; }

/* ---------- practice quiz ---------- */
.quiz-question-card{ background:var(--glass-strong); border:1px solid var(--glass-border); border-radius:var(--radius); padding:30px; margin-bottom:20px; }
.quiz-question-num{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--graphite); margin-bottom:10px; }
.quiz-question-text{ font-size:16.5px; font-weight:600; margin-bottom:20px; }
.quiz-option{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border:1.5px solid var(--line-strong); border-radius:10px;
  margin-bottom:10px; cursor:pointer; font-size:14.5px; transition:all .15s ease;
}
.quiz-option:hover{ background:rgba(11,11,12,0.03); }
.quiz-option .qo-letter{ width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex-shrink:0; }
.quiz-option.selected{ border-color:var(--ink); background:rgba(11,11,12,0.04); }
.quiz-option.correct{ border-color:var(--success); background:rgba(46,158,91,0.1); }
.quiz-option.correct .qo-letter{ background:var(--success); color:white; border-color:var(--success); }
.quiz-option.incorrect{ border-color:var(--danger); background:rgba(229,72,77,0.08); }
.quiz-option.incorrect .qo-letter{ background:var(--danger); color:white; border-color:var(--danger); }
.quiz-explanation{ font-size:13.5px; color:var(--graphite); background:var(--paper-2); border-radius:8px; padding:14px 16px; margin-top:14px; line-height:1.6; }
.quiz-score-banner{ text-align:center; padding:40px; background:var(--glass-strong); border-radius:var(--radius); }

/* ---------- admin panel ---------- */
.admin-table{ width:100%; border-collapse:collapse; }
.admin-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--graphite); padding:10px 14px; border-bottom:1px solid var(--line-strong); }
.admin-table td{ padding:14px; font-size:13.5px; border-bottom:1px solid var(--line); vertical-align:middle; }
.admin-block-row{ display:flex; align-items:flex-start; gap:12px; padding:14px; border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:rgba(255,255,255,0.5); }
.admin-block-type-tag{ font-size:10.5px; font-weight:700; text-transform:uppercase; padding:4px 9px; border-radius:100px; background:var(--paper-2); color:var(--graphite); flex-shrink:0; }
.publish-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:100px; cursor:pointer; }
.publish-toggle.published{ background:rgba(46,158,91,0.12); color:var(--success); }
.publish-toggle.draft{ background:var(--paper-2); color:var(--graphite); }

@media (max-width:900px){
  .course-grid{ grid-template-columns:1fr; }
  .course-shell{ grid-template-columns:1fr; }
  .course-sidebar{ display:none; }
  .course-main{ padding:24px; }
}

/* ==========================================================
   ICON LIBRARY + ICON PICKER
   ========================================================== */

.icon-lib-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:14px; }
.icon-lib-item{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; border-radius:12px;
  border:1px solid var(--line-strong); background:rgba(255,255,255,0.5); cursor:pointer; position:relative;
  transition:all .15s ease;
}
.icon-lib-item:hover{ border-color:var(--signal-deep); background:rgba(255,212,0,0.08); }
.icon-lib-item.selected{ border-color:var(--ink); background:rgba(11,11,12,0.05); }
.icon-lib-item img{ width:40px;height:40px;object-fit:contain; }
.icon-lib-item .il-label{ font-size:11.5px; color:var(--graphite); text-align:center; word-break:break-word; }
.icon-lib-item .il-remove{
  position:absolute; top:6px; right:6px; width:20px;height:20px;border-radius:50%; background:rgba(229,72,77,0.15);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s ease;
}
.icon-lib-item:hover .il-remove{ opacity:1; }
.icon-lib-item .il-remove i{ width:11px;height:11px; color:var(--danger); }

.icon-picker-trigger{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border:1.5px dashed var(--line-strong);
  border-radius:10px; cursor:pointer; font-size:13.5px; color:var(--graphite);
}
.icon-picker-trigger:hover{ border-color:var(--signal-deep); }
.icon-picker-trigger img{ width:26px;height:26px;object-fit:contain; }
.icon-picker-trigger.has-icon{ color:var(--ink); border-style:solid; border-color:var(--line-strong); }

.icon-picker-modal-backdrop{
  display:none; position:fixed; inset:0; background:rgba(11,11,12,0.4); z-index:400;
  align-items:center; justify-content:center;
}
.icon-picker-modal{
  background:var(--paper); border-radius:var(--radius); padding:28px; width:100%; max-width:560px;
  max-height:80vh; overflow-y:auto;
}

.subject-chip-icon{ width:20px;height:20px;object-fit:contain;border-radius:4px; }
.diagram-upload-preview{ max-width:200px; border-radius:8px; border:1px solid var(--line-strong); margin-top:8px; }

/* ==========================================================
   FLASHCARDS
   ========================================================== */

.fc-subject-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:16px; margin-bottom:36px; }
.fc-subject-card{
  border:1.5px solid var(--line-strong); border-radius:16px; padding:22px 18px; cursor:pointer; text-align:left;
  background:var(--glass-strong); transition:all .15s ease;
}
.fc-subject-card:hover{ border-color:var(--signal-deep); transform:translateY(-2px); }
.fc-subject-card.selected{ border-color:var(--ink); box-shadow:0 0 0 2px var(--ink); }
.fc-subject-icon{
  width:52px;height:52px;border-radius:14px;background:var(--ink);display:flex;align-items:center;justify-content:center;
  margin-bottom:16px; overflow:hidden;
}
.fc-subject-icon img{ width:100%;height:100%;object-fit:contain;padding:8px; }
.fc-subject-icon i{ width:24px;height:24px;color:var(--signal); }
.fc-subject-card .fc-subject-name{ font-size:15px; font-weight:600; }

.fc-topic-row{
  display:flex; align-items:center; justify-content:space-between; padding:16px 4px; border-bottom:1px solid var(--line);
}
.fc-topic-row .fc-topic-label{ font-size:14.5px; }
.fc-topic-row .fc-topic-sub{ font-size:12px; color:var(--graphite); margin-top:2px; }
.fc-checkbox{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-strong); display:flex;align-items:center;justify-content:center;
  cursor:pointer; flex-shrink:0;
}
.fc-checkbox.checked{ background:var(--ink); border-color:var(--ink); }
.fc-checkbox.checked i{ width:13px;height:13px;color:var(--paper); }

.fc-study-shell{ min-height:100vh; padding:36px; position:relative; }
.fc-study-topbar{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:50px; max-width:600px; margin-left:auto; margin-right:auto; }
.fc-study-topbar h2{ font-size:19px; }
.fc-study-topbar .fc-deck-meta{ font-size:12.5px; color:var(--graphite); margin-top:3px; }
.fc-close-btn{ width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; }

.fc-progress-track{ max-width:600px; margin:0 auto 34px; height:4px; background:var(--line-strong); border-radius:100px; overflow:hidden; }
.fc-progress-fill{ height:100%; background:var(--signal); border-radius:100px; transition:width .3s ease; }

.fc-card{
  max-width:600px; margin:0 auto; background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow-lift); min-height:340px; display:flex; flex-direction:column; overflow:hidden;
}
.fc-card-face{
  flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:50px 30px;
  font-family:'Fraunces',serif; font-size:24px; font-weight:600; cursor:pointer;
}
.fc-card-hint{ background:var(--paper-2); padding:18px 26px; border-top:1px solid var(--line); display:none; }
.fc-card-hint.visible{ display:block; }
.fc-card-hint .fc-hint-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--graphite); margin-bottom:4px; }
.fc-card-hint .fc-hint-text{ font-size:14px; color:var(--ink-soft); }
.fc-reveal-hint{ text-align:center; font-size:12.5px; color:var(--graphite); margin-top:16px; cursor:pointer; }

.fc-answer-row{ display:flex; gap:16px; justify-content:center; max-width:600px; margin:32px auto 0; }
.fc-answer-btn{
  flex:1; padding:16px; border-radius:100px; font-size:14.5px; font-weight:700; text-align:center; cursor:pointer;
  border:1.5px solid; background:transparent; transition:all .15s ease;
}
.fc-answer-btn.learning{ border-color:var(--signal-deep); color:#8A6D00; }
.fc-answer-btn.learning:hover{ background:rgba(255,212,0,0.12); }
.fc-answer-btn.known{ border-color:var(--success); color:var(--success); }
.fc-answer-btn.known:hover{ background:rgba(46,158,91,0.1); }

.fc-complete-banner{ max-width:500px; margin:60px auto 0; text-align:center; }

/* ==========================================================
   LEADERBOARD + STUDYBOT (Discord-style) COMPONENTS
   ========================================================== */

/* ---------- leaderboard rows ---------- */
.lb-row{
  display:grid; grid-template-columns:44px 1fr auto auto auto; align-items:center; gap:18px;
  padding:16px 18px; border-radius:var(--radius-sm); transition:background .2s ease;
}
.lb-row:hover{ background:rgba(11,11,12,0.03); }
.lb-row.me{ background:rgba(255,212,0,0.1); border:1px solid rgba(255,212,0,0.35); }
.lb-rank{ font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; color:var(--graphite); text-align:center; }
.lb-rank.top1{ color:#C9A100; }
.lb-rank.top2{ color:#8A8A8F; }
.lb-rank.top3{ color:#A9662E; }
.lb-user{ display:flex; align-items:center; gap:12px; min-width:0; }
.lb-avatar{ width:38px;height:38px;border-radius:50%; background:var(--ink); display:flex;align-items:center;justify-content:center; color:var(--paper); font-family:'Fraunces',serif; font-size:14px; flex-shrink:0; overflow:hidden; }
.lb-name{ font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-sub{ font-size:12px; color:var(--graphite); }
.lb-stat{ text-align:right; }
.lb-stat .v{ font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; }
.lb-stat .l{ font-size:10.5px; color:var(--graphite); text-transform:uppercase; letter-spacing:0.05em; }
.lb-medal{ width:26px;height:26px; display:flex; align-items:center; justify-content:center; }

.lb-tabs{ display:flex; gap:8px; margin-bottom:28px; }
.lb-tabs button{
  border:1px solid var(--line-strong); background:rgba(255,255,255,0.5); padding:9px 16px; border-radius:100px;
  font-size:13.5px; font-weight:600; color:var(--graphite); cursor:pointer; font-family:'Inter',sans-serif;
}
.lb-tabs button.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- radar chart ---------- */
.radar-wrap{ display:flex; align-items:center; justify-content:center; }
.radar-label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; fill:var(--graphite); }

/* ---------- discord-style embed mockup ---------- */
.discord-mock{ background:#2B2D31; border-radius:var(--radius); padding:22px; color:#DBDEE1; }
.discord-mock-top{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.discord-bot-avatar{ width:34px;height:34px;border-radius:50%; background:var(--signal); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
.discord-bot-avatar i{ width:18px;height:18px; color:var(--ink); }
.discord-bot-name{ font-size:14px; font-weight:600; color:#fff; display:flex; align-items:center; gap:6px; }
.discord-bot-tag{ background:var(--signal); color:var(--ink); font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:4px; text-transform:uppercase; }
.discord-timestamp{ font-size:11px; color:#8a8d93; margin-left:4px; }
.discord-embed{ background:#313338; border-left:4px solid var(--signal); border-radius:4px; padding:16px 18px; max-width:440px; }
.discord-embed .de-title{ font-size:14.5px; font-weight:700; color:#fff; margin-bottom:6px; }
.discord-embed .de-desc{ font-size:13px; color:#DBDEE1; line-height:1.5; margin-bottom:14px; }
.discord-embed .de-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.discord-embed .de-field .fl{ font-size:11px; font-weight:700; color:#B5BAC1; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:3px; }
.discord-embed .de-field .fv{ font-size:13.5px; color:#fff; font-family:'IBM Plex Mono',monospace; }
.discord-embed .de-bar-bg{ background:#43444B; border-radius:100px; height:6px; margin-top:14px; overflow:hidden; }
.discord-embed .de-bar-fill{ background:var(--signal); height:100%; border-radius:100px; }
.discord-cmd-line{ display:flex; align-items:center; gap:8px; background:#383A40; border-radius:8px; padding:12px 14px; margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:13px; color:#B5BAC1; }
.discord-cmd-line .slash{ color:var(--signal); font-weight:700; }

@media (max-width:640px){
  .lb-row{ grid-template-columns:32px 1fr auto; }
  .lb-row .lb-stat:nth-child(4),.lb-row .lb-stat:nth-child(5){ display:none; }
}

/* ==========================================================
   NOTES WORKSPACE (Notion-style block editor)
   ========================================================== */

.notion-shell{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.notion-tree-sidebar{
  background:var(--paper-2); border-right:1px solid var(--line); padding:22px 14px; overflow-y:auto; height:100vh; position:sticky; top:0;
}
.notion-search{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.7); border:1px solid var(--line-strong);
  border-radius:8px; padding:9px 12px; font-size:13px; color:var(--graphite); margin-bottom:18px;
}
.notion-search i{ width:14px;height:14px; }
.tree-group{ margin-bottom:4px; }
.tree-item{
  display:flex; align-items:center; gap:7px; padding:7px 8px; border-radius:7px; font-size:13.5px; font-weight:500;
  color:var(--ink-soft); cursor:pointer; white-space:nowrap;
}
.tree-item:hover{ background:rgba(11,11,12,0.05); }
.tree-item.active{ background:rgba(11,11,12,0.08); font-weight:600; }
.tree-item .tri{ width:12px;height:12px; color:var(--graphite); flex-shrink:0; transition:transform .15s ease; }
.tree-item .tri.open{ transform:rotate(90deg); }
.tree-item .emoji{ font-size:14px; flex-shrink:0; }
.tree-children{ margin-left:20px; }
.tree-children .tree-item{ font-weight:400; font-size:13px; color:var(--graphite); }
.tree-children .tree-item.active{ color:var(--ink); font-weight:600; background:rgba(255,212,0,0.16); }
.tree-new-page{ display:flex; align-items:center; gap:7px; padding:7px 8px; font-size:13px; color:var(--graphite); cursor:pointer; margin-top:8px; }
.tree-new-page:hover{ color:var(--ink); }

.notion-main{ padding:0 0 100px; max-width:820px; margin:0 auto; }
.notion-cover{
  height:150px; border-radius:0 0 var(--radius) var(--radius); margin:0 -20px 0;
  background:linear-gradient(120deg, #1a1a1c 0%, #0B0B0C 45%, #3a3200 100%); position:relative;
}
.notion-topbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 40px; font-size:12.5px; color:var(--graphite); }
.notion-breadcrumb{ display:flex; align-items:center; gap:6px; }
.notion-breadcrumb i{ width:12px;height:12px; }
.notion-topbar-actions{ display:flex; align-items:center; gap:14px; }
.notion-topbar-actions i{ width:15px;height:15px; cursor:pointer; }

.notion-header-block{ padding:0 60px; margin-top:-28px; position:relative; }
.notion-page-icon{
  width:64px;height:64px; border-radius:16px; background:var(--paper); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-size:32px; box-shadow:var(--shadow-soft); margin-bottom:16px;
}
.notion-title{
  font-family:'Fraunces',serif; font-size:38px; font-weight:600; border:none; background:transparent; width:100%;
  outline:none; color:var(--ink); margin-bottom:6px;
}
.notion-meta-row{ display:flex; align-items:center; gap:16px; font-size:12.5px; color:var(--graphite); margin-bottom:30px; }
.notion-meta-row span{ display:flex; align-items:center; gap:5px; }
.notion-meta-row i{ width:13px;height:13px; }

.notion-body{ padding:0 60px; }
.n-block{ position:relative; padding:5px 6px 5px 30px; border-radius:6px; margin-bottom:2px; }
.n-block:hover{ background:rgba(11,11,12,0.025); }
.n-block:hover .n-handle{ opacity:1; }
.n-handle{
  position:absolute; left:0; top:6px; display:flex; gap:2px; opacity:0; transition:opacity .15s ease; cursor:grab;
}
.n-handle i{ width:16px;height:16px; color:var(--graphite); }
.n-h1{ font-family:'Fraunces',serif; font-size:24px; font-weight:600; padding-top:14px; }
.n-h2{ font-family:'Fraunces',serif; font-size:19px; font-weight:600; padding-top:10px; }
.n-p{ font-size:15px; line-height:1.7; color:var(--ink-soft); }
.n-bullet{ display:flex; gap:10px; font-size:15px; line-height:1.7; color:var(--ink-soft); }
.n-bullet::before{ content:'•'; color:var(--graphite); }
.n-todo{ display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.6; color:var(--ink-soft); }
.n-todo input{ margin-top:4px; width:15px;height:15px; accent-color:var(--ink); flex-shrink:0; }
.n-todo.checked span{ text-decoration:line-through; color:var(--graphite); }
.n-toggle-head{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; cursor:pointer; }
.n-toggle-head i{ width:14px;height:14px; transition:transform .15s ease; }
.n-toggle-head.open i{ transform:rotate(90deg); }
.n-toggle-body{ display:none; padding-left:22px; margin-top:6px; font-size:14.5px; color:var(--ink-soft); line-height:1.7; }
.n-toggle-body.open{ display:block; }
.n-callout{
  display:flex; gap:12px; background:rgba(255,212,0,0.12); border-radius:8px; padding:14px 16px; font-size:14.5px;
  color:var(--ink-soft); line-height:1.6; margin:8px 0;
}
.n-callout .n-callout-icon{ font-size:17px; flex-shrink:0; }
.n-quote{ border-left:3px solid var(--ink); padding-left:16px; font-size:15.5px; font-style:italic; color:var(--ink-soft); }
.n-code{
  background:#1D1D1F; color:#E3E3E6; font-family:'IBM Plex Mono',monospace; font-size:13px; padding:16px 18px;
  border-radius:8px; line-height:1.6; overflow-x:auto;
}
.n-divider{ border:none; border-top:1px solid var(--line-strong); margin:18px 0; }
.n-table{ width:100%; border-collapse:collapse; font-size:13.5px; margin:6px 0; }
.n-table th{ text-align:left; background:var(--paper-2); font-weight:600; padding:9px 12px; border:1px solid var(--line-strong); }
.n-table td{ padding:9px 12px; border:1px solid var(--line-strong); color:var(--ink-soft); }

.n-add-line{ display:flex; align-items:center; gap:8px; padding:8px 6px 8px 30px; color:var(--graphite); font-size:14px; cursor:text; }
.n-add-line i{ width:15px;height:15px; }

/* slash command menu */
.slash-menu{
  position:absolute; left:60px; top:100%; margin-top:4px; width:260px; background:var(--paper);
  border:1px solid var(--line-strong); border-radius:10px; box-shadow:var(--shadow-lift); padding:6px; z-index:20;
}
.slash-menu .sm-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; color:var(--graphite); padding:8px 10px 4px; }
.slash-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; font-size:13.5px; cursor:pointer; }
.slash-item:hover, .slash-item.hl{ background:rgba(11,11,12,0.06); }
.slash-item .si-icon{ width:26px;height:26px; border-radius:6px; background:var(--paper-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.slash-item .si-icon i{ width:14px;height:14px; color:var(--ink-soft); }
.slash-item .si-text .st-name{ font-weight:600; }
.slash-item .si-text .st-desc{ font-size:11.5px; color:var(--graphite); }

@media (max-width:900px){
  .notion-shell{ grid-template-columns:1fr; }
  .notion-tree-sidebar{ display:none; }
  .notion-header-block, .notion-body{ padding-left:24px; padding-right:24px; }
}

/* ==========================================================
   ADVANCED LEADERBOARD ANALYSIS — trend chart, cmd+k palette,
   spotlight glow, live-in-voice dot, level progress ring.
   Uses only existing design tokens (paper/ink/signal/glass).
   ========================================================== */

/* level-progress ring inside a stat card */
.ring-wrap{ position:relative; width:56px; height:56px; flex-shrink:0; }
.ring-wrap svg{ width:56px; height:56px; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:var(--line-strong); stroke-width:4; }
.ring-fill{ fill:none; stroke:var(--signal-deep); stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
.ring-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; color:var(--ink); }

/* cursor-spotlight glow on hover, layered on top of existing lb-row/glass hover */
.lb-row{ position:relative; overflow:hidden; }
.lb-row::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,212,0,0.16), transparent 60%);
}
.lb-row:hover::after{ opacity:1; }

/* live "studying now" pulsing dot on avatar */
.lb-avatar{ position:relative; }
.lb-avatar .live-dot{
  position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%;
  background:var(--signal); border:2px solid var(--paper);
}
.lb-avatar .live-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:1.4px solid var(--signal-deep);
  opacity:0; animation:lbPulse 2s ease-out infinite;
}
@keyframes lbPulse{ 0%{ transform:scale(.7); opacity:.8; } 100%{ transform:scale(1.7); opacity:0; } }

/* trend chart card */
.trend-chart-wrap{ height:120px; margin-top:10px; position:relative; }
.trend-chart-wrap svg{ width:100%; height:100%; overflow:visible; }
.trend-draw{ stroke-dasharray:600; stroke-dashoffset:600; }
.trend-draw.in-view{ animation:trendDraw 1.4s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes trendDraw{ to{ stroke-dashoffset:0; } }
.trend-empty{ font-size:12.5px; color:var(--graphite); text-align:center; padding:36px 10px; }
.trend-axis{ display:flex; justify-content:space-between; margin-top:6px; }
.trend-axis span{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--graphite); }

/* cmd+k jump palette */
.cmdk-btn{
  display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--graphite);
  background:var(--paper-2); border:1px solid var(--line); padding:8px 12px; border-radius:100px; cursor:pointer; transition:.18s ease;
}
.cmdk-btn:hover{ border-color:var(--signal-deep); color:var(--ink); }
.cmdk-btn kbd{ font-family:'IBM Plex Mono',monospace; font-size:10px; background:var(--paper); border:1px solid var(--line-strong); border-radius:5px; padding:2px 6px; }

.cmdk-overlay{
  position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center; padding-top:14vh;
  background:rgba(11,11,12,0.35); backdrop-filter:blur(3px);
}
.cmdk-overlay.open{ display:flex; }
.cmdk-box{
  width:min(460px,90vw); background:var(--glass-strong); backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--shadow-lift); overflow:hidden;
}
.cmdk-input-row{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); color:var(--graphite); }
.cmdk-input-row input{ flex:1; border:none; outline:none; background:transparent; font-size:14px; color:var(--ink); font-family:'Inter',sans-serif; }
.cmdk-input-row input::placeholder{ color:var(--graphite); }
.cmdk-input-row kbd{ font-family:'IBM Plex Mono',monospace; font-size:10px; background:var(--paper-2); border:1px solid var(--line-strong); border-radius:5px; padding:2px 6px; }
.cmdk-results{ max-height:280px; overflow-y:auto; padding:6px; }
.cmdk-result{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; cursor:pointer; }
.cmdk-result:hover, .cmdk-result.active{ background:rgba(11,11,12,0.05); }
.cmdk-result .cr-avatar{ width:28px;height:28px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:11px; flex-shrink:0; overflow:hidden; }
.cmdk-result .cr-name{ font-size:12.5px; font-weight:600; flex:1; }
.cmdk-result .cr-xp{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--graphite); }
.cmdk-empty{ padding:20px; text-align:center; font-size:12px; color:var(--graphite); }
.flash-highlight{ animation:flashHi 1.4s ease; }
@keyframes flashHi{ 0%{ background:rgba(255,212,0,0.35); } 100%{ background:transparent; } }

/* percentile chip */
.percentile-chip{
  display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
  background:rgba(255,212,0,0.16); color:#8A6B00; padding:3px 9px; border-radius:100px; margin-top:6px;
}