:root{
  --paper:#f4f1ea; --card:#fffdf7; --ink:#15211c; --ink-soft:#3a4a42;
  --muted:#6c7d73; --line:#e0dbcf; --teal:#0e8a74; --teal-deep:#0a6052;
  --crit:#b3261e; --high:#c2410c; --med:#b07d18; --win:#0e8a74;
  --shadow:0 1px 2px rgba(21,33,28,.06),0 8px 30px -12px rgba(21,33,28,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);font-family:"Spline Sans",sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 12% 6%,rgba(14,138,116,.06),transparent 38%),radial-gradient(circle at 90% 0,rgba(194,65,12,.05),transparent 30%);
  min-height:100vh;
}
.wrap{max-width:920px;margin:0 auto;padding:0 24px}
.mono{font-family:"Spline Sans Mono",monospace}

.hero{padding:64px 0 30px}
.kicker{font-family:"Spline Sans Mono",monospace;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--teal-deep);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.kicker::before{content:"";width:30px;height:1px;background:var(--teal-deep)}
h1{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(2.2rem,5.4vw,3.6rem);line-height:1.04;letter-spacing:-.02em}
h1 .accent{font-style:italic;color:var(--teal-deep)}
.sub{font-size:1.06rem;color:var(--ink-soft);max-width:640px;margin-top:18px}

