/* ═══════════════════════════════════════════════════════════
   ChatLens v4 — styles.css
   Author  : Adewale Samson Adeagbo
   GitHub  : github.com/cssadewale
   Website : cssadewale.pages.dev
   Email   : buildingmyictcareer@gmail.com
   ═══════════════════════════════════════════════════════════ */

/* ── DARK (DEFAULT) ─────────────────────────────────────── */
:root {
  --bg:          #0a0c0f;
  --bg2:         #0f1117;
  --bg3:         #141820;
  --surface:     #1a1f2e;
  --surface2:    #222840;
  --border:      #2a3050;
  --border2:     #3a4060;
  --accent:      #00e5a0;
  --accent2:     #00b880;
  --accent-dim:  rgba(0,229,160,0.10);
  --blue:        #3b82f6;
  --orange:      #f97316;
  --purple:      #7c3aed;
  --teal:        #14b8a6;
  --red:         #ef4444;
  --yellow:      #eab308;
  --pink:        #ec4899;
  --text:        #e8ecf4;
  --text2:       #9aa3b8;
  --text3:       #5a6380;
  --font-head:   'Syne', sans-serif;
  --font-body:   'DM Sans', sans-serif;
  --font-mono:   'DM Mono', monospace;
  --radius:      12px;
  --radius-sm:   6px;
  --shadow:      0 4px 24px rgba(0,0,0,0.45);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.65);
}

/* ── LIGHT MODE ─────────────────────────────────────────── */
body.light-mode {
  --bg:          #f4f6fb;
  --bg2:         #eaecf4;
  --bg3:         #dfe2ee;
  --surface:     #ffffff;
  --surface2:    #f0f2fa;
  --border:      #d0d5e8;
  --border2:     #bcc4dc;
  --accent:      #008855;
  --accent2:     #006644;
  --accent-dim:  rgba(0,136,85,0.10);
  --text:        #0f1117;
  --text2:       #3a4060;
  --text3:       #7a84a0;
  --shadow:      0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.14);
}

