/* INNOVAQ-AI · Producción — shell + pantallas (sobre tokens.css + components.css) */

.mono, table, [data-num]{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ====== Demo switcher bar ====== */
.swbar{ position:fixed; top:0; left:0; right:0; z-index:1000; height:40px; display:flex; align-items:center; gap:4px;
  padding:0 14px; background:rgba(10,14,26,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); overflow-x:auto; }
.swbar .lab{ font-size:10px; color:var(--ink-4); letter-spacing:.08em; text-transform:uppercase; font-weight:600; margin-right:10px; white-space:nowrap; }
.swbar button{ padding:5px 10px; font-size:12px; color:var(--ink-3); border-radius:var(--r-sm); white-space:nowrap; }
.swbar button:hover{ background:var(--bg-2); color:var(--ink); }
.swbar button.on{ background:var(--brand-soft); color:var(--brand); font-weight:500; }
.swbar .grp{ width:1px; height:18px; background:var(--line); margin:0 6px; flex:none; }
.swbar .dev{ margin-left:auto; display:flex; gap:3px; padding:2px; background:var(--bg-2); border-radius:var(--r-sm); flex:none; }
.swbar .dev button{ padding:3px 9px; font-size:11px; }
.swbar .dev button.on{ background:var(--bg-3); color:var(--ink); }

.screen{ display:none; }
.screen.on{ display:block; }

/* ====== APP SHELL ====== */
.app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:56px 1fr;
  grid-template-areas:'side top' 'side main'; height:calc(100vh - 40px); margin-top:40px; }
.app[data-collapsed="true"]{ grid-template-columns:64px 1fr; }

/* sidebar */
.side{ grid-area:side; background:var(--bg-1); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow-y:auto; }
.side-brand{ display:flex; align-items:center; gap:10px; padding:16px 16px 14px; }
.side-mark{ width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--brand),var(--brand-3)); display:grid; place-items:center; color:var(--bg); font-weight:800; font-size:12px; flex:none; }
.side-brand .nm{ font-weight:700; font-size:14px; letter-spacing:-.01em; }
.side-brand .pl{ font-size:9px; color:var(--ink-4); letter-spacing:.12em; text-transform:uppercase; margin-top:1px; }
.side-nav{ flex:1; padding:6px 10px; }
.side-grp{ font-size:9.5px; color:var(--ink-4); letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:14px 10px 6px; }
.side-link{ display:flex; align-items:center; gap:11px; width:100%; padding:8px 10px; border-radius:var(--r-sm); color:var(--ink-2); font-size:13px; font-weight:500; position:relative; text-align:left; }
.side-link:hover{ background:var(--bg-2); color:var(--ink); }
.side-link.on{ background:var(--bg-3); color:var(--ink); }
.side-link.on::before{ content:''; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; background:var(--brand); border-radius:0 2px 2px 0; }
.side-link svg{ width:16px; height:16px; flex:none; color:var(--ink-3); }
.side-link.on svg{ color:var(--brand); }
.side-link .lk-lab{ flex:1; }
.side-link .lk-r{ font-size:9px; font-weight:700; padding:1px 5px; border-radius:3px; letter-spacing:.04em; }
.lk-r.pro{ background:var(--info-soft); color:var(--info); }
.lk-r.prem{ background:var(--premium-soft); color:var(--premium); }
.lk-r.count{ background:var(--bg-3); color:var(--ink-3); font-family:var(--mono); }
.side-foot{ border-top:1px solid var(--line); padding:12px; }
.plan-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:11px 12px; margin-bottom:10px; }
.plan-card .t{ font-size:9.5px; color:var(--ink-4); letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.plan-card .n{ font-size:13px; font-weight:600; margin:3px 0 8px; }
.plan-card .meter{ height:4px; background:var(--bg-3); border-radius:2px; overflow:hidden; margin-bottom:4px; }
.plan-card .meter i{ display:block; height:100%; background:var(--brand); border-radius:2px; }
.plan-card .mlab{ font-size:10px; color:var(--ink-3); font-family:var(--mono); }
.plan-card .up{ width:100%; margin-top:9px; height:28px; font-size:11.5px; font-weight:600; background:var(--premium-soft); color:var(--premium); border-radius:var(--r-sm); }
.plan-card .up:hover{ background:var(--premium); color:var(--bg); }
.side-user{ display:flex; align-items:center; gap:9px; padding:6px; border-radius:var(--r-sm); }
.side-user:hover{ background:var(--bg-2); }
.side-user .av{ width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--info),var(--brand)); display:grid; place-items:center; color:var(--bg); font-weight:700; font-size:11px; flex:none; }
.side-user .un{ font-size:12.5px; font-weight:500; }
.side-user .ue{ font-size:10.5px; color:var(--ink-4); }
.app[data-collapsed="true"] .side-brand .nm,.app[data-collapsed="true"] .side-brand .pl,
.app[data-collapsed="true"] .side-grp,.app[data-collapsed="true"] .lk-lab,.app[data-collapsed="true"] .lk-r,
.app[data-collapsed="true"] .side-foot .plan-card,.app[data-collapsed="true"] .side-user .un,
.app[data-collapsed="true"] .side-user .ue{ display:none; }
.app[data-collapsed="true"] .side-link{ justify-content:center; padding:8px 0; }