/* panel */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:var(--shadow);margin-top:14px}
.tabs{display:flex;gap:4px;padding:8px 8px 0}
.tab{flex:0 0 auto;font-family:"Spline Sans Mono",monospace;font-size:12.5px;letter-spacing:.02em;border:none;background:transparent;color:var(--muted);padding:10px 16px;border-radius:9px;cursor:pointer;transition:.18s}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--ink);color:var(--paper)}
.tabpane{display:none;padding:22px}
.tabpane.active{display:block}
.lbl{display:block;font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.urlrow{display:flex;gap:10px}
input[type=url]{flex:1;font-family:"Spline Sans Mono",monospace;font-size:14px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input[type=url]:focus{outline:none;border-color:var(--teal)}
.go{font-family:"Spline Sans",sans-serif;font-weight:600;font-size:14px;background:var(--teal);color:#fff;border:none;padding:14px 26px;border-radius:10px;cursor:pointer;transition:.18s;white-space:nowrap}
.go:hover{background:var(--teal-deep)}
.go:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.hint{font-size:.84rem;color:var(--muted);margin-top:12px}
.drop{border:1.5px dashed var(--line);border-radius:12px;padding:34px;text-align:center;cursor:pointer;transition:.18s;background:#faf8f1}
.drop:hover,.drop.over{border-color:var(--teal);background:#f3f8f5}
.drop-inner strong{display:block;font-size:1rem;margin-bottom:4px}
.drop-inner span{font-size:.84rem;color:var(--muted);font-family:"Spline Sans Mono",monospace}
#pane-file .go{margin-top:16px;width:100%}

/* status */
.status{margin-top:24px;padding:18px 22px;border-radius:12px;font-family:"Spline Sans Mono",monospace;font-size:13px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.status.err{border-color:rgba(179,38,30,.4);color:var(--crit)}
.status.warn{border-color:rgba(176,125,24,.5);background:rgba(176,125,24,.07);color:var(--med)}
.status.work{color:var(--teal-deep)}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* report */
.report{margin-top:30px}
.reporthead{display:flex;justify-content:flex-end;margin-bottom:10px}
.closebtn{font-family:"Spline Sans Mono",monospace;font-size:12px;background:var(--card);border:1px solid var(--line);color:var(--ink-soft);padding:8px 16px;border-radius:999px;cursor:pointer;transition:.16s}
.closebtn:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.scorewrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.bigscore{display:flex;gap:20px;align-items:center}
.ring{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Fraunces",serif;font-size:2rem;font-weight:600;color:var(--ink);background:conic-gradient(var(--teal) var(--p,0%),var(--line) 0);position:relative;flex-shrink:0}
.ring::after{content:"";position:absolute;inset:7px;background:var(--card);border-radius:50%}
.ring span{position:relative;z-index:1}
.stitle{font-weight:600;font-size:1.05rem;max-width:420px;line-height:1.3}
.schips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.schips .c{font-family:"Spline Sans Mono",monospace;font-size:11px;background:#faf8f1;border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--ink-soft)}
.counts{display:flex;gap:10px}
.counts .cc{text-align:center;min-width:58px}
.counts .cc .n{font-family:"Fraunces",serif;font-size:1.7rem;font-weight:600;line-height:1}
.counts .cc .l{font-size:10px;font-family:"Spline Sans Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.cc.critical .n{color:var(--crit)} .cc.high .n{color:var(--high)} .cc.medium .n{color:var(--med)} .cc.win .n{color:var(--win)}

.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:26px 0 18px}
.flbl{font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.fbtn{font-family:"Spline Sans Mono",monospace;font-size:12px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);padding:8px 14px;border-radius:999px;cursor:pointer;transition:.18s}
.fbtn:hover{border-color:var(--ink-soft)}
.fbtn.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.ainote{font-family:"Spline Sans Mono",monospace;font-size:12px;color:var(--muted);background:#faf8f1;border:1px dashed var(--line);border-radius:9px;padding:11px 14px;margin-bottom:16px}

.findings{display:flex;flex-direction:column;gap:12px}
.opp{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow);position:relative;overflow:hidden;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.opp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.opp[data-p="critical"]::before{background:var(--crit)}
.opp[data-p="high"]::before{background:var(--high)}
.opp[data-p="medium"]::before{background:var(--med)}
.opp[data-p="win"]::before{background:var(--win)}
.opp.hide{display:none}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.opp-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.opp h4{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;max-width:560px}
.badges{display:flex;gap:6px;flex-shrink:0}
.b{font-family:"Spline Sans Mono",monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:6px;font-weight:600}
.b.p-critical{background:rgba(179,38,30,.1);color:var(--crit)}
.b.p-high{background:rgba(194,65,12,.1);color:var(--high)}
.b.p-medium{background:rgba(176,125,24,.12);color:var(--med)}
.b.p-win{background:rgba(14,138,116,.12);color:var(--teal-deep)}
.b.src{background:transparent;border:1px solid var(--line);color:var(--muted)}
.cat{font-family:"Spline Sans Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-deep);margin-top:13px}
.finding{margin-top:7px;font-size:.96rem;color:var(--ink-soft)}
.action{margin-top:12px;display:flex;gap:10px}
.action .arr{color:var(--teal);font-weight:700;flex-shrink:0}
.action .txt{font-size:.96rem;color:var(--ink)}
.impact{margin-top:10px;font-size:.82rem;font-family:"Spline Sans Mono",monospace;color:var(--muted)}
.impact b{color:var(--teal-deep)}

.exportrow{display:flex;justify-content:space-between;align-items:center;margin-top:26px;flex-wrap:wrap;gap:12px}
.ghost{font-family:"Spline Sans",sans-serif;font-size:13px;font-weight:600;background:transparent;border:1px solid var(--ink);color:var(--ink);padding:11px 20px;border-radius:9px;cursor:pointer;transition:.18s}
.ghost:hover{background:var(--ink);color:var(--paper)}
.gen{font-family:"Spline Sans Mono",monospace;font-size:11px;color:var(--muted)}

.foot{margin-top:60px;padding:34px 0 60px;border-top:1px solid var(--line)}
.foot .wrap{display:flex;flex-direction:column;gap:8px}
.foot span{font-size:.84rem;color:var(--muted)}
.foot b{color:var(--ink-soft)}
.disc{font-style:italic;font-size:.78rem!important}

@media(max-width:680px){
  .scorewrap{flex-direction:column;align-items:flex-start}
  .opp-top{flex-direction:column}
  .urlrow{flex-direction:column}
}

/* ---- history ---- */
.histpanel{margin-top:26px}
.histhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.histtitle{font-family:"Fraunces",serif;font-size:1.3rem;font-weight:600}
.linkbtn{background:none;border:none;color:var(--muted);font-family:"Spline Sans Mono",monospace;font-size:11.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--crit)}
.histlist{display:flex;flex-direction:column;gap:8px}
.histempty{font-family:"Spline Sans Mono",monospace;font-size:12.5px;color:var(--muted);padding:14px 2px}
.histdiag{font-family:"Spline Sans Mono",monospace;font-size:12px;line-height:1.7;color:var(--med);background:rgba(176,125,24,.07);border:1px solid rgba(176,125,24,.35);border-radius:10px;padding:14px 16px}
.histdiag code{background:rgba(21,33,28,.06);padding:1px 6px;border-radius:5px;font-size:11.5px;color:var(--ink)}
.hitem{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:13px 16px;box-shadow:var(--shadow);cursor:pointer;transition:.16s}
.hitem:hover{border-color:var(--ink-soft);transform:translateX(2px)}
.hitem .htype{font-family:"Spline Sans Mono",monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:6px;font-weight:600;flex-shrink:0}
.htype.single{background:rgba(14,138,116,.12);color:var(--teal-deep)}
.htype.compare{background:rgba(176,125,24,.14);color:var(--med)}
.hitem .hlabel{flex:1;min-width:0;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hitem .hmetric{font-family:"Spline Sans Mono",monospace;font-size:12px;font-weight:600;flex-shrink:0}
.hmetric.good{color:var(--teal-deep)} .hmetric.mid{color:var(--med)} .hmetric.bad{color:var(--crit)}
.hitem .hwhen{font-family:"Spline Sans Mono",monospace;font-size:10.5px;color:var(--muted);flex-shrink:0;min-width:96px;text-align:right}
.hitem .hdel{background:none;border:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;flex-shrink:0;padding:2px 4px;border-radius:5px}
.hitem .hdel:hover{color:var(--crit);background:rgba(179,38,30,.08)}

@media(max-width:680px){
  .hitem .hwhen{display:none}
  .hitem .hlabel{font-size:.85rem}
}
.comparegrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cmpcol input[type=url]{width:100%;margin-bottom:10px}
.drop.sm{padding:14px;font-size:.82rem}
.drop.sm span{font-family:"Spline Sans Mono",monospace;color:var(--muted)}
#pane-compare .go{margin-top:18px;width:100%}

.verdict{border-radius:14px;padding:20px 24px;margin-bottom:22px;font-size:1.02rem;font-weight:500;border:1px solid var(--line);box-shadow:var(--shadow)}
.verdict .vtag{font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:8px}
.verdict.better{background:rgba(14,138,116,.08);border-color:rgba(14,138,116,.4)} .verdict.better .vtag{color:var(--teal-deep)}
.verdict.worse{background:rgba(179,38,30,.07);border-color:rgba(179,38,30,.4)} .verdict.worse .vtag{color:var(--crit)}
.verdict.duplicate{background:rgba(176,125,24,.09);border-color:rgba(176,125,24,.45)} .verdict.duplicate .vtag{color:var(--med)}
.verdict.similar{background:var(--card)} .verdict.similar .vtag{color:var(--muted)}

.cmpscores{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.cmpside{display:flex;flex-direction:column;align-items:center;gap:10px}
.cmplabel{font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cmpmid{text-align:center;min-width:150px}
.delta{font-family:"Fraunces",serif;font-size:2rem;font-weight:600}
.delta.up{color:var(--teal-deep)} .delta.down{color:var(--crit)} .delta.flat{color:var(--muted)}
.simbar{margin-top:12px}
.simlabel{font-family:"Spline Sans Mono",monospace;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.simlabel b{color:var(--ink)}
.simtrack{height:7px;background:var(--line);border-radius:99px;overflow:hidden}
.simfill{height:100%;background:var(--med);border-radius:99px;transition:width .6s}

.buckets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.bucket h3.bk{font-family:"Spline Sans Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;padding:10px 0;border-bottom:1.5px solid var(--line);margin-bottom:12px}
.bk.fixed{color:var(--teal-deep)} .bk.remain{color:var(--med)} .bk.intro{color:var(--crit)}
.bk span{background:var(--ink);color:var(--paper);border-radius:99px;min-width:22px;text-align:center;font-size:11px;padding:1px 7px}
.findings.sm .opp{padding:14px 16px}
.findings.sm .opp h4{font-size:.92rem}
.findings.sm .finding,.findings.sm .action,.findings.sm .impact{font-size:.82rem}
.bucket .empty{font-family:"Spline Sans Mono",monospace;font-size:12px;color:var(--muted);padding:14px 4px}

@media(max-width:680px){
  .comparegrid{grid-template-columns:1fr}
  .cmpscores{grid-template-columns:1fr;text-align:center}
  .buckets{grid-template-columns:1fr}
}