/* ── LARGE TEXT MODE ────────────────────────────────────── */
body.large-text { font-size: 17px; }
body.large-text h2 { font-size: clamp(1.8rem,3.5vw,2.5rem); }
body.large-text h3 { font-size: 1.2rem; }

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:15px;
  line-height:1.72; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; transition:background .3s,color .3s;
}
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:700; line-height:1.2; }
h2 { font-size:clamp(1.6rem,3vw,2.2rem); }
h3 { font-size:1.1rem; }
code { font-family:var(--font-mono); background:var(--surface); border:1px solid var(--border); padding:2px 7px; border-radius:4px; font-size:.83em; color:var(--accent); }
ul { padding-left:1.2rem; } li { margin-bottom:.5rem; }
ol { padding-left:1.2rem; } ol li { margin-bottom:.4rem; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

/* ── PROGRESS BAR ───────────────────────────────────────── */
.progress-bar { position:fixed;top:0;left:0;right:0;z-index:2000;height:3px;background:var(--border); }
.progress-fill { height:100%;width:0%;background:var(--accent);transition:width .3s ease;border-radius:0 2px 2px 0; }

/* ══════════════════════════════════════
   NAVBAR
══════════════════════════════════════ */
#navbar {
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1rem,5vw,3rem);height:64px;
  background:rgba(10,12,15,.9);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);transition:background .3s,border-color .3s;
}
body.light-mode #navbar { background:rgba(244,246,251,.93); }
.nav-brand { display:flex;align-items:center;gap:8px;cursor:pointer; }
.brand-icon { font-size:1.3rem;color:var(--accent); }
.brand-text { font-family:var(--font-head);font-weight:800;font-size:1.1rem;letter-spacing:-.02em; }
.brand-version { font-size:.7rem;font-family:var(--font-mono);color:var(--text3);border:1px solid var(--border);padding:1px 6px;border-radius:4px; }
.nav-links { display:flex;gap:1.6rem; }
.nav-link { color:var(--text2);font-size:.88rem;font-weight:500;transition:color .2s; }
.nav-link:hover { color:var(--accent); }
.nav-right { display:flex;align-items:center;gap:.5rem; }
.nav-icon-btn { background:var(--surface);border:1px solid var(--border);color:var(--text2);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:.88rem;transition:all .2s; }
.nav-icon-btn:hover { border-color:var(--accent);color:var(--accent); }
.nav-cta { background:var(--accent);color:#000;border:none;cursor:pointer;padding:8px 20px;border-radius:40px;font-weight:700;font-family:var(--font-head);font-size:.85rem;transition:all .2s;margin-left:.5rem; }
.nav-cta:hover { filter:brightness(1.1);transform:translateY(-1px); }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
#hero { min-height:100vh;display:flex;align-items:center;padding:100px clamp(1.5rem,8vw,6rem) 5rem;position:relative;overflow:hidden; }
.hero-bg-grid { position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:52px 52px;opacity:.18;mask-image:radial-gradient(ellipse at 60% 50%,black 30%,transparent 72%); }
.hero-orb { position:absolute;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none; }
.hero-orb-1 { width:520px;height:520px;background:radial-gradient(circle,rgba(0,229,160,.12) 0%,transparent 70%);top:8%;right:3%;animation:floatOrb 9s ease-in-out infinite alternate; }
.hero-orb-2 { width:400px;height:400px;background:radial-gradient(circle,rgba(124,58,237,.09) 0%,transparent 70%);bottom:12%;right:22%;animation:floatOrb 11s ease-in-out infinite alternate-reverse; }
.hero-orb-3 { width:280px;height:280px;background:radial-gradient(circle,rgba(59,130,246,.07) 0%,transparent 70%);top:35%;left:4%;animation:floatOrb 13s ease-in-out infinite alternate; }
@keyframes floatOrb{from{transform:translate(0,0) scale(1)}to{transform:translate(18px,-18px) scale(1.06)}}
.hero-content { position:relative;z-index:1;max-width:740px; }
.hero-badge { display:inline-block;background:var(--accent-dim);border:1px solid rgba(0,229,160,.28);color:var(--accent);padding:5px 14px;border-radius:40px;font-size:.78rem;font-weight:600;font-family:var(--font-mono);letter-spacing:.05em;margin-bottom:1.5rem;animation:fadeUp .6s ease .1s both; }
.hero-title { font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1.2rem;animation:fadeUp .6s ease .2s both; }
.hero-accent { background:linear-gradient(135deg,var(--accent),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.hero-sub { color:var(--text2);font-size:1.05rem;max-width:640px;margin-bottom:2rem;animation:fadeUp .6s ease .3s both; }
.hero-sub strong { color:var(--text); }
.hero-actions { display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem;animation:fadeUp .6s ease .4s both; }
.btn-gh { display:flex;align-items:center;gap:7px; }
.hero-stats { display:flex;gap:2.5rem;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:1.5rem;animation:fadeUp .6s ease .5s both; }
.stat { display:flex;flex-direction:column; }
.stat-n { font-family:var(--font-head);font-size:1.8rem;font-weight:800;color:var(--accent);line-height:1; }
.stat-l { font-size:.78rem;color:var(--text3);margin-top:2px; }
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn-primary { background:var(--accent);color:#000;border:none;cursor:pointer;padding:12px 28px;border-radius:8px;font-weight:700;font-family:var(--font-head);font-size:.9rem;transition:all .2s;display:inline-block; }
.btn-primary:hover { filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,229,160,.28); }
.btn-ghost { background:transparent;color:var(--text);border:1px solid var(--border2);cursor:pointer;padding:12px 28px;border-radius:8px;font-weight:600;font-family:var(--font-head);font-size:.9rem;transition:all .2s;display:inline-flex;align-items:center;gap:6px; }
.btn-ghost:hover { border-color:var(--accent);color:var(--accent); }

/* ══════════════════════════════════════
   SECTION COMMONS
══════════════════════════════════════ */
section { padding:clamp(3rem,8vw,6rem) clamp(1.5rem,8vw,6rem);max-width:1300px;margin:0 auto; }
.section-header { text-align:center;margin-bottom:3rem; }
.section-tag { display:inline-block;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;color:var(--accent);text-transform:uppercase;background:var(--accent-dim);border:1px solid rgba(0,229,160,.22);padding:3px 12px;border-radius:40px;margin-bottom:.8rem; }
.section-header h2 { margin-bottom:.6rem; }
.section-header p { color:var(--text2);max-width:580px;margin:0 auto; }

/* ══════════════════════════════════════
   HOW TO USE SECTION (v4)
══════════════════════════════════════ */
.howto-section-wrap { background:var(--bg2);max-width:100%;padding:clamp(3rem,8vw,6rem) clamp(1.5rem,8vw,6rem); }
.howto-section-wrap .section-header { max-width:1300px;margin-left:auto;margin-right:auto; }
.howto-steps { max-width:1100px;margin:0 auto 3rem; }
.howto-step { display:grid;grid-template-columns:72px 1fr;gap:2rem;padding:2.5rem 0;border-bottom:1px solid var(--border); }
.howto-step:last-child { border-bottom:none; }
.howto-num { font-family:var(--font-head);font-size:2.2rem;font-weight:800;color:var(--accent);line-height:1;padding-top:4px; }
.howto-body h3 { font-size:1.3rem;margin-bottom:.5rem; }
.howto-body > p { color:var(--text2);margin-bottom:1rem;font-size:.95rem; }
.howto-platforms { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1rem; }
.hp-item { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.2rem; }
.hp-item strong { display:block;margin-bottom:.6rem;font-size:.9rem;color:var(--text); }
.hp-item ol { color:var(--text2);font-size:.82rem;padding-left:1rem; }
.hp-item ol li { margin-bottom:.3rem; }
.howto-tips { display:flex;flex-direction:column;gap:.6rem; }
.tip-item { display:flex;gap:.75rem;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:.85rem;color:var(--text2); }
.tip-item span:first-child { font-size:1.1rem;flex-shrink:0;margin-top:1px; }
.tip-item strong { color:var(--text); }
.tabs-guide { display:flex;flex-direction:column;gap:.5rem; }
.tg-item { display:flex;align-items:flex-start;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.85rem; }
.tg-item:last-child { border-bottom:none; }
.tg-tab { font-family:var(--font-mono);font-size:.78rem;background:var(--surface2);border:1px solid var(--border);padding:3px 10px;border-radius:20px;white-space:nowrap;flex-shrink:0;color:var(--accent); }
.tg-item span:last-child { color:var(--text2); }

/* Privacy Banner */
.privacy-banner { max-width:1100px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:start; }
.pb-icon { font-size:2.5rem;flex-shrink:0; }
.pb-content h3 { font-size:1.1rem;margin-bottom:.5rem; }
.pb-content p { color:var(--text2);font-size:.85rem;line-height:1.7; }
.pb-checks { display:flex;flex-direction:column;gap:.4rem;flex-shrink:0; }
.pbc { font-size:.8rem;color:var(--accent);font-family:var(--font-mono);white-space:nowrap; }

/* ══════════════════════════════════════
   FEATURES SECTION
══════════════════════════════════════ */
.features-section-wrap { background:var(--bg3);max-width:100%;padding:clamp(3rem,8vw,6rem) clamp(1.5rem,8vw,6rem); }
.features-section-wrap > * { max-width:1300px;margin-left:auto;margin-right:auto; }
.features-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem; }
.feat-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:all .2s; }
.feat-card:hover { border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow); }
.feat-icon { font-size:1.8rem;margin-bottom:.8rem; }
.feat-card h3 { font-size:.95rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; }
.feat-card p { color:var(--text2);font-size:.83rem;line-height:1.65; }
.feat-new { font-size:.65rem;background:var(--accent);color:#000;padding:1px 7px;border-radius:20px;font-family:var(--font-mono);font-weight:700; }

/* ══════════════════════════════════════
   UPLOAD
══════════════════════════════════════ */
.guide-toggle { display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--border);padding:1rem 1.5rem;border-radius:var(--radius-sm);cursor:pointer;margin-bottom:.75rem;font-size:.9rem;font-weight:600;color:var(--text2);transition:all .2s; }
.guide-toggle:hover { border-color:var(--accent);color:var(--accent); }
.guide-arrow { transition:transform .2s; }
.export-guide { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1.5rem; }
.guide-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;padding:1.5rem; }
.guide-col h4 { font-size:.95rem;margin-bottom:.75rem;color:var(--accent); }
.guide-col ol { padding-left:1.2rem;color:var(--text2);font-size:.84rem; }
.guide-col li { margin-bottom:.5rem; }
.guide-col li strong { color:var(--text); }
.guide-note { margin-top:.8rem;font-size:.78rem;color:var(--text3);font-style:italic; }
.platform-tabs { display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem; }
.ptab { display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);color:var(--text2);padding:10px 20px;border-radius:40px;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:.9rem;transition:all .2s; }
.ptab:hover { border-color:var(--accent);color:var(--accent); }
.ptab.active { background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:700; }
.upload-zone { border:2px dashed var(--border2);border-radius:var(--radius);background:var(--bg2);transition:all .3s;margin-bottom:1.5rem; }
.upload-zone:hover,.upload-zone.dragover { border-color:var(--accent);background:rgba(0,229,160,.03); }
.upload-inner { display:flex;flex-direction:column;align-items:center;padding:3.5rem 2rem;text-align:center; }
.upload-icon { font-size:2.8rem;color:var(--text3);margin-bottom:1rem;transition:color .2s; }
.upload-zone:hover .upload-icon { color:var(--accent); }
.upload-title { font-family:var(--font-head);font-size:1.15rem;font-weight:700;margin-bottom:.4rem; }
.upload-hint { color:var(--text2);font-size:.85rem;margin-bottom:1.5rem;font-family:var(--font-mono); }
.btn-upload { background:var(--surface2);border:1px solid var(--border2);color:var(--text);padding:10px 28px;border-radius:8px;cursor:pointer;font-weight:600;font-family:var(--font-body);font-size:.9rem;transition:all .2s;margin-bottom:1rem; }
.btn-upload:hover { border-color:var(--accent);color:var(--accent); }
.upload-privacy { font-size:.78rem;color:var(--text3); }
.file-info { background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.25);padding:1rem 1.5rem;border-radius:var(--radius-sm);margin-bottom:1rem;color:var(--accent);font-family:var(--font-mono);font-size:.85rem; }
.parse-error { background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);padding:1rem 1.5rem;border-radius:var(--radius-sm);margin-bottom:1rem;color:var(--red);font-size:.9rem; }
.analyze-bar { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;background:var(--surface);border:1px solid var(--border);padding:1.2rem 1.5rem;border-radius:var(--radius); }
.analyze-summary { color:var(--text2);font-size:.9rem; }
.analyze-summary strong { color:var(--text); }
.btn-analyze { padding:12px 32px;min-width:200px; }

