/* task-136-97b：design 移植件（docs/ui-redesign-w0925/W6W7-public-pages/w7-6-signin-prompt.html <style id="borrowed"／"new">），
   逐字照搬，⛔ 不手改——要改先改來源頁再重抽。只在這一頁載入（⛔ 不整支載 ls-ui.css，README 第 2 節）。 */
/* ── verbatim from static/css/ls-ui.css (tokens, for fb-* modal shell) ── */
: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 templates/appeal.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);
            --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-border: oklch(0.86 0.08 155);
            --good-accent: oklch(0.66 0.16 155);
            --accent:      #D97757;
            --accent-hover:#c56a48;
            --color-border-tertiary: rgb(226 232 240);
            --color-text-tertiary:   rgb(148 163 184);
        }
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-border: oklch(0.42 0.12 155 / 0.5);
            --good-accent: oklch(0.66 0.16 155);
            --color-border-tertiary: rgb(51 65 85);
            --color-text-tertiary:   rgb(100 116 139);
        }
/* ── verbatim from templates/appeal.html <style> ── */
.appeal-card {
            background: #fff;
            border-radius: 16px;
            border: 1px solid rgb(226 232 240);
            box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 10px 30px -12px rgba(15,23,42,0.10);
        }
html.dark .appeal-card {
            background: rgb(15 23 42);
            border-color: rgb(30 41 59);
            box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 14px 36px -14px rgba(0,0,0,0.5);
        }
.type-badge {
            display: inline-flex; align-items: center; gap: 6px;
            font-family: 'JetBrains Mono', ui-monospace, monospace;
            font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
            padding: 6px 12px; border-radius: 8px; border: 1px solid;
        }