/* topbar */
.top{ grid-area:top; display:flex; align-items:center; gap:12px; padding:0 18px; background:rgba(10,14,26,.7); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); z-index:50; }
.top .collapse{ color:var(--ink-3); padding:6px; border-radius:4px; }
.top .collapse:hover{ background:var(--bg-2); color:var(--ink); }
.top .search{ flex:1; max-width:460px; display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); color:var(--ink-3); font-size:13px; }
.top .search:hover{ border-color:var(--line-2); }
.top .search .kbd{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-4); padding:1px 5px; background:var(--bg-3); border-radius:3px; }
.top .mkt{ display:flex; align-items:center; gap:8px; height:32px; padding:0 12px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); font-size:11.5px; white-space:nowrap; }
.top .mkt .live-dot{ animation:dotpulse 2.5s infinite; }
.top .mkt.closed .live-dot{ background:var(--ink-4); animation:none; }
.top .mkt .lab{ font-weight:600; color:var(--brand); }
.top .mkt.closed .lab{ color:var(--ink-3); }
.top .mkt .nxt{ color:var(--ink-3); font-family:var(--mono); }
@keyframes dotpulse{ 0%,100%{ box-shadow:0 0 0 0 var(--brand-glow);} 70%{ box-shadow:0 0 0 6px transparent;} }
.top .ic{ width:36px; height:36px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); display:grid; place-items:center; color:var(--ink-2); position:relative; }
.top .ic:hover{ color:var(--ink); border-color:var(--line-2); }
.top .ic .b{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; background:var(--danger); color:#fff; border-radius:8px; font-size:9.5px; font-weight:700; display:grid; place-items:center; }
.top .av{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--info),var(--brand)); display:grid; place-items:center; color:var(--bg); font-weight:700; font-size:11px; }

/* main */
.main{ grid-area:main; overflow-y:auto; min-width:0; }
.wrap{ padding:22px 26px; max-width:1320px; min-width:0; width:100%; box-sizing:border-box; }