/* ══════════════════════════════════════
   HEALTH BANNER
══════════════════════════════════════ */
.health-banner { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 2rem;margin-bottom:2rem; }
.health-left { display:flex;align-items:center;gap:1.2rem; }
.health-ring { position:relative;width:72px;height:72px;flex-shrink:0; }
.health-ring svg { width:100%;height:100%; }
.health-ring span { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:1.2rem;font-weight:800;color:var(--accent); }
.health-label-sm { font-size:.72rem;color:var(--text3);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem; }
.health-verdict { font-family:var(--font-head);font-size:1.1rem;font-weight:700; }
.health-subtitle { font-size:.76rem;color:var(--text3);margin-top:.2rem; }
.health-factors { display:flex;gap:1rem;flex-wrap:wrap; }
.hf-item { background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem 1rem;cursor:help; }
.hf-label { font-size:.7rem;color:var(--text3);font-family:var(--font-mono);text-transform:uppercase;margin-bottom:.2rem; }
.hf-val { font-family:var(--font-head);font-size:1rem;font-weight:700; }

/* ══════════════════════════════════════
   SUMMARY CARDS
══════════════════════════════════════ */
.summary-cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:1rem;margin-bottom:2.5rem; }
.summary-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.5rem;position:relative;overflow:hidden;transition:border-color .2s; }
.summary-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent); }
.summary-card:hover { border-color:var(--border2); }
.sc-label { font-size:.7rem;color:var(--text3);font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.35rem; }
.sc-value { font-family:var(--font-head);font-size:1.45rem;font-weight:800; }
.sc-sub { font-size:.76rem;color:var(--text2);margin-top:2px; }