.type-badge.creativity { background: var(--good-bg); color: var(--good-text); border-color: var(--good-border); }
.type-badge.dmca       { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.type-badge.trademark  { background: var(--bad-bg);  color: var(--bad-text);  border-color: var(--bad-border); }
.detection-strip {
            display: flex; align-items: center; gap: 10px; padding: 14px 16px;
            border-radius: 12px; background: rgb(248 250 252); border: 1px solid rgb(226 232 240);
        }
html.dark .detection-strip { background: rgb(15 23 42 / 0.6); border-color: rgb(30 41 59); }
.confidence-meter {
            display: inline-flex; align-items: center; gap: 6px;
            font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600;
            color: rgb(100 116 139);
        }
.confidence-bar {
            width: 36px; height: 4px; background: rgb(226 232 240);
            border-radius: 2px; overflow: hidden; position: relative;
        }
html.dark .confidence-bar { background: rgb(51 65 85); }
.confidence-bar::after {
            content: ''; position: absolute; inset: 0;
            width: var(--c, 0%); background: var(--bar-color, var(--good-accent));
            transition: width 0.4s ease, background 0.3s ease;
        }
.spinner {
            width: 20px; height: 20px;
            border: 2px solid rgb(148 163 184 / 0.3); border-top-color: var(--accent);
            border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0;
        }
.btn-primary {
            background-color: var(--accent); color: #FAF9F5;
            box-shadow: 0 1px 3px rgba(180,90,30,0.35), 0 2px 6px rgba(180,90,30,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
        }
.btn-primary:hover:not(:disabled) { background-color: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
            display: inline-flex; align-items: center; gap: 7px;
            font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 13px;
            padding: 8px 14px; border-radius: 9px; background: #fff;
            border: 1px solid rgb(226 232 240); color: rgb(51 65 85); transition: all 140ms ease; cursor: pointer;
        }
.btn-secondary:hover { border-color: rgb(148 163 184); color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
html.dark .btn-secondary { background: rgb(15 23 42); border-color: rgb(51 65 85); color: rgb(203 213 225); }
html.dark .btn-secondary:hover { border-color: rgb(100 116 139); color: #f8fafc; }
.btn-secondary .material-symbols-outlined { font-size: 15px; }
.field-input, .field-textarea, .field-select {
            background: rgb(248 250 252); border: 1px solid rgb(226 232 240);
            border-radius: 10px; padding: 10px 14px; font-size: 14px;
            color: rgb(15 23 42); transition: all 140ms ease; outline: none; width: 100%;
        }
.field-input::placeholder, .field-textarea::placeholder { color: rgb(148 163 184); }
.field-input:focus, .field-textarea:focus, .field-select:focus {
            border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(217,119,87,0.10);
        }
html.dark .field-input, html.dark .field-textarea, html.dark .field-select {
            background: rgb(2 6 23); border-color: rgb(51 65 85); color: rgb(248 250 252);
        }
html.dark .field-input::placeholder, html.dark .field-textarea::placeholder { color: rgb(100 116 139); }
html.dark .field-input:focus, html.dark .field-textarea:focus, html.dark .field-select:focus {
            border-color: var(--accent); background: rgb(2 6 23); box-shadow: 0 0 0 4px rgba(217,119,87,0.18);
        }
.field-textarea { resize: vertical; line-height: 1.55; }
.field-textarea.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }
.field-label {
            display: flex; align-items: center; justify-content: space-between;
            font-family: 'Work Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600;
            color: rgb(71 85 105); margin-bottom: 6px;
        }
html.dark .field-label { color: rgb(203 213 225); }
.field-required { color: rgb(239 68 68); font-weight: 400; margin-left: 2px; }
.field-optional { font-weight: 400; font-size: 12px; color: rgb(148 163 184); }
.field-counter { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: rgb(148 163 184); }
.field-counter.over { color: rgb(239 68 68); }
.field-hint { font-size: 12px; color: rgb(148 163 184); margin-top: 6px; }
html.dark .field-hint { color: rgb(100 116 139); }
.checklist-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; font-size: 13.5px; line-height: 1.55; color: rgb(71 85 105); }
html.dark .checklist-item { color: rgb(203 213 225); }
.checklist-item + .checklist-item { border-top: 1px dashed rgb(226 232 240); }
html.dark .checklist-item + .checklist-item { border-top-color: rgb(51 65 85); }
.checklist-num {
            flex-shrink: 0; width: 22px; height: 22px; border-radius: 9999px;
            background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center;
            font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; margin-top: 1px;
        }
/* ── verbatim from templates/appeal.html <style> ── */
@keyframes spin { to { transform: rotate(360deg); } }
/* ── verbatim from static/css/ls-ui.css ── */
.material-symbols-outlined{font-variation-settings:'FILL' 1}
.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)}
.fb-backdrop{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.45);backdrop-filter:blur(6px);padding:16px}
.fb-backdrop.hidden{display:none}
.fb-card{width:100%;max-width:420px;background:var(--card);border-radius:18px;border:1px solid var(--card-bd);overflow:hidden;box-shadow:0 24px 60px -16px rgba(0,0,0,.6)}
.fb-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--hair)}
.fb-icon{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#D97757 0%,#e89572 100%);color:#fff;flex-shrink:0}
.fb-title{font-family:'Work Sans';font-weight:600;font-size:15px;color:var(--ink)}
.fb-sub{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.fb-body{padding:16px 20px 18px;display:flex;flex-direction:column;gap:8px}
.fb-actions{display:flex;align-items:center;gap:10px;padding:12px 20px 16px;background:var(--card-2);border-top:1px solid var(--hair)}
/* ── verbatim from templates/copycat.html <style> ── */
.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); }
/* ── --code-* tokens copied from templates/copycat.html ── */
:root { --code-bg: oklch(0.96 0.06 65); --code-text: oklch(0.45 0.13 50); --code-border: oklch(0.88 0.10 65); }
html.dark { --code-bg: oklch(0.30 0.05 65); --code-text: oklch(0.87 0.09 65); --code-border: oklch(0.44 0.07 65); }
/* ── NEW (this design only) ──
   W7：NONE（不是下架通知）的徽章。形狀沿用 appeal.html 的 .type-badge，只多一個中性色的變體；
   三型各自的色（creativity／dmca／trademark）不動。 */
.type-badge.none { background: rgb(241 245 249); color: rgb(71 85 105); border-color: rgb(226 232 240); }
html.dark .type-badge.none { background: rgb(30 41 59); color: rgb(203 213 225); border-color: rgb(51 65 85); }