/* view header */
.vh{ margin-bottom:20px; }
.vh .bc{ font-size:11.5px; color:var(--ink-4); margin-bottom:6px; }
.vh .bc b{ color:var(--ink-2); font-weight:500; }
.vh-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.vh h1{ font-size:24px; font-weight:600; letter-spacing:-.02em; }
.vh h1 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--brand); }
.vh .sub{ font-size:13px; color:var(--ink-3); margin-top:3px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.vh-actions{ display:flex; gap:8px; align-items:center; }

/* grids */
.g2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.g-2-1{ display:grid; grid-template-columns:2fr 1fr; gap:14px; }
.mb14{ margin-bottom:14px; } .mb20{ margin-bottom:20px; }

/* kpi */
.kpi{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; }
.kpi .l{ font-size:11px; color:var(--ink-3); letter-spacing:.04em; font-weight:500; margin-bottom:6px; }
.kpi .v{ font-family:var(--mono); font-size:25px; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.kpi .m{ display:flex; gap:8px; align-items:center; margin-top:6px; font-size:11px; color:var(--ink-4); }

/* card head */
.ch{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.ch h3{ font-size:13.5px; font-weight:600; }
.ch .s{ font-size:11px; color:var(--ink-3); margin-top:2px; }
.cb{ padding:18px; }
.clab{ font-size:10.5px; color:var(--ink-4); letter-spacing:.06em; text-transform:uppercase; font-weight:700; }

/* tables */
.tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
.tbl thead th{ text-align:left; padding:9px 14px; font-size:10.5px; font-weight:700; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase; background:var(--bg-1); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; }
.tbl thead th.r{ text-align:right; } .tbl thead th.c{ text-align:center; }
.tbl tbody td{ padding:9px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); }
.tbl tbody td.r{ text-align:right; } .tbl tbody td.c{ text-align:center; }
.tbl tbody tr{ cursor:pointer; transition:background 80ms; }
.tbl tbody tr:nth-child(even){ background:rgba(255,255,255,.012); }
.tbl tbody tr:hover{ background:var(--bg-2); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl .num{ font-family:var(--mono); }
.tbl .sym{ font-family:var(--mono); font-weight:600; color:var(--ink); }
.tbl-wrap{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.tbl-tools{ padding:11px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tbl-tools .ti{ font-size:13px; font-weight:600; }
.tbl-tools .ct{ font-size:11px; color:var(--ink-4); font-family:var(--mono); }
.fchip{ display:inline-flex; gap:6px; align-items:center; padding:4px 10px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-full); font-size:11.5px; color:var(--ink-2); }
.fchip:hover{ border-color:var(--line-2); }
.fchip.on{ background:var(--brand-soft); border-color:var(--brand); color:var(--brand); }
.fchip .x{ color:var(--ink-4); }

/* signal / chips */
.sig{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:3px; font-size:10.5px; font-weight:600; font-family:var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.sig::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.sig.comprar,.sig.long,.sig.comprar-mas{ background:var(--success-soft); color:var(--success); }
.sig.vender,.sig.short{ background:var(--danger-soft); color:var(--danger); }
.sig.mantener,.sig.watch{ background:var(--info-soft); color:var(--info); }
.sig.vigilar,.sig.recortar{ background:var(--warning-soft); color:var(--warning); }
.urg{ display:inline-flex; align-items:center; gap:4px; padding:2px 7px; font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:3px; }
.urg.critico{ background:var(--danger); color:var(--bg); animation:critp 1.6s infinite; }
.urg.alto{ background:var(--warning-soft); color:var(--warning); }
.urg.medio{ background:var(--info-soft); color:var(--info); }
.urg.info{ background:var(--bg-3); color:var(--ink-3); }
@keyframes critp{ 0%,100%{ opacity:1;} 50%{ opacity:.6;} }
/* score chip */
.score{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px; font-weight:600; }
.score .dots{ display:flex; gap:2px; }
.score .dots i{ width:4px; height:4px; border-radius:50%; background:var(--bg-3); }
.score.hi{ color:var(--brand);} .score.mid{ color:var(--info);} .score.lo{ color:var(--warning);} .score.bad{ color:var(--ink-4);}
.score.hi .dots i.f,.score.mid .dots i.f,.score.lo .dots i.f,.score.bad .dots i.f{ background:currentColor; }
.sent{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; font-family:var(--mono); font-size:10.5px; font-weight:600; border-radius:3px; letter-spacing:.04em; text-transform:uppercase; }
.sent.alcista{ background:var(--success-soft); color:var(--success);} .sent.bajista{ background:var(--danger-soft); color:var(--danger);} .sent.neutro{ background:var(--bg-3); color:var(--ink-3);}
.live{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--ink-3); }
.live .d{ width:6px; height:6px; border-radius:50%; background:var(--brand); animation:dotpulse 2.5s infinite; }

/* right rail layout */
.with-rail{ display:grid; grid-template-columns:1fr var(--rail-w); gap:18px; }
.rail .blk{ padding:16px 18px; border-bottom:1px solid var(--line); }
.rail-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }

/* sparkline */
.spk{ width:100%; height:28px; display:block; }

/* ===== LOCKED / PAYWALL ===== */
.locked{ position:relative; }
.locked .blurred{ filter:blur(6px); pointer-events:none; user-select:none; opacity:.5; }
.lock-overlay{ position:absolute; inset:0; display:grid; place-items:center; z-index:3; }
.lock-card{ text-align:center; max-width:420px; padding:32px 28px; background:rgba(15,20,33,.86); backdrop-filter:blur(6px); border:1.5px solid var(--premium); border-radius:var(--r-xl); }
.lock-card .ic{ width:48px; height:48px; margin:0 auto 14px; border-radius:50%; background:var(--premium-soft); color:var(--premium); display:grid; place-items:center; }
.lock-card h3{ font-family:var(--serif); font-size:26px; font-weight:400; letter-spacing:-.02em; margin-bottom:6px; }
.lock-card h3 em{ color:var(--premium); font-style:italic; }
.lock-card p{ font-size:13px; color:var(--ink-3); line-height:1.5; margin-bottom:18px; }
.lock-card .row{ display:flex; gap:10px; justify-content:center; }
.lock-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; background:var(--premium-soft); color:var(--premium); border-radius:var(--r-full); font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px; }

/* disclaimer */
.disc{ display:flex; gap:11px; align-items:flex-start; padding:12px 14px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); font-size:12px; color:var(--ink-3); line-height:1.5; }
.disc .i{ width:20px; height:20px; flex:none; border-radius:50%; background:var(--info-soft); color:var(--info); display:grid; place-items:center; font-style:italic; font-weight:700; font-size:11px; }
.disc b{ color:var(--ink-2); }

/* coming soon */
.soon{ padding:40px 24px; text-align:center; border:1px dashed var(--line-2); border-radius:var(--r-lg); background:var(--bg-1); }
.soon .ic{ width:46px; height:46px; margin:0 auto 14px; border-radius:50%; background:var(--bg-3); color:var(--ink-3); display:grid; place-items:center; }
.soon h3{ font-size:16px; font-weight:600; margin-bottom:6px; }
.soon p{ font-size:13px; color:var(--ink-3); max-width:360px; margin:0 auto; line-height:1.5; }

/* toggle */
.tog{ width:36px; height:20px; background:var(--bg-3); border-radius:10px; position:relative; transition:background .16s; flex:none; }
.tog::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .16s; }
.tog.on{ background:var(--brand); } .tog.on::after{ transform:translateX(16px); }