/* ══════════════════════════════════════
   RESULT TABS
══════════════════════════════════════ */
.result-tabs-outer { overflow-x:auto;margin-bottom:2rem; }
.result-tabs { display:flex;gap:.3rem;border-bottom:1px solid var(--border);min-width:max-content; }
.rtab { background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text2);padding:10px 14px;cursor:pointer;font-family:var(--font-body);font-size:.84rem;font-weight:500;transition:all .2s;margin-bottom:-1px;white-space:nowrap; }
.rtab:hover { color:var(--text); }
.rtab.active { color:var(--accent);border-bottom-color:var(--accent);font-weight:700; }
.tab-pane { animation:fadeTab .3s ease; }
.tab-pane.hidden { display:none; }
@keyframes fadeTab{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════════════════════════════
   CHARTS GRID & CARDS
══════════════════════════════════════ */
.charts-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1.5rem; }
.chart-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:border-color .2s; }
.chart-card:hover { border-color:var(--border2); }
.chart-card.chart-wide { grid-column:1/-1; }
.chart-header { margin-bottom:1.2rem; }
.chart-header h3 { font-size:1rem;margin-bottom:.2rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; }
.chart-header p { font-size:.78rem;color:var(--text3); }
.chart-insight { margin-top:1rem;padding:.75rem 1rem;background:rgba(0,229,160,.07);border-left:3px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.82rem;color:var(--text2);font-style:italic; }
.chart-explain { margin-top:.75rem;padding:.75rem 1rem;background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.15);border-radius:var(--radius-sm);font-size:.8rem;color:var(--text2);line-height:1.65; }
.chart-explain strong { color:var(--text); }
.badge-new { font-size:.65rem;background:var(--accent);color:#000;padding:1px 7px;border-radius:20px;font-family:var(--font-mono);font-weight:700;vertical-align:middle; }

/* Tables */
.table-scroll { overflow-x:auto; }
.p-table { width:100%;border-collapse:collapse;font-size:.82rem;min-width:700px; }
.p-table th { background:var(--bg3);color:var(--text3);font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none; }
.p-table th:hover { color:var(--accent); }
.p-table th.sort-asc::after { content:' ↑'; }
.p-table th.sort-desc::after { content:' ↓'; }
.p-table td { padding:10px 12px;border-bottom:1px solid rgba(42,48,80,.4);color:var(--text2); }
.p-table td:first-child { color:var(--text);font-weight:600; }
.p-table tr:last-child td { border-bottom:none; }
.p-table tr:hover td { background:rgba(255,255,255,.02); }

/* Emoji cloud */
#emojiCloud { display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem 0; }
.emoji-item { display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);border-radius:40px;padding:4px 12px;font-size:.95rem;transition:border-color .2s; }
.emoji-item:hover { border-color:var(--accent); }
.e-count { font-family:var(--font-mono);font-size:.7rem;color:var(--text3); }

