/* task-136-95：design 移植件（docs/ui-redesign-w0925/W6W7-public-pages/w6-3-results.html <style id="borrowed">），
   逐字照搬，⛔ 不手改——要改先改來源頁再重抽。只在這一頁載入（⛔ 不整支載 ls-ui.css，README 第 2 節）。 */
/* ── verbatim from static/css/ls-ui.css (tokens) ── */
:root{
--warn-bg:oklch(0.965 0.06 88);--warn-bg2:oklch(0.99 0.025 88);--warn-text:oklch(0.42 0.12 70);--warn-border:oklch(0.88 0.10 87);--warn-accent:oklch(0.74 0.16 85);
--bad-bg:oklch(0.975 0.025 25);--bad-bg2:oklch(0.99 0.010 25);--bad-text:oklch(0.50 0.18 25);--bad-border:oklch(0.88 0.06 25);--bad-accent:oklch(0.62 0.22 25);
--good-bg:oklch(0.97 0.04 155);--good-bg2:oklch(0.99 0.018 155);--good-text:oklch(0.42 0.12 155);--good-text-soft:oklch(0.55 0.10 155);--good-border:oklch(0.86 0.08 155);--good-accent:oklch(0.62 0.18 155);
--code-bg:oklch(0.96 0.06 65);--code-text:oklch(0.45 0.13 50);--code-border:oklch(0.88 0.10 65);
--accent:#D97757;--page:#FAF9F5;--card:#fff;--card-2:#fbfaf8;--card-bd:rgb(226 232 240);--rail:#fff;--ink:#0f172a;--muted:#64748b;--faint:#94a3b8;--hair:#f1f5f9}
html.dark{
--warn-bg:oklch(0.32 0.08 75 / 0.35);--warn-bg2:oklch(0.28 0.04 75 / 0.12);--warn-text:oklch(0.82 0.13 88);--warn-border:oklch(0.45 0.12 80 / 0.5);--warn-accent:oklch(0.74 0.16 85);
--bad-bg:oklch(0.32 0.10 25 / 0.30);--bad-bg2:oklch(0.28 0.06 25 / 0.10);--bad-text:oklch(0.75 0.15 25);--bad-border:oklch(0.45 0.15 25 / 0.5);--bad-accent:oklch(0.65 0.22 25);
--good-bg:oklch(0.30 0.08 155 / 0.28);--good-bg2:oklch(0.26 0.04 155 / 0.10);--good-text:oklch(0.78 0.13 155);--good-text-soft:oklch(0.65 0.10 155);--good-border:oklch(0.42 0.12 155 / 0.5);--good-accent:oklch(0.66 0.16 155);
--code-bg:oklch(0.30 0.08 65 / 0.28);--code-text:oklch(0.80 0.13 70);--code-border:oklch(0.45 0.12 65 / 0.5);
--page:#0b1c30;--card:#0f2438;--card-2:#0d2033;--card-bd:#1e3a52;--rail:#081627;--ink:#f8fafc;--muted:#94a3b8;--faint:#64748b;--hair:#16304a}
/* ── verbatim from static/css/ls-ui.css ── */
.material-symbols-outlined{font-variation-settings:'FILL' 1}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.mono-chip{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:11px;line-height:1;padding:4px 8px;border-radius:9999px;border:1px solid;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.mono-chip .material-symbols-outlined{font-size:12px}
.chip-warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-border)}
.chip-good{background:var(--good-bg);color:var(--good-text);border-color:var(--good-border)}
.chip-bad{background:var(--bad-bg);color:var(--bad-text);border-color:var(--bad-border)}
.card{background:var(--card);border:1px solid var(--card-bd);border-radius:16px}
html.dark .card{box-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 36px -16px rgba(0,0,0,.5)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Work Sans';font-weight:600;font-size:13.5px;padding:10px 17px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .15s ease,border-color .15s ease}
.btn:active{transform:scale(.97)}
.btn .material-symbols-outlined{font-size:17px}
.btn-cta{background:#D97757;color:#FAF9F5;box-shadow:0 1px 3px rgba(180,90,30,.35),0 2px 6px rgba(180,90,30,.2),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-cta:hover{background:#c56a48;color:#FAF9F5}
/* task-136-93（Claude Design 次要鈕 B＋Wayne 9/25「畫面變得很白…白色以外不能用我們本來的淺色底嗎」）：次要鈕底色
   --card → 暖白 --page（既有 token，淺 #FAF9F5／深 #0b1c30）；邊框／字色／hover 不動。 */
.btn-ghost{background:var(--page);border-color:var(--card-bd);color:var(--ink)}
.btn-ghost:hover{border-color:var(--faint);color:var(--ink)}
.btn-sm{font-size:12.5px;padding:8px 13px;border-radius:10px}
.btn-sm .material-symbols-outlined{font-size:15px}
.sum-pills{display:inline-flex;align-items:center;gap:6px}
/* ── verbatim from templates/copycat.html <style> (tokens) ── */
:root {
            --warn-bg: oklch(0.965 0.06 88); --warn-bg2: oklch(0.99 0.025 88);
            --warn-text: oklch(0.42 0.12 70); --warn-border: oklch(0.88 0.10 87);
            --bad-bg: oklch(0.975 0.025 25); --bad-bg2: oklch(0.99 0.010 25);
            --bad-text: oklch(0.50 0.18 25); --bad-border: oklch(0.88 0.06 25);
            --bad-accent: oklch(0.62 0.22 25);
            --good-bg: oklch(0.97 0.04 155); --good-text: oklch(0.42 0.12 155);
            --good-border: oklch(0.86 0.08 155);
            --code-bg: oklch(0.96 0.06 65); --code-text: oklch(0.45 0.13 50);
            --code-border: oklch(0.88 0.10 65); --accent: #D97757;
        }
html.dark {
            --warn-bg: oklch(0.29 0.05 88); --warn-text: oklch(0.86 0.10 88); --warn-border: oklch(0.42 0.07 88);
            --bad-bg: oklch(0.28 0.06 25); --bad-bg2: oklch(0.24 0.04 25);
            --bad-text: oklch(0.84 0.11 25); --bad-border: oklch(0.42 0.08 25);
            --good-bg: oklch(0.28 0.05 155); --good-text: oklch(0.84 0.10 155); --good-border: oklch(0.42 0.07 155);
            --code-bg: oklch(0.30 0.05 65); --code-text: oklch(0.87 0.09 65); --code-border: oklch(0.44 0.07 65);
        }
:root {
            --info-bg: oklch(0.955 0.035 245); --info-bg2: oklch(0.985 0.014 245);
            --info-text: oklch(0.45 0.11 250); --info-border: oklch(0.88 0.055 245);
            --info-accent: oklch(0.60 0.13 250);
            --warn-accent: oklch(0.74 0.16 85); --good-accent: oklch(0.62 0.18 155);
            --good-bg2: oklch(0.99 0.018 155);
        }
html.dark {
            --info-bg: oklch(0.28 0.05 245); --info-bg2: oklch(0.24 0.035 245);
            --info-text: oklch(0.85 0.10 250); --info-border: oklch(0.42 0.07 245);
            --info-accent: oklch(0.70 0.13 250);
            --warn-bg2: oklch(0.24 0.035 88); --good-bg2: oklch(0.24 0.030 155);
            --warn-accent: oklch(0.80 0.15 85); --good-accent: oklch(0.72 0.16 155);
        }
/* ── verbatim from templates/copycat.html <style> ── */
.result-row { background:#fff; border-radius:12px; border:1px solid rgb(226 232 240);
            box-shadow:0 1px 2px rgba(15,23,42,.04), 0 4px 12px -4px rgba(15,23,42,.06); overflow:hidden; }
html.dark .result-row { background:#0f2338; border-color:rgb(30 41 59); box-shadow:none; }
.chip-code { background:var(--code-bg); color:var(--code-text); border-color:var(--code-border); }
.chip-neutral { background:#f1f5f9; color:#64748b; border-color:#e2e8f0; }
html.dark .chip-neutral { background:rgb(30 41 59); color:#94a3b8; border-color:rgb(51 65 85); }
.matched-code { display:inline-block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px;
            padding:3px 8px; border-radius:6px; background:var(--code-bg); color:var(--code-text);
            border:1px solid var(--code-border); width:fit-content; }
.facts li { position:relative; padding-left:14px; }
.facts li:before { content:""; position:absolute; left:2px; top:7px; width:4px; height:4px;
            border-radius:9999px; background:#cbd5e1; }
.ph { background-image:repeating-linear-gradient(135deg,#efe9df 0 6px,#f7f3ec 6px 12px);
            background-color:#f7f3ec; display:flex; align-items:center; justify-content:center; color:#a8a08f;
            font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9px; text-align:center;
            line-height:1.25; padding:4px; overflow:hidden; }
.tim { font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#a8a08f; }
html.dark .tim { color:#94a3b8; }
.zero { display:flex; gap:10px; align-items:flex-start; background:var(--good-bg2);
            border:1px solid var(--good-border); border-radius:12px; padding:12px 14px; color:var(--good-text); }
.zero .tdot { margin-top:6px; opacity:.5; }
.tdot { width:9px; height:9px; border-radius:99px; flex-shrink:0; display:inline-block; }
.tdot.red { background:var(--bad-accent); }
.tdot.yel { background:var(--warn-accent); }
.tdot.gry { background:#cbd5e1; }
.tdot.blu { background:var(--info-accent); }
.tdot.grn { background:var(--good-accent); }
.sq.pk { width:34px; height:34px; border-radius:7px; object-fit:cover; display:block;
            border:1px solid #eee8dd; background:#f7f3ec; flex-shrink:0; }
html.dark .sq.pk { border-color:rgb(30 41 59); background:#0f2338; }
.pane { background:var(--card); border:1px solid var(--card-bd); border-radius:16px; padding:16px;
            display:flex; flex-direction:column; gap:10px; }
html.dark .pane { background:#0f2338; border-color:rgb(30 41 59); }
.drop { border:2px dashed #e2d9cc; background:#fdfbf8; border-radius:12px; padding:20px; display:flex;
            flex-direction:column; align-items:center; gap:6px; text-align:center; cursor:pointer;
            transition:border-color .15s ease, background .15s ease; }
.drop.over { border-color:var(--accent); background:oklch(.98 .02 45); }
.drop.dis { opacity:.55; pointer-events:none; }
html.dark .drop { background:rgb(15 23 42); border-color:rgb(51 65 85); }
.note { display:flex; gap:10px; align-items:flex-start; border:1px solid #e2e8f0; border-radius:11px;
            padding:11px 13px; background:#fdfcfa; }
.note p { font-size:13px; line-height:1.55; }
.note.good { background:var(--good-bg2); border-color:var(--good-border); }
.note.good p { color:var(--good-text); }
html.dark .note { background:rgb(15 23 42); border-color:rgb(30 41 59); }
.spin { width:22px; height:22px; border-radius:99px; border:2.5px solid #f1f5f9;
            border-top-color:var(--accent); animation:sp .9s linear infinite; flex-shrink:0; }
.hhead { display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace;
            font-size:10.5px; color:#94a3b8; padding:10px 16px; background:#fbfaf7;
            border-bottom:1px solid #f1f5f9; flex-wrap:wrap; }
html.dark .hhead { background:rgb(15 23 42); border-color:rgb(30 41 59); }
.tier-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 2px; }
.sq { width:78px; height:78px; border-radius:10px; object-fit:cover; display:block;
            border:1px solid #eee8dd; background:#f7f3ec; }
html.dark .sq { border-color:rgb(30 41 59); background:rgb(30 41 59); }
.sq.hd { width:44px; height:44px; border-radius:9px; flex-shrink:0; }
/* ── verbatim from templates/copycat.html <style> ── */
@media (max-width: 639px) {
            .result-row .cc-card-main { flex-basis: 100%; }
        }
@keyframes sp { to { transform:rotate(360deg); } }