@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f0f2f5;--surf:#fff;--surf2:#f8f9fb;
  --b1:#e4e7ed;--b2:#d1d5db;
  --acc:#2563eb;--accl:#eff4ff;--acch:#1d4ed8;
  --grn:#16a34a;--grnl:#f0fdf4;
  --red:#dc2626;--redl:#fef2f2;
  --amb:#d97706;--ambl:#fffbeb;
  --pur:#7c3aed;--purl:#f5f3ff;
  --t1:#111827;--t2:#374151;--t3:#6b7280;--t4:#9ca3af;
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --sh2:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.05);
  --sh3:0 10px 25px rgba(0,0,0,.1),0 4px 8px rgba(0,0,0,.06);
  --fn:'Inter',sans-serif;--mono:'JetBrains Mono',monospace;
  --r:6px;--rl:10px;--rx:14px;
  --tb:54px;--lw:270px;--rw:300px
}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--t1);font-family:var(--fn);font-size:13px;-webkit-font-smoothing:antialiased}
#app{display:flex;height:100vh}

/* ── TOOLBAR ─────────────────────────────────── */
#tb{width:var(--tb);flex-shrink:0;background:var(--surf);border-right:1px solid var(--b1);display:flex;flex-direction:column;align-items:center;padding:10px 0 8px;gap:1px;z-index:30;overflow:hidden}
.logo{width:34px;height:34px;background:linear-gradient(135deg,#2563eb,#7c3aed);border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;flex-shrink:0;box-shadow:0 2px 8px rgba(37,99,235,.35)}
.tsep{width:26px;height:1px;background:var(--b1);margin:5px 0}
.tb-btn{width:38px;height:38px;border-radius:var(--r);border:1px solid transparent;background:none;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;position:relative;flex-shrink:0}
.tb-btn:hover{background:var(--bg);color:var(--t1);border-color:var(--b1)}
.tb-btn.on{background:var(--accl);color:var(--acc);border-color:#bfdbfe}
.tb-btn.red-on{background:var(--redl);color:var(--red);border-color:#fca5a5}
.tb-btn.grn-on{background:var(--grnl);color:var(--grn);border-color:#bbf7d0}
.tb-btn.amb-on{background:var(--ambl);color:var(--amb);border-color:#fde68a}
.tb-btn .tip{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#1f2937;color:#fff;font-size:11px;font-family:var(--mono);padding:4px 8px;border-radius:4px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:400;box-shadow:var(--sh)}
.tb-btn:hover .tip{opacity:1}

/* ── PANELS ──────────────────────────────────── */
#lp{width:var(--lw);flex-shrink:0;background:var(--surf);border-right:1px solid var(--b1);display:flex;flex-direction:column;overflow:hidden;transition:margin-left .22s ease}
#lp.hide{margin-left:calc(-1*var(--lw))}
#rp{width:var(--rw);flex-shrink:0;background:var(--surf);border-left:1px solid var(--b1);display:flex;flex-direction:column;overflow:hidden;transition:margin-right .22s ease}
#rp.hide{margin-right:calc(-1*var(--rw))}
#center{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* PANEL INTERNALS */
.ph{padding:10px 13px;border-bottom:1px solid var(--b1);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:6px}
.pt{font-size:12px;font-weight:600;color:var(--t1);letter-spacing:.01em}
.pb{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.pb::-webkit-scrollbar{width:3px}.pb::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}

/* Tabs */
.tabs{display:flex;border-bottom:1px solid var(--b1);flex-shrink:0;background:var(--surf)}
.tab{padding:8px 12px;font-size:11px;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;transition:all .12s;white-space:nowrap}
.tab:hover{color:var(--t1)}.tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.tbd{display:none;flex:1;overflow-y:auto;padding:10px 12px;flex-direction:column;gap:9px}
.tbd.on{display:flex}.tbd::-webkit-scrollbar{width:3px}.tbd::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}

/* Sections */
.sec{display:flex;flex-direction:column;gap:5px}
.sl{font-size:10px;font-weight:600;color:var(--t4);text-transform:uppercase;letter-spacing:.09em;padding:2px 0}
.sdiv{height:1px;background:var(--b1);margin:4px 0}

/* Controls */
.crow{display:flex;align-items:center;gap:7px;min-height:24px}
.cl{font-size:11px;color:var(--t3);min-width:60px;flex-shrink:0}
.cv{font-size:11px;color:var(--acc);font-family:var(--mono);min-width:36px;text-align:right;flex-shrink:0}
input[type=range]{flex:1;appearance:none;height:3px;background:var(--b2);border-radius:2px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--acc);cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px var(--acc)}
input[type=color]{width:30px;height:24px;border:1px solid var(--b2);border-radius:4px;background:none;cursor:pointer;padding:2px}
select{flex:1;background:var(--surf);color:var(--t1);border:1px solid var(--b2);border-radius:var(--r);padding:4px 7px;font-size:11px;outline:none;cursor:pointer;font-family:var(--fn)}
select:hover{border-color:var(--acc)}

.tog{flex:1;padding:5px 8px;border-radius:var(--r);border:1px solid var(--b2);background:var(--surf);color:var(--t3);cursor:pointer;font-size:11px;transition:all .12s;text-align:center;white-space:nowrap;font-family:var(--fn)}
.tog:hover{border-color:var(--acc);color:var(--acc)}
.tog.on{background:var(--accl);color:var(--acc);border-color:#bfdbfe;font-weight:500}
.tog.red-on{background:var(--redl);color:var(--red);border-color:#fca5a5;font-weight:500}
.tog.grn-on{background:var(--grnl);color:var(--grn);border-color:#bbf7d0;font-weight:500}

.btn{width:100%;padding:7px 10px;border-radius:var(--r);border:1px solid var(--b2);background:var(--surf);color:var(--t1);cursor:pointer;font-size:11px;transition:all .12s;display:flex;align-items:center;gap:5px;justify-content:center;font-family:var(--fn)}
.btn:hover{background:var(--bg);border-color:var(--acc);color:var(--acc)}
.btn.pri{background:var(--acc);color:#fff;border-color:var(--acc)}.btn.pri:hover{background:var(--acch)}
.btn.red{border-color:#fca5a5;color:var(--red)}.btn.red:hover{background:var(--redl)}

/* STAT GRID */
.sg{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.sc{background:var(--bg);border-radius:var(--r);padding:7px 9px;border:1px solid var(--b1)}
.sn{font-size:9px;font-weight:600;color:var(--t4);text-transform:uppercase;letter-spacing:.08em}
.sv{font-size:12px;font-family:var(--mono);color:var(--t1);margin-top:2px;font-weight:500}
.sv.g{color:var(--grn)}.sv.w{color:var(--amb)}.sv.r{color:var(--red)}

/* TOPBAR */
#tbar{height:40px;flex-shrink:0;background:var(--surf);border-bottom:1px solid var(--b1);display:flex;align-items:center;padding:0 12px;gap:8px}
.tbdg{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;background:var(--bg);border:1px solid var(--b1);color:var(--t3)}
.tbdg.on{background:var(--accl);color:var(--acc);border-color:#bfdbfe}
.tbdg.red{background:var(--redl);color:var(--red);border-color:#fca5a5}
.vs{width:1px;height:18px;background:var(--b1);flex-shrink:0}
.tlbl{font-size:10px;color:var(--t4);font-family:var(--mono)}
.tval{font-size:11px;color:var(--t2);font-family:var(--mono);font-weight:500}

/* VIEWPORT */
#vpw{flex:1;position:relative;overflow:hidden;background:#e8eaed}
#vp{width:100%;height:100%;display:block;cursor:grab}
#vp:active{cursor:grabbing}

/* DROP ZONE */
#dropz{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:5}
#dropz.hide{display:none}
#dropi{border:2px dashed var(--b2);border-radius:18px;padding:40px 60px;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:all;cursor:pointer;transition:all .18s;background:rgba(255,255,255,.93);box-shadow:var(--sh2)}
#dropi:hover,.dov{border-color:var(--acc)!important;background:var(--accl)!important}
.dtit{font-size:20px;font-weight:700;color:var(--t1)}
.dsub{font-size:12px;color:var(--t3);font-family:var(--mono)}
.dfmt{font-size:10px;color:var(--t4);background:var(--bg);padding:3px 10px;border-radius:20px;border:1px solid var(--b1)}

/* HUD / OVERLAYS */
#infobar{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);background:rgba(17,24,39,.85);color:#fff;border-radius:20px;padding:7px 18px;font-size:11px;font-family:var(--mono);pointer-events:none;z-index:10;backdrop-filter:blur(8px);transition:opacity .22s;white-space:nowrap}
#infobar.hide{opacity:0}
#mbar{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #bfdbfe;border-radius:10px;padding:8px 16px;font-size:12px;font-family:var(--mono);z-index:10;display:flex;align-items:center;gap:12px;box-shadow:var(--sh2);transition:opacity .18s}
#mbar.hide{opacity:0;pointer-events:none}
.mdot{width:8px;height:8px;border-radius:50%;background:var(--acc);flex-shrink:0}
#mdist{color:var(--grn);font-size:14px;font-weight:600}

/* SMART INSPECTOR PANEL */
#inspector{position:absolute;top:12px;right:12px;background:#fff;border:1px solid var(--b1);border-radius:var(--rx);padding:0;font-family:var(--mono);font-size:11px;z-index:20;box-shadow:var(--sh3);min-width:220px;max-width:260px;overflow:hidden;display:none;transition:all .2s}
#inspector.show{display:block}
.ins-head{background:linear-gradient(135deg,var(--accl),#f5f3ff);padding:10px 13px;border-bottom:1px solid var(--b1);display:flex;align-items:center;gap:7px}
.ins-title{font-size:12px;font-weight:600;color:var(--t1);font-family:var(--fn)}
.ins-body{padding:11px 13px;display:flex;flex-direction:column;gap:8px}
.ins-row{display:flex;flex-direction:column;gap:2px}
.ins-lbl{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--t4)}
.ins-val{font-size:11px;color:var(--t1);font-weight:500}
.ins-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:500;font-family:var(--fn)}
.ins-badge.flat{background:var(--grnl);color:var(--grn);border:1px solid #bbf7d0}
.ins-badge.curved{background:var(--ambl);color:var(--amb);border:1px solid #fde68a}
.ins-badge.sharp{background:var(--redl);color:var(--red);border:1px solid #fca5a5}
.ins-badge.smooth{background:var(--accl);color:var(--acc);border:1px solid #bfdbfe}
.ins-explain{background:var(--bg);border-radius:var(--r);padding:7px 9px;font-size:10px;color:var(--t2);line-height:1.5;font-family:var(--fn)}
.ins-close{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--t3);font-size:14px;line-height:1;padding:0 2px}
.ins-close:hover{color:var(--red)}

/* HIGHLIGHTED FACE */
#facehlt{position:absolute;pointer-events:none;z-index:5}

/* ANNOTATION TAGS */
.atag{position:absolute;pointer-events:all;z-index:20;transform:translate(-50%,-100%)}
.adot{width:10px;height:10px;border-radius:50%;background:var(--pur);border:2px solid #fff;box-shadow:var(--sh);margin:0 auto}
.albl{background:#fff;border:1px solid #c4b5fd;border-radius:6px;padding:3px 8px;font-size:10px;font-family:var(--mono);color:var(--t1);white-space:nowrap;margin-bottom:4px;text-align:center;box-shadow:var(--sh);cursor:pointer}
.albl:hover{border-color:var(--red)}

/* LEGEND */
#lgnd{position:absolute;bottom:15px;right:15px;background:#fff;border:1px solid var(--b1);border-radius:var(--r);padding:9px 11px;font-size:10px;font-family:var(--mono);color:var(--t3);z-index:10;box-shadow:var(--sh)}
#lgnd.hide{display:none}
.lbar{width:100px;height:8px;border-radius:3px;margin:4px 0 3px}
.lends{display:flex;justify-content:space-between;font-size:9px}

/* AXES */
#axcvs{position:absolute;bottom:52px;left:12px;z-index:10;pointer-events:none;opacity:.85}

/* SCORE RING */
#score-ring{display:flex;flex-direction:column;align-items:center;padding:10px 0 6px}
.ring-wrap{position:relative;width:90px;height:90px}
.ring-wrap.sm{width:76px;height:76px}
.ring-svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--b1);stroke-width:8}
.ring-fg{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s ease,stroke .4s}
.ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-score{font-size:22px;font-weight:700;line-height:1;font-family:var(--fn)}
.ring-score.sm{font-size:19px}
.ring-sub{font-size:9px;color:var(--t3);font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em}

/* Slicer-ready binary badge — the headline outcome a maker cares about */
.slicer-status{font-size:13px;font-weight:800;letter-spacing:.01em;padding:6px 14px;border-radius:999px;margin-bottom:12px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.slicer-status.slicer-yes{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.slicer-status.slicer-no{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.slicer-status.slicer-unknown{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}

/* Two-dial layout (Topology + Geometry) */
.dial-row{display:flex;justify-content:center;gap:14px;width:100%}
.dial{display:flex;flex-direction:column;align-items:center;gap:3px}
.dial-label{font-size:11px;font-weight:700;color:var(--t2);margin-top:2px}
.dial-hint{font-size:8.5px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.04em}

/* ISSUE CARDS */
.icard{border-radius:var(--r);border:1px solid;overflow:hidden;cursor:pointer;transition:all .15s}
.icard:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.icard-head{padding:8px 10px;display:flex;align-items:center;gap:7px}
.icard-ico{font-size:15px;flex-shrink:0}
.icard-title{font-size:11px;font-weight:600;flex:1}
.icard-sev{font-size:9px;font-weight:600;padding:2px 6px;border-radius:20px;text-transform:uppercase;letter-spacing:.06em}
.icard-body{padding:0 10px 9px;display:none;flex-direction:column;gap:5px}
.icard-body.open{display:flex}
.icard-row{display:flex;flex-direction:column;gap:1px}
.icard-k{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;opacity:.65}
.icard-v{font-size:11px;line-height:1.4}
.icard-nav{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:4px 9px;border-radius:20px;font-size:10px;font-weight:500;border:1px solid;cursor:pointer;transition:all .12s;background:none;font-family:var(--fn)}
.c-ok{background:var(--grnl);border-color:#bbf7d0;color:var(--grn)}
.c-ok .icard-sev{background:#dcfce7;color:#166534}
.c-ok .icard-nav{border-color:#bbf7d0;color:var(--grn)}.c-ok .icard-nav:hover{background:#dcfce7}
.c-warn{background:#fffbeb;border-color:#fde68a;color:var(--amb)}
.c-warn .icard-sev{background:#fef3c7;color:#92400e}
.c-warn .icard-nav{border-color:#fde68a;color:var(--amb)}.c-warn .icard-nav:hover{background:#fef3c7}
.c-crit{background:var(--redl);border-color:#fca5a5;color:var(--red)}
.c-crit .icard-sev{background:#fee2e2;color:#991b1b}
.c-crit .icard-nav{border-color:#fca5a5;color:var(--red)}.c-crit .icard-nav:hover{background:#fee2e2}

/* PROBLEM NAV LIST */
.pnav-item{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:var(--r);border:1px solid var(--b1);cursor:pointer;transition:all .12s;background:var(--surf)}
.pnav-item:hover{border-color:var(--acc);background:var(--accl)}
.pnav-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pnav-txt{font-size:11px;color:var(--t2);flex:1}
.pnav-idx{font-size:10px;font-family:var(--mono);color:var(--t4)}

/* QUIZ MODE */
#quiz-overlay{position:absolute;inset:0;background:rgba(17,24,39,.7);z-index:40;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
#quiz-overlay.show{display:flex}
#quiz-box{background:#fff;border-radius:var(--rx);padding:24px;max-width:420px;width:90%;box-shadow:var(--sh3);display:flex;flex-direction:column;gap:14px}
.quiz-q{font-size:15px;font-weight:600;color:var(--t1);line-height:1.4}
.quiz-hint{font-size:12px;color:var(--t3);background:var(--bg);border-radius:var(--r);padding:8px 10px;line-height:1.5}
.quiz-feedback{font-size:13px;font-weight:500;padding:8px 12px;border-radius:var(--r);display:none}
.quiz-feedback.show{display:block}
.quiz-feedback.ok{background:var(--grnl);color:var(--grn)}
.quiz-feedback.fail{background:var(--redl);color:var(--red)}
.qbtnrow{display:flex;gap:8px}

/* LOADING */
#load{position:absolute;inset:0;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;z-index:100;flex-direction:column;gap:10px;backdrop-filter:blur(3px)}
#load.hide{display:none}
.spin{width:28px;height:28px;border:2.5px solid var(--b2);border-top-color:var(--acc);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.ltxt{font-size:11px;color:var(--t3);font-family:var(--mono)}

/* MODAL */
#mbg{position:absolute;inset:0;background:rgba(0,0,0,.3);z-index:50;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
#mbg.hide{display:none}
#mbox{background:#fff;border-radius:var(--rx);padding:20px;min-width:300px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh3)}
#mbox h3{font-size:14px;font-weight:600}
#ainp{border:1px solid var(--b2);border-radius:var(--r);color:var(--t1);padding:8px 10px;font-size:12px;outline:none;width:100%;font-family:var(--fn)}
#ainp:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(37,99,235,.1)}

/* BOTTOM CHARTS */
#btp{height:0;flex-shrink:0;background:var(--surf);border-top:1px solid var(--b1);overflow:hidden;transition:height .22s}
#btp.open{height:200px}
#bti{display:flex;height:100%}
.bs{flex:1;padding:10px;border-right:1px solid var(--b1);overflow:auto;min-width:0}
.bs:last-child{border-right:none}
.btit{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.qrow{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.qlbl{font-size:10px;color:var(--t3);min-width:60px;font-family:var(--mono)}
.qbw{flex:1;height:5px;background:var(--bg);border-radius:3px;overflow:hidden}
.qb{height:100%;border-radius:3px;transition:width .35s}
.qpct{font-size:10px;color:var(--t3);font-family:var(--mono);min-width:32px;text-align:right}
.mbar2{width:100%;height:42px;background:var(--bg);border-radius:var(--r);border:1px solid var(--b1);display:flex;align-items:flex-end;padding:3px;gap:1px}
.mb2{flex:1;border-radius:1px 1px 0 0;min-height:1px;transition:height .3s}

/* ANN LIST */
.ai2{display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:var(--r);background:var(--bg);border:1px solid var(--b1)}
.at{font-size:11px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono)}
.adl{background:none;border:none;color:var(--t4);cursor:pointer;font-size:12px;padding:0 2px}
.adl:hover{color:var(--red)}

/* WALKTHROUGH */
#wt-overlay{position:absolute;inset:0;pointer-events:none;z-index:35;display:none}
#wt-overlay.show{display:block}
#wt-box{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);background:#fff;border-radius:var(--rx);padding:16px 20px;max-width:380px;box-shadow:var(--sh3);border:1px solid var(--b1);pointer-events:all;display:flex;flex-direction:column;gap:10px}
.wt-step{font-size:10px;font-weight:600;color:var(--acc);text-transform:uppercase;letter-spacing:.08em}
.wt-text{font-size:13px;color:var(--t1);line-height:1.5}
.wt-btns{display:flex;gap:8px}

/* PRO TIER CSS */
.pro-badge { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; margin-left: auto; text-transform: uppercase; letter-spacing: 0.05em; }
#pro-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 900; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
#pro-modal.show { display: flex; }
.pro-box { background: #fff; border-radius: 18px; padding: 30px; width: 380px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.2); border-top: 5px solid #f59e0b; }
.pro-icon { font-size: 40px; margin-bottom: 10px; }
.pro-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 15px; transition: transform 0.1s; }
.pro-btn:hover { transform: scale(1.02); }

/* ── UPGRADED AUTH MODAL ── */
#auth-modal { position:fixed; inset:0; background:rgba(15,23,42,.6); z-index:600; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(8px); }
#auth-modal.hide { display:none; }

#auth-box { background:#ffffff; border-radius:24px; padding:40px; width:420px; max-width:92vw; display:flex; flex-direction:column; gap:20px; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); border:1px solid rgba(226,232,240,1); animation: modalPop 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes modalPop { 0% { transform: scale(0.95) translateY(15px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }

.auth-brand { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:10px; text-align:center; }
.auth-brand-icon { width:56px; height:56px; background:linear-gradient(135deg,#3b82f6,#6366f1); border-radius:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 16px rgba(59,130,246,.25); color:#fff; }
.auth-brand-icon svg { width: 28px; height: 28px; }
.auth-brand-name { font-size:24px; font-weight:800; color:#0f172a; letter-spacing:-0.5px; line-height: 1; }
.auth-brand-sub { font-size:14px; color:#64748b; margin-top:-4px; }

/* Modern Pill Tabs */
.auth-tabs { display:flex; background:#f1f5f9; padding:5px; border-radius:12px; gap:5px; margin-bottom:4px; }
.auth-tab { flex:1; padding:10px; text-align:center; font-size:14px; font-weight:600; color:#64748b; cursor:pointer; border-radius:10px; transition:all .2s ease; }
.auth-tab:not(.on):hover { color:#0f172a; background:#e2e8f0; }
.auth-tab.on { background:linear-gradient(135deg,#2563eb,#4f46e5); color:#ffffff; box-shadow:0 4px 12px rgba(37,99,235,.25); }

.auth-form { display:flex; flex-direction:column; gap:18px; }
.auth-form > div { display:flex; flex-direction:column; gap:6px; }

.auth-lbl { font-size:13px; font-weight:600; color:#475569; text-transform:none; letter-spacing:normal; }

.auth-inp { width:100%; border:1px solid #cbd5e1; background:#f8fafc; border-radius:12px; padding:14px 16px; font-size:15px; outline:none; font-family:var(--fn); color:#0f172a; transition:all .2s ease; }
.auth-inp::placeholder { color:#94a3b8; }
.auth-inp:focus { border-color:#3b82f6; background:#ffffff; box-shadow:0 0 0 4px rgba(59,130,246,.15); }

.auth-btn { width:100%; padding:14px; background:linear-gradient(135deg,#2563eb,#4f46e5); color:#fff; border:none; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; transition:all .2s ease; box-shadow:0 4px 12px rgba(37,99,235,.25); margin-top:8px; }
.auth-btn:hover { box-shadow:0 6px 16px rgba(37,99,235,.35); transform:translateY(-1px); }
.auth-btn:active { transform:translateY(1px); box-shadow:0 2px 4px rgba(37,99,235,.2); }
.auth-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

#auth-error { font-size:13px; font-weight:500; color:#ef4444; background:#fef2f2; padding:12px 14px; border-radius:10px; display:none; border:1px solid #fecaca; text-align:center; }

.auth-skip { font-size:14px; color:#64748b; text-align:center; cursor:pointer; padding:4px; font-weight:500; transition:color .2s; }
.auth-skip:hover { color:#3b82f6; }
.auth-guest { font-size:13px; color:#94a3b8; text-align:center; cursor:pointer; transition:color .2s; margin-top:-5px; }
.auth-guest:hover { color:#64748b; text-decoration:underline; }

/* ACCESS WALL */
#access-wall{position:fixed;inset:0;background:linear-gradient(135deg,#1e3a8a,#7c3aed);z-index:700;display:flex;align-items:center;justify-content:center}
#access-wall.hide{display:none}

/* Score breakdown card — appears under the score ring on Why-this-score? */
#score-breakdown{max-height:0;overflow:hidden;transition:max-height .3s ease;margin-top:0;width:100%;text-align:left}
#score-breakdown.open{max-height:400px;margin-top:8px}
#score-breakdown .bd-head{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;padding:0 4px}
#score-breakdown .bd-base,#score-breakdown .bd-row,#score-breakdown .bd-total{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;font-size:11px;border-radius:6px;margin-bottom:3px}
#score-breakdown .bd-base{background:#f8fafc;color:var(--t2);font-weight:600}
#score-breakdown .bd-row.bd-bad{background:#fef2f2;color:#991b1b}
#score-breakdown .bd-row.bd-ok{background:#f0fdf4;color:#15803d}
#score-breakdown .bd-row .bd-lbl{flex:1;line-height:1.3;padding-right:8px}
#score-breakdown .bd-row .bd-val{font-weight:700;font-family:var(--mono);white-space:nowrap}
#score-breakdown .bd-total{background:linear-gradient(135deg,#eff4ff,#f5f3ff);color:var(--acc);font-weight:800;margin-top:4px;border-top:1px solid #e0e7ff}
#score-breakdown.open{max-height:600px}
#score-breakdown .bd-explainer{font-size:10.5px;line-height:1.45;color:#475569;background:#f8fafc;border:1px solid #e2e8f0;padding:8px 10px;border-radius:8px;margin-bottom:8px}
#score-breakdown .bd-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;}
#score-breakdown .bd-tag-fix{background:#dcfce7;color:#166534}
#score-breakdown .bd-tag-geom{background:#fef3c7;color:#92400e}

/* Score delta toast — shown after Auto-Repair/Decimate to prove the change */
#score-delta-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:14px 22px;border-radius:14px;font-family:var(--fn);font-size:13px;display:flex;align-items:center;gap:16px;box-shadow:0 20px 50px rgba(0,0,0,.35);z-index:9000;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;font-weight:500}
#score-delta-toast.show{opacity:1;transform:translateX(-50%) translateY(8px);pointer-events:auto}
#score-delta-toast .sd-before,#score-delta-toast .sd-after{font-family:var(--mono);font-size:18px;font-weight:800;min-width:36px;text-align:center}
#score-delta-toast .sd-before{color:#94a3b8}
#score-delta-toast .sd-after.up{color:#22c55e}
#score-delta-toast .sd-after.same{color:#fff}
#score-delta-toast .sd-arrow{color:#64748b;font-size:18px}
#score-delta-toast .sd-meta{font-size:11px;color:#94a3b8;margin-top:2px}
.wall-box{background:#fff;border-radius:18px;padding:36px;max-width:400px;width:90%;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.wall-icon{font-size:48px;line-height:1}
.wall-title{font-size:20px;font-weight:700;color:var(--t1)}
.wall-msg{font-size:13px;color:var(--t3);line-height:1.5}
.wall-btn{padding:11px 28px;background:var(--acc);color:#fff;border:none;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;transition:background .12s;display:flex;align-items:center;gap:7px}
.wall-btn:hover{background:var(--acch)}

/* USER BADGE & FEEDBACK */
#user-badge{position:fixed;top:10px;right:16px;z-index:200;background:#fff;border:1px solid var(--b1);border-radius:20px;padding:5px 12px 5px 8px;font-size:11px;font-weight:500;color:var(--t2);display:none;align-items:center;gap:6px;box-shadow:var(--sh);cursor:pointer}
#user-badge:hover{border-color:var(--acc);color:var(--acc)}
.user-avatar{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--pur));display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;flex-shrink:0}
#auth-trigger-btn{position:fixed;top:10px;right:16px;z-index:200;background:var(--acc);color:#fff;border:none;border-radius:20px;padding:6px 14px;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;box-shadow:0 2px 8px rgba(37,99,235,.3);transition:background .12s}
#auth-trigger-btn:hover{background:var(--acch)}
#fb-btn{position:fixed;bottom:18px;left:78px;z-index:200;background:var(--acc);color:#fff;border:none;border-radius:50px;padding:9px 18px;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(37,99,235,.4);display:flex;align-items:center;gap:6px;transition:all .15s;font-family:var(--fn)}
#fb-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(37,99,235,.55);}
#fb-btn:hover{background:var(--acch);transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,99,235,.45)}
#fb-modal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:500;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
#fb-modal.show{display:flex}
#fb-box{background:#fff;border-radius:var(--rx);padding:24px;width:420px;max-width:95vw;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.15);max-height:90vh;overflow-y:auto}
.fb-head{display:flex;align-items:center;justify-content:space-between}
.fb-title{font-size:16px;font-weight:700;color:var(--t1)}
.fb-close{background:none;border:none;cursor:pointer;color:var(--t3);font-size:18px;line-height:1;padding:0 3px;transition:color .12s}
.fb-close:hover{color:var(--red)}
.fb-stars{display:flex;gap:6px;align-items:center}
.star{font-size:26px;cursor:pointer;transition:transform .1s;user-select:none;line-height:1}
.star:hover,.star.on{transform:scale(1.15)}
.fb-label{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.fb-checks{display:flex;flex-wrap:wrap;gap:6px}
.fb-check{padding:5px 11px;border-radius:20px;border:1px solid var(--b2);background:var(--surf);color:var(--t3);font-size:11px;cursor:pointer;transition:all .12s;user-select:none}
.fb-check:hover{border-color:var(--acc);color:var(--acc)}
.fb-check.on{background:var(--accl);color:var(--acc);border-color:#bfdbfe;font-weight:500}
.fb-textarea{width:100%;border:1px solid var(--b2);border-radius:var(--r);padding:9px 11px;font-size:12px;font-family:var(--fn);color:var(--t1);resize:vertical;min-height:70px;outline:none;transition:border-color .12s}
.fb-textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.fb-name{width:100%;border:1px solid var(--b2);border-radius:var(--r);padding:8px 11px;font-size:12px;font-family:var(--fn);color:var(--t1);outline:none;transition:border-color .12s}
.fb-name:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.fb-success{display:none;text-align:center;padding:12px 0;flex-direction:column;align-items:center;gap:8px}
.fb-success.show{display:flex}
.fb-success-icon{font-size:40px}
.fb-success-msg{font-size:14px;font-weight:600;color:var(--grn)}
.fb-success-sub{font-size:12px;color:var(--t3);line-height:1.5}
#fi{display:none}#si{display:none}