/* Links table */
.links-table { width:100%;border-collapse:collapse;font-size:.84rem; }
.links-table th { color:var(--text3);font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;padding:8px 12px;text-align:left;border-bottom:1px solid var(--border); }
.links-table td { padding:8px 12px;border-bottom:1px solid rgba(42,48,80,.4);color:var(--text2); }
.links-table td:first-child { color:var(--blue); }

/* Surges */
.surges-list { display:flex;flex-direction:column;gap:.6rem; }
.surge-item { display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm); }
.surge-date { font-family:var(--font-mono);font-size:.82rem;color:var(--text2); }
.surge-count { font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--orange); }
.surge-mult { font-size:.78rem;color:var(--text3); }

/* Streaks */
#streaksPanel { padding:.5rem 0; }
.streak-stats { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.2rem; }
.streak-stat { background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.8rem 1rem;text-align:center; }
.streak-stat .ss-val { font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:var(--accent); }
.streak-stat .ss-lab { font-size:.72rem;color:var(--text3);font-family:var(--font-mono); }
.streak-calendar { display:flex;flex-wrap:wrap;gap:3px;margin-top:.5rem; }
.sc-day { width:12px;height:12px;border-radius:2px; }
.sc-day.active { background:var(--accent); }
.sc-day.inactive { background:var(--border); }

/* TTR Panel */
#ttrPanel { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem; }
.ttr-item { background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem; }
.ttr-name { font-size:.85rem;font-weight:700;margin-bottom:.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ttr-score { font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:var(--accent); }
.ttr-bar-wrap { background:var(--border);border-radius:4px;height:6px;margin:.5rem 0;overflow:hidden; }
.ttr-bar-fill { height:100%;background:var(--accent);border-radius:4px;transition:width .8s ease; }
.ttr-rating { font-size:.72rem;color:var(--text3);font-family:var(--font-mono); }

/* Co-occurrence */
.cooccur-controls { display:flex;gap:.75rem;flex-wrap:wrap;align-items:center; }
#cooccurResult { display:flex;flex-wrap:wrap;gap:.5rem; }
.coword-chip { display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);border-radius:40px;padding:4px 14px;font-size:.84rem;transition:border-color .2s; }
.coword-chip:hover { border-color:var(--accent); }
.coword-count { font-family:var(--font-mono);font-size:.72rem;color:var(--text3); }

/* Language intro */
.lang-intro { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.5rem;margin-bottom:1.5rem;font-size:.9rem;color:var(--text2); }

/* Topic Clusters */
#topicClustersPanel { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem; }
.topic-chip { background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;transition:border-color .2s; }
.topic-chip:hover { border-color:var(--accent); }
.topic-name { font-family:var(--font-head);font-size:.95rem;font-weight:700;margin-bottom:.4rem; }
.topic-kw { font-size:.78rem;color:var(--text3);font-family:var(--font-mono); }
.topic-score { font-family:var(--font-head);font-size:1.2rem;font-weight:800;color:var(--accent);margin-top:.4rem; }

/* Timeline */
#timelineView { padding:.5rem 0; }
.tl-item { display:flex;gap:1.5rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--border); }
.tl-dot { width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:5px; }
.tl-date { font-family:var(--font-mono);font-size:.8rem;color:var(--accent);min-width:100px;padding-top:2px; }
.tl-body h4 { font-size:.9rem;margin-bottom:2px; }
.tl-body p { font-size:.8rem;color:var(--text2); }
#silentPeriods { padding:.5rem 0; }
.silent-item { display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--border);font-size:.85rem; }
.s-dur { font-family:var(--font-head);font-weight:700;color:var(--orange);font-size:1rem; }
.s-range { color:var(--text2); }

/* Sentiment */
.sentiment-methodology { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-top:1.5rem;font-size:.84rem;color:var(--text2); }
.sentiment-methodology h4 { margin-bottom:.75rem;font-size:.95rem; }
.sentiment-methodology p { margin-bottom:.6rem;line-height:1.7; }
.sentiment-methodology strong { color:var(--text); }
#sentimentWords { display:flex;gap:1.5rem;flex-wrap:wrap; }
.sentiment-col { flex:1;min-width:200px; }
.sentiment-col h4 { margin-bottom:.75rem;font-size:.9rem; }
.sw-word { display:flex;justify-content:space-between;padding:5px 10px;border-radius:4px;font-size:.82rem;margin-bottom:4px;background:var(--bg3); }
.sw-word .sw-count { font-family:var(--font-mono);color:var(--text3); }
.pos .sw-word { border-left:3px solid var(--accent); }
.neg .sw-word { border-left:3px solid var(--red); }

