:root{
    --ground:#F4F6FB; --paper:#FFFFFF; --raise:#FBFCFE;
    --ink:#10182A; --ink-soft:#556076; --ink-mute:#8992A6;
    --line:#E5E9F1; --line-strong:#D3DAE7;
    --you:#3B6FE0; --you-soft:#E8EEFC; --you-ink:#2A54B8;
    --rival:#E8663D; --rival-soft:#FCECE5; --rival-ink:#B84A25;
    --good:#1E9A55; --good-soft:#E6F4EC; --warn:#B8770F; --warn-soft:#F7EFDD;
    --shadow:0 1px 2px rgba(16,24,42,.05), 0 10px 30px -20px rgba(16,24,42,.35);
  }
  @media (prefers-color-scheme:dark){
    :root{
      --ground:#0A0F1A; --paper:#121A28; --raise:#16202F;
      --ink:#E9EEF8; --ink-soft:#9BA6BA; --ink-mute:#6C7890;
      --line:#222D40; --line-strong:#2E3B52;
      --you:#78A0FF; --you-soft:#15233F; --you-ink:#A9C4FF;
      --rival:#FF8A5C; --rival-soft:#331D14; --rival-ink:#FFB394;
      --good:#3FBE77; --good-soft:#123023; --warn:#E0A346; --warn-soft:#2E2412;
      --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 32px -20px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0A0F1A; --paper:#121A28; --raise:#16202F;
    --ink:#E9EEF8; --ink-soft:#9BA6BA; --ink-mute:#6C7890;
    --line:#222D40; --line-strong:#2E3B52;
    --you:#78A0FF; --you-soft:#15233F; --you-ink:#A9C4FF;
    --rival:#FF8A5C; --rival-soft:#331D14; --rival-ink:#FFB394;
    --good:#3FBE77; --good-soft:#123023; --warn:#E0A346; --warn-soft:#2E2412;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 32px -20px rgba(0,0,0,.8);
  }
  :root[data-theme="light"]{
    --ground:#F4F6FB; --paper:#FFFFFF; --raise:#FBFCFE;
    --ink:#10182A; --ink-soft:#556076; --ink-mute:#8992A6;
    --line:#E5E9F1; --line-strong:#D3DAE7;
    --you:#3B6FE0; --you-soft:#E8EEFC; --you-ink:#2A54B8;
    --rival:#E8663D; --rival-soft:#FCECE5; --rival-ink:#B84A25;
    --good:#1E9A55; --good-soft:#E6F4EC; --warn:#B8770F; --warn-soft:#F7EFDD;
    --shadow:0 1px 2px rgba(16,24,42,.05), 0 10px 30px -20px rgba(16,24,42,.35);
  }

  *{box-sizing:border-box;}
  body{margin:0;}
  .app{
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
    background:var(--ground); color:var(--ink); font-family:var(--sans);
    line-height:1.5; -webkit-font-smoothing:antialiased;
    padding:clamp(18px,4vw,40px) clamp(14px,4vw,36px);
  }
  .wrap{max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:34px;}
  .mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}

  .eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--you-ink); display:flex; align-items:center; gap:9px;}
  .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px var(--good-soft);}
  h1{font-size:clamp(24px,3.6vw,34px); line-height:1.12; letter-spacing:-.02em; font-weight:800; margin:12px 0 10px; text-wrap:balance; max-width:24ch;}
  .sub{color:var(--ink-soft); font-size:14.5px; max-width:68ch; margin:0;}
  .sub b{color:var(--ink); font-weight:600;}

  h2{font-size:12px; font-family:var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 15px; font-weight:600;}
  section{display:flex; flex-direction:column;}
  .card{background:var(--paper); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow);}

  .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:14px;}
  .kpi{padding:18px 20px; display:flex; flex-direction:column; gap:5px;}
  .kpi .lab{font-size:12px; color:var(--ink-soft); font-weight:500;}
  .kpi .val{font-family:var(--mono); font-size:30px; font-weight:600; letter-spacing:-.01em; line-height:1;}
  .kpi .val.you{color:var(--you);} .kpi .val.rival{color:var(--rival);}
  .kpi .foot{font-size:11.5px; color:var(--ink-mute); display:flex; align-items:center; gap:6px;}
  .tag{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11px; padding:2px 7px; border-radius:999px; font-weight:600;}
  .tag.good{background:var(--good-soft); color:var(--good);}
  .tag.warn{background:var(--warn-soft); color:var(--warn);}
  .tag.rival{background:var(--rival-soft); color:var(--rival-ink);}

  .chart-card{padding:22px clamp(16px,3vw,26px) 20px;}
  .legend{display:flex; gap:18px; margin-bottom:18px; flex-wrap:wrap;}
  .lg{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft);}
  .lg .sw{width:11px; height:11px; border-radius:3px;}
  .plot{position:relative; height:230px; display:flex; align-items:flex-end; gap:clamp(10px,4vw,40px); padding:0 6px; border-bottom:1.5px solid var(--line-strong);}
  .grid-l{position:absolute; left:0; right:0; height:1px; background:var(--line);}
  .grid-t{position:absolute; left:-2px; transform:translateY(-50%); font-family:var(--mono); font-size:10px; color:var(--ink-mute); background:var(--paper); padding-right:4px;}
  .grp{flex:1; display:flex; align-items:flex-end; justify-content:center; gap:9px; height:100%; position:relative;}
  .bar{width:clamp(26px,7vw,46px); border-radius:5px 5px 0 0; position:relative; min-height:3px; transition:height .9s cubic-bezier(.2,.7,.2,1); cursor:default;}
  .bar.you{background:var(--you);} .bar.rival{background:var(--rival);}
  .bar.zero{background:repeating-linear-gradient(45deg,var(--line),var(--line) 4px,transparent 4px,transparent 8px); box-shadow:inset 0 0 0 1px var(--line-strong);}
  .bar .vlab{position:absolute; top:-19px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap;}
  .xlabs{display:flex; gap:clamp(10px,4vw,40px); padding:10px 6px 0;}
  .xlab{flex:1; text-align:center; display:flex; flex-direction:column; gap:2px;}
  .xlab .code{font-family:var(--mono); font-weight:700; font-size:13px;}
  .xlab .name{font-size:11.5px; color:var(--ink-mute);}
  .cap{font-size:13px; color:var(--ink-soft); margin-top:16px; line-height:1.6; max-width:76ch;}
  .cap b{color:var(--ink); font-weight:600;} .cap .u{color:var(--you-ink); font-weight:600;} .cap .r{color:var(--rival-ink); font-weight:600;}

  /* prompt heat table */
  .heat-card{padding:20px clamp(14px,3vw,24px);}
  .heat{width:100%; border-collapse:collapse;}
  .heat th,.heat td{padding:8px 6px; text-align:center;}
  .heat thead th{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; border-bottom:1px solid var(--line-strong);}
  .heat th.q{text-align:left; font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:13.5px; color:var(--ink); font-weight:500; white-space:nowrap;}
  .heat tbody tr{border-bottom:1px solid var(--line);} .heat tbody tr:last-child{border-bottom:none;}
  .hc{display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:24px; border-radius:6px; font-family:var(--mono); font-size:12px; font-weight:600;}

  .mtx-card{padding:20px clamp(14px,3vw,24px);}
  .mtx{width:100%; border-collapse:collapse;}
  .mtx th,.mtx td{padding:9px 6px; text-align:center;}
  .mtx thead th{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; border-bottom:1px solid var(--line-strong);}
  .mtx th.brand{text-align:left; font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:13.5px; color:var(--ink); font-weight:500; white-space:nowrap;}
  .mtx tbody tr{border-bottom:1px solid var(--line);} .mtx tbody tr:last-child{border-bottom:none;}
  .mtx tr.you-row{background:var(--you-soft);}
  .mtx tr.you-row th.brand{color:var(--you-ink); font-weight:700;}
  .cell{display:inline-block; width:13px; height:13px; border-radius:50%; cursor:default; vertical-align:middle;}
  .cell.on{background:var(--ink-mute);} .cell.you{background:var(--you);} .cell.off{background:transparent; box-shadow:inset 0 0 0 1.5px var(--line-strong);}
  .fp{font-family:var(--mono); font-weight:700; font-size:14px;} .fp.max{color:var(--you);}

  .shelf-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px;}
  .shelf{padding:0; overflow:hidden; display:flex; flex-direction:column;}
  .shelf-hd{padding:14px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .shelf-hd .m{display:flex; align-items:center; gap:9px;}
  .shelf-hd .code{font-family:var(--mono); font-weight:700; font-size:13px; background:var(--raise); border:1px solid var(--line); padding:2px 8px; border-radius:6px;}
  .shelf-hd .cur{font-size:12px; color:var(--ink-mute); font-family:var(--mono);}
  .shelf-hd .sos{font-family:var(--mono); font-size:12px; font-weight:600;}
  .shelf-hd .sos.you{color:var(--you);} .shelf-hd .sos.absent{color:var(--ink-mute);}
  .prod{padding:11px 16px; border-bottom:1px solid var(--line); display:flex; gap:11px; align-items:baseline;}
  .prod:last-child{border-bottom:none;} .prod.mine{background:var(--you-soft);}
  .rank{font-family:var(--mono); font-size:11px; color:var(--ink-mute); width:14px; flex:none;}
  .prod .pinfo{flex:1; min-width:0;}
  .prod .pname{font-size:13.5px; font-weight:500; line-height:1.3;}
  .prod.mine .pname{color:var(--you-ink); font-weight:700;}
  .youdot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--you); margin-left:5px; vertical-align:middle;}
  .prod .pmeta{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap;}
  .prod .price{color:var(--ink); font-weight:600;} .prod .ret{color:var(--ink-mute);}
  .shelf-empty{padding:16px; font-size:12.5px; color:var(--ink-mute); line-height:1.5;}

  .src-card{padding:20px clamp(14px,3vw,24px); display:flex; flex-direction:column; gap:14px;}
  .src-row{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--line);}
  .src-row:last-child{border-bottom:none; padding-bottom:0;}
  .src-row .mk{font-family:var(--mono); font-weight:700; font-size:12px; width:34px; flex:none;}
  .chip{display:inline-block; font-size:12px; padding:3px 9px; border-radius:7px; background:var(--raise); border:1px solid var(--line); color:var(--ink-soft); margin:0 4px 4px 0;}
  .chip.ret{border-color:var(--you-soft); color:var(--you-ink); background:var(--you-soft);}

  .insight{background:linear-gradient(180deg,var(--you-soft),transparent); border:1px solid var(--line-strong); border-radius:15px; padding:clamp(20px,3vw,28px);}
  .insight h2{color:var(--you-ink);}
  .insight p{margin:0; font-size:15.5px; line-height:1.65; color:var(--ink); max-width:74ch;}
  .insight b{font-weight:700;} .insight .u{color:var(--you-ink);} .insight .r{color:var(--rival-ink);}

  .foot{font-size:12px; color:var(--ink-mute); line-height:1.6; border-top:1px solid var(--line); padding-top:18px;}
  .foot b{color:var(--ink-soft);}

  #tip{position:fixed; z-index:50; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .12s;
    background:var(--ink); color:var(--ground); font-family:var(--mono); font-size:12px; padding:7px 10px; border-radius:8px; box-shadow:var(--shadow); max-width:260px; line-height:1.45; white-space:pre-line;}
  #tip.on{opacity:1; transform:translateY(0);}

  @media (max-width:520px){ .plot{gap:10px;} .xlabs{gap:10px;} }
  @media (prefers-reduced-motion:reduce){ .bar{transition:none;} }