/* heatmap */
.hm{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
.hm .c{ aspect-ratio:1.5; border-radius:var(--r-xs); display:grid; place-items:center; text-align:center; font-family:var(--mono); font-size:10.5px; font-weight:600; color:#fff; padding:4px; }
.hm .c small{ display:block; font-size:9px; opacity:.85; font-weight:500; }

/* bars (breadth/sector) */
.bar-row{ margin-bottom:12px; }
.bar-row .t{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
.bar-row .track{ height:6px; background:var(--bg-3); border-radius:3px; overflow:hidden; }
.bar-row .track i{ display:block; height:100%; border-radius:3px; }

/* news */
.news-item{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.news-item:last-child{ border-bottom:0; }
.news-item .lc{ display:flex; flex-direction:column; gap:4px; min-width:80px; }
.news-item .t{ font-size:13.5px; color:var(--ink-2); font-weight:500; line-height:1.4; }
.news-item:hover .t{ color:var(--ink); }
.news-item .src{ font-size:10.5px; color:var(--ink-4); margin-top:4px; }
.news-item .ai-read{ font-size:12px; color:var(--ink-3); line-height:1.5; margin-top:6px; padding:8px 10px; background:var(--bg-1); border-left:2px solid var(--info); border-radius:0 var(--r-sm) var(--r-sm) 0; }

/* decision engine cards */
.de-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.de{ background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.de-h{ padding:11px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.de.long .de-h{ color:var(--success);} .de.short .de-h{ color:var(--danger);} .de.watch .de-h{ color:var(--info);}
.de-row{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line); font-size:12.5px; }
.de-row:last-child{ border-bottom:0; }

/* earnings */
.earn{ display:grid; grid-template-columns:52px 1fr; gap:14px; padding:11px 0; border-top:1px solid var(--line); }
.earn:first-child{ border-top:0; }
.earn .dt .d{ font-family:var(--mono); font-weight:600; font-size:14px; } .earn .dt .w{ font-size:10px; color:var(--ink-4); text-transform:uppercase; margin-top:2px; }
.earn .it{ display:grid; grid-template-columns:44px 1fr auto auto; gap:12px; align-items:center; padding:8px 12px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:6px; font-size:12.5px; }
.earn .it.hl{ border-color:var(--brand); background:linear-gradient(90deg,var(--brand-soft),var(--bg-1) 40%); }
.earn .se{ font-family:var(--mono); font-size:10px; padding:2px 6px; background:var(--bg-3); color:var(--ink-3); border-radius:3px; font-weight:600; }

/* ===== LANDING ===== */
.mk{ background:var(--bg); }
.mk-nav{ height:62px; display:flex; align-items:center; gap:28px; padding:0 32px; border-bottom:1px solid var(--line); position:sticky; top:40px; z-index:40; background:rgba(10,14,26,.8); backdrop-filter:blur(12px); }
.mk-nav .logo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; }
.mk-nav nav{ display:flex; gap:2px; }
.mk-nav nav a{ padding:7px 12px; font-size:13.5px; color:var(--ink-2); font-weight:500; border-radius:var(--r-sm); }
.mk-nav nav a:hover{ background:var(--bg-2); color:var(--ink); }
.mk-nav .right{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.mk-c{ max-width:1180px; margin:0 auto; padding:0 24px; }
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero::before{ content:''; position:absolute; inset:-100px 0 0 0; background:radial-gradient(50% 40% at 50% 0,rgba(0,200,150,.10),transparent 65%); pointer-events:none; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-full); font-size:12px; color:var(--ink-2); margin-bottom:22px; }
.hero-eyebrow .d{ width:18px; height:18px; border-radius:50%; background:var(--brand); display:grid; place-items:center; color:var(--bg); font-size:10px; font-weight:700; }
.hero h1{ font-family:var(--serif); font-weight:400; letter-spacing:-.025em; }
.hero h1 em{ color:var(--brand); font-style:italic; }
.hero .lead{ color:var(--ink-3); }
.hero-cta{ display:flex; gap:12px; }
.metric-row{ display:flex; gap:32px; flex-wrap:wrap; }
.metric-row .m .v{ font-family:var(--mono); font-weight:600; font-size:15px; }
.metric-row .m .l{ font-size:11.5px; color:var(--ink-4); }
/* hero variant A (split) */
.heroA{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:76px 0 90px; }
.heroA h1{ font-size:68px; line-height:.97; margin-bottom:20px; }
.heroA .lead{ font-size:18px; line-height:1.55; margin-bottom:30px; max-width:460px; }
.heroA .metric-row{ margin-top:40px; }
/* hero variant B (centered) */
.heroB{ text-align:center; padding:90px 0 70px; }
.heroB h1{ font-size:84px; line-height:.96; margin:0 auto 20px; max-width:920px; }
.heroB .lead{ font-size:19px; max-width:560px; margin:0 auto 30px; }
.heroB .hero-cta{ justify-content:center; }
.heroB .metric-row{ justify-content:center; margin-top:44px; }
.heroB .hero-eyebrow{ margin-inline:auto; }
/* terminal mockup */
.term{ background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.term-bar{ height:34px; background:var(--bg-2); border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 14px; gap:7px; }
.term-bar i{ width:10px; height:10px; border-radius:50%; background:var(--bg-3); }
.term-bar i:nth-child(1){ background:#FF5A5F;} .term-bar i:nth-child(2){ background:#FFB547;} .term-bar i:nth-child(3){ background:#00C896;}
.term-bar .u{ margin:0 auto; padding:3px 12px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }
.term-body{ padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.term-cell{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:11px; }
.term-cell.full{ grid-column:span 2; }
.term-cell .hh{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-3); margin-bottom:6px; }
.term-cell .vv{ font-family:var(--mono); font-size:17px; font-weight:600; }

.sec{ padding:84px 0; border-bottom:1px solid var(--line); }
.sec.center{ text-align:center; }
.sec h2{ font-family:var(--serif); font-weight:400; font-size:52px; line-height:1.05; letter-spacing:-.025em; margin-bottom:14px; }
.sec h2 em{ color:var(--brand); font-style:italic; }
.sec .ssub{ font-size:16px; color:var(--ink-3); max-width:560px; }
.sec.center h2,.sec.center .ssub{ margin-inline:auto; }
.feat3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; text-align:left; }
.feat{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; transition:all .2s; }
.feat:hover{ border-color:var(--brand); transform:translateY(-2px); }
.feat .iw{ width:42px; height:42px; border-radius:11px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; margin-bottom:16px; }
.feat.b .iw{ background:var(--info-soft); color:var(--info);} .feat.c .iw{ background:var(--premium-soft); color:var(--premium);}
.feat h3{ font-size:17px; font-weight:600; letter-spacing:-.01em; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.feat p{ color:var(--ink-3); font-size:13.5px; line-height:1.55; }
/* pricing */
.price3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; text-align:left; }
.plan{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px; position:relative; display:flex; flex-direction:column; }
.plan.pro{ border:1.5px solid var(--brand); box-shadow:var(--shadow-glow-brand); }
.plan.premium{ border:1.5px solid var(--premium); background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); }
.plan .tag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); padding:4px 12px; border-radius:var(--r-full); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.plan.pro .tag{ background:var(--brand); color:var(--bg);} .plan.premium .tag{ background:var(--premium); color:var(--bg);}
.plan .pn{ font-size:12px; font-weight:700; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
.plan .pp{ font-family:var(--serif); font-size:52px; line-height:1; letter-spacing:-.025em; margin-bottom:4px; }
.plan .pp .cur{ font-size:22px; vertical-align:top; color:var(--ink-3); font-family:var(--sans); font-weight:500; margin-right:3px; }
.plan .pp .per{ font-size:13px; color:var(--ink-3); font-family:var(--sans); font-weight:500; }
.plan .pt{ font-size:13px; color:var(--ink-3); margin-bottom:20px; }
.plan ul{ list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:9px; flex:1; }
.plan li{ display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink-2); }
.plan li svg{ flex:none; margin-top:3px; color:var(--brand); }
.plan.premium li svg{ color:var(--premium); }

/* ===== AUTH ===== */
.auth{ min-height:calc(100vh - 40px); display:grid; grid-template-columns:1fr 1fr; }
.auth-side{ padding:48px; background:linear-gradient(180deg,var(--bg-1),var(--bg)); display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); position:relative; overflow:hidden; }
.auth-side::before{ content:''; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 50%,rgba(0,200,150,.08),transparent 70%); }
.auth-side>*{ position:relative; }
.auth-side .q{ font-family:var(--serif); font-size:27px; line-height:1.25; letter-spacing:-.01em; margin-bottom:22px; }
.auth-main{ display:grid; place-items:center; padding:40px 24px; }
.auth-form{ width:100%; max-width:380px; }
.auth-form .logo{ display:flex; align-items:center; gap:10px; font-weight:700; margin-bottom:30px; }
.auth-form h1{ font-family:var(--serif); font-size:34px; letter-spacing:-.02em; margin-bottom:6px; }
.auth-form .sub{ font-size:13.5px; color:var(--ink-3); margin-bottom:26px; }
.auth-form .fld{ margin-bottom:14px; }
.auth-form label{ display:block; font-size:12px; font-weight:500; color:var(--ink-2); margin-bottom:6px; }
.auth-form .input.lg{ height:44px; }
.auth-form .btn-g{ width:100%; height:44px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:500; }
.auth-form .btn-g:hover{ border-color:var(--line-2); }
.auth-form .divider{ display:flex; align-items:center; gap:12px; margin:20px 0; font-size:11px; color:var(--ink-4); text-transform:uppercase; letter-spacing:.06em; }
.auth-form .divider::before,.auth-form .divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.auth-form .sw{ text-align:center; font-size:13px; color:var(--ink-3); margin-top:22px; }
.auth-form .sw a{ color:var(--brand); font-weight:500; }
.auth-form .terms{ font-size:11px; color:var(--ink-4); line-height:1.5; margin:12px 0 16px; display:flex; gap:8px; }
.auth-form .terms a{ color:var(--ink-3); text-decoration:underline; }

/* ==== RESPONSIVE: tablet 1080px ==== */
.bottom-nav{ display:none; }
@media (max-width:1080px){
  .with-rail{ grid-template-columns:1fr; } .g4{ grid-template-columns:repeat(2,1fr); }
  .heroA,.auth{ grid-template-columns:1fr; gap:36px; } .heroA h1{ font-size:48px; } .heroB h1{ font-size:52px; }
  .feat3,.price3,.de-grid,.g3,.g-2-1{ grid-template-columns:1fr; } .sec h2{ font-size:34px; }
  .auth-side{ display:none; }
  /* Topbar: search + mkt pill shrink, alerts/av stay */
  .top{ padding:0 14px; gap:8px; }
  .top .search{ max-width:340px; font-size:12.5px; }
  .top .search .kbd{ display:none; }
  .top .mkt{ padding:0 10px; font-size:11px; }
  .top .mkt .nxt{ display:none; }
  .wrap{ padding:18px 18px; }
  .app{ grid-template-columns:200px 1fr; }
  .app[data-collapsed="true"]{ grid-template-columns:64px 1fr; }
  .side-link{ font-size:12.5px; padding:7px 8px; }
  .side-grp{ padding:12px 8px 4px; }
  .side-foot{ padding:10px 8px; }
  .plan-card{ padding:9px 10px; }
  .plan-card .up{ height:26px; font-size:11px; }
}

/* ==== RESPONSIVE: mobile 768px ==== */
@media (max-width:768px){
  .app{ grid-template-columns:1fr !important; grid-template-rows:56px 1fr 60px;
    grid-template-areas:'top' 'main' 'bn'; max-width:100%; margin-top:40px; }
  .side{ display:none; }
  /* Hide right rail column on mobile (its content shows elsewhere) */
  .rail-card{ display:none; }
  /* The go() function injects a div with inline-style grid-template-columns:1fr var(--rail-w) — collapse it. */
  .main > div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  .top{ padding:0 12px; gap:6px; }
  .top .collapse{ display:none; }
  .top .search{ max-width:100%; flex:1; height:34px; font-size:12px; }
  .top .search .search-txt{ display:none; }  /* icon-only */
  .top .search .kbd{ display:none; }
  .top .mkt{ padding:0 8px; height:30px; font-size:10.5px; }
  .top .mkt .nxt{ display:none; }
  .top .ic{ width:34px; height:34px; }
  .top .av{ width:30px; height:30px; font-size:10.5px; }
  /* Hide less-essential topbar chips to make room */
  .top .source-chip{ display:none; }
  .top .plan-chip{ display:none; }
  .bottom-nav{ display:flex; background:var(--bg-1); border-top:1px solid var(--line); }
  .bottom-nav button{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--ink-4); font-size:9.5px; font-weight:500; background:transparent; border:0; padding:6px 2px; }
  .bottom-nav button.on{ color:var(--brand); }
  .bottom-nav button svg{ width:18px; height:18px; }
  .wrap{ padding:14px 12px 24px; }
  .g4,.g3,.g2,.g-2-1,.de-grid{ grid-template-columns:1fr; gap:10px; }
  .de-grid{ gap:10px; }
  /* Tables: keep scrollable rather than overflow */
  .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl{ font-size:12px; min-width:480px; }
  .tbl thead th{ padding:8px 10px; }
  .tbl tbody td{ padding:8px 10px; }
  /* Headings smaller */
  .vh h1{ font-size:20px; }
  .vh .sub{ font-size:12px; }
  .vh-row{ gap:10px; }
  .vh-actions .btn{ font-size:11px; padding:6px 10px; }
  /* Cards less padding */
  .ch{ padding:12px 14px; }
  .cb{ padding:14px; }
  .kpi{ padding:14px; }
  .kpi .v{ font-size:22px; }
  /* Hero / landing text */
  .heroB h1{ font-size:36px; }
  .heroA h1{ font-size:36px; }
  .heroA{ padding:48px 0 60px; gap:30px; }
  .heroB{ padding:60px 0 50px; }
  .sec{ padding:54px 0; }
  .sec h2{ font-size:28px; }
  .term-body{ grid-template-columns:1fr; }
  /* Auth */
  .auth-form h1{ font-size:26px; }
  .mk-nav{ padding:0 16px; gap:14px; }
  .mk-nav nav{ display:none; }
  .hero-cta{ flex-wrap:wrap; }
}