/* ══ DEEP ANALYSIS TAB (v4) ═══════════ */
.deep-intro { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.5rem;margin-bottom:1.5rem;font-size:.9rem;color:var(--text2);display:flex;align-items:center;gap:1rem;flex-wrap:wrap; }
.deep-intro p { margin:0; }

/* Burst Panel */
#burstPanel { padding:.5rem 0; }
.burst-stats { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.2rem; }
.burst-stat { background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.8rem 1rem;text-align:center; }
.burst-stat .bv { font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:var(--orange); }
.burst-stat .bl { font-size:.72rem;color:var(--text3);font-family:var(--font-mono); }
.burst-dist { display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.5rem; }
.bd-item { background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem;text-align:center; }
.bd-val { font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:var(--teal); }
.bd-lab { font-size:.7rem;color:var(--text3);font-family:var(--font-mono); }

/* YoY Panel */
#yoyPanel { overflow-x:auto; }
.yoy-table { width:100%;border-collapse:collapse;font-size:.84rem;min-width:400px; }
.yoy-table th { background:var(--bg3);color:var(--text3);font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;padding:10px 12px;text-align:left;border-bottom:1px solid var(--border); }
.yoy-table td { padding:10px 12px;border-bottom:1px solid rgba(42,48,80,.4);color:var(--text2); }
.yoy-table td:first-child { color:var(--accent);font-weight:700;font-family:var(--font-head); }

/* Diversity Panel */
#diversityPanel { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem; }
.div-stat { background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;text-align:center; }
.div-val { font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:var(--blue); }
.div-lab { font-size:.75rem;color:var(--text3);font-family:var(--font-mono); }

/* Longest Messages Panel */
#longestMsgPanel { display:flex;flex-direction:column;gap:.75rem; }
.lm-item { background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.2rem; }
.lm-meta { display:flex;gap:1rem;align-items:center;margin-bottom:.5rem;flex-wrap:wrap; }
.lm-sender { font-weight:700;font-size:.85rem;color:var(--accent); }
.lm-date { font-family:var(--font-mono);font-size:.76rem;color:var(--text3); }
.lm-stats { font-size:.76rem;color:var(--text3);font-family:var(--font-mono); }
.lm-preview { font-size:.84rem;color:var(--text2);line-height:1.6;border-left:3px solid var(--border2);padding-left:.75rem; }

/* Pace Panel */
#pacePanel { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem; }
.pace-stat { background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.2rem;text-align:center; }
.pace-val { font-family:var(--font-head);font-size:1.8rem;font-weight:800;color:var(--accent); }
.pace-lab { font-size:.78rem;color:var(--text3);font-family:var(--font-mono);margin-top:.3rem; }
.pace-badge { display:inline-block;margin-top:.5rem;background:var(--accent-dim);border:1px solid rgba(0,229,160,.3);color:var(--accent);padding:2px 12px;border-radius:20px;font-size:.78rem;font-family:var(--font-mono); }

/* Search */
.search-panel { max-width:980px; }
.search-controls { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.2rem; }
.sc-row { display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem; }
.sc-row:last-child { margin-bottom:0; }
.sc-filters { display:flex;gap:1rem;flex-wrap:wrap; }
.filter-group { display:flex;flex-direction:column;gap:.3rem; }
.filter-group label { font-size:.7rem;color:var(--text3);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em; }
.search-input { flex:1;min-width:200px;background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:10px 16px;border-radius:8px;font-family:var(--font-body);font-size:.9rem;transition:border-color .2s; }
.search-input:focus { outline:none;border-color:var(--accent); }
.filter-group select,.filter-date { background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:7px 12px;border-radius:6px;font-family:var(--font-body);font-size:.84rem;cursor:pointer;transition:border-color .2s; }
.filter-group select:focus,.filter-date:focus { outline:none;border-color:var(--accent); }
.search-meta { font-size:.82rem;color:var(--text3);margin-bottom:.75rem;font-family:var(--font-mono); }
.search-results { display:flex;flex-direction:column;gap:.75rem; }
.search-placeholder { color:var(--text3);font-size:.9rem;text-align:center;padding:2rem; }
.search-result-item { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.2rem;transition:border-color .2s; }
.search-result-item:hover { border-color:var(--border2); }
.sri-meta { display:flex;gap:1rem;align-items:center;margin-bottom:.4rem;flex-wrap:wrap; }
.sri-sender { font-weight:700;font-size:.85rem;color:var(--accent); }
.sri-date { font-family:var(--font-mono);font-size:.76rem;color:var(--text3); }
.sri-type { font-size:.7rem;background:var(--bg3);border:1px solid var(--border);padding:2px 8px;border-radius:20px;color:var(--text3);font-family:var(--font-mono); }
.sri-text { font-size:.88rem;color:var(--text2);line-height:1.6; }
.sri-text mark { background:rgba(0,229,160,.3);color:var(--text);border-radius:2px;padding:0 2px; }

