/* ─────────────────────────────────────────────────────────────
           DRUGPilot — Obsidian 情報終端
           近黑為底，邊框是髮絲，光是點綴。主 CTA 用白底黑字。
           ───────────────────────────────────────────────────────────── */
        :root {
            color-scheme: dark;

            /* 表面：卡片是玻璃，不是實色塊 */
            --canvas:       #0a0b0d;
            --paper:        rgba(255, 255, 255, 0.035);
            --canvas-soft:  rgba(255, 255, 255, 0.02);
            --canvas-sink:  rgba(255, 255, 255, 0.045);

            /* 文字（永遠不是純白） */
            --ink:          #f4f5f6;
            --ink-soft:     #a9afb6;
            --ink-muted:    #7e858d;

            /* 邊框：髮絲 */
            --line:         rgba(255, 255, 255, 0.09);
            --line-soft:    rgba(255, 255, 255, 0.055);

            /* 點綴色：連結與焦點用，主 CTA 是白的 */
            --accent:        #6fa8ff;
            --accent-active: #93c2ff;
            --accent-tint:   rgba(111, 168, 255, 0.12);
            --accent-text:   #7db3ff;

            /* 語意暗色藥丸（專利／獨佔／參考藥） */
            --tint-green:  rgba(63, 185, 116, 0.13);  --text-green:  #86e0a8;
            --tint-amber:  rgba(228, 179, 74, 0.12);  --text-amber:  #e8c87e;
            --tint-blue:   rgba(96, 165, 250, 0.13);  --text-blue:   #93c2ff;
            --tint-red:    rgba(240, 116, 120, 0.12); --text-red:    #f1979b;

            /* 陰影：深色陰影 + 內側 1px 高光，卡片像有厚度的玻璃 */
            --shadow-card:
                inset 0 1px 0 rgba(255,255,255,0.06),
                0 8px 24px rgba(0,0,0,0.35),
                0 2px 8px rgba(0,0,0,0.28);
            --shadow-lift:
                inset 0 1px 0 rgba(255,255,255,0.08),
                0 16px 44px rgba(0,0,0,0.5),
                0 4px 14px rgba(0,0,0,0.4);

            /* 主題化的元件 token（淺色主題會整組覆寫） */
            --card-face: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.022));
            --line-strong: rgba(255, 255, 255, 0.16);
            --header-glass: rgba(10, 11, 13, 0.72);
            --cta-bg: #f2f3f4;  --cta-bg-hover: #ffffff;  --cta-ink: #0a0b0d;
            --cta-glow: 0 0 24px rgba(255, 255, 255, 0.12);
            --range-accent: #f2f3f4;
            --focus-border: rgba(111, 168, 255, 0.6);
            --focus-ring: rgba(111, 168, 255, 0.14);
            --selection: rgba(111, 168, 255, 0.32);
            --grain-opacity: 0.028;
            --glow-1: rgba(111, 168, 255, 0.07);
            --glow-2: rgba(63, 185, 116, 0.045);
            --empty-glow: rgba(111, 168, 255, 0.08);
            --chip-glow: 0 0 22px rgba(111, 168, 255, 0.10);
            --seg-on-bg: rgba(255, 255, 255, 0.10);
            --seg-on-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
            --scroll-thumb: rgba(255, 255, 255, 0.14);
            --scroll-thumb-hover: rgba(255, 255, 255, 0.26);

            /* Tailwind 色階（RGB 三聯，供 rgb(var()/alpha) 用） */
            --c-slate-50: 247 248 249;  --c-slate-100: 247 248 249;  --c-slate-200: 241 242 244;  --c-slate-300: 231 233 235;  --c-slate-400: 169 175 182;  --c-slate-500: 150 156 166;  --c-slate-600: 126 133 141;  --c-slate-700: 38 40 45;  --c-slate-800: 29 31 35;  --c-slate-900: 23 24 27;  --c-slate-950: 16 17 20;
            --c-emerald-100: 217 245 228;  --c-emerald-200: 174 233 200;  --c-emerald-300: 134 224 168;  --c-emerald-400: 111 208 150;  --c-emerald-500: 63 185 116;  --c-emerald-700: 44 94 65;  --c-emerald-800: 20 41 29;  --c-emerald-900: 16 35 26;
            --c-amber-100: 247 234 208;  --c-amber-200: 240 218 166;  --c-amber-300: 232 200 126;  --c-amber-400: 223 184 99;  --c-amber-500: 211 164 69;  --c-amber-700: 107 84 38;  --c-amber-800: 46 38 23;  --c-amber-900: 41 33 18;
            --c-blue-100: 232 241 255;  --c-blue-200: 201 223 255;  --c-blue-300: 147 194 255;  --c-blue-400: 125 179 255;  --c-blue-500: 62 130 247;  --c-blue-600: 62 130 247;  --c-blue-700: 36 64 107;  --c-blue-800: 22 41 74;  --c-blue-900: 18 32 58;
            --c-cyan-100: 232 241 255;  --c-cyan-200: 201 223 255;  --c-cyan-300: 147 194 255;  --c-cyan-400: 125 179 255;  --c-cyan-500: 111 168 255;  --c-cyan-700: 28 51 80;  --c-cyan-800: 21 40 65;  --c-cyan-900: 16 30 49;
            --c-purple-100: 239 234 253;  --c-purple-200: 217 206 247;  --c-purple-300: 183 168 232;  --c-purple-400: 168 150 224;  --c-purple-500: 146 128 212;  --c-purple-700: 42 36 64;  --c-purple-800: 34 29 51;  --c-purple-900: 27 23 41;
            --c-pink-100: 253 227 228;  --c-pink-200: 248 191 194;  --c-pink-300: 241 151 155;  --c-pink-400: 237 131 136;  --c-pink-500: 224 108 113;  --c-pink-700: 88 39 43;  --c-pink-800: 53 25 28;  --c-pink-900: 42 20 23;
            --c-rose-100: 253 227 228;  --c-rose-200: 248 191 194;  --c-rose-300: 241 151 155;  --c-rose-400: 237 131 136;  --c-rose-500: 224 108 113;  --c-rose-700: 88 39 43;  --c-rose-900: 42 20 23;

            --r-micro: 6px;  --r-sm: 9px;  --r-md: 13px;  --r-lg: 18px;
            --ease: cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* ── 日間模式：同一套設計語言的暖白版 ─────────────────── */
        html[data-theme="light"] {
            color-scheme: light;

            --canvas:       #f7f6f4;
            --paper:        #ffffff;
            --canvas-soft:  #fbfbfa;
            --canvas-sink:  #f2f1ef;

            --ink:          rgba(0, 0, 0, 0.95);
            --ink-soft:     #615d59;
            --ink-muted:    #6e6862;   /* #7a746e 在 --canvas 上只有 4.09:1，壓深到 5.1:1 才過 AA */

            --line:         rgba(0, 0, 0, 0.10);
            --line-soft:    rgba(0, 0, 0, 0.06);

            --accent:        #0b66e4;
            --accent-active: #0952b8;
            --accent-tint:   rgba(11, 102, 228, 0.08);
            --accent-text:   #0b66e4;

            --tint-green:  #edf3ec;  --text-green:  #346538;
            --tint-amber:  #fbf3db;  --text-amber:  #956400;
            --tint-blue:   #e1f3fe;  --text-blue:   #1f6c9f;
            --tint-red:    #fdebec;  --text-red:    #9f2f2d;

            --shadow-card:
                rgba(0,0,0,0.04) 0 4px 18px,
                rgba(0,0,0,0.027) 0 2px 8px,
                rgba(0,0,0,0.02) 0 1px 3px;
            --shadow-lift:
                rgba(0,0,0,0.05) 0 10px 28px,
                rgba(0,0,0,0.03) 0 4px 12px;

            --card-face: #ffffff;
            --line-strong: rgba(0, 0, 0, 0.18);
            --header-glass: rgba(255, 255, 255, 0.82);
            --cta-bg: #16171a;  --cta-bg-hover: #000000;  --cta-ink: #ffffff;
            --cta-glow: 0 0 0 rgba(0, 0, 0, 0);
            --range-accent: #0b66e4;
            --focus-border: rgba(11, 102, 228, 0.65);
            --focus-ring: rgba(11, 102, 228, 0.14);
            --selection: rgba(11, 102, 228, 0.22);
            --grain-opacity: 0.03;
            --glow-1: rgba(11, 102, 228, 0.05);
            --glow-2: rgba(63, 185, 116, 0.04);
            --empty-glow: rgba(11, 102, 228, 0.06);
            --chip-glow: 0 0 0 rgba(0, 0, 0, 0);
            --seg-on-bg: #ffffff;
            --seg-on-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            --scroll-thumb: rgba(0, 0, 0, 0.16);
            --scroll-thumb-hover: rgba(0, 0, 0, 0.28);

            --c-slate-50: 10 10 10;  --c-slate-100: 15 15 14;  --c-slate-200: 22 21 20;  --c-slate-300: 31 30 29;  --c-slate-400: 95 91 86;  --c-slate-500: 111 106 100;  --c-slate-600: 138 132 126;  --c-slate-700: 230 228 225;  --c-slate-800: 242 241 239;  --c-slate-900: 247 246 244;  --c-slate-950: 255 255 255;
            --c-emerald-100: 31 61 34;  --c-emerald-200: 42 82 48;  --c-emerald-300: 52 101 56;  --c-emerald-400: 61 116 66;  --c-emerald-500: 74 130 80;  --c-emerald-700: 207 224 208;  --c-emerald-800: 227 238 228;  --c-emerald-900: 237 243 236;
            --c-amber-100: 92 62 0;  --c-amber-200: 122 82 0;  --c-amber-300: 149 100 0;  --c-amber-400: 138 92 0;  --c-amber-500: 168 119 24;  --c-amber-700: 236 220 176;  --c-amber-800: 247 238 207;  --c-amber-900: 251 243 219;
            --c-blue-100: 18 63 93;  --c-blue-200: 24 86 126;  --c-blue-300: 31 108 159;  --c-blue-400: 28 96 143;  --c-blue-500: 11 102 228;  --c-blue-600: 11 102 228;  --c-blue-700: 199 228 247;  --c-blue-800: 217 238 252;  --c-blue-900: 225 243 254;
            --c-cyan-100: 18 63 93;  --c-cyan-200: 24 86 126;  --c-cyan-300: 31 108 159;  --c-cyan-400: 28 96 143;  --c-cyan-500: 11 102 228;  --c-cyan-700: 199 228 247;  --c-cyan-800: 220 240 251;  --c-cyan-900: 232 245 254;
            --c-purple-100: 51 42 69;  --c-purple-200: 69 56 98;  --c-purple-300: 91 74 122;  --c-purple-400: 82 68 110;  --c-purple-500: 107 90 138;  --c-purple-700: 221 214 232;  --c-purple-800: 235 230 242;  --c-purple-900: 242 239 247;
            --c-pink-100: 95 28 27;  --c-pink-200: 125 37 35;  --c-pink-300: 159 47 45;  --c-pink-400: 143 42 40;  --c-pink-500: 184 65 62;  --c-pink-700: 243 211 212;  --c-pink-800: 250 223 224;  --c-pink-900: 253 235 236;
            --c-rose-100: 95 28 27;  --c-rose-200: 125 37 35;  --c-rose-300: 159 47 45;  --c-rose-400: 143 42 40;  --c-rose-500: 184 65 62;  --c-rose-700: 243 211 212;  --c-rose-900: 253 235 236;
        }
        html[data-theme="light"] .report-shell {
            background: var(--line) !important;
        }
        html[data-theme="light"] .card-picked {
            border-color: rgba(52, 101, 56, 0.35) !important;
            background: #eff8f0 !important;
            box-shadow: var(--shadow-card) !important;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            background:
                radial-gradient(56rem 34rem at 72% -8%, var(--glow-1), transparent 65%),
                radial-gradient(44rem 30rem at -6% 42%, var(--glow-2), transparent 60%),
                var(--canvas);
            background-attachment: fixed;
            color: var(--ink);
            font-family: 'Geist', 'SF Pro Text', system-ui, sans-serif;
            font-size: 16px;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            font-variant-numeric: lining-nums;
        }
        /* 膠片顆粒：壓在最上層打散數位平面感，2.5% 幾乎不可見但質感差很多 */
        body::after {
            content: ""; position: fixed; inset: 0; z-index: 90;
            pointer-events: none; opacity: var(--grain-opacity);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
        }
        ::selection { background: var(--selection); }
        button, input, select, textarea { font: inherit; color: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

        /* 數字一律等寬對齊——這是一個看資料的工具 */
        .font-mono, table, .metric, .badge-row, kbd,
        [class*="font-mono"] { font-variant-numeric: tabular-nums; }

        /* ── Header ─────────────────────────────────────────────── */
        .app-header {
            position: sticky; top: 0; z-index: 40;
            height: 78px;
            background: var(--header-glass);
            backdrop-filter: saturate(160%) blur(16px);
            border-bottom: 1px solid var(--line);
        }
        .header-inner {
            max-width: 1600px; height: 100%; margin: 0 auto;
            padding: 0 28px;
            display: flex; align-items: center; justify-content: space-between; gap: 24px;
        }
        .brand-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .brand-mark {
            width: 40px; height: 40px; flex: none;
            display: grid; place-items: center;
            border-radius: var(--r-sm);
            background: #ffffff;
            border: 1px solid var(--line);
            overflow: hidden;
        }
        .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
        .brand-name {
            font-size: 19px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1;
        }
        .brand-name .brand-drug  { color: var(--ink); }
        .brand-name .brand-pilot { color: var(--accent); }
        /* 產品切換：兩個產品掛在同一個網域下（/drugpilot 與 /km），
           這條列在兩邊都長一樣。KM_DRUG 那份在它的 web/styles.css
           的 .product-switch，改樣式要一起改。 */
        .product-switch {
            display: flex; flex: none; gap: 2px;
            margin-left: 4px; padding: 3px;
            border-radius: 999px;
            background: var(--canvas-sink);
            box-shadow: inset 0 0 0 1px var(--line);
        }
        .product-switch a {
            padding: 5px 11px;
            border-radius: 999px;
            color: var(--ink-muted);
            font-size: 12px; font-weight: 600; white-space: nowrap;
            text-decoration: none;
            transition: color .15s var(--ease), background .15s var(--ease);
        }
        .product-switch a:hover { color: var(--ink); }
        .product-switch a[aria-current="page"] {
            color: var(--ink);
            background: var(--seg-on-bg);
            box-shadow: var(--seg-on-shadow);
        }
        .product-switch a:focus-visible {
            outline: 2px solid var(--focus-border); outline-offset: 2px;
        }
        .brand-subtitle {
            margin-top: 2px;
            font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
            text-transform: uppercase; color: var(--ink-soft);
        }
        .header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
        .header-badge {
            display: inline-flex; align-items: center; gap: 8px;
            min-height: 34px; padding: 0 12px;
            border: 1px solid var(--line); border-radius: var(--r-micro);
            background: var(--paper);
            font-size: 12px; font-weight: 500; color: var(--ink-soft);
            white-space: nowrap;
        }
        .header-badge strong { font-size: 12px; font-weight: 600; color: var(--ink); }
        .status-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: #4ade80; flex: none;
            box-shadow: 0 0 8px rgba(74, 222, 128, 0.55);
        }

        .theme-toggle {
            width: 34px; height: 34px; flex: none;
            display: grid; place-items: center;
            border: 1px solid var(--line); border-radius: var(--r-micro);
            background: var(--paper); color: var(--ink-soft);
            transition: color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
        }
        .theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
        .theme-toggle:active { transform: scale(.94); }
        .theme-toggle svg { width: 16px; height: 16px; }

        /* 登入表單 */
        .auth-form { display: flex; align-items: center; gap: 8px; }
        .auth-input {
            height: 34px; padding: 0 10px;
            border: 1px solid var(--line); border-radius: var(--r-micro);
            background: var(--paper); font-size: 13px;
            transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
        }
        .auth-input::placeholder { color: var(--ink-muted); }
        .auth-input:focus { outline: none; border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring); }
        .auth-input.email { width: 168px; }
        .auth-input.pass  { width: 124px; }
        .btn-primary {
            height: 34px; padding: 0 14px;
            border: 0; border-radius: var(--r-micro);
            background: var(--cta-bg); color: var(--cta-ink);
            font-size: 13px; font-weight: 600;
            box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
            transition: background .18s var(--ease), transform .12s var(--ease);
        }
        .btn-primary:hover:not(:disabled) { background: var(--cta-bg-hover); }
        .btn-primary:active:not(:disabled) { transform: scale(.97); }
        .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
        .btn-link {
            border: 0; background: none; padding: 0 2px;
            font-size: 12px; font-weight: 500; color: var(--ink-soft);
            transition: color .18s var(--ease);
        }
        .btn-link:hover { color: var(--text-red); text-decoration: underline; }

        .auth-or {
            font-size: 11px; color: var(--ink-muted); padding: 0 2px; user-select: none;
        }
        .btn-google {
            display: inline-flex; align-items: center; gap: 7px;
            height: 34px; padding: 0 12px;
            border: 1px solid var(--line); border-radius: var(--r-micro);
            background: var(--paper); color: var(--ink);
            font-size: 13px; font-weight: 500;
            transition: border-color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
        }
        .btn-google:hover:not(:disabled) { border-color: var(--line-strong); background: var(--canvas-sink); }
        .btn-google:active:not(:disabled) { transform: scale(.97); }
        .btn-google:disabled { opacity: .45; cursor: not-allowed; }
        .btn-google svg { width: 15px; height: 15px; flex: none; }

        .auth-notice {
            max-width: 1600px; margin: 12px auto 0; padding: 10px 16px;
            border: 1px solid var(--line); border-left: 3px solid var(--text-amber);
            border-radius: var(--r-micro);
            background: var(--tint-amber); color: var(--text-amber);
            font-size: 13px; font-weight: 500;
        }
        @media (min-width: 1025px) { .auth-notice { width: calc(100% - 56px); } }

        /* ── 版面 ───────────────────────────────────────────────── */
        .workspace-layout {
            max-width: 1600px; margin: 0 auto;
            padding: 26px 28px 48px;
            /* 撐滿視窗，內容再少也不會讓頁面看起來被截斷 */
            min-height: calc(100dvh - 78px);
            display: grid; grid-template-columns: 264px minmax(0, 1fr);
            grid-template-rows: minmax(0, 1fr); gap: 28px;
            transition: grid-template-columns .24s var(--ease);
        }
        .workspace-layout.sidebar-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
        /* grid 子項預設 min-width:auto，側邊欄的 flex 內容會撐爆版面 */
        .workspace-layout > * { min-width: 0; }
        .workspace-main { min-width: 0; display: flex; flex-direction: column; }
        .tool-page { flex: 1; display: flex; flex-direction: column; }
        .tool-page.tool-search { gap: 24px; }
        /* 批次／比較分頁：佇列是空的時候，主面板撐開並把空狀態置中，
           避免大螢幕下面掛著半個螢幕的空白 */
        .tool-analysis > .glass-panel:first-child:has(.queue-empty),
        .tool-compare  > .glass-panel:first-child:has(.queue-empty) {
            flex: 1; display: flex; flex-direction: column;
        }
        .queue-empty {
            flex: 1; display: flex; flex-direction: column;
            align-items: center; justify-content: center; text-align: center;
            gap: 8px; min-height: 260px; padding: 40px 24px;
            border: 1px dashed var(--line); border-radius: var(--r-md);
            background: var(--canvas-soft);
        }
        .queue-empty h3 {
            margin: 0;
            font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
            font-size: clamp(21px, 2vw, 27px); line-height: 1.15; letter-spacing: -0.02em;
            color: var(--ink);
        }
        .queue-empty p { margin: 0; max-width: 46ch; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
        .queue-empty .empty-eyebrow { margin-bottom: 2px; }
        .queue-empty .btn-tech { margin-top: 14px; }

        /* ── 側邊欄 ─────────────────────────────────────────────── */
        .tool-sidebar {
            position: sticky; top: 104px; align-self: start;
            display: flex; flex-direction: column; gap: 6px;
            padding: 12px;
            background: var(--paper);
            border: 1px solid var(--line); border-radius: var(--r-md);
            box-shadow: var(--shadow-card);
        }
        .tool-sidebar.collapsed { padding: 10px 8px; align-items: stretch; }
        .sidebar-label {
            padding: 4px 8px 10px;
            font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
            text-transform: uppercase; color: var(--ink-soft);
        }
        .tool-sidebar.collapsed .sidebar-label { display: none; }
        .tool-nav { display: flex; flex-direction: column; gap: 4px; }
        .tool-nav-button {
            display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px;
            align-items: center; gap: 10px;
            width: 100%; min-height: 54px; padding: 8px 10px;
            border: 1px solid transparent; border-radius: var(--r-sm);
            background: transparent; text-align: left;
            transition: background .18s var(--ease), border-color .18s var(--ease);
        }
        .tool-nav-button:hover { background: var(--canvas); }
        .tool-nav-button .nav-icon {
            width: 34px; height: 34px; flex: none;
            display: grid; place-items: center;
            border-radius: var(--r-sm);
            background: var(--canvas-sink); color: var(--ink-soft);
            transition: background .18s var(--ease), color .18s var(--ease);
        }
        .tool-nav-button .nav-icon svg { width: 17px; height: 17px; }
        .tool-nav-button .nav-copy { min-width: 0; }
        .tool-nav-button strong {
            display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.1px;
            color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .tool-nav-button small {
            display: block; margin-top: 1px;
            font-size: 11px; font-weight: 400; line-height: 1.3; color: var(--ink-soft);
        }
        .tool-nav-button .nav-arrow {
            width: 14px; height: 14px; color: var(--ink-soft); opacity: 0;
            transition: opacity .18s var(--ease), transform .18s var(--ease);
        }
        .tool-nav-button:hover .nav-arrow { opacity: 1; transform: translateX(2px); }

        /* 三個分頁各給一個淡色 icon 底，做溫和區隔而非彩色噪音 */
        .tool-nav-button.active { background: var(--canvas); border-color: var(--line); }
        .tool-nav-button.active .nav-arrow { opacity: 1; color: var(--ink-soft); }
        .tool-nav-button:nth-child(1).active .nav-icon { background: var(--tint-blue);  color: var(--text-blue); }
        .tool-nav-button:nth-child(2).active .nav-icon { background: var(--tint-green); color: var(--text-green); }
        .tool-nav-button:nth-child(3).active .nav-icon { background: var(--tint-amber); color: var(--text-amber); }

        .sidebar-note {
            margin-top: 6px; padding: 10px;
            border-top: 1px solid var(--line-soft);
            font-size: 11px; line-height: 1.45; color: var(--ink-soft);
        }
        .tool-sidebar.collapsed .sidebar-note { display: none; }
        .sidebar-toggle {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            min-height: 34px; margin-top: 2px;
            border: 1px solid var(--line); border-radius: var(--r-micro);
            background: var(--paper);
            font-size: 12px; font-weight: 500; color: var(--ink-soft);
            transition: background .18s var(--ease);
        }
        .sidebar-toggle:hover { background: var(--canvas); }
        .sidebar-toggle svg { width: 14px; height: 14px; }
        .tool-sidebar.collapsed .tool-nav-button {
            grid-template-columns: 1fr; justify-items: center; min-height: 46px; padding: 6px;
        }
        .tool-sidebar.collapsed .nav-copy,
        .tool-sidebar.collapsed .nav-arrow,
        .tool-sidebar.collapsed .sidebar-toggle span { display: none; }

        /* ── 頁面標題 ───────────────────────────────────────────── */
        .page-intro {
            display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
            margin-bottom: 26px; padding: 2px;
        }
        .section-eyebrow {
            display: block;
            font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
            text-transform: uppercase; color: var(--ink-soft);
        }
        .page-intro h1 {
            margin: 8px 0 8px;
            font-family: 'Instrument Serif', 'Newsreader', Georgia, serif;
            font-weight: 400;
            font-size: clamp(30px, 3.2vw, 44px);
            line-height: 1.04; letter-spacing: -0.025em;
            color: var(--ink);
            text-wrap: balance;
        }
        .page-intro p {
            max-width: 62ch; margin: 0;
            font-size: 14px; line-height: 1.6; color: var(--ink-soft);
            text-wrap: pretty;
        }
        .page-chip {
            display: inline-flex; align-items: center; gap: 7px; flex: none;
            padding: 6px 11px;
            border: 1px solid var(--line); border-radius: 9999px;
            background: var(--paper);
            font-size: 12px; font-weight: 500; letter-spacing: 0.0125em; color: var(--ink-soft);
            white-space: nowrap;
        }
        .page-chip span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-green); }

        /* ── 面板與卡片 ─────────────────────────────────────────── */
        .glass-panel, .data-card {
            background: var(--card-face);
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            box-shadow: var(--shadow-card);
            backdrop-filter: none;
            transition: box-shadow .22s var(--ease), border-color .22s var(--ease);
        }
        .glass-panel:hover, .data-card:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
        .tool-page .empty-compact,
        .empty-compact {
            border: 1px dashed var(--line) !important;
            border-radius: var(--r-md) !important;
            background: var(--canvas-soft) !important;
            color: var(--ink-soft) !important;
            font-style: normal !important;
        }

        /* ── 表單 ───────────────────────────────────────────────── */
        .tool-page label:not([class*="flex"]) { display: block; }
        .tool-page label {
            margin-bottom: 6px;
            font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
            text-transform: uppercase; color: var(--ink-soft);
        }
        .tool-page input[type="text"],
        .tool-page input[type="search"],
        .tool-page select {
            width: 100%; min-height: 40px; padding: 8px 12px;
            border: 1px solid var(--line); border-radius: var(--r-micro);
            background: var(--paper); color: var(--ink); font-size: 14px;
            transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
        }
        .tool-page input::placeholder { color: var(--ink-muted); }
        .tool-page input:focus, .tool-page select:focus {
            outline: none; border-color: var(--focus-border);
            box-shadow: 0 0 0 3px var(--focus-ring);
        }
        .tool-page input[type="range"] {
            width: 100%; padding: 0; height: 4px; accent-color: var(--range-accent);
            background: var(--canvas-sink); border-radius: 9999px; border: 0;
        }
        .tool-page input[type="checkbox"] {
            width: 16px; height: 16px; accent-color: var(--accent);
            border-radius: 3px; cursor: pointer;
        }

        /* 主要按鈕：模板用 bg-gradient-to-* 表示 CTA，這裡一律壓成實色 */
        .tool-page button[class*="bg-gradient-to-"],
        .compact-actionbar button {
            background: var(--cta-bg) !important;
            background-image: none !important;
            color: var(--cta-ink) !important;
            border: 0 !important;
            border-radius: var(--r-micro) !important;
            box-shadow: none !important;
            font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
            transition: background .18s var(--ease), transform .12s var(--ease);
        }
        .tool-page button[class*="bg-gradient-to-"]:hover:not(:disabled),
        .compact-actionbar button:hover:not(:disabled) { background: var(--cta-bg-hover) !important; }
        .tool-page button[class*="bg-gradient-to-"]:active:not(:disabled),
        .compact-actionbar button:active:not(:disabled) { transform: scale(.98); }
        .tool-page button:disabled { opacity: .4; cursor: not-allowed; }
        .tool-page [class*="text-transparent"][class*="bg-gradient-to-"] {
            background: none !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important;
        }
        .tool-page [class*="hover:-translate-y"]:hover { transform: none !important; }
        .tool-page [class*="shadow-["] { box-shadow: none !important; }

        /* ── 標題階層 ───────────────────────────────────────────── */
        .tool-page h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink); }
        .tool-page h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.1px; color: var(--ink); }
        .tool-page h4 {
            font-size: 11px; font-weight: 600; letter-spacing: 0.09em;
            text-transform: uppercase; color: var(--ink-soft);
        }

        /* ── 徽章列：全部收斂成淡色藥丸 ─────────────────────────── */
        .tool-page .badge-row > span,
        .tool-page [class*="rounded"][class*="px-2"][class*="py-1"] {
            border-radius: 9999px !important;
            font-size: 11px; font-weight: 600; letter-spacing: 0.0125em;
            padding: 3px 9px !important;
        }
        .badge-neutral {
            background: rgba(255,255,255,.055) !important; color: var(--ink-soft) !important;
            border: 1px solid var(--line-soft) !important;
        }
        .badge-ref    { background: var(--tint-amber) !important; color: var(--text-amber) !important; border: 1px solid rgba(228,179,74,.28) !important; }
        .badge-rs     { background: var(--tint-blue)  !important; color: var(--text-blue)  !important; border: 1px solid rgba(96,165,250,.28) !important; }
        .badge-patent { background: var(--tint-green) !important; color: var(--text-green) !important; border: 1px solid rgba(63,185,116,.28) !important; }
        .badge-excl   { background: var(--tint-red)   !important; color: var(--text-red)   !important; border: 1px solid rgba(240,116,120,.28) !important; }
        .badge-delist { background: var(--tint-red)   !important; color: var(--text-red)   !important; border: 1px solid rgba(240,116,120,.3) !important;
                        border-radius: 9999px; padding: 2px 8px; font-size: 10px; font-weight: 600; }

        /* ── 表格 ───────────────────────────────────────────────── */
        .tool-page table { width: 100%; border-collapse: collapse; }
        .tool-page thead { background: var(--canvas) !important; }
        .tool-page th {
            padding: 9px 12px !important;
            border-bottom: 1px solid var(--line) !important;
            background: var(--canvas) !important;
            font-size: 10px !important; font-weight: 600; letter-spacing: 0.09em;
            text-transform: uppercase; color: var(--ink-soft) !important;
            text-align: left; white-space: nowrap;
        }
        .tool-page td {
            padding: 9px 12px !important;
            border-bottom: 1px solid var(--line-soft) !important;
            font-size: 12.5px !important; color: var(--ink) !important;
        }
        .tool-page tbody tr:last-child td { border-bottom: 0 !important; }
        .tool-page tbody tr { transition: background .15s var(--ease); }
        .tool-page tbody tr:hover { background: var(--canvas-soft) !important; }
        .tool-page td[class*="font-mono"], .tool-page .font-mono {
            font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
            font-size: 12px !important; letter-spacing: -0.2px;
        }

        /* ── 動作列 ─────────────────────────────────────────────── */
        .compact-actionbar {
            display: flex; align-items: center; justify-content: space-between;
            gap: 20px; flex-wrap: wrap;
            padding: 16px 20px;
            background: var(--canvas-soft);
            border: 1px solid var(--line); border-radius: var(--r-md);
        }
        .compact-actionbar h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
        .compact-actionbar p  { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-soft); }
        .compact-actionbar .action-meta {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 7px; font-size: 11px; font-weight: 500; color: var(--ink-soft);
        }
        .compact-actionbar .action-meta::before {
            content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--text-green);
        }
        .compact-actionbar button { min-height: 40px; padding: 0 20px; }

        /* 仿單與比較報告共用目前主題的文字色，不固定反白。 */
        .tool-page .prose {
            --tw-prose-body: var(--ink);
            --tw-prose-headings: var(--ink);
            --tw-prose-bold: var(--ink);
            --tw-prose-links: var(--accent-text);
            --tw-prose-counters: var(--ink-soft);
            --tw-prose-bullets: var(--ink-soft);
            --tw-prose-hr: var(--line);
        }

        /* ── FDA 仿單內文 ───────────────────────────────────────── */
        .prose-label {
            color: var(--ink); font-size: 13.5px; line-height: 1.65;
        }
        .prose-label h2 { font-size: 17px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.2px; }
        .prose-label h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
                          color: var(--ink-soft); margin: 20px 0 6px; }
        .prose-label section + section { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 14px; }
        .prose-label p { margin: 0; color: var(--ink-soft); }
        .prose-label a { color: var(--accent); text-decoration: none; }
        .prose-label a:hover { text-decoration: underline; }
        .prose-label b { color: var(--ink); font-weight: 600; }
        .label-shell {
            background: var(--canvas-soft) !important;
            border: 1px solid var(--line) !important;
            border-radius: var(--r-sm) !important;
        }

        /* 舊模板沿用的 class：CTA 按鈕、細捲軸、發光標題（發光在暖白系統裡不成立，改為純字重） */
        .btn-tech {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            min-height: 42px; padding: 0 24px;
            border: 0; border-radius: var(--r-micro);
            background: var(--cta-bg); color: var(--cta-ink);
            font-size: 13px; font-weight: 600; letter-spacing: 0.03em;
            box-shadow: inset 0 -1px 0 rgba(0,0,0,0.14);
            transition: background .18s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
        }
        .btn-tech:hover:not(:disabled) { background: var(--cta-bg-hover); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.14), var(--cta-glow); }
        .btn-tech:active:not(:disabled) { transform: scale(.98); }
        .btn-tech:disabled { opacity: .4; cursor: not-allowed; }
        .text-glow { text-shadow: none; font-weight: 700; color: var(--ink); }
        .custom-scrollbar { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
        .report-shell {
            padding: 1px;
            background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)) !important;
            box-shadow: var(--shadow-card) !important;
        }

        /* 結果卡片的選取狀態：不用發光，用底色與邊框說話 */
        .card-picked {
            border-color: rgba(63,185,116,.4) !important;
            background: linear-gradient(180deg, rgba(63,185,116,.10), rgba(63,185,116,.04)) !important;
            box-shadow: var(--shadow-card), 0 0 28px rgba(63,185,116,.07) !important;
        }
        .card-idle { border-color: var(--line) !important; }
        .card-idle:hover { border-color: var(--line-strong) !important; }

        /* 卡片內的分段控制 */
        .seg-on {
            background: var(--seg-on-bg) !important; color: var(--ink) !important;
            box-shadow: var(--seg-on-shadow) !important; font-weight: 600;
        }
        .seg-off { color: var(--ink-soft) !important; }
        .seg-off:hover { color: var(--ink-soft) !important; }

        /* 虛線空狀態：把 Tailwind 的淺色邊框拉回可見的耳語線 */
        .tool-page [class*="border-dashed"] {
            border-color: var(--line) !important;
            background: var(--canvas-soft) !important;
            color: var(--ink-soft) !important;
            border-radius: var(--r-md) !important;
        }

        /* 佇列計數 chip */
        .count-chip {
            display: inline-flex; align-items: center;
            padding: 4px 11px; border-radius: 9999px;
            border: 1px solid var(--line);
            background: var(--canvas);
            font-size: 12px; font-weight: 600; letter-spacing: 0.0125em;
            color: var(--ink-soft); font-variant-numeric: tabular-nums;
        }

        /* 分析結果卡片的標題與首字圓章 */
        .result-title {
            font-size: 22px; font-weight: 700; letter-spacing: -0.25px;
            line-height: 1.27; color: var(--ink); margin-bottom: 4px;
        }
        .result-avatar {
            width: 46px; height: 46px; flex: none;
            align-items: center; justify-content: center;
            border-radius: var(--r-md);
            background: var(--tint-blue); color: var(--text-blue);
            border: 1px solid rgba(96,165,250,.25);
            font-size: 19px; font-weight: 700;
        }

        /* ── 搜尋面板：寬螢幕收成一列，不讓 3 個欄位攤在 1250px 上 ── */
        .search-panel { padding: 18px 20px; }
        .search-grid { display: grid; gap: 16px 18px; grid-template-columns: 1fr; align-items: end; }
        .search-grid .field { min-width: 0; }
        .search-grid .field-submit .btn-tech { width: 100%; }
        @media (min-width: 640px) {
            .search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .search-grid .field-query,
            .search-grid .field-submit { grid-column: span 2; }
        }
        @media (min-width: 1100px) {
            .search-grid {
                grid-template-columns:
                    minmax(140px, 0.9fr) minmax(220px, 2fr) minmax(150px, 1fr)
                    minmax(140px, 0.9fr) auto;
            }
            .search-grid .field-query,
            .search-grid .field-submit { grid-column: auto; }
            .search-grid .field-submit .btn-tech { width: auto; min-width: 132px; }
        }
        .field-limit label { display: flex !important; align-items: baseline; justify-content: space-between; gap: 8px; }
        .field-limit label b { color: var(--ink); font-weight: 600; letter-spacing: 0; }
        .field-limit input[type="range"] { margin-top: 12px; }
        .spinner {
            width: 13px; height: 13px; border-radius: 50%;
            border: 2px solid color-mix(in srgb, var(--cta-ink) 30%, transparent);
            border-top-color: var(--cta-ink);
            animation: spin .7s linear infinite;
        }
        .btn-tech .animate-spin, .compact-actionbar .animate-spin {
            border-color: color-mix(in srgb, var(--cta-ink) 30%, transparent) !important;
            border-top-color: transparent !important;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ── 空狀態：初次進站看到的是入口，不是一片空白 ────────── */
        .empty-state {
            flex: 1; display: grid; place-items: center;
            min-height: 320px; padding: 40px 24px;
            border: 1px dashed var(--line); border-radius: var(--r-lg);
            background:
                radial-gradient(120% 90% at 50% 0%, var(--empty-glow), transparent 60%),
                var(--canvas-soft);
        }
        .empty-inner { width: min(640px, 100%); text-align: center; }
        .empty-eyebrow {
            margin: 0 0 10px;
            font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
            text-transform: uppercase; color: var(--ink-soft);
        }
        .empty-state h2 {
            margin: 0 0 10px;
            font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
            font-size: clamp(23px, 2.4vw, 31px); line-height: 1.12; letter-spacing: -0.02em;
            color: var(--ink); text-wrap: balance;
        }
        .empty-lead {
            margin: 0 auto 24px; max-width: 52ch;
            font-size: 14px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty;
        }
        .empty-examples {
            display: grid; gap: 10px; grid-template-columns: 1fr;
            margin-bottom: 26px; text-align: left;
        }
        @media (min-width: 720px) { .empty-examples { grid-template-columns: repeat(3, 1fr); } }
        .example-chip {
            padding: 12px 14px;
            border: 1px solid var(--line); border-radius: var(--r-sm);
            background: var(--paper); text-align: left;
            transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);
        }
        .example-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--shadow-card), var(--chip-glow); }
        .example-chip:active { transform: scale(.99); }
        .example-chip strong {
            display: block; font-size: 13.5px; font-weight: 600; color: var(--accent);
            font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -0.2px;
        }
        .example-chip small { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); }
        .empty-stats {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
            margin: 0; padding-top: 20px; border-top: 1px solid var(--line-soft);
        }
        .empty-stats div { text-align: center; }
        .empty-stats dt {
            font-size: 10px; font-weight: 600; letter-spacing: 0.09em;
            text-transform: uppercase; color: var(--ink-soft);
        }
        .empty-stats dd {
            margin: 4px 0 0; font-size: 17px; font-weight: 600;
            color: var(--ink); font-variant-numeric: tabular-nums;
        }

        /* ── 捲軸 ───────────────────────────────────────────────── */
        ::-webkit-scrollbar { width: 10px; height: 10px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 9999px; border: 3px solid transparent; background-clip: content-box; }
        ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }

        /* ── 動態 ───────────────────────────────────────────────── */
        @keyframes fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
        .animate-fade-in { animation: fade-in .5s var(--ease) both; }
        .results-list > * { animation: fade-in .45s var(--ease) both; }
        .results-list > *:nth-child(1) { animation-delay: 0ms; }
        .results-list > *:nth-child(2) { animation-delay: 40ms; }
        .results-list > *:nth-child(3) { animation-delay: 80ms; }
        .results-list > *:nth-child(4) { animation-delay: 120ms; }
        .results-list > *:nth-child(n+5) { animation-delay: 160ms; }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
        }

        /* ── 響應式 ─────────────────────────────────────────────── */
        /* 平板／窄桌機：側邊欄變成頂部的分段式導覽，不再吃掉一整欄 */
        @media (max-width: 1080px) {
            .workspace-layout {
                grid-template-columns: minmax(0, 1fr);
                grid-template-rows: auto minmax(0, 1fr);
                padding: 18px 18px 40px; gap: 18px;
                min-height: calc(100dvh - 78px);
            }
            .workspace-layout.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }

            .tool-sidebar { position: relative; top: auto; padding: 6px; box-shadow: none; }
            .sidebar-label, .sidebar-note, .sidebar-toggle { display: none; }
            .tool-nav { flex-direction: row; gap: 4px; }
            .tool-nav-button {
                flex: 1 1 0; min-width: 0; min-height: 46px;
                grid-template-columns: 26px minmax(0, 1fr);
                gap: 8px; padding: 7px 10px;
            }
            .tool-nav-button .nav-icon { width: 26px; height: 26px; border-radius: 6px; }
            .tool-nav-button .nav-icon svg { width: 14px; height: 14px; }
            .tool-nav-button small, .tool-nav-button .nav-arrow { display: none; }
            .tool-nav-button strong { font-size: 12.5px; }

            .page-intro { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
            .page-chip { align-self: flex-start; }
        }

        /* 資訊徽章非必要，窄一點就收起來讓 header 維持單行 */
        @media (max-width: 980px) {
            .header-badge.source-badge { display: none; }
        }
        @media (max-width: 860px) {
            .header-badge:has(.status-dot) { display: none; }
            .brand-subtitle { display: none; }
        }

        /* 手機：導覽只留圖示 + 短標籤，header 收成一行 */
        @media (max-width: 700px) {
            .app-header { height: auto; }
            .header-inner { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
            .header-badge.source-badge { display: none; }
            .header-actions { width: 100%; justify-content: stretch; }
            .auth-form { width: 100%; }
            .auth-input { flex: 1 1 0; min-width: 0; }
            .auth-input.email, .auth-input.pass { width: auto; }
            .brand-subtitle { display: none; }

            .workspace-layout { padding: 14px 14px 32px; gap: 14px; }
            .tool-nav-button { grid-template-columns: 1fr; justify-items: center; padding: 8px 4px; min-height: 52px; }
            .tool-nav-button strong {
                font-size: 10.5px; text-align: center; white-space: normal;
                line-height: 1.2; letter-spacing: 0;
            }
            .tool-nav-button .nav-icon { margin-bottom: 3px; }

            .page-intro h1 { font-size: 25px; }
            .page-intro p { font-size: 13px; }
            .search-panel { padding: 14px; }
            .empty-state { padding: 28px 16px; min-height: 260px; }
            .empty-stats { grid-template-columns: 1fr; gap: 8px; text-align: left; }
            .empty-stats div { display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
            .empty-stats dd { font-size: 14px; }
            .compact-actionbar { flex-direction: column; align-items: stretch; }
            .compact-actionbar button { width: 100%; }
            /* 表格在窄螢幕自己橫向捲，不要把整頁推寬 */
            .tool-page table { min-width: 480px; }
            .tool-page .overflow-y-auto { overflow-x: auto; }
        }