/* ==== RESPONSIVE: xs 480px ==== */
@media (max-width:480px){
  .wrap{ padding:12px 10px 20px; }
  .vh h1{ font-size:18px; }
  .kpi{ padding:12px; }
  .kpi .v{ font-size:20px; }
  .kpi .l{ font-size:10px; }
  .heroB h1{ font-size:30px; }
  .heroA h1{ font-size:30px; }
  .de-row{ padding:8px 10px; font-size:12px; }
  .news-item{ gap:10px; }
  .news-item .t{ font-size:13px; }
  .top{ padding:0 10px; }
  .bottom-nav button{ font-size:9px; }
  /* Hide IC button (alerts) on xs — still reachable via bottom nav */
  .top .ic{ display:none; }
}

/* ==== Legacy .device-mobile kept for backwards compat with blueprint, but
       routes through real media queries. The 'mobile' frame at 390px is now
       a real device class only when explicitly added. ==== */
.device-mobile .app{ grid-template-columns:1fr !important; grid-template-rows:56px 1fr 58px; grid-template-areas:'top' 'main' 'bn'; max-width:390px; margin:40px auto 0; border-inline:1px solid var(--line); }
.device-mobile .side{ display:none; }
.device-mobile .g4,.device-mobile .g3,.device-mobile .g2,.device-mobile .g-2-1,.device-mobile .de-grid{ grid-template-columns:1fr; }
.device-mobile .wrap{ padding:14px; }
.device-mobile .bottom-nav{ display:flex; background:var(--bg-1); border-top:1px solid var(--line); grid-area:bn; }
.device-mobile .bottom-nav button{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--ink-4); font-size:9.5px; font-weight:500; }
.device-mobile .bottom-nav button.on{ color:var(--brand); }
.device-mobile .bottom-nav button svg{ width:20px; height:20px; }
.device-mobile .top .collapse{ display:none; }
.device-mobile .term-body{ grid-template-columns:1fr; }