/* Insights */
.insight-cards-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem; }
.insight-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem 1.5rem;display:flex;gap:1rem;align-items:flex-start;transition:border-color .2s; }
.insight-card:hover { border-color:var(--border2); }
.insight-icon { font-size:1.5rem;flex-shrink:0; }
.insight-text h4 { font-size:.9rem;margin-bottom:.35rem; }
.insight-text p { font-size:.84rem;color:var(--text2);line-height:1.6; }
.insight-note { margin-top:1.5rem;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);padding:1.2rem;border-radius:var(--radius);font-size:.83rem;color:var(--text2);line-height:1.65; }
.insight-note strong { color:var(--text); }

/* Export */
.export-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem; }
.export-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.5rem;text-align:center;cursor:pointer;transition:all .2s; }
.export-card:hover { border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow); }
.export-icon { font-size:2rem;margin-bottom:1rem; }
.export-card h3 { margin-bottom:.5rem;font-size:1rem; }
.export-card p { font-size:.82rem;color:var(--text2);margin-bottom:1.5rem;line-height:1.65; }

/* ══════════════════════════════════════
   LEARN SECTION
══════════════════════════════════════ */
.learn-bg { background:var(--bg2);max-width:100%;padding:clamp(3rem,8vw,6rem) clamp(1.5rem,8vw,6rem); }
.learn-bg .section-header { max-width:1300px;margin-left:auto;margin-right:auto; }
.learn-steps { max-width:940px;margin:0 auto; }
.learn-step { display:grid;grid-template-columns:64px 1fr;gap:2rem;padding:2.5rem 0;border-bottom:1px solid var(--border); }
.learn-step:last-child { border-bottom:none; }
.step-num { font-family:var(--font-head);font-size:2rem;font-weight:800;color:var(--border2);line-height:1;padding-top:4px; }
.step-body h3 { font-size:1.2rem;margin-bottom:.4rem; }
.step-tags { display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem; }
.step-tag-pill { font-size:.7rem;font-family:var(--font-mono);color:var(--accent);background:var(--accent-dim);border:1px solid rgba(0,229,160,.22);padding:2px 10px;border-radius:40px;letter-spacing:.05em;text-transform:uppercase; }
.step-body p { color:var(--text2);margin-bottom:.9rem;font-size:.94rem;line-height:1.72; }
.step-body ul { color:var(--text2);margin-bottom:.9rem; }
.step-body li { font-size:.9rem; }
.step-body li strong { color:var(--text); }
.learn-concept { background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--purple);padding:1rem 1.2rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.84rem;color:var(--text2);margin-top:.5rem;line-height:1.7; }

/* ══════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════ */
.about-layout { display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-bottom:3rem; }
.about-bio-card,.about-projects-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem; }
.about-avatar { width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:1.2rem;color:#000;margin-bottom:1rem; }
.about-bio-card h3 { font-size:1.4rem;margin-bottom:.3rem; }
.about-title { color:var(--accent);font-size:.8rem;font-family:var(--font-mono);margin-bottom:1rem;line-height:1.6; }
.about-desc-block p { color:var(--text2);font-size:.88rem;margin-bottom:.8rem; }
.about-desc-block strong { color:var(--text); }
.about-block { margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border); }
.about-block h4 { font-size:.88rem;margin-bottom:.7rem;color:var(--text2);text-transform:uppercase;font-family:var(--font-mono);letter-spacing:.06em; }
.prog-list { display:flex;flex-direction:column;gap:.6rem; }
.prog-item { display:flex;align-items:flex-start;gap:.75rem; }
.prog-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px; }
.prog-item div strong { display:block;font-size:.88rem;color:var(--text);margin-bottom:1px; }
.prog-item div span { font-size:.76rem;color:var(--text3);font-family:var(--font-mono); }
.contact-grid { display:grid;grid-template-columns:1fr 1fr;gap:.5rem; }
.contact-item { display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text2);padding:.5rem;border-radius:var(--radius-sm);transition:color .2s; }
.contact-item:hover { color:var(--accent); }
.about-links { display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem; }
.about-link { padding:5px 14px;border-radius:40px;font-size:.78rem;font-weight:600;border:1px solid var(--border2);color:var(--text2);transition:all .2s; }
.about-link:hover { border-color:var(--accent);color:var(--accent); }
.about-link-accent { background:var(--accent-dim);border-color:var(--accent);color:var(--accent); }
.edu-item { margin-bottom:.5rem; }
.edu-item strong { display:block;font-size:.86rem;color:var(--text); }
.edu-item span { font-size:.76rem;color:var(--text3); }
.about-projects-card h3 { font-size:1.1rem;margin-bottom:.3rem; }
.project-list { display:flex;flex-direction:column;gap:.5rem; }
.project-item { display:flex;align-items:flex-start;gap:.75rem;padding:.8rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg3);transition:all .2s; }
.project-item:hover { border-color:var(--accent); }
.project-item div strong { display:block;color:var(--text);font-size:.86rem;margin-bottom:2px; }
.project-item div span { color:var(--text3);font-size:.74rem;font-family:var(--font-mono); }
.project-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px; }
.tech-stack { border-top:1px solid var(--border);padding-top:2rem; }
.tech-stack h3 { font-size:1rem;color:var(--text2);margin-bottom:1rem; }
.stack-pills { display:flex;flex-wrap:wrap;gap:.5rem; }
.pill { background:var(--surface);border:1px solid var(--border);color:var(--text2);padding:4px 14px;border-radius:40px;font-size:.78rem;font-family:var(--font-mono); }
.pill-green { border-color:rgba(0,229,160,.4);color:var(--accent); }
.pill-blue  { border-color:rgba(59,130,246,.4);color:var(--blue); }
.pill-orange{ border-color:rgba(249,115,22,.4);color:var(--orange); }
.pill-purple{ border-color:rgba(124,58,237,.4);color:var(--purple); }
.pill-teal  { border-color:rgba(20,184,166,.4);color:var(--teal); }
.pill-red   { border-color:rgba(239,68,68,.4);color:var(--red); }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer { background:var(--bg2);border-top:1px solid var(--border);padding:3rem clamp(1.5rem,8vw,6rem) 2rem; }
.footer-inner { max-width:1300px;margin:0 auto; }
.footer-top { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem; }
.footer-brand { display:flex;align-items:center;gap:8px;margin-bottom:.6rem; }
.footer-brand-col p { font-size:.82rem;color:var(--text3);line-height:1.6;margin-bottom:1rem; }
.footer-badges { display:flex;flex-wrap:wrap;gap:.4rem; }
.footer-badge { font-size:.7rem;font-family:var(--font-mono);background:var(--surface);border:1px solid var(--border);padding:2px 10px;border-radius:20px;color:var(--text3); }
.footer-col h4 { font-size:.8rem;color:var(--text);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.8rem; }
.footer-col a { display:block;font-size:.82rem;color:var(--text3);margin-bottom:.4rem;transition:color .2s; }
.footer-col a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid var(--border);padding-top:1.5rem;text-align:center; }
.footer-bottom p { font-size:.77rem;color:var(--text3);margin-bottom:.3rem; }

/* ══════════════════════════════════════
   DRAG OVERLAY
══════════════════════════════════════ */
.drag-overlay { position:fixed;inset:0;z-index:9999;background:rgba(10,12,15,.94);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center; }
.drag-msg { font-family:var(--font-head);font-size:2rem;font-weight:800;color:var(--accent);border:2px dashed var(--accent);padding:3rem 5rem;border-radius:16px; }

/* ══════════════════════════════════════
   UTILITIES
══════════════════════════════════════ */
.hidden { display:none !important; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:1100px){
  .footer-top { grid-template-columns:1fr 1fr; }
  .about-layout { grid-template-columns:1fr; }
  .privacy-banner { grid-template-columns:auto 1fr;grid-template-rows:auto auto; }
  .pb-checks { grid-column:2; }
}
@media(max-width:768px){
  .nav-links { display:none; }
  .hero-title { font-size:2.2rem; }
  .learn-step { grid-template-columns:1fr;gap:.5rem; }
  .step-num { font-size:1.5rem; }
  .charts-grid { grid-template-columns:1fr; }
  .chart-card.chart-wide { grid-column:1; }
  .rtab { font-size:.78rem;padding:8px 10px; }
  .summary-cards { grid-template-columns:repeat(2,1fr); }
  .analyze-bar { flex-direction:column; }
  .footer-top { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .health-banner { flex-direction:column;align-items:flex-start; }
  .guide-grid { grid-template-columns:1fr; }
  .sc-filters { flex-direction:column; }
  .cooccur-controls { flex-direction:column; }
  .howto-step { grid-template-columns:1fr;gap:.5rem; }
  .howto-num { font-size:1.5rem; }
  .privacy-banner { grid-template-columns:1fr;text-align:center; }
  .pb-checks { display:flex;flex-wrap:wrap;justify-content:center; }
}
@media print {
  #navbar,#howto-section,#upload-section,.learn-bg,#features-section,#about-section,footer,
  .result-tabs-outer,.tab-pane:not(.active),.export-guide,.guide-toggle { display:none !important; }
  #results-section { display:block !important; }
  .tab-pane { display:block !important; }
  body { background:#fff;color:#000; }
  .chart-card { border:1px solid #ccc;break-inside:avoid;margin-bottom:1rem; }
}