:root{
    --hovStep:#EDF0F4; --hovCard:#FFFFFF; --ring:rgba(31,35,40,.06);
    --deepSh:0 4px 14px rgba(31,35,40,.14);
    --sbThumb:#d0d7de; --sbThumbHov:#afb8c1;
    --bg:#F5F6F8; --panel:#FFFFFF; --panel2:#F8FAFF; --field:#FFFFFF;
    --line:#E4E8EF; --line2:#D5DBE5;
    --ink:#1B2432; --muted:#6B7789;
    --accent:#2F6FED; --accent-soft:#EBF1FE; --accent-ink:#FFFFFF;
    --amber:#B7791F; --amber-soft:#FBF3E4; --amber-line:#E8D5AE;
    --up:#D6414C; --up-soft:#FCEBEC;      /* 台股慣例：紅漲 */
    --down:#1E9256; --down-soft:#E8F5EE;  /* 綠跌 */
    --up-ink:#B8232F; --down-ink:#13703F; --flat-ink:#4D596B;   /* 徽章文字（對比 ≥ 4.5） */
    --header:rgba(255,255,255,.92);
    --shadow:0 1px 3px rgba(23,32,46,.06),0 6px 20px rgba(23,32,46,.05);
  }
  body.dark{
    --hovStep:#242B36; --hovCard:#1A212B; --ring:rgba(240,246,252,.06);
    --deepSh:0 8px 24px rgba(1,4,9,.7);
    --sbThumb:#30363d; --sbThumbHov:#484f58;
    --bg:#12161D; --panel:#1A212B; --panel2:#1D2633; --field:#141A22;
    --line:#28303C; --line2:#39434F;
    --ink:#E8ECF2; --muted:#94A1B5;
    --accent:#5B8DF8; --accent-soft:#1C2A45; --accent-ink:#FFFFFF;
    --amber:#E0B25C; --amber-soft:#2E2718; --amber-line:#4A3D1E;
    --up:#F0616C; --up-soft:#3A1D22;
    --down:#3FBF7F; --down-soft:#15301F;
    --up-ink:#FF8E96; --down-ink:#5ED89A; --flat-ink:#BAC5D6;
    --header:rgba(18,22,29,.9);
    --shadow:0 1px 3px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.3);
  }
  body.dark #zoomBox{background:var(--panel)}
  *{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px;border:2px solid var(--bg)}
  ::-webkit-scrollbar-thumb:hover{background:var(--muted)}
  html,body{margin:0}
  body{background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55;
       font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif}
  button{font-family:inherit}

  /* ---------- 頂欄 ---------- */
  header{position:sticky;top:0;z-index:40;background:var(--header);
         backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .bar{max-width:1040px;margin:0 auto;padding:10px 16px;display:flex;
       align-items:center;gap:12px}
  header .bar button{white-space:nowrap}
  .brand{font-weight:800;font-size:15.5px;letter-spacing:.02em}
  .brand small{color:var(--muted);font-weight:500;margin-left:6px;font-size:11.5px}
  .whoami{color:var(--muted);font-size:12.5px}
  #inviteBtn{background:var(--field);border:1px solid var(--line2);border-radius:8px;
             padding:6px 12px;font-size:12.5px;cursor:pointer;color:var(--ink)}
  .authGate{max-width:560px;margin:80px auto;text-align:center;color:var(--muted);
            background:var(--panel);border:1px solid var(--line);border-radius:14px;
            padding:40px 28px;box-shadow:var(--shadow)}
  .authGate b{color:var(--ink);font-size:17px;display:block;margin-bottom:10px}
  .bar .grow{flex:1}
  .seg{display:flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
  .seg button{background:var(--field);border:0;padding:7px 13px;font-size:13px;
              color:var(--muted);cursor:pointer}
  .seg button.on{background:var(--accent);color:var(--accent-ink)}
  .seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  #drawerBtn{display:none;background:var(--field);border:1px solid var(--line2);
             border-radius:8px;padding:7px 13px;font-size:13px;cursor:pointer;color:var(--ink)}
  body.mode-drawer #drawerBtn,
  body.mode-drawer #drawerWatchBtn{display:inline-block}
  #drawerWatchBtn{display:none;background:var(--field);border:1px solid var(--line2);
                  border-radius:8px;padding:7px 13px;font-size:13px;cursor:pointer;color:var(--ink)}
  #themeBtn{background:var(--field);border:1px solid var(--line2);border-radius:8px;
            width:36px;height:34px;font-size:16px;cursor:pointer;line-height:1;
            display:inline-grid;place-items:center;padding:0}
  #themeBtn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

  .wrap{max-width:1040px;margin:0 auto;padding:20px 16px 70px;
        transition:margin-right .25s ease}

  h2{font-size:12.5px;letter-spacing:.22em;color:var(--muted);font-weight:700;
     margin:26px 0 10px;text-transform:uppercase}

  .panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;
         padding:14px;box-shadow:var(--shadow)}
  .row{display:flex;gap:8px;flex-wrap:wrap}
  input[type=text],input[type=search]{flex:1;min-width:200px;background:var(--field);
      border:1px solid var(--line2);border-radius:8px;color:var(--ink);
      padding:9px 12px;font-size:15px}
  input::placeholder{color:#9AA4B5}
  input:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
  .btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;
       padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer}
  .btn:hover{filter:brightness(1.06)}
  .btn:disabled{opacity:.5;cursor:wait}
  .btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .ghostMore{background:var(--field);color:var(--accent);border:1px dashed var(--accent);
             width:100%;padding:10px}
  .endNote{color:var(--muted);font-size:12.5px;text-align:center;padding:8px 0 2px}
  .ghostMore:hover{background:var(--accent-soft)}
  .msg{margin-top:10px;font-size:13.5px;color:var(--muted)}
  .msg.err{color:var(--up)}
  .msg.ok{color:var(--down)}

  /* ---------- 搜尋結果 ---------- */
  .results{margin-top:12px;display:grid;gap:8px}
  .result{border:1px solid var(--line);border-radius:10px;background:var(--panel)}
  .result .head{display:flex;align-items:center;gap:12px;padding:8px 10px;cursor:pointer;border-radius:10px}
  .result .head:hover{background:var(--accent-soft)}
  .result .thmb{flex:0 0 auto;width:64px;height:88px;overflow:hidden;background:#fff;
                border-radius:6px;border:1px solid var(--line);display:block}
  .result .thmb img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);
                    transform-origin:center}
  .result .name{flex:1;font-size:13.5px}
  .result .price{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600;white-space:nowrap}
  /* 「選等級」是唯一的展開觸發，做成有邊框的按鈕、觸控尺寸 ≥36px */
  .result .open{color:var(--muted);font-size:12px;white-space:nowrap;border:1px solid var(--line2);
    border-radius:8px;padding:8px 12px;min-height:36px;display:inline-flex;align-items:center;gap:6px;
    background:var(--field);flex:0 0 auto;transition:border-color .15s,color .15s,background .15s}
  .result .open .oc{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
  .result .open.isOpen{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
  .result .open.isOpen .oc{transform:rotate(-135deg) translateY(-2px)}
  @media (hover:hover){ .result .open:hover{color:var(--accent);border-color:var(--accent)} }
  .result .head{cursor:default}
  .result .name{min-width:0}
  /* 等級面板：滑開動畫、骨架載入 */
  .grades{padding:6px 12px 12px;border-top:1px dashed var(--line2);
    opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease}
  .grades.in{opacity:1;transform:none}
  .grades .tip{color:var(--muted);font-size:12px;margin:6px 2px 8px}
  .gchip.skel{pointer-events:none;border-color:var(--line);background:var(--panel2);position:relative;overflow:hidden;min-height:46px}
  .gchip.skel .g,.gchip.skel .p{display:block;width:44px;height:11px;border-radius:5px;background:var(--line2)}
  .gchip.skel .p{width:58px;margin-top:5px}
  .gchip.skel::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--panel) 60%, transparent),transparent);
    transform:translateX(-100%);animation:ldgSlide 1.1s ease-in-out infinite}
  .gchip.hidden{display:none}
  .gchip.gmore{border-style:dashed;color:var(--muted)}
  .gchip.gmore .g{font-weight:600}
  .grade-chips{display:flex;flex-wrap:wrap;gap:8px}
  .gchip{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:78px;
         background:var(--field);border:1px solid var(--line2);border-radius:9px;
         padding:7px 10px;cursor:pointer;color:var(--ink)}
  .gchip{transition:transform .12s ease,border-color .12s,background .12s,box-shadow .12s}
  @media (hover:hover){ .gchip:hover{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 2px 8px rgba(0,0,0,.08)} }
  .gchip .g{font-weight:700;font-size:13.5px}
  .gchip .p{font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums}
  .gchip .p.none{color:var(--muted)}
  .gchip.tracked{border-color:var(--down);position:relative}
  .gchip.tracked::after{content:"追蹤中";position:absolute;top:-8px;right:-6px;
        background:var(--down);color:#fff;font-size:10px;border-radius:999px;padding:0 6px}
  .gchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .gchip.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent)}
  .gradeAction{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
  .gradeAction:empty{display:none}
  .ga-info{color:var(--muted);font-size:13px;margin-right:2px}
  .ga-info b{color:var(--ink);font-size:14px}
  .gradeAction .btn{padding:7px 15px;font-size:13px}
  .ga-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px}
  .ga-x:hover{color:var(--up)}

  /* ---------- 收藏區（清單模式在主欄；抽屜模式整塊搬進右側） ---------- */
  .valueCard{background:linear-gradient(135deg,var(--panel) 0%,var(--panel2) 100%);
             border:1px solid var(--line);border-radius:12px;padding:16px 18px;
             box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:14px;
             align-items:center;justify-content:space-between}
  .valueCard .vhead{flex-basis:100%;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
  .valueCard .lbl{font-size:11.5px;letter-spacing:.2em;color:var(--muted);font-weight:700}
  .vhead .vbtns{margin-left:auto;display:flex;gap:8px;flex-wrap:nowrap;justify-content:flex-end;min-width:0}
  .vhead .refresh{padding:6px 13px;font-size:12.5px;white-space:nowrap}
  /* 窄版（抽屜、手機）：藏英文裝飾字＋按鈕再縮一點，讓標題列一行塞下 */
  #drawer .lblEn{display:none}
  #drawer .vhead{gap:6px}
  #drawer .vhead .lbl{font-size:11.5px;letter-spacing:.06em}
  #drawer .vhead select{padding:4px 6px;font-size:12px}
  #drawer .vhead .vbtns{gap:6px}
  #drawer .vhead .refresh{padding:4px 8px;font-size:11.5px}
  #drawer .valSeg{margin-right:4px}
  #drawer .valSeg button{padding:3px 8px;font-size:10.5px}
  #drawer #curSelect{padding:4px 6px;font-size:11.5px}
  @media (max-width:640px){
    .lblEn{display:none}
    .vhead .refresh{padding:5px 11px;font-size:12px}
  }
  .valSeg{margin-left:auto;margin-right:8px}
  .valSeg button{padding:4px 11px;font-size:11.5px}
  #curSelect{background:var(--field);border:1px solid var(--line2);border-radius:6px;
             color:var(--ink);padding:2px 6px;font-size:11.5px;letter-spacing:0}
  .valueCard .big{font-size:clamp(26px,4.4vw,34px);font-weight:800;
                  font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px}
  .valueCard .twdline{color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}
  .stats{display:flex;gap:20px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
  .stats .lbl2{display:block;color:var(--muted);font-size:11.5px;letter-spacing:.08em}
  .lblnote{font-style:normal;font-size:9px;color:var(--muted);opacity:.8;
           margin-left:4px;border:1px solid var(--line);border-radius:4px;padding:0 4px}
  .stats b{font-size:14.5px}
  .stats .pos{color:var(--up)} .stats .neg{color:var(--down)}
  .valueCard .sub{flex-basis:100%;color:var(--muted);font-size:12px;margin-top:-4px}
  .refresh{background:var(--ink);color:var(--bg);border:0;border-radius:8px;
           padding:9px 16px;font-size:13.5px;cursor:pointer}
  .refresh:disabled{opacity:.75;cursor:wait}
  .spinner{display:inline-block;width:13px;height:13px;border-radius:50%;
           border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
           vertical-align:-2px;margin-right:7px;animation:spin .8s linear infinite}
  body.dark .spinner{border-color:rgba(0,0,0,.25);border-top-color:var(--bg)}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce){.spinner{animation:none;border-top-color:inherit}}

  .toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
  .toolbar input{flex:1;min-width:160px;background:var(--field);border:1px solid var(--line2);
                 border-radius:8px;color:var(--ink);padding:8px 12px;font-size:13.5px}
  .toolbar select{background:var(--field);border:1px solid var(--line2);border-radius:8px;
                  color:var(--ink);padding:8px 10px;font-size:13px}
  .toolbar .count{color:var(--muted);font-size:12.5px;white-space:nowrap}

  .card-list{display:grid;gap:10px;margin-top:12px}
  .card-list.gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .card.compact{display:flex;flex-direction:column;gap:8px;padding:10px;cursor:pointer}
  .card.compact .cwrap{width:100%;aspect-ratio:5/7;background:#fff;border:1px solid var(--line);
                       border-radius:8px;overflow:hidden;display:flex}
  .card.compact .cimg{width:100%;height:100%;object-fit:contain}
  .card.compact .cname{font-size:12.5px;line-height:1.4;display:-webkit-box;
      -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
  .card.compact .cprice{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
  .card.compact .csub{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
  /* 中欄保底 240px；右欄最多佔 58%，內容太多時自行換行，不再擠壓卡名 */
  .card{display:grid;grid-template-columns:56px minmax(240px,1fr) fit-content(68%);gap:12px;align-items:center;
        background:var(--panel);border:1px solid var(--line);border-radius:12px;
        padding:12px;box-shadow:var(--shadow)}
  .thumb{width:56px;overflow:hidden;border:1px solid var(--line);border-radius:6px;
         background:#fff;align-self:start}
  .thumb img{width:100%;aspect-ratio:5/7;height:auto;object-fit:cover;cursor:zoom-in;
             display:block}
  .card .name{font-size:14px;cursor:pointer}
  .card .name:hover{color:var(--accent);text-decoration:underline}
  .card .meta{color:var(--muted);font-size:12px;margin-top:2px}
  .gbadge{display:inline-block;background:var(--amber-soft);color:var(--amber);
          border:1px solid var(--amber-line);border-radius:5px;font-size:11.5px;font-weight:700;
          padding:0 7px;margin-right:6px;vertical-align:1px}
  /* 桌機右側維持單行（原本的樣子）。名稱欄保底 240px，右側寬度上限 58%。
     三顆徽章（今日／成交／7日）齊全時單行塞不下：隱藏小走勢圖、徽章緊湊、間距縮小。 */
  .card .right{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;justify-content:flex-end}
  @media (min-width:761px){ .card:not(.compact) .price-block{white-space:nowrap} }   /* 桌機：掛／成交同一行 */
  /* 右側抽屜只有 400px 寬，走自己的排法：允許換行、價格區可折行、搬移鈕維持圖示 */
  #drawer .card .right{flex-wrap:wrap;gap:8px 10px}
  #drawer .card:not(.compact) .right:has(.chip:nth-of-type(3)){column-gap:5px}
  #drawer .card:not(.compact) .right:has(.chip:nth-of-type(3)) .chip{padding:3px 7px;font-size:11px}
  #drawer .card:not(.compact) .right:has(.chip:nth-of-type(3)) .qty{gap:3px}
  #drawer .card:not(.compact) .right:has(.chip:nth-of-type(3)) .qty button{width:24px;height:24px}
  #drawer .card:not(.compact) .price-block{white-space:normal}
  #drawer .card:not(.compact) .right:has(.chip:nth-of-type(3)) .spark{display:none}
  .card:not(.compact) .right:has(.chip:nth-of-type(3)){gap:10px}
  .card:not(.compact) .right:has(.chip:nth-of-type(3)) .spark{display:none}
  .card:not(.compact) .right:has(.chip:nth-of-type(3)) .chip{padding:3px 8px;font-size:11.5px}
  /* 搬移鈕統一只留 ⇄ 圖示（與手機一致；桌機有 tooltip），避免同列出現兩種長相 */
  .card:not(.compact) .right .mv .mvt{display:none}
  .card:not(.compact) .right .mv{padding:6px 9px}
  .price-block{text-align:right;min-width:104px}
  .price-block .now{font-size:16.5px;font-weight:700;font-variant-numeric:tabular-nums}
  .dualp{font-size:11px;color:color-mix(in srgb, var(--ink) 62%, var(--muted));margin-top:2px}
  .dualp .tdate{opacity:.75}
  .dualp .stale{color:var(--amber)}
  .price-block .subtotal{color:var(--muted);font-size:12px}
  .price-block .s2{display:block}
  .chip{font-size:12px;border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .chip{font-weight:600}
  .chip.up{background:var(--up-soft);color:var(--up-ink)}
  .chip.down{background:var(--down-soft);color:var(--down-ink)}
  .chip.flat{background:var(--accent-soft);color:var(--flat-ink)}
  .qty{display:flex;align-items:center;gap:6px}
  .qty button{width:26px;height:26px;border-radius:6px;border:1px solid var(--line2);
              background:var(--field);color:var(--ink);cursor:pointer;font-size:16px;
              display:grid;place-items:center;line-height:1;padding:0;
              font-family:system-ui, -apple-system, sans-serif}
  .qty span{min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
  .mv{background:var(--field);border:1px solid var(--line2);border-radius:7px;color:var(--muted);
      cursor:pointer;padding:5px 10px;font-size:12px;white-space:nowrap}
  @media (hover:hover){ .mv:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)} }
  .del{background:var(--field);border:1px solid var(--line2);border-radius:7px;
       color:var(--muted);cursor:pointer;padding:6px 7px;line-height:0}
  @media (hover:hover){ .del:hover{color:var(--up);border-color:var(--up);background:var(--up-soft)} }
  .del:focus-visible{outline:2px solid var(--up);outline-offset:1px}
  .spark{display:block;overflow:visible;width:84px;height:28px}   /* 桌機也用 84px，留空間給徽章 */
  .empty{color:var(--muted);text-align:center;padding:34px 0;font-size:14px}
  .exports{margin-top:20px;color:var(--muted);font-size:12.5px;text-align:center}
  .exports a{color:var(--accent);text-decoration:none}
  .exports a:hover{text-decoration:underline}

  /* ---------- 右側抽屜 ---------- */
  #drawer{position:fixed;top:0;right:0;height:100dvh;width:420px;max-width:100vw;
          background:var(--bg);border-left:1px solid var(--line);z-index:60;
          transform:translateX(102%);visibility:hidden;
          transition:transform .25s ease, visibility 0s linear .25s;
          display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(23,32,46,.08)}
  body.mode-drawer.drawer-open #drawer{transform:none;visibility:visible;
          transition:transform .25s ease, visibility 0s}
  #drawer .dhead{display:flex;align-items:center;gap:10px;padding:12px 16px;
                 border-bottom:1px solid var(--line);background:var(--panel)}
  #drawer .dhead b{font-size:14px}
  #drawer .dhead .x{margin-left:auto;background:none;border:0;font-size:20px;
                    color:var(--muted);cursor:pointer;line-height:1}
  #drawer .dbody{flex:1;overflow-y:auto;padding:14px 16px 30px}

  /* 抽屜內的緊湊排版：名稱整行（最多兩行省略）、控制項換到第二行 */
  #drawer .card{grid-template-columns:50px 1fr;padding:10px 12px;position:relative}
  #drawer .card:not(.compact) .del{position:absolute;top:7px;right:7px}
  #drawer .card:not(.compact) .mv{position:absolute;top:7px;right:44px;padding:5px 8px}
  #drawer .card:not(.compact) .mv .mvt{display:none}
  #drawer .card:not(.compact) .name{padding-right:64px}
  /* 抽屜固定兩行：chips 靠左＋數量靠右｜價格整行靠右，不再隨機換行 */
  #drawer .card:not(.compact) .right{gap:8px 10px;justify-content:flex-start}
  #drawer .card:not(.compact) .qty{margin-left:auto}
  #drawer .card:not(.compact) .price-block{flex-basis:100%;margin-top:2px;
      display:flex;justify-content:space-between;align-items:flex-start;
      gap:0 12px;min-width:0}
  #drawer .card:not(.compact) .price-block .subtotal{text-align:left;order:1}
  #drawer .card:not(.compact) .price-block .now{order:2;white-space:nowrap}
  #drawer .thumb{width:48px}
  #drawer .thumb img{width:100%}
  #drawer .card .name{font-size:13px;line-height:1.45;display:-webkit-box;
      -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #drawer .card .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #drawer .card .right{grid-column:1/-1;justify-content:space-between;gap:8px 12px}
  #drawer .card .spark{display:none}
  #drawer .price-block{min-width:0}
  #drawer .valueCard{padding:14px 16px}
  #drawer .valueCard .big{font-size:26px}
  #drawer .toolbar input{min-width:120px}
  @media (min-width:1101px){
    body.mode-drawer.drawer-open .wrap{margin-right:420px;max-width:none;
      padding-left:max(16px,calc((100vw - 420px - 1008px)/2));
      padding-right:calc(420px * 0 + 16px)}
  }
  /* 分頁：收藏分頁＝收藏佔滿主畫面；搜尋分頁＝搜尋＋右側抽屜 */
  body.mode-drawer #collectionSection{display:none}
  body.tab-collection #searchSection{display:none}
  /* 價差雷達 */
  body:not(.tab-radar) #radarSection{display:none}
  body.tab-radar #searchSection,
  body.tab-radar #collectionSection{display:none}
  .radarBar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .radarOnly{color:var(--muted);font-size:12.5px;display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
  /* 「只看…」改成滑動開關：仍是原本的 checkbox（點文字或開關都會切換、鍵盤空白鍵也行） */
  .radarOnly input[type=checkbox]{-webkit-appearance:none;appearance:none;margin:0;flex:none;cursor:pointer;
    position:relative;width:34px;height:20px;border-radius:999px;background:var(--line2);
    background:color-mix(in srgb, var(--muted) 45%, transparent);
    transition:background .18s}
  .radarOnly input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
    border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .18s}
  .radarOnly input[type=checkbox]:checked{background:var(--accent)}
  .radarOnly input[type=checkbox]:checked::after{transform:translateX(14px)}
  .radarOnly input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .radarOnly:has(input:checked){color:var(--ink)}
  .radarInfo{color:var(--muted);font-size:12px}
  .helpChip{background:var(--field);border:1px solid var(--line2);border-radius:999px;
            padding:2px 11px;font-size:11.5px;color:var(--muted);cursor:pointer;
            margin-left:8px;vertical-align:1px;white-space:nowrap;flex:0 0 auto}
  .helpChip:hover{color:var(--accent);border-color:var(--accent)}
  #radarHelpDialog{width:min(440px,92vw)}
  .radarRow2{flex-basis:100%;display:flex;align-items:center;gap:10px;margin-top:2px;
             flex-wrap:wrap}

  #radarRefresh{min-width:158px;white-space:nowrap;flex:0 0 auto}
  .radarNote{color:var(--muted);font-size:12px;margin-top:8px}
  #radarList{margin-top:14px;display:grid;gap:8px}
  .rrow{display:grid;grid-template-columns:44px minmax(0,1fr) 110px 160px 100px;
        gap:12px;align-items:center;background:var(--bg);border:1px solid var(--line);
        border-radius:10px;padding:9px 12px}
  .rrow img{width:44px;aspect-ratio:5/7;height:auto;object-fit:contain;background:#fff;
            border:1px solid var(--line);border-radius:6px;cursor:zoom-in}
  .rrow .rimg-ph{width:44px;aspect-ratio:5/7;background:var(--field);border-radius:6px}
  .rrow .rname{min-width:0}
  .rrow .rname a{color:var(--ink);text-decoration:none;font-size:13px;line-height:1.4;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rrow .rname a:hover{color:var(--accent)}
  .rrow .rname .rkey{color:var(--muted);font-size:11.5px;margin-top:2px}
  .rrow .rcell{text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
  .rrow .rcell .lbl3{display:block;color:var(--muted);font-size:10.5px;letter-spacing:.06em}
  .rrow .rcell .sub3{display:block;color:var(--muted);font-size:11px}
  /* SNKR 欄：標籤｜數值 對照表，一行一個值；最近成交是成交中位的日期 */
  .rrow .rmkt .kv{display:inline-grid;grid-template-columns:auto auto;column-gap:8px;row-gap:1px;
                  align-items:baseline;font-size:12.5px;line-height:1.45;white-space:nowrap}
  .rrow .rmkt .kv > *{text-align:right}
  .rrow .rmkt .mk{color:var(--muted);font-size:10.5px;letter-spacing:.04em;text-align:left!important}
  .rrow .rmkt .kv b{font-weight:700}
  .rrow .rmkt .sd{font-style:normal;color:var(--muted);font-size:11px}
  /* 三個數字欄各自一塊：中間加細分隔線，才看得出是直的讀 */
  .rrow .rmkt, .rrow .spread{border-left:1px solid var(--line);padding-left:12px}
  .rrow .spread{font-size:15px;font-weight:800}
  .rrow .spread.pos{color:var(--up)} .rrow .spread.neg{color:var(--down)}
  .rcell .clk{width:11px;height:11px;opacity:.45;margin-left:4px;vertical-align:-1.5px}
  .rrow .spread .spw{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;
                     opacity:.85;margin-bottom:1px}
  .rrow .nomw{color:var(--muted);font-size:12px}
  @media (max-width:760px){
    .rrow{grid-template-columns:40px minmax(0,1fr) auto;grid-auto-rows:auto;
          row-gap:7px;align-items:start}
    .rrow img,.rrow .rimg-ph{grid-row:1 / span 2;width:40px}
    .rrow .rname{grid-column:2;grid-row:1}
    .rrow .rcell:nth-child(3){grid-column:3;grid-row:1}          /* 中盤批價 */
    .rrow .rcell:nth-child(4){grid-column:2;grid-row:2;          /* 市場資訊 */
      text-align:left;font-size:12.5px}
    .rrow .rcell:nth-child(5){grid-column:3;grid-row:2;align-self:center}  /* 價差 */
    .rrow .rcell:nth-child(4){min-width:0;overflow:hidden}
    .rrow .rmkt, .rrow .spread{border-left:0;padding-left:0}
    .rrow .rmkt .kv{column-gap:10px}
    .rrow .mwSeller{display:none}   /* 手機放不下賣家代號，點進走勢圖看 */
  }

  /* 持倉快訊（搜尋分頁閒置時） */
  #idlePanel{margin-top:22px}
  #idlePanel h3{font-size:12.5px;letter-spacing:.18em;color:var(--muted);
                font-weight:700;margin:0 0 10px;text-transform:uppercase}
  #idlePanel h3 .mcnt{font-weight:500;letter-spacing:0;text-transform:none;opacity:.8;margin-left:6px}
  .moverSum{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
            border-radius:12px;padding:10px 16px;font-size:13px;color:var(--muted);margin-bottom:16px}
  .moverSum b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
  .moverSum b.u{color:var(--up)} .moverSum b.d{color:var(--down)} .moverSum .mu{opacity:.8}
  .moverSum .mbar{flex:1;min-width:120px;height:5px;border-radius:3px;background:var(--line);overflow:hidden;display:flex}
  .moverSum .mbar i{display:block;height:100%}
  /* 一段一列橫排、超過就橫向捲（每張 196px） */
  .moverRow{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;margin-bottom:10px;scroll-snap-type:x proximity;scrollbar-width:thin}
  .moverRow .mover{flex:0 0 196px;scroll-snap-align:start}
  .moverRow .spark{width:100%;height:34px;display:block}
  .mover .mchg.amb{color:var(--amber);font-size:17px}   /* 「開價高 68%」比純數字長一點 */
  .moverEmpty{font-size:12.5px;color:var(--muted);padding:6px 2px}
  @media (max-width:700px){ .moverRow .mover{flex-basis:164px} .moverSum{gap:10px 14px;font-size:12.5px} }
  .moverGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .mover{display:flex;flex-direction:column;gap:9px;background:var(--panel);
         border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;
         box-shadow:var(--shadow)}
  .mover:hover{border-color:var(--accent);box-shadow:0 6px 18px -8px rgba(0,0,0,.45)}   /* 同樣不位移：下緣會閃 */
  .mover .mimg{width:100%;aspect-ratio:5/7;background:#fff;border:1px solid var(--line);
               border-radius:9px;overflow:hidden;display:flex}
  .mover .mimg img{width:100%;height:100%;object-fit:contain}
  .mover .mname{font-size:12.5px;line-height:1.4;display:-webkit-box;
      -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
  .mover .mchg{display:flex;align-items:baseline;justify-content:space-between;
               font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
  .mover .mchg .mprice{font-weight:500;color:var(--muted);font-size:12.5px}
  .mover .mchg.pos{color:var(--up)} .mover .mchg.neg{color:var(--down)}
  .mover .manchor{font-size:10.5px;color:var(--muted);margin-top:2px}
  .mover .manchor.warn{color:var(--amber)}

  /* ---------- Hover 放大鏡（只在有滑鼠的裝置） ---------- */
  #zoomBox{position:fixed;z-index:100;pointer-events:none;display:none;
           background:var(--panel);border:1px solid var(--line2);border-radius:12px;
           padding:8px;box-shadow:0 12px 40px rgba(23,32,46,.22)}
  #zoomBox img{display:block;width:320px;height:240px;object-fit:contain;background:#fff;border-radius:6px}
  #tapZoom{position:fixed;inset:0;z-index:200;display:none;place-items:center;
           background:rgba(8,11,16,.85);backdrop-filter:blur(2px)}
  #tapZoom.on{display:grid}
  #tapZoom img{max-width:92vw;max-height:80vh;object-fit:contain;background:#fff;
               border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.5)}

  /* ---------- 成員管理 ---------- */
  .invRow{display:flex;align-items:center;gap:10px;padding:10px 2px;
          border-bottom:1px solid var(--line);font-size:13.5px}
  .invRow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .invRow .nm small{color:var(--muted);margin-left:6px}
  .invRow button{background:var(--field);border:1px solid var(--line2);border-radius:7px;
                 padding:4px 10px;font-size:12px;color:var(--ink);cursor:pointer;white-space:nowrap}
  .invRow button.on{border-color:var(--accent);color:var(--accent)}
  .invRow .adm{font-size:11px;color:var(--amber);white-space:nowrap}

  /* ---------- 資料與工具 ---------- */
  #toolsDialog{width:min(400px,92vw);overflow:hidden}
  .toolSec{margin-top:14px}
  .toolSec h4{margin:0 0 8px;font-size:11.5px;letter-spacing:.12em;color:var(--muted);
              text-transform:uppercase}
  .toolSec a{display:block;padding:7px 10px;margin:3px 0;border:1px solid var(--line);
             border-radius:8px;color:var(--ink);text-decoration:none;font-size:13.5px}
  .toolSec a:hover{border-color:var(--accent);color:var(--accent)}
  body.notAdmin .adminOnly{display:none}
  #toolsBtn{background:var(--field);border:1px solid var(--line2);border-radius:8px;
            padding:6px 9px;cursor:pointer;font-size:14px}

  /* ---------- 版本紀錄彈窗 ---------- */
  #clDialog{overflow:hidden}
  #boxHistDialog{width:min(680px,94vw);overflow:hidden}
  .rcell.rmw, .rcell.rmkt, .rcell.spread{cursor:pointer}
  .rcell.rmw:hover, .rcell.rmkt:hover, .rcell.spread:hover{background:var(--accent-soft);border-radius:8px}
  #clDialog{width:min(560px,94vw);max-height:82dvh}
  .clHead{display:flex;align-items:center;justify-content:space-between;
          font-size:15px;margin-bottom:6px}
  .clBody{overflow-y:auto;max-height:calc(82dvh - 70px);padding-right:4px}
  .clBody h3{font-size:12px;letter-spacing:.14em;color:var(--accent);
             text-transform:uppercase;margin:16px 0 8px;padding-bottom:5px;
             border-bottom:1px solid var(--line)}
  .clBody h3:first-child{margin-top:2px}
  .clBody ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
  .clBody li{font-size:13px;line-height:1.65;color:var(--ink)}
  .clBody li::marker{color:var(--muted)}

  /* ---------- 互動歷史圖 ---------- */
  #histChart{position:relative;height:280px}
  #histChart .hc-read{position:absolute;top:6px;left:70px;z-index:5;font-size:12px;   /* 左邊 62px 是「歸位」鈕，讀數從它右邊開始（原本疊在同一個角落） */
    color:var(--muted);pointer-events:none;background:color-mix(in srgb,var(--panel) 82%,transparent);
    padding:2px 6px;border-radius:6px}
  #histChart .hc-read b{color:var(--ink)}
  /* 歸位鈕：所有圖表共用，放左上——右側是價格軸、下方是時間軸、左下是 TradingView 標誌，只有左上不擋東西 */
  .hc-reset{position:absolute;top:6px;left:8px;z-index:5;font-size:11px;
    background:var(--field);border:1px solid var(--line);border-radius:6px;color:var(--muted);
    padding:2px 8px;cursor:pointer;opacity:.85}
  .hc-reset:hover{color:var(--ink);border-color:var(--accent);opacity:1}
  .hc-zoom{left:auto;right:64px}   /* 放大鈕放右上：右側價格軸約 56px 寬，避開它 */
  /* ---------- 放大走勢圖 ---------- */
  #chartZoom{max-width:1100px;width:min(1100px,96vw);height:min(780px,92dvh);max-height:92dvh;padding:14px 16px;overflow:hidden}
  #chartZoom[open]{display:flex;flex-direction:column;gap:8px}
  .czHead{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px}
  .czHead .close{float:none}
  .czBar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
  .czLegend{display:flex;gap:6px;flex-wrap:wrap}
  .czl{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer}
  .czl i{display:inline-block;width:16px;height:0}
  .czl.off{opacity:.42;text-decoration:line-through}
  /* 桌機：圖在左、讀數一欄在右（一線一列，不要橫排擠成一串）；手機：讀數在圖下方 */
  .czBody{flex:1 1 auto;min-height:0;display:flex;gap:14px}
  #czChart{flex:1 1 auto;min-width:0;min-height:220px;position:relative}
  .czSide{flex:0 0 250px;display:flex;flex-direction:column;gap:4px;min-height:0}
  .czReadHead{font-size:11px;color:var(--muted)}
  .czRead{display:flex;flex-direction:column;font-size:12.5px;overflow-y:auto;min-height:0}
  .czr{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--hair,var(--line))}
  .czr i{display:inline-block;width:16px;height:0;flex:none}
  .czr .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .czr .d{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
  .czr b{font-variant-numeric:tabular-nums;white-space:nowrap}
  @media (max-width:700px){
    /* 搜尋市場：第一行輸入框＋搜尋；第二行「只看卡牌」靠左、排序下拉靠右縮成一顆小的（原本吃滿整行像一顆大按鈕） */
    #searchSection .row #searchInput{flex:1 1 200px;min-width:0}
    #searchSection .row #searchBtn{flex:0 0 auto}
    #searchSection .row .radarOnly{flex:1 1 50%}
    #searchSection .row #searchSort{flex:0 0 auto;width:auto;margin-left:auto;font-size:12.5px;padding:5px 26px 5px 10px !important;min-height:32px;
      background-color:var(--field);background-image:none;color:var(--muted);border:1px solid var(--line);box-shadow:none}
    #chartZoom{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0;padding:10px 12px;margin:0}
    .czBody{flex-direction:column;gap:6px}
    .czSide{flex:0 0 auto;max-height:36%}
    .czl{font-size:11.5px;padding:3px 8px}
  }
  #histChart, #bhChart, #tkChart, .bidChart, #radarChart{position:relative}
  .hc-legend{display:flex;gap:14px;flex-wrap:wrap;margin:8px 2px 0;font-size:12.5px;color:var(--muted)}
  .hc-legend label{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
  .hc-legend .sw{width:14px;height:3px;border-radius:2px;display:inline-block}

  /* ---------- 歷史彈窗 ---------- */
  body.modal-open{overflow:hidden}
  dialog{overflow-x:hidden;overflow-x:clip;background:var(--panel);color:var(--ink);border:1px solid var(--line);
         border-radius:14px;max-width:720px;width:92vw;padding:20px;box-shadow:var(--shadow);
         max-height:92dvh;overflow-y:auto;overscroll-behavior:contain}
  dialog::backdrop{background:rgba(8,12,18,.66);backdrop-filter:blur(2px)}
  dialog h3{margin:0 0 4px;font-size:15px}
  dialog .meta{color:var(--muted);font-size:12.5px;margin-bottom:14px}
  dialog .close{float:right;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer}
  .costBox{margin-bottom:14px;background:var(--bg);border:1px solid var(--line);
           border-radius:9px;padding:10px 12px}
  .costHead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
  .costLbl{color:var(--muted);font-size:12.5px}
  .costMsg{font-size:12px;color:var(--down)}
  .lotRow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
  .lotRow input{background:var(--field);border:1px solid var(--line2);border-radius:7px;
                color:var(--ink);padding:6px 10px;font-size:14px}
  .lotRow .lqty{width:64px}
  .lotRow .lcost{width:118px}
  .lotRow select{background:var(--field);border:1px solid var(--line2);border-radius:7px;
                 color:var(--ink);padding:6px 8px;font-size:12.5px}
  .lotRow .ldel{background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px}
  .lotRow .ldel:hover{color:var(--up)}
  .lotRow .x{color:var(--muted);font-size:12.5px}
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  input[type=number]{-moz-appearance:textfield;appearance:textfield}
  @keyframes lotflash{0%,100%{border-color:var(--line2);box-shadow:none}
    50%{border-color:var(--down);box-shadow:0 0 0 2px color-mix(in srgb,var(--down) 35%,transparent)}}
  .lotRow input.lotbad{animation:lotflash .2s ease-in-out 2}
  .costActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
  .costSum{color:var(--muted);font-size:12px;margin-left:auto}
  .ghostSmall{background:transparent;color:var(--muted);border:1px solid var(--line2);padding:6px 12px}
  .statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin-bottom:14px}
  .sgroup{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:11px 13px}
  .gt{font-size:10.5px;letter-spacing:.16em;color:var(--muted);font-weight:700;
      text-transform:uppercase;margin-bottom:6px}
  .gt .gtn{font-weight:400;font-size:10px;color:var(--muted);
           letter-spacing:.02em;margin-left:4px;text-transform:none}
  .hero{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
  .hero small{font-size:11px;color:var(--muted);font-weight:400;margin-left:7px}
  .chips{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px}
  .sitem{display:inline-flex;flex-direction:column;line-height:1.45}
  .sitem .k{font-size:11px;color:var(--muted);letter-spacing:.03em}
  .sitem .n{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
  .sitem .n.pos{color:var(--up)} .sitem .n.neg{color:var(--down)}
  .sitem .m{font-size:10px;color:var(--muted)}
  .sfoot{margin-top:9px;font-size:11px;color:var(--muted)}
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
  .dcell .l{font-size:11px;color:var(--muted)}
  .dcell .v{font-size:15px;font-weight:700;margin-top:3px}
  .ybadge{display:inline-block;white-space:nowrap;font-size:10px;color:var(--amber);
          font-weight:700;vertical-align:2px;margin-left:4px}
  .ysub{font-weight:400;font-size:11px;color:var(--muted);margin-top:3px;
        word-break:keep-all;line-height:1.45}
  .ranges{display:flex;gap:6px;margin-bottom:8px}
  .ranges button{background:var(--field);border:1px solid var(--line2);border-radius:999px;
                 padding:4px 13px;font-size:12.5px;color:var(--muted);cursor:pointer}
  .ranges button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  .ranges button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:8px}
  .legend i{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}

  @media (prefers-reduced-motion: reduce){*{transition:none!important}}
  @media (max-width:1040px){
    header::after{content:'›';position:absolute;top:0;right:0;bottom:0;width:46px;
      pointer-events:none;opacity:1;transition:opacity .2s;z-index:1;
      display:flex;align-items:center;justify-content:flex-end;padding-right:8px;
      color:var(--muted);font-size:20px;font-weight:700;
      background:linear-gradient(to left,var(--bg) 35%,transparent)}
    header.bar-end::after{opacity:0}
    header .bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
                -webkit-overflow-scrolling:touch}
    header .bar::-webkit-scrollbar{display:none}
    header .bar > *{flex:0 0 auto;white-space:nowrap}
    header .bar .grow{display:none}
  }
  @media (max-width:640px){
    html,body{overflow-x:hidden;overflow-x:clip;max-width:100vw}
    body{touch-action:pan-y pinch-zoom}
    header .bar{gap:7px;padding:9px 10px}
    header .bar button, header .seg button{padding:6px 10px;font-size:12.5px}
    header .brand{display:none}
    .result{gap:14px}
    .result .thmb{width:112px;height:157px;border-radius:9px}
    /* 手機：縮圖佔左兩列；卡名一整行；價格＋選等級在卡名下方（原本卡名被擠成直排） */
    .result .head{display:grid;grid-template-columns:112px minmax(0,1fr) auto;grid-template-rows:auto auto;
      gap:6px 12px;align-items:center}
    .result .head .thmb{grid-row:1 / span 2}
    .result .head .name{grid-column:2 / span 2;grid-row:1;align-self:start;line-height:1.45}
    .result .head .price{grid-column:2;grid-row:2;justify-self:start}
    .result .head .open{grid-column:3;grid-row:2;justify-self:end}
    .card{grid-template-columns:50px 1fr}
    .card .right{grid-column:1/-1;justify-content:space-between}
    .valueCard .big{font-size:26px}
    /* 歷史彈窗（手機）：兩欄定格，不再 auto-fit 碰運氣 */
    dialog{width:96vw;padding:14px 12px;max-height:94dvh}
    .statgrid{grid-template-columns:1fr;gap:8px}
    .sgroup{padding:10px 11px}
    .hero{font-size:17px}
    #histChart{height:230px}
    .hc-legend{gap:9px;font-size:11.5px}
    #histRanges button{padding:5px 10px}
  }

  /* ============ 質感層（GitHub 工具風）：hover 亮一階＋accent 描邊、
     卡片「底色升一階＋微光環＋深投影」、扁平粗滑軌 ============ */
  .btn, .refresh, #toolsBtn, #themeBtn, .helpChip, .seg button, .close,
  #curSelect, #sortSelect, #searchSort, #radarSort, .toolSec a{
    transition:background .15s, border-color .15s, color .15s;
  }
  /* 中性鈕：hover 亮一階＋accent 描邊 */
  #toolsBtn:hover, #themeBtn:hover, .helpChip:hover, .close:hover,
  .toolSec a:hover{
    background:var(--hovStep);
    border-color:var(--accent);
    color:var(--accent);
  }
  #toolsBtn:active, #themeBtn:active, .helpChip:active{background:var(--field)}

  /* 藍底主鈕：hover 藍加深＋外圈亮環（不變灰不變黑） */
  .btn:hover:not(:disabled), .refresh:hover:not(:disabled){
    background:color-mix(in srgb, var(--accent) 86%, #000);
    color:var(--accent-ink);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent);
  }
  .btn:active:not(:disabled), .refresh:active:not(:disabled){
    background:color-mix(in srgb, var(--accent) 74%, #000);
    box-shadow:none;
  }
  /* 連體滑軌（deploy tool 實照版）：扁平深軌、閒置純文字、
     選中＝實心 accent 藍底＋白字＋投影浮起 */
  .seg{
    background:var(--bg);
    border:1px solid var(--line);border-radius:9px;
    padding:3px;gap:2px;overflow:visible;
  }
  .seg button{
    border:0;border-radius:7px;background:transparent;color:var(--muted);
    font-weight:500;
  }
  .seg button.on{
    background:var(--accent);
    color:var(--accent-ink);
    font-weight:600;
    box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 45%, rgba(0,0,0,.35));
  }
  .seg button:not(.on):hover{color:var(--ink);background:var(--hovStep)}



  /* 卡片／雷達列／搜尋列／快訊：升一階＋光環＋深投影 */
  .card, .rrow, .result, .mover{
    transition:background .15s, box-shadow .15s, border-color .15s;
  }
  .card:hover, .rrow:hover, .result:hover, .mover:hover{
    background:var(--hovCard);
    box-shadow:0 0 0 1px var(--ring), var(--deepSh);
  }

  /* 輸入框聚焦 */
  input[type="search"]:focus, input[type="text"]:focus, input[type="number"]:focus,
  select:focus{
    outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
  }

  /* 扁平粗滑軌（拇指描一圈軌道色的邊，hover 亮一階） */
  *::-webkit-scrollbar{width:10px;height:10px}
  *::-webkit-scrollbar-track{background:var(--bg)}
  *::-webkit-scrollbar-thumb{background:var(--sbThumb);border-radius:5px;
    border:2px solid var(--bg)}
  *::-webkit-scrollbar-thumb:hover{background:var(--sbThumbHov)}
  *::-webkit-scrollbar-corner{background:var(--bg)}
  /* 標準滑軌屬性只給不認 WebKit 規則的引擎（Firefox）；
     Chrome 兩者都吃且標準優先，混寫會出現原生細桿與深色胖桿並存 */
  @supports not selector(::-webkit-scrollbar){
    *{scrollbar-width:thin;scrollbar-color:var(--sbThumb) var(--bg)}
  }
  #drawer *::-webkit-scrollbar-track, dialog *::-webkit-scrollbar-track{background:var(--panel)}
  #drawer *::-webkit-scrollbar-thumb, dialog *::-webkit-scrollbar-thumb{border-color:var(--panel)}

/* 追蹤說明橫幅：頁籤與卡片之間，一次性提示 */
#watchBanner{display:flex;align-items:center;gap:10px;margin:10px 0 2px;
  padding:8px 12px;border-radius:8px;
  border:1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  background:color-mix(in srgb, var(--amber) 12%, var(--panel));
  color:var(--amber);font-size:12.5px}
#watchBanner[hidden]{display:none}
#watchBanner span{flex:1}
#watchBanner button{border:0;background:transparent;color:var(--amber);
  opacity:.7;font-size:16px;cursor:pointer;padding:0 4px;line-height:1}
#watchBanner button:hover{opacity:1}

/* 橫長商品圖：改 contain 完整顯示（留白補直框） */
.thumb img.landscape{object-fit:contain;transform:none;background:#fff}

/* 簡潔卡刪除鈕：貼齊價格區右側的迷你桶 */
/* 簡潔卡底列：價格靠左、垃圾桶佔右側空區（深底細框，不遮卡圖） */
.card.compact .cfoot{display:flex;align-items:center;gap:8px}
.card.compact .cright{text-align:left;min-width:0;flex:1}      /* 價格區吃滿剩餘寬 */
.card.compact .cdel{flex:0 0 auto;margin-left:auto;            /* 垃圾桶永遠靠最右 */
  background:var(--bg);border:1px solid var(--line2);
  color:var(--muted);border-radius:8px;padding:7px 9px;cursor:pointer;
  display:grid;place-items:center}
.card.compact .cdel svg{width:17px;height:17px}
@media (hover:hover){ .card.compact .cdel:hover{color:var(--down);border-color:var(--down);background:var(--hovStep)} }
/* 點完不留殘影：只有鍵盤操作才顯示焦點框 */
.card.compact .cdel:focus{outline:none}
.card.compact .cdel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* 手機詳細卡：垃圾桶釘右上角，不再流動折行 */
@media (max-width:760px){
  .card:not(.compact){position:relative}
  .card:not(.compact) .del{position:absolute;top:12px;right:12px}
  /* 手機：兩行確定性版面──第一行徽章＋數量＋搬移，第二行價格整行靠右。
     不用 nowrap（會把價格壓扁到溢出），改用明確的 flex-basis 控制換行點。 */
  /* 手機版（回到原版結構）：
     ⇄ 搬移鈕與垃圾桶一起釘在右上角（只留圖示，不佔操作列）
     第一行：漲跌徽章（左）＋ 數量（右）
     第二行：掛/成交（左）→ 小計 → 大數字（右） */
  .card:not(.compact) .mv{position:absolute;top:12px;right:52px;margin:0;padding:6px 8px}
  .card:not(.compact) .mv .mvt{display:none}
  .card:not(.compact) .name{padding-right:92px}
  .card:not(.compact) .right{flex-wrap:wrap;gap:8px;align-items:center;
    justify-content:flex-start}
  /* 走勢圖限寬，才容得下同一行的徽章與數量（原本它太寬把數量擠到下一行） */
  .card:not(.compact) .right .spark{flex:0 1 84px;width:84px;min-width:48px;height:28px}
  /* 三顆徽章（今日／成交／7日）齊全時一列塞不下：隱藏小走勢圖（點卡片有完整圖）並讓徽章緊湊 */
  .card:not(.compact) .right:has(.chip:nth-of-type(3)) .spark{display:none}
  .card:not(.compact) .right:has(.chip:nth-of-type(3)) .chip{padding:3px 7px;font-size:11px}
  @media (max-width:400px){          /* SE / 13 mini：再讓一點寬給徽章與數量 */
    .card:not(.compact) .right .spark{flex:0 1 56px;width:56px}
    .card:not(.compact) .right{gap:6px}
    .card:not(.compact) .right:has(.chip:nth-of-type(3)) .chip{padding:3px 6px;font-size:10.5px}
    .card:not(.compact) .right:has(.chip:nth-of-type(3)) .qty button{width:24px;height:24px}
  }
  .card:not(.compact) .right .chip{flex:0 0 auto}
  /* 三顆徽章＋數量要同一行（2026-10-13 噴火龍被擠成兩行）：間距 5px、數量鈕 24px */
  .card:not(.compact) .right:has(.chip:nth-of-type(3)){column-gap:5px}
  .card:not(.compact) .right:has(.chip:nth-of-type(3)) .qty{gap:3px}
  .card:not(.compact) .right:has(.chip:nth-of-type(3)) .qty button{width:24px;height:24px}
  @media (max-width:370px){         /* 360 寬安卓：最極端（三顆都是兩位數百分比）也要一行 */
    .card:not(.compact) .right:has(.chip:nth-of-type(3)) .chip{padding:3px 5px;font-size:10px}
    .card:not(.compact) .right:has(.chip:nth-of-type(3)) .qty button{width:22px;height:22px}
  }
  .card:not(.compact) .right .qty{margin-left:auto;flex:0 0 auto}
  .card:not(.compact) .right .price-block{flex:1 0 100%;min-width:0;margin:0;
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    text-align:left}
  .card:not(.compact) .price-block .dualp{order:1;flex:0 1 auto;margin:0;
    display:block;text-align:left;line-height:1.5}
  .card:not(.compact) .price-block .subtotal{order:2;flex:0 1 auto;text-align:right}
  .card:not(.compact) .price-block .now{order:3;flex:0 0 auto;margin-left:auto}
  /* 極窄時搬移鈕只留圖示，仍保持同一列 */
  @media (max-width:400px){
    .card:not(.compact) .right .mv .mvt{display:none}
    .card:not(.compact) .right .mv{padding:5px 8px}
  }
}

/* 窄機（iPhone 16 Pro 等 ≤430pt）：整排一起縮，寧可字小也不折行 */
@media (max-width:440px){
  .valueCard .vhead{gap:6px}
  .valueCard .vhead .lbl{font-size:10px;letter-spacing:.08em;flex:0 1 auto;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .valueCard .vhead .valSeg{margin:0}
  .valueCard .vhead .valSeg button{padding:3px 7px;font-size:10.5px}
  .valueCard .vhead #curSelect{padding:4px 5px;font-size:11px}
  .valueCard .vhead .refresh{padding:5px 9px;font-size:11.5px}
  .valueCard .vhead .vbtns{gap:5px}
}
/* 極窄（≤380pt）：標籤讓位，四件套仍同排 */
@media (max-width:380px){
  .valueCard .vhead .lbl{display:none}
}

/* 收縮膜狀態小標：無膜＝琥珀警示、有膜＝低調中性 */
.wchip{display:inline-block;font-size:10px;line-height:1.5;padding:0 5px;border-radius:4px;
  margin-right:5px;vertical-align:1px;white-space:nowrap;font-weight:600}
.wchip.none{background:color-mix(in srgb, var(--amber) 16%, transparent);
  color:var(--amber);border:1px solid color-mix(in srgb, var(--amber) 40%, transparent)}
.wchip.has{background:var(--bg);color:var(--muted);border:1px solid var(--line2)}

/* 動態篩選標記列：換行排列（不橫向滑動，避免手機誤觸），超過兩行可收合 */
#facetBar{display:flex;align-items:flex-start;gap:8px;margin:8px 0 2px}
#facetBar[hidden]{display:none}
.facetWrap{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.facetWrap.collapsed{max-height:60px;overflow:hidden}
.facet{flex:0 0 auto;border:1px solid var(--line2);background:var(--bg);color:var(--muted);
  border-radius:999px;padding:4px 11px;font-size:12px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;line-height:1.5;
  transition:background .15s,color .15s,border-color .15s}
.facet:hover{border-color:var(--accent);color:var(--accent)}
.facet.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.facet .fn{font-size:10.5px;opacity:.7;font-variant-numeric:tabular-nums}
.facet.on .fn{opacity:.85}
.facet.reset{border-style:dashed;color:var(--accent);border-color:var(--accent)}
.facetSep{flex:0 0 auto;width:1px;align-self:stretch;background:var(--line2);margin:0 2px}
#facetMore{flex:0 0 auto;border:1px solid var(--line2);background:var(--field);color:var(--muted);
  border-radius:999px;padding:4px 10px;font-size:11.5px;cursor:pointer;white-space:nowrap}
#facetMore[hidden]{display:none}
#facetMore:hover{border-color:var(--accent);color:var(--accent)}

/* 篩選開關鈕：預設收起，有啟用中的條件時亮起並標數字 */
#facetToggle{border:1px solid var(--line2);background:var(--field);color:var(--muted);
  border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px;
  transition:background .15s,color .15s,border-color .15s}
#facetToggle[hidden]{display:none}
#facetToggle:hover{border-color:var(--accent);color:var(--accent)}
#facetToggle.on{color:var(--ink);border-color:var(--line2);background:var(--hovStep)}
#facetToggle.active{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, var(--panel))}
#facetToggle .ft{font-variant-numeric:tabular-nums;font-weight:600}
#facetToggle .fcaret{font-size:12px;opacity:.85;line-height:1;transition:transform .18s}
#facetToggle.on .fcaret{transform:rotate(180deg)}
#facetBar{animation:facetIn .18s ease}
@keyframes facetIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* 滑鼠/觸控點擊後不留焦點外框；鍵盤操作仍保留可及性 */
button:focus:not(:focus-visible), a:focus:not(:focus-visible){outline:none}
button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Chrome 自動填字的黃/白底：用 inset 陰影覆蓋，維持深色外觀 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--field) inset;
  box-shadow:0 0 0 1000px var(--field) inset;
  caret-color:var(--ink);
  transition:background-color 9999s ease-out 0s;   /* 阻止瀏覽器的背景漸變 */
}

/* 成員列的「重設」：破壞性動作，用琥珀色標示但不搶戲 */
.invRow .rot{border:1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  background:transparent;color:var(--amber);border-radius:7px;padding:4px 9px;
  font-size:11.5px;cursor:pointer;white-space:nowrap}
@media (hover:hover){ .invRow .rot:hover{background:color-mix(in srgb, var(--amber) 14%, transparent)} }

/* 遊々亭同號不同版警示 */
.ywarn{margin-top:6px;font-size:11.5px;line-height:1.6;
  color:var(--amber);background:color-mix(in srgb, var(--amber) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  border-radius:8px;padding:6px 9px}
.ywarn[hidden]{display:none}

/* 卡片彈窗分頁 */
.histTabs{margin:10px 0 12px;width:fit-content}
.bidChart{position:relative;height:200px;overflow:hidden;margin-top:6px}
.histTabs button{padding:6px 0;font-size:13px;min-width:96px;text-align:center}
#histDialog .tabPane[hidden]{display:none}

/* 日本買取（TOREKA）面板 */
.tkshops{margin-top:14px}
.tktable{width:100%;border-collapse:collapse;margin-top:6px;font-size:12.5px}
.tktable td{padding:5px 8px;border-bottom:1px solid var(--line)}
.tktable td.p{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;
  white-space:nowrap}
.tktable tr.best td{color:var(--up)}
.tktable a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line2)}
@media (hover:hover){ .tktable a:hover{color:var(--accent);border-bottom-color:var(--accent)} }
.tkchg{font-size:10.5px;margin-left:6px;opacity:.85;font-variant-numeric:tabular-nums}
.tkchg.up{color:var(--up)} .tkchg.down{color:var(--down)}
.tktable tr:last-child td{border-bottom:0}
.tkchartWrap{margin-top:16px}
.tklegend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 2px;
  font-size:11.5px;color:var(--muted)}
.tklegend .tkl{display:inline-flex;align-items:center;gap:5px}
.tklegend .sw{display:inline-block;width:16px;height:0;border-top:2px solid var(--accent)}
.tklegend .sw.max{border-top:1px dashed var(--muted)}
.tklegend .tkln{opacity:.7;margin-left:3px}
.tklegend .tkl.none{color:var(--muted);opacity:.75}
.tklegend .tkl.none .sw{border-top:2px dotted var(--muted);opacity:.5}
.tklegend .tkl.none em{font-style:normal;font-size:10.5px;margin-left:3px;padding:0 5px;border:1px solid var(--line);border-radius:999px}
.tklegend .tkread{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:440px){
  .tklegend{gap:10px}
  .tklegend .tkln{display:none}
  .tklegend .tkread{margin-left:0;flex-basis:100%}
}
.tkchartWrap #tkChart{margin-top:6px;position:relative;height:200px;overflow:hidden}   /* 固定高度：autoSize 才不會無限長 */
@media (max-width:760px){ .tkchartWrap #tkChart{height:180px} }
.tksub{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.6}
.tkdate{opacity:.8}
.tkmsg{font-size:12.5px;color:var(--muted);padding:8px 0}
.tkintro{font-size:12.5px;color:var(--muted);line-height:1.8}
.tkintro p{margin:0 0 10px}
.tkintro b{color:var(--ink)}
@media (max-width:440px){
  .histTabs button{padding:5px 12px;font-size:12px}
  .tktable{font-size:12px}
}

/* TOREKA 目錄建立進度 */
.tkbuild{padding:14px 4px}
.tkbuildT{font-size:13.5px;font-weight:600;margin-bottom:8px}
.tkbar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.tkbarIn{height:100%;border-radius:999px;background:var(--accent);
  transition:width .6s ease;position:relative;min-width:6px}
.tkbarIn::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:tkshine 1.4s linear infinite}
@keyframes tkshine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.tkbuildS{font-size:12px;color:var(--ink);margin-top:8px;font-variant-numeric:tabular-nums}
.tkbuildN{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.7}
.tkbuildN b{color:var(--ink)}
.tkfail{color:var(--amber);background:color-mix(in srgb, var(--amber) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  border-radius:8px;padding:8px 10px;font-size:12.5px}
.tkbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line2)}

/* 日本買取：店家子分頁 */
.dealerTabs{margin:0 0 12px;width:fit-content}
.dealerTabs button{padding:5px 12px;font-size:12.5px;min-width:88px;text-align:center;line-height:1.25}
.dealerTabs .dsub{display:block;font-size:10px;opacity:.7;font-weight:400}
.dealerTabs button.on .dsub{opacity:.9}
#histDialog .dealerPane[hidden]{display:none}
@media (max-width:440px){
  /* 手機：兩排分頁都撐滿、按鈕等寬，避免上下排長度不一 */
  .histTabs,.dealerTabs{width:100%;display:flex}
  .histTabs button,.dealerTabs button{flex:1 1 0;min-width:0;padding:6px 8px}
  .bidChart{height:180px}
}

/* 店家面板：比較表與同卡版本 */
.tktable thead th{font-size:10.5px;color:var(--muted);font-weight:500;text-align:left;padding:2px 8px 6px;
  border-bottom:1px solid var(--line2);letter-spacing:.04em}
.tktable thead th.p{text-align:right}
.tktable td.muted{color:var(--muted);font-size:11.5px}
.tktable.cmp tr.best td{color:var(--accent);font-weight:600}
.tktable .tkchg{margin-left:6px}
.dcell .tkln{font-size:11px;color:var(--muted);font-weight:400}
@media (max-width:440px){ .tktable.cmp td.muted{display:none} .tktable.cmp th:last-child{display:none} }

/* 歷史摘要：標籤／數值小格 */
/* 資料範圍：原本六個小格裸在背景上，現在裝進面板、格間細直線 */
.metaGrid{display:flex;flex-wrap:wrap;gap:8px 0;margin:4px 0 2px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.mcell{display:inline-flex;flex-direction:column;gap:1px;min-width:74px;padding:0 16px;border-left:1px solid var(--line)}
.mcell:first-child{padding-left:0;border-left:0}
.mcell.mhead .mk{font-size:10.5px;letter-spacing:.16em;font-weight:700;text-transform:uppercase}
.mcell .mk{font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.mcell .mval{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.mcell .ms{font-size:10.5px;color:var(--muted)}
@media (max-width:600px){ .metaGrid{gap:8px 0;padding:8px 10px} .mcell{min-width:0;flex:1 1 30%;padding:0 10px} .mcell.mhead{flex-basis:100%;border-left:0;padding-left:0} .mcell:nth-child(2){padding-left:0;border-left:0} }
@media (max-width:440px){ .mcell .mval{font-size:12.5px} }

/* magi 市場格：跨整列 */
.magiGroup{grid-column:1/-1}
.magiGroup .tktable{margin-top:4px}
.magiGroup .tktable td .tkln{font-size:10.5px;color:var(--muted);font-weight:400}

/* 面板內連結：點過的也維持 accent 色，避免深色主題下 :visited 的預設深紫黑成一片 */
.tksub a, .tkintro a, .tktable a, .tkdate a, .ywarn a, .magiGroup a,
.tksub a:visited, .tkintro a:visited, .tktable a:visited, .tkdate a:visited, .ywarn a:visited, .magiGroup a:visited{
  color:var(--accent);text-decoration:none;border-bottom:1px dotted color-mix(in srgb, var(--accent) 55%, transparent)}
@media (hover:hover){
  .tksub a:hover, .tkintro a:hover, .tktable a:hover, .tkdate a:hover, .ywarn a:hover, .magiGroup a:hover{
    border-bottom-color:var(--accent)}
}

/* 載入指示器 */
.ldg{padding:6px 0 2px}
.ldg .tkbar{height:6px}
.tkbarIn.ind{width:38%;animation:ldgSlide 1.3s ease-in-out infinite}
@keyframes ldgSlide{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}
.ldgT{font-size:11.5px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.ldgHost{margin-top:8px}

/* magi 最近成交：標題單行省略、日期與金額不折行 */
.tktable td.tt{max-width:0;width:100%}
.tktable td.tt a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tktable td.nw{white-space:nowrap}
.tktable.magiT td.p .tkln{white-space:nowrap}
.tktable.magiT tr.best td{color:var(--accent);font-weight:600}
@media (max-width:440px){
  .tktable.magiT{font-size:12px}
  .tktable.magiT th{font-size:10px}
}

.tktable td .tkchg{margin-left:5px;margin-right:4px}

/* 可疑資料標記：可點（手機），桌機 hover 也顯示 */
.warnTap{border:0;background:transparent;color:var(--amber);cursor:pointer;padding:0 4px;
  font-size:13px;line-height:1;vertical-align:middle;margin-left:4px}
.warnList b{color:var(--ink);font-weight:600}

/* 回報誤判 */
.rptBtn{border:1px solid var(--line2);background:transparent;color:var(--muted);border-radius:6px;
  padding:2px 8px;font-size:10.5px;cursor:pointer;margin-left:8px;vertical-align:middle}
@media (hover:hover){ .rptBtn:hover{color:var(--amber);border-color:var(--amber)} }
.rptBtn:disabled{opacity:.6;cursor:default}
.pill{display:inline-block;min-width:18px;padding:1px 6px;border-radius:999px;background:var(--amber);
  color:#fff;font-size:11px;text-align:center;margin-left:4px}
/* 審查清單 */
#reviewDialog{width:min(820px,94vw)}
.rv{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:var(--panel2)}
.rvH{font-size:13.5px}
.rvH .tkchg{margin-left:6px}
.rvS{margin-left:8px;font-size:10.5px;padding:1px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.rvS.open{color:var(--amber);border-color:var(--amber)}
.rvS.fixed{color:var(--accent);border-color:var(--accent)}
.rvM{font-size:11.5px;color:var(--muted);margin-top:4px}
.rvSnap{font-size:11.5px;color:var(--muted);margin-top:6px;padding:6px 8px;background:var(--field);border-radius:6px;line-height:1.6}
.rvA{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.fx{padding:5px 8px;font-size:12px;border:1px solid var(--line2);border-radius:6px;background:var(--field);color:var(--ink);min-width:160px}
.fx::placeholder{color:var(--muted)}
.rvA .btn{padding:5px 12px;font-size:12px}

/* 回報對話框 */
#rptDialog{width:min(460px,92vw)}
.rptOpts{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.rptOpts label{display:flex;align-items:center;gap:8px;cursor:pointer}
#rptOther{width:100%;margin-top:8px;padding:8px;border:1px solid var(--line2);border-radius:8px;background:var(--field);color:var(--ink);font-size:13px;resize:none;box-sizing:border-box;min-height:64px}
/* 審查：快照與連結完整顯示、可複製 */
.rvSnap{word-break:break-all;white-space:pre-wrap}
.rvSnapH{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;color:var(--ink)}
.rvLinks{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.rvLink{display:flex;align-items:center;gap:8px}
.rvLink a{flex:1;min-width:0;word-break:break-all;color:var(--accent)}
.cpBtn{flex:0 0 auto;border:1px solid var(--line2);background:var(--panel);color:var(--muted);border-radius:6px;
  padding:2px 8px;font-size:11px;cursor:pointer}
@media (hover:hover){ .cpBtn:hover{color:var(--accent);border-color:var(--accent)} }

/* 搜尋結果：圖與卡名各自可點 */
.result .head .thmb{cursor:zoom-in}
.result .head .name{cursor:pointer}
@media (hover:hover){ .result .head .name:hover{color:var(--accent);text-decoration:underline dotted} }
/* 預覽模式提示列 */
.previewBar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:8px 0 4px;padding:8px 12px;border-radius:9px;font-size:12.5px;
  background:color-mix(in srgb, var(--accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--accent) 30%, transparent)}
.previewBar[hidden]{display:none}
.previewBar .btn{padding:5px 12px;font-size:12px}

/* PSA 格：跨整列；上傳鈕是 label 包 input */
#psaBody .duo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:560px){ #psaBody .duo{grid-template-columns:repeat(2,minmax(0,1fr))} }
.psaUp{cursor:pointer}

/* PSA 總覽列：大縮圖｜內容｜右側動作（與搜尋市場列同構） */
.psaRow{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:start}
.psaThumb{width:56px;height:78px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:var(--panel2)}
.psaThumb.ph{background:var(--field)}
.psaMain{min-width:0}
.psaRow .rvH{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.psaAct{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.psaAct .btn{padding:7px 12px;font-size:12px;white-space:nowrap;text-align:center}
@media (max-width:560px){
  .psaRow{grid-template-columns:56px minmax(0,1fr)}
  .psaAct{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
}

/* 成員提供 PSA 編號 */
.psaSub{margin:10px 0;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.psaSub .l{font-size:12px;color:var(--muted);margin-bottom:6px}
.psaSubRow{display:flex;gap:8px;align-items:center}
.psaSubRow input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--field);color:var(--ink);font-size:13px}
.psaSub.sent{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;
  background:color-mix(in srgb, var(--accent) 8%, transparent);border-color:color-mix(in srgb, var(--accent) 30%, transparent)}
.pencil{border:1px solid var(--line2);background:var(--field);color:var(--ink);border-radius:8px;width:34px;height:34px;
  font-size:15px;cursor:pointer;flex:0 0 auto}
@media (hover:hover){ .pencil:hover{color:var(--accent);border-color:var(--accent)} }

.bmBox{margin:0 0 12px;padding:8px 12px;border:1px dashed var(--line2);border-radius:9px}
.bmBox summary{cursor:pointer;font-size:12.5px;color:var(--accent)}
#bmCode{font-family:ui-monospace,monospace;font-size:11px}

textarea{resize:none}

/* 對話框內所有連結：點過不變深紫，全站一致 */
dialog a, dialog a:visited{color:var(--accent)}
#reviewDialog .rvSnap, #reviewDialog .rvM, #reviewDialog .rvLinks{user-select:text;-webkit-user-select:text}
.rvLink .cpBtn{margin-left:6px}

.rvHint{font-size:11px;color:var(--muted);margin-top:4px;user-select:text;-webkit-user-select:text}

/* PSA 各等級分佈 */
.popBar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--line);margin:4px 0 8px;gap:1px}
.popSeg{background:var(--muted);opacity:.55}
.popSeg.g10{background:var(--accent);opacity:1}
.popT td.p .tkln{font-size:10.5px;color:var(--muted);font-weight:400}
.popT tr.best td{color:var(--accent);font-weight:600}

/* 成員提供的 cert 編號清單 */
.subList{margin:2px 0 6px}
.subRow{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 0;border-bottom:1px dashed var(--line)}
.subRow:last-child{border-bottom:0}
.subRow.used a{font-weight:600}
.subRow .cpBtn{margin-left:auto}
.subMore summary{cursor:pointer;font-size:11.5px;color:var(--accent);padding:4px 0}

/* 篩選：hidden 要贏過 grid；清除鈕 */
.psaRow[hidden]{display:none}
.fxWrap{position:relative;display:inline-flex;align-items:center}
.fxWrap .fx{padding-right:26px}
.fxClear{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);
  font-size:16px;line-height:1;cursor:pointer;width:22px;height:22px;border-radius:50%}
@media (hover:hover){ .fxClear:hover{color:var(--ink);background:var(--line)} }

/* 收藏載入中的骨架卡 */
.card.skel{pointer-events:none;min-height:88px}
.card.skel .thumb{background:var(--line);border-radius:8px;min-height:78px}
.card.skel .name span{display:block;height:12px;border-radius:6px;background:var(--line);width:62%;margin:6px 0}
.card.skel .name span.s2{width:38%;height:10px}
.card.skel .right .pl{display:block;width:96px;height:22px;border-radius:6px;background:var(--line)}
.card.skel{position:relative;overflow:hidden}
.card.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--panel) 55%, transparent),transparent);
  transform:translateX(-100%);animation:ldgSlide 1.2s ease-in-out infinite}

/* 簡潔模式的骨架：直式卡圖比例，與真實 compact 卡同尺寸 */
.card.compact.skel{min-height:0;padding:8px}
.card.compact.skel .cwrap{aspect-ratio:63/88;width:100%;border-radius:8px;background:var(--line);margin-bottom:8px}
.card.compact.skel .cname{display:block;-webkit-line-clamp:unset;overflow:visible;height:auto}
.card.compact.skel .cname span{display:block;height:11px;border-radius:5px;background:var(--line);width:80%;margin:4px 0}
.card.compact.skel .cname span.s2{width:50%;height:9px}
.card.compact.skel .cfoot .pl{display:block;width:60%;height:16px;border-radius:5px;background:var(--line);margin-top:6px}

/* 對話框標題列固定，長清單捲到底 × 也在 */
.clHead.sticky{position:sticky;top:0;z-index:5;background:var(--panel);padding-top:4px;margin-top:-4px;
  box-shadow:0 6px 12px -8px rgba(0,0,0,.25)}
#reviewDialog{padding-top:8px}
.rvS.fixed{color:var(--accent);border-color:var(--accent)}

.tktable tr.dim td{opacity:.55}

/* 總覽分頁 */
.ovHero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:4px 0 14px}
.ovHero.two{grid-template-columns:repeat(2,minmax(0,1fr))}   /* 卡盒：只有市場價＋趨勢兩格 */
.ovHero .hc{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.ovHero .hc .l{font-size:10.5px;color:var(--muted);letter-spacing:.05em}
.ovHero .hc .v{font-size:clamp(16px,4.6vw,20px);font-weight:700;margin-top:2px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ovHero .hc .v.chips{white-space:normal;overflow:visible;display:flex;flex-wrap:wrap;gap:4px}
.ovHero .hc .v.chips .chip{font-size:11.5px}
.ovHero .hc.acc .v{color:var(--accent)}
.ovHero .hc .s{font-size:11px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.ovHero .hc .fx3{font-size:10.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pct{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11px;margin-right:6px;font-weight:600;vertical-align:middle}
.pct.g{background:color-mix(in srgb,#16a34a 15%,transparent);color:#15803d}
.pct.y{background:color-mix(in srgb,#d97706 15%,transparent);color:#b45309}
.pct.r{background:color-mix(in srgb,#dc2626 15%,transparent);color:#b91c1c}
body.dark .pct.g{color:#4ade80} body.dark .pct.y{color:#fbbf24} body.dark .pct.r{color:#f87171}
.ovBlk{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 14px 12px;margin-top:12px}   /* 總覽：裸在背景上的區塊各自一塊面板 */
.ovBlk .gt{margin-top:0}
.ovBlk .tkchartWrap, .ovBlk.tkchartWrap{margin-top:12px}
.ovCh{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap}
.ovCh .gt{margin:0}  .ovCh .tklegend{margin:0;min-height:0}
.srcList{margin:4px 0 0}
/* 每列是自己的 grid：除了名稱以外的欄一律固定寬，橫條起點與 100% 虛線才會上下對齊（價格欄若用 auto，¥199,000 跟 ¥95,000 的列名稱欄寬度不同，橫條就左右飄） */
.srcRow{display:grid;grid-template-columns:minmax(0,1fr) 200px 44px 92px;gap:6px 12px;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line);align-items:center}
.srcRow .n{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srcRow .pc{text-align:right;font-variant-numeric:tabular-nums}
.srcRow .sbar{position:relative;display:block;height:5px;background:var(--line);border-radius:3px}
.srcRow .sbar i{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--line2)}
.srcRow .sbar i.hi{background:var(--accent)} .srcRow .sbar i.lo{background:var(--muted)} .srcRow .sbar i.eq{background:var(--ink)}
.srcRow .sbar u{position:absolute;top:-3px;height:11px;border-left:1px dashed var(--ink);opacity:.5}
.srcRow .sbar.none{background:none}
.srcRow:last-child{border-bottom:0}
.srcRow .d{color:var(--muted);font-size:11px;margin-left:6px}
.srcRow .p{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.srcRow.best .p{color:var(--accent)}
@media (max-width:600px){
  .ovHero{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ovHero .hc{padding:9px 10px}
  .srcRow{font-size:12px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n p" "b b";gap:4px 10px}
  .srcRow .n{grid-area:n} .srcRow .p{grid-area:p} .srcRow .sbar{grid-area:b} .srcRow .pc{display:none}
}

/* iOS Safari：輸入框字體 <16px 會在聚焦時自動縮放且不縮回 → 手機一律 16px */
@media (max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea{font-size:16px !important}
  .card:not(.compact) .thumb img{cursor:zoom-in}
}

@media (max-width:400px){
  #sortSelect{max-width:148px;padding:6px 22px 6px 8px}
}

/* 總覽層次：主數字放大、四卡各有色帶、來源列標記 */
.ovHero .hc{border-top:3px solid var(--line2);position:relative}
.ovHero .hc:first-child{border-top-color:var(--ink)}
.ovHero .hc:first-child .v{font-size:clamp(20px,5.4vw,26px)}
.ovHero .hc.acc{border-top-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--panel2))}
.ovHero .hc.up{border-top-color:var(--up)} .ovHero .hc.down{border-top-color:var(--down)}
.ovHero .hc:last-child{border-top-color:#8b5cf6}
.ovHero .hc .l{font-weight:600;color:var(--ink);opacity:.72}
.ovHero .hc .v{color:var(--ink)}
.ovHero .hc.acc .v{color:var(--accent)}
.ovHero .hc .s{color:var(--muted)}
.ovHero .hc.acc .s{color:var(--ink)}
.srcRow .tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:5px;margin-right:6px;vertical-align:middle;font-weight:600;letter-spacing:.03em}
.srcRow .tag.mkt{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink)}
.srcRow .tag.best{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.srcRow .tag.bid{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);opacity:.8}
.srcRow.mkt .p{color:var(--ink);font-size:14px}
.srcRow.best .p{color:var(--accent);font-size:14px}
.srcRow .n{color:var(--ink)}
.srcRow .p{color:color-mix(in srgb,var(--ink) 78%,transparent)}

.originSeg{display:inline-flex;vertical-align:middle;margin:0 4px}
.originSeg button{padding:3px 10px;font-size:11px;min-width:0}

.tkchg.stale{color:var(--amber);border-color:var(--amber)}

/* 圖例讀數固定高度、不換行，避免滑鼠靠近圖表上緣時讀數出現→圖例增高→圖表位移→讀數消失的抖動迴圈 */
/* 圖例一行、讀數獨立一行（固定高，內容出現／消失不改高度，三條線的數字放得下） */
.tklegend{flex-wrap:wrap;min-height:44px;align-content:flex-start}
.tklegend .tkl{white-space:nowrap;flex:0 0 auto}
.tklegend .tkread{display:block;flex-basis:100%;margin-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  height:18px;line-height:18px;text-align:left;font-size:12px;letter-spacing:.01em}

@media (max-width:640px){
  .tklegend{min-height:62px}
  .tklegend .tkread{white-space:normal;height:36px;line-height:18px;overflow:hidden;text-overflow:clip}
}

/* 說明鈕（估價來源等）：可點、桌機 hover 有 title */
.infoTap{border:0;background:transparent;color:var(--accent);cursor:pointer;padding:0 3px;font-size:12px;line-height:1;vertical-align:middle;opacity:.85}
@media (hover:hover){ .infoTap:hover{opacity:1} }

/* 清單籤 */
.listSeg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.listSeg::-webkit-scrollbar{display:none}
.listSeg button{white-space:nowrap}
.listSeg button .lc{opacity:.7;font-size:11px;margin-left:2px}
.listSeg button.watchL:not(.on){color:var(--muted)}
.btn.small{padding:6px 10px;font-size:12px}
.btn.danger{color:#dc2626;border-color:color-mix(in srgb,#dc2626 40%,transparent)}
body.dark .btn.danger{color:#f87171;border-color:color-mix(in srgb,#f87171 45%,transparent)}
/* 編輯模式 */
#editBar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px);
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:10px 12px;box-shadow:0 8px 28px rgba(0,0,0,.18)}
#editBar[hidden]{display:none}
#editBar #editCount{font-weight:600;font-size:13px;margin-right:4px}
#editBar .fx{min-width:140px}
body.editing #cards .card, body.editing #drawer .card{cursor:pointer;position:relative;outline:2px solid transparent;transition:none}
body.editing #cards .card::before, body.editing #drawer .card::before{content:'';position:absolute;top:10px;left:10px;width:20px;height:20px;border-radius:6px;
  border:2px solid var(--line2);background:var(--panel);z-index:3}
body.editing #cards .card.sel, body.editing #drawer .card.sel{outline-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
body.editing #cards .card.sel::before, body.editing #drawer .card.sel::before{background:var(--accent);border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat}
body.editing{padding-bottom:90px}
/* 清單管理列 */
.lrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.lrow .lname{flex:1;min-width:140px}

/* 手機編輯列：兩行、靠左緊排（不用 space-between 撐開造成大縫） */
@media (max-width:600px){
  #editBar{width:calc(100vw - 20px);left:10px;transform:none;justify-content:flex-start;gap:6px;padding:8px 10px;border-radius:12px}
  #editBar #editCount{flex:0 0 auto;margin-right:2px}
  #editBar .fx{flex:1 1 120px;min-width:0}
  #editBar .btn{padding:7px 10px;font-size:12px}
}

/* 加入時的清單選擇：按鈕＋下拉成一組 */
.gaHead{display:inline-flex;align-items:center;gap:8px}
.gaGroup{display:inline-flex;align-items:center;gap:4px}
.gaGroup .gaList{padding:5px 22px 5px 8px;font-size:12px;min-width:0;max-width:150px}
@media (max-width:480px){
  .gradeAction{flex-wrap:wrap;gap:6px 8px}
  .gaHead{flex:1 1 100%;justify-content:space-between}
  .gaGroup{flex:1 1 100%} .gaGroup .gaList{flex:1;max-width:none}
}

.gaGroup .btn{white-space:nowrap;flex:0 0 auto;box-sizing:border-box;min-width:96px;text-align:center;
  border:1px solid transparent;padding:6px 12px;line-height:1.3}
.gaGroup .ghostSmall{border-color:var(--line2)}

.listSeg button.customL:not(.on){color:var(--accent);opacity:.85}
#editBar [hidden]{display:none}

.listSeg .lsep{display:inline-block;width:1px;height:18px;background:var(--line2);margin:0 4px;align-self:center;flex:0 0 auto}

/* 收藏頁籤：黏在價值卡頂上 */
.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.colTabs{display:flex;gap:0;margin:0 0 -1px 12px;position:relative;z-index:2}
.colTabs button{border:1px solid var(--line);border-bottom:0;background:var(--panel2);color:var(--muted);
  border-radius:10px 10px 0 0;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;margin-right:-1px;border-top-width:3px}
.colTabs button.on{background:var(--panel);color:var(--ink);border-color:var(--line2);position:relative;z-index:1}
/* 選中的頁籤頂上一條色帶＋字上色；價值卡外框跟著換色：收藏＝藍、追蹤＝紫 */
.colTabs button[data-kind=own].on{border-top-color:var(--accent);color:var(--accent)}
.colTabs button[data-kind=watch].on{border-top-color:#8b5cf6;color:#8b5cf6}
.valueCard.kOwn{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent),0 8px 24px rgba(0,0,0,.06)}
.valueCard.kWatch{border-color:color-mix(in srgb,#8b5cf6 45%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,#8b5cf6 25%,transparent),0 8px 24px rgba(0,0,0,.06)}
.valueCard.kOwn .lbl{color:var(--accent)}
.valueCard.kWatch .lbl{color:#8b5cf6}

.valueCard{border-top-left-radius:0}
.listCtl{display:flex;align-items:center;gap:6px}
#listSelect{padding:6px 26px 6px 10px;font-size:13px;border:1px solid var(--line2);border-radius:8px;background:var(--field);color:var(--ink);max-width:220px}
#listSelect[hidden]{display:none}
#listNote{font-size:11.5px;color:var(--muted);margin-top:2px}
/* 頁籤列：左邊頁籤黏卡、右邊清單控制（原本留空的位置） */
.colTabsRow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.colTabsRow .listCtl{margin-bottom:6px;margin-right:4px}
@media (max-width:640px){
  .colTabsRow{flex-wrap:wrap}
  .colTabsRow .listCtl{order:-1;flex:1 1 100%;justify-content:flex-end;margin:0 0 8px}
  .colTabsRow .listCtl #listSelect{flex:1;min-width:0;max-width:none}
  .colTabs{margin-left:8px}
  .colTabs button{padding:7px 12px;font-size:12.5px}
}

#listBar{display:none !important}


/* 編輯列的停用鈕：明顯變暗、無手勢 */
#editBar .btn:disabled{opacity:.35;color:var(--muted);border-color:var(--line);background:transparent;cursor:default;pointer-events:none}
#editBar .btn{white-space:nowrap}


/* 全站浮動提示：跟卡片同一套面板色，動作鈕用主按鈕樣式 */
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,12px);z-index:70;
  max-width:min(92vw,560px);padding:10px 12px 10px 14px;border-radius:12px;font-size:13px;line-height:1.5;
  background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.18);opacity:0;pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;display:flex;align-items:center;gap:10px}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast.ok{border-left:3px solid var(--accent)}
.toast.err{border-left:3px solid #dc2626}
.toast .msgAct{border:0;background:var(--accent);color:#fff;border-radius:8px;padding:5px 12px;font-size:12.5px;font-weight:600;cursor:pointer;margin-left:2px;white-space:nowrap}
@media (hover:hover){ .toast .msgAct:hover{filter:brightness(1.08)} }
body.editing .toast{bottom:calc(88px + env(safe-area-inset-bottom))}

/* 管理清單：沿用價值卡／總覽的語彙（英文小標＋中文、淡色卡片、左側色條、膠囊） */
#listDialog{width:min(720px,94vw)}
.lsec{margin:2px 0 18px}
.lsecH{display:flex;align-items:center;justify-content:space-between;padding:4px 0 10px}
.lsecT{font-size:14px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.lsecEn{font-size:10.5px;letter-spacing:.14em;color:var(--muted);font-weight:600}
.lcnt{display:inline-block;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--field);color:var(--muted);font-size:11px;font-weight:600;text-align:center}
.lrows{display:flex;flex-direction:column;gap:6px}
.lrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px 10px 14px;
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;position:relative}
.lrow::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--line2)}
.lsec.own .lrow.sys::before{background:var(--accent)} .lsec.watch .lrow.sys::before{background:#8b5cf6}
.lrow.sys{background:color-mix(in srgb,var(--accent) 6%,var(--panel2));border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}
.lsec.watch .lrow.sys{background:color-mix(in srgb,#8b5cf6 6%,var(--panel2));border-color:color-mix(in srgb,#8b5cf6 25%,var(--line))}
.lrow.sys .lname{font-weight:700;font-size:14.5px}
.lrow .lname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:6px}
.lrow .lnameIn{flex:1;min-width:140px;font-size:14px}
.lrow .lmeta{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.lpill{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--field);color:var(--muted);font-size:11.5px;font-weight:600}
.lval{font-size:14px;font-weight:700;color:var(--ink)}
.lsec.own .lrow.sys .lval{color:var(--accent)}
.lrow .lacts{display:flex;gap:6px;align-items:center}
.lrow .lsys{font-size:11px;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:1px 8px;background:var(--panel)}
@media (max-width:480px){ .lrow{grid-template-columns:minmax(0,1fr) auto;padding:10px 10px 10px 12px} .lrow .lmeta{grid-column:1;gap:8px} .lrow .lacts{grid-row:1 / span 2} .lsecEn{display:none} }
/* 清單列的圖示鈕：與卡片上的搬移／刪除鈕同一套（有框、灰字、hover 上色） */
.lrow .lb{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:var(--field);border:1px solid var(--line2);
  border-radius:7px;color:var(--muted);cursor:pointer;padding:0;line-height:0}
@media (hover:hover){ .lrow .lb:hover{color:var(--accent);border-color:var(--accent)} .lrow .lb.danger:hover{color:#dc2626;border-color:#dc2626;background:color-mix(in srgb,#dc2626 8%,transparent)} }
body.dark .lrow .lb.danger:hover{color:#f87171;border-color:#f87171}
@media (max-width:480px){ .lrow{grid-template-columns:minmax(0,1fr) auto} .lrow .lmeta{grid-column:1;font-size:11px} .lrow .lacts{grid-row:1 / span 2} }

.pill[hidden]{display:none}

/* ===== 控制項質感層（光影／立體）：只動外觀，不動尺寸與版面 ===== */
:root{--btn-hi:rgba(255,255,255,.55);--btn-sh:rgba(15,23,42,.10);--btn-sh2:rgba(15,23,42,.06);--inset:inset 0 1px 2px rgba(15,23,42,.06)}
body.dark{--btn-hi:rgba(255,255,255,.07);--btn-sh:rgba(0,0,0,.45);--btn-sh2:rgba(0,0,0,.3);--inset:inset 0 1px 2px rgba(0,0,0,.35)}

/* 主按鈕：漸層＋上緣高光＋落影 */
.btn:not(.ghost):not(.ghostSmall), .refresh, .seg button.on, .colTabs button.on{
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%,rgba(0,0,0,.06));
  box-shadow:inset 0 1px 0 var(--btn-hi),0 1px 2px var(--btn-sh),0 2px 6px -2px var(--btn-sh2)}
.refresh{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 6px -1px rgba(0,0,0,.35)}
/* 次要／圖示按鈕：面板色＋細框＋輕影 */
.btn.ghost, .ghostSmall, .ib, .mv, .del, .lb, .rptBtn, .cpBtn, .hc-reset, .warnTap.btnlike, .close{
  background-image:linear-gradient(180deg,var(--panel),var(--panel2));
  box-shadow:inset 0 1px 0 var(--btn-hi),0 1px 2px var(--btn-sh2)}
/* 互動：浮起／下沉 */
.btn, .refresh, .ib, .mv, .del, .lb, .rptBtn, .cpBtn, .hc-reset, .seg button, .colTabs button, .gchip, .gaList, select, .close{
  transition:transform .08s ease,box-shadow .12s ease,background-color .12s ease,border-color .12s ease,color .12s ease}
/* hover 不再 translateY(-1px)：鈕往上移 1px 後游標落在鈕外 → 取消 hover → 鈕移回來 → 又 hover……
   游標停在鈕的下緣（尤其圓角附近）會瘋狂閃。浮起感改用陰影表現，點擊 :active 的下壓位移留著（放開就結束，不會循環） */
@media (hover:hover){
  .btn:not(:disabled):hover, .refresh:hover, .ib:hover, .mv:hover, .del:hover, .lb:hover, .rptBtn:hover, .cpBtn:hover, .hc-reset:hover{
    box-shadow:inset 0 1px 0 var(--btn-hi),0 3px 8px -2px var(--btn-sh),0 6px 14px -8px var(--btn-sh)}
}
.btn:not(:disabled):active, .refresh:active, .ib:active, .mv:active, .del:active, .lb:active, .rptBtn:active, .cpBtn:active, .hc-reset:active, .seg button:active, .gchip:active{
  transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.18)}
/* 分段控制：凹槽軌道＋浮起滑塊 */
.seg{background:var(--field);box-shadow:var(--inset);border-color:var(--line)}
.seg button.on{box-shadow:inset 0 1px 0 var(--btn-hi),0 1px 3px var(--btn-sh),0 3px 8px -4px var(--btn-sh)}
/* 頁籤：選中的浮起、未選的略沉 */
.colTabs button{box-shadow:var(--inset)} .colTabs button.on{box-shadow:inset 0 1px 0 var(--btn-hi),0 -2px 6px -4px var(--btn-sh);background-image:none}
/* 輸入框與下拉：內凹＋聚焦光暈 */
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea, .fx, #listSelect, #curSelect, #sortSelect, #searchSort, #radarSort{
  box-shadow:var(--inset)}
input:focus-visible, select:focus-visible, textarea:focus-visible, .fx:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:var(--inset),0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
/* 等級卡片（搜尋加入）與清單列卡片：輕微浮起 */
.gchip{box-shadow:inset 0 1px 0 var(--btn-hi),0 1px 2px var(--btn-sh2)}
.gchip.sel{box-shadow:inset 0 1px 0 var(--btn-hi),0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent),0 2px 6px -2px var(--btn-sh)}
/* 徽章：一點點內光 */
.gbadge, .pill, .lpill, .rvS, .tkchg{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
body.dark .gbadge, body.dark .pill, body.dark .lpill, body.dark .rvS, body.dark .tkchg{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
/* 減少動態偏好 */
@media (prefers-reduced-motion:reduce){ .btn, .refresh, .ib, .seg button, .colTabs button{transition:none} .btn:hover{transform:none} }

/* 頁籤列：字一律不換行；在桌機右側抽屜（窄）裡改成兩行，跟手機同一套 */
.colTabs button, .colTabsRow .listCtl .btn{white-space:nowrap;min-width:0}
.colTabs{min-width:0;overflow:hidden}
.colTabs button{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
#drawer .colTabsRow{flex-wrap:wrap}
#drawer .colTabsRow .listCtl{order:-1;flex:1 1 100%;justify-content:flex-end;margin:0 0 8px}
#drawer .colTabsRow .listCtl #listSelect{flex:1;min-width:0;max-width:none}
#drawer .colTabs{margin-left:8px}
#drawer .colTabs button{padding:7px 12px;font-size:12.5px}

/* 單卡價差雷達 */
.arbT td, .arbT th{padding:8px 8px;vertical-align:middle}
.arbName{display:flex;align-items:center;gap:10px;min-width:0;width:100%}
.arbName img{width:40px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex:0 0 auto}
.arbName b{font-size:13px}
#radarKind button{white-space:nowrap}
@media (max-width:640px){ #radarKind{width:100%;display:flex} #radarKind button{flex:1;font-size:12px;padding:6px 8px} }

.arbOpen{cursor:pointer}
@media (hover:hover){ .arbOpen:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px} }

/* 單卡價差：標題＋控制列 */
.arbHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.arbLead b{font-size:15px;display:block;margin-bottom:2px}
.arbCtl{display:flex;align-items:center;gap:10px}
.arbHelp{margin:0 0 10px}
.arbHelp summary{cursor:pointer;font-size:11.5px;color:var(--accent);padding:2px 0;list-style:none}
.arbHelp summary::-webkit-details-marker{display:none}
.arbHelp summary::before{content:'▸ ';}
.arbHelp[open] summary::before{content:'▾ ';}
.arbHelp .tksub{padding:6px 0 0}
.arbBar{display:inline-block;width:70px;height:5px;border-radius:999px;background:var(--line);margin-right:6px;vertical-align:middle;overflow:hidden}
.arbBar i{display:block;height:100%;background:var(--accent);transition:width .3s ease}
@media (max-width:640px){ .arbHead{flex-direction:column;gap:6px} .arbCtl{width:100%;justify-content:space-between} }

.arbTxt{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:1px}
.arbTxt b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34ch}
.arbTxt .tksub{font-size:11px}
/* td 一旦 display:flex 就不再是表格欄，固定欄寬會失效 → 桌機保持 table-cell，按鈕用 inline */
.arbActs{white-space:nowrap;text-align:right}
.arbT td.arbActs > *{display:inline-flex;align-items:center;vertical-align:middle;margin-left:6px}
.arbT thead th{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.03em}


/* 單卡價差：桌機是表格（欄名獨立一列），手機改成卡片，不橫捲 */
.arbT thead th{padding:6px 8px;font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.03em;border-bottom:1px solid var(--line2);text-align:left}
.arbT thead th.p{text-align:right}
.arbT{width:100%}
.arbT tr.arbRow{border-bottom:1px solid var(--line)}
.arbT tr.arbRow td{padding:10px 8px}
@media (min-width:641px){
  .arbT{table-layout:fixed}
  .arbT tr.arbRow > td:nth-child(1){width:auto}
  .arbT tr.arbRow > td:nth-child(n+2):nth-child(-n+5){width:96px}
  .arbT tr.arbRow > td:nth-child(6){width:150px}
}
@media (max-width:1023px){
  .arbT thead{display:none}
  .arbT, .arbT tbody, .arbT tr, .arbT td{display:block;width:auto}
  .arbT tr.arbRow{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
  .arbT tr.arbRow td{padding:0;border:0}
  .arbT tr.arbRow td[data-l="卡片"]{margin-bottom:8px}
  .arbT tr.arbRow td[data-l]:not([data-l="卡片"]):not(:last-child){display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:13px}
  .arbT tr.arbRow td[data-l]:not([data-l="卡片"]):not(:last-child)::before{content:attr(data-l);color:var(--muted);font-size:11.5px;font-weight:400}
  .arbT tr.arbRow td:last-child{margin-top:8px}
  .arbActs{justify-content:stretch}
  .arbActs .btn{flex:1;text-align:center}
  .arbTxt b{max-width:none;white-space:normal}
}

.arbRow{cursor:pointer}
@media (hover:hover){ .arbT tr.arbRow:hover{background:var(--field)} }
.arbNoImg{width:40px;height:56px;border-radius:6px;background:var(--field);border:1px solid var(--line);flex:0 0 auto}
.arbTxt b{font-size:14.5px;max-width:none}
@media (max-width:1023px){ .arbName img, .arbNoImg{width:48px;height:67px} .arbTxt b{font-size:15px} }

@media (min-width:1024px){ .arbT{table-layout:fixed;width:100%} .arbT th:nth-child(n+2):nth-child(-n+5), .arbT td:nth-child(n+2):nth-child(-n+5){width:92px} .arbT th:nth-child(6), .arbT td:nth-child(6){width:214px} .arbT td.arbActs{overflow:hidden} }
.arbActs .btn{padding:5px 9px;font-size:11.5px}

@media (max-width:1023px){ .arbT td.arbActs{display:flex;gap:6px;text-align:left;flex-wrap:wrap} .arbT td.arbActs > *{margin-left:0} }

/* 卡名不再用字數截斷，交給欄寬省略號；動作鈕在桌機壓縮以免疊到淨利 */
.arbTxt b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;line-height:1.35;word-break:break-word}
@media (min-width:1024px){ .arbActs .btn{padding:5px 8px;font-size:11px} }

.dDate{display:block;font-size:10.5px;font-weight:400;color:var(--muted);margin-top:1px}
.dDate.stale{color:var(--amber);font-weight:600}
@media (max-width:1023px){ .dDate{display:inline;margin-left:6px} }

.subVal{display:block;font-size:10.5px;font-weight:400;color:var(--muted);margin-top:1px}
@media (max-width:1023px){ .subVal{display:inline;margin-left:6px} }

/* 可點排序的表頭 */
.arbT th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
@media (hover:hover){ .arbT th.sortable:hover{color:var(--accent)} }
.arbT th.sortable.on{color:var(--accent)}
/* 手機的排序列（桌機用表頭排序，不顯示） */
.arbSortBar{display:none}
@media (max-width:1023px){
  .arbSortBar{display:flex;align-items:center;gap:8px;margin:2px 0 10px}
  .arbSortBar .fx{flex:1;min-width:0}
  /* 手機卡片：四個數字改成 2×2，高度砍半 */
  .arbT tr.arbRow{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;align-items:start}
  .arbT tr.arbRow td[data-l="卡片"]{grid-column:1/-1;margin-bottom:2px}
  .arbT tr.arbRow td[data-l]:not([data-l="卡片"]):not(:last-child){display:block;padding:0;text-align:left}
  .arbT tr.arbRow td[data-l]:not([data-l="卡片"]):not(:last-child)::before{content:attr(data-l);display:block;color:var(--muted);font-size:10.5px;font-weight:400;margin-bottom:1px}
  .arbT tr.arbRow td[data-l="店家收購"], .arbT tr.arbRow td[data-l="SNKR 買進"]{font-size:15px}
  .arbT tr.arbRow td:last-child{grid-column:1/-1;margin-top:6px}
  .dDate, .subVal{display:block;margin:1px 0 0}
}

/* 審查工作台：標題與分頁固定，只有內容捲動；電腦版放大到接近全螢幕 */
#reviewDialog[open]{display:flex;flex-direction:column;max-height:92vh;overflow:hidden}
#reviewDialog .clHead,#reviewDialog #reviewKind{flex:none}
#reviewReports,#reviewPsa,#reviewBoxes{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
@media (min-width:1024px){
  #reviewDialog{width:94vw;max-width:1500px}
  #reviewDialog[open]{height:90vh;max-height:90vh}
}
#reviewDialog .bxRv, #reviewDialog .bxRv *{user-select:text;-webkit-user-select:text}
#reviewDialog .bxRv button{user-select:none;-webkit-user-select:none}
/* 卡盒綁定審查 */
.bxBar{position:sticky;top:0;z-index:3;background:var(--panel);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:0 0 10px}
.bxBar .fxWrap{flex:1 1 200px;max-width:320px}
.bxBar .bxHint{margin-left:auto;cursor:help}
#boxReviewFilter button{white-space:nowrap}
.bxGrid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:900px){ .bxGrid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)} }
.bxCol{min-width:0}
.bxRight{display:flex;flex-direction:column;gap:8px;min-width:0}
.bxRight .bxCol{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--panel)}
.bxRight .bxWarn{border-color:var(--amber-line);background:var(--amber-soft)}
.bxLbl{font-size:11.5px;color:var(--muted);margin-bottom:4px;letter-spacing:.02em}
.bxKey{font-weight:700;font-size:15px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bxCode{font-size:12px;padding:1px 6px;border-radius:6px;background:var(--line)}
.bxProd{display:flex;gap:10px;align-items:flex-start}
.bxProd img,.bxProd .rimg-ph{width:56px;height:76px;object-fit:contain;border-radius:6px;background:var(--line);flex:none}
@media (min-width:1024px){ .bxProd img,.bxProd .rimg-ph{width:72px;height:98px} }
.bxTxt{min-width:0}
.bxTxt a{font-weight:600;word-break:break-word}
.bxPrice{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;margin-top:4px}
.bxRefs{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12.5px}
.bxRefs .bxLbl{margin:0}
.bxRef{white-space:nowrap}
.bxFlag{color:var(--amber);font-weight:600;margin-top:8px}
.bxRv .rvA{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.bxRv .bxUrl{display:flex;gap:6px;flex:1 1 280px;margin-left:auto;max-width:460px}
.bxRv .bxUrl .fx{flex:1 1 auto;min-width:0}
.rkey .bxWait{color:var(--amber);font-weight:600}
@media (max-width:480px){ #reviewKind,#boxReviewFilter{max-width:100%} #reviewKind button,#boxReviewFilter button{padding-left:7px;padding-right:7px;font-size:13px} #boxReviewFilter .pill{margin-left:2px} }
.bxRv .rvA .btn{white-space:nowrap}
@media (max-width:600px){ #reviewDialog .clHead .gtn{display:none} }
.rkey .rRel{color:var(--muted)}

/* ================= 詳細模式三種版型（2026-10-13）=================
   使用者在工具列「版型」自己切；簡潔模式不受影響。
   共用：漲跌數字顏色（up-ink／down-ink 對比 ≥ 4.5） */
.card .st b.up, .card .tk-day.up{color:var(--up-ink)}
.card .st b.down, .card .tk-day.down{color:var(--down-ink)}
.card .st b.flat, .card .tk-day.flat{color:var(--flat-ink)}
.card .st{white-space:nowrap}
.card .st b{font-weight:600;margin-left:4px}
.card .subtotal .s2{display:inline}

/* ---------- 行情：價格最大、次要數字細線下面、操作收起 ---------- */
.card.cs-ticker{display:block;padding:12px 14px 10px}
.cs-ticker .tk-top{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:start}
.cs-ticker .thumb{width:48px}
.card.cs-ticker .name{padding-right:0;font-size:13.5px;line-height:1.45;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-ticker .dualp{margin-top:3px}
.cs-ticker .dualp .s2{display:block}
.cs-ticker .tk-px{text-align:right;white-space:nowrap}
.cs-ticker .now{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cs-ticker .tk-day{font-size:12px;font-weight:600;margin-top:1px;font-variant-numeric:tabular-nums}
.cs-ticker .tk-bot{display:flex;align-items:center;gap:14px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-height:34px}
.cs-ticker .tk-end{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap}
.cs-ticker .tk-q{border:1px solid var(--line2);background:none;color:var(--ink);border-radius:999px;
  padding:1px 10px;font-size:12px;cursor:pointer;font-variant-numeric:tabular-nums}
@media (hover:hover){ .cs-ticker .tk-q:hover{border-color:var(--accent);color:var(--accent)} }
.cs-ticker .qty{display:none;gap:3px}
.cs-ticker.qopen .qty{display:flex}
.cs-ticker.qopen .tk-q{display:none}
.cs-ticker .qty button{width:24px;height:24px;border-color:transparent;background:var(--accent-soft)}
@media (min-width:761px){
  #cards .cs-ticker .tk-top{grid-template-columns:56px minmax(0,1fr) auto}
  #cards .cs-ticker .thumb{width:56px}
  #cards .cs-ticker .now{font-size:20px}
}

/* 桌機（≥1000px、抽屜沒開）：收藏冊版型一列兩張——單張吃滿 1040px 右半邊都是空的，往下滑很浪費。
   手機與抽屜不變；每張卡 ≈ 500px 寬，三格漲跌與右側三行在 360px 手機都排得下，這裡更寬。 */
@media (min-width:1000px){
  body:not(.drawer-open) #cards:not(.gallery)[data-cs="album"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
/* ---------- 收藏冊：大卡圖、等級壓在圖下緣、三格漲跌 ---------- */
/* 抽屜／手機的舊規則（#drawer .card、@media .card）把第一欄鎖 50px，這裡用 id 等級蓋回來 */
:is(#cards,#drawer) .card.cs-album{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;
  align-items:start;position:relative;padding:12px}
.cs-album .al-img{display:flex;flex-direction:column;align-items:center;gap:14px}
.cs-album .al-pic{position:relative;width:84px}
:is(#cards,#drawer) .cs-album .thumb{width:84px}
.cs-album .al-pic .gbadge{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);margin:0;
  white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.22)}
:is(#cards,#drawer) .card.cs-album .name{padding-right:66px;font-size:13.5px;line-height:1.45;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-album .al-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2px 10px;margin-top:5px}
.cs-album .al-px{display:flex;flex-direction:column;line-height:1.2}
.cs-album .al-px .subtotal{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px;text-align:left}
.cs-album .al-px .subtotal:empty{display:none}
.cs-album .al-px .subtotal .s2{display:inline}
.cs-album .now{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-album .dualp{text-align:right;margin:0 0 0 auto;line-height:1.5;min-width:0}
.cs-album .al-stack{display:flex;flex-direction:column;align-items:flex-end;line-height:1.35;white-space:nowrap;font-size:11px}
.cs-album .al-stack i{font-style:normal;color:var(--muted);opacity:.8;margin-right:4px}
.cs-album .al-row{flex-wrap:nowrap;align-items:flex-end}
.cs-album .al-tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr);margin-top:7px;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;font-variant-numeric:tabular-nums}
.cs-album .al-tiles .st{padding:5px 10px;font-size:11px;color:var(--muted)}
.cs-album .al-tiles .st + .st{border-left:1px solid var(--line)}
.cs-album .al-tiles .st b{display:block;font-size:14.5px;font-weight:700;margin:1px 0 0;letter-spacing:-.01em}
.cs-album .al-foot{max-width:420px;margin-top:6px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.cs-album .al-foot:has(.subtotal:empty){display:none}
/* 數量放卡圖正下方（左下角原本的空位） */
.cs-album .qty{gap:2px;color:var(--ink);justify-content:center;width:84px}
.cs-album .qty button{width:24px;height:24px;border-color:transparent;background:var(--accent-soft)}
.cs-album .qty span{min-width:20px;font-size:13px}
@media (max-width:370px){
  :is(#cards,#drawer) .card.cs-album{grid-template-columns:76px minmax(0,1fr);gap:12px}
  .cs-album .al-pic, :is(#cards,#drawer) .cs-album .thumb, .cs-album .qty{width:76px}
  .cs-album .qty button{width:22px;height:22px}
}
@media (max-width:380px){   /* 360～375 寬：三格數字 14.5px 放不下 */
  .cs-album .al-tiles .st{padding:5px 6px}
  .cs-album .al-tiles .st b{font-size:13.5px}
}
.cs-album .al-act{position:absolute;top:8px;right:8px;display:flex;gap:0}
/* 抽屜／手機舊規則把 .mv .del 絕對定位在右上（id 選擇器），這裡用同等級選擇器蓋回來 */
:is(#cards,#drawer) .card.cs-album .al-act :is(.mv,.del){position:static;padding:7px;line-height:0;font-size:14px;
  width:32px;height:32px;display:grid;place-items:center}
:is(#cards,#drawer) .card.cs-album .al-act :is(.mv,.del):not(:hover){background:var(--tint);border-color:var(--hair);box-shadow:none}
.cs-album .al-act{gap:4px}
.cs-album .mvt{display:none}

/* ---------- 經典：原排法精修——徽章去底色改細線分隔、按鈕去框、價格區上方細線 ---------- */
.card.cs-classic .chip{background:none!important;padding:0!important;border-radius:0}
.card.cs-classic .chip .cl{color:var(--muted);font-weight:500}
.card.cs-classic .right .chip + .chip::before{content:"";display:inline-block;width:1px;height:10px;
  background:var(--line2);margin-right:9px;vertical-align:-1px}
.card.cs-classic .right .chip{margin-right:4px}

/* 三種版型共用：⇄／垃圾桶去框（滑過才有底色），數量鈕改淡底 */
.card.cs-classic .mv:not(:hover), .card.cs-classic .del:not(:hover),
.card.cs-album .mv:not(:hover), .card.cs-album .del:not(:hover){background:none;border-color:transparent}
.card.cs-classic .qty button{border-color:transparent;background:var(--accent-soft)}
#drawer .card.cs-classic .right .price-block{border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
@media (max-width:760px){
  .card.cs-classic .right .price-block{border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
}
#cardStyle[hidden]{display:none}

/* ================= 質感 pass（2026-10-13，借鏡 scrollprice hotfix305）=================
   原則：顏色 token 不變，只改「容器、邊框、色彩層級」。
   1) 整份清單坐在一塊面板上，列與列只剩一條細線，不再每張卡各自一個框＋陰影互相搶
   2) 縮圖像一張真的卡片放在面板上（細邊＋一點點投影），不是裸圖
   3) 一列只有一種強調色（藍）：等級徽章、數量鈕改成同一個墨色打淡；漲跌仍用紅綠（那是資訊）
   4) 數字一律等寬
   簡潔模式（.gallery）與搜尋結果不動。選擇器全部掛在 #cards / #radarList 底下，不外溢。 */
:root{--hair:color-mix(in srgb, var(--ink) 8%, transparent); --sep:color-mix(in srgb, var(--ink) 18%, transparent); --tint:color-mix(in srgb, var(--ink) 6%, transparent); --tint2:color-mix(in srgb, var(--ink) 10%, transparent)}
body.dark{--hair:color-mix(in srgb, #fff 7%, transparent); --sep:color-mix(in srgb, #fff 16%, transparent); --tint:color-mix(in srgb, #fff 6%, transparent); --tint2:color-mix(in srgb, #fff 10%, transparent)}

/* --- 收藏清單：每張卡自己一個框（2026-10-13 第二版）---
   第一版是整份清單一塊面板＋列間細線，使用者反映「價格在卡片底部，看起來像下一張卡的價格在頭上」。
   改成卡與卡之間留頁面底色的空隙、每張卡一個細框；拿掉的是重陰影，不是邊界。 */
#cards:not(.gallery){gap:8px;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;padding:0}
#cards:not(.gallery) > .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:none}
#cards:not(.gallery) > .card:hover{background:var(--hovCard);border-color:color-mix(in srgb, var(--accent) 45%, var(--line));box-shadow:none}
body.editing #cards:not(.gallery) > .card{outline:0}
body.editing #cards:not(.gallery) > .card.sel{background:color-mix(in srgb, var(--accent) 9%, var(--panel));border-color:var(--accent);box-shadow:none}
@media (max-width:760px){ #cards:not(.gallery) > .card{padding-top:13px;padding-bottom:13px} }

/* --- 縮圖：像一張卡放在面板上 --- */
#cards:not(.gallery) .thumb{border:0;border-radius:6px;box-shadow:0 0 0 1px var(--hair), 0 1px 3px rgba(0,0,0,.28)}
body.dark #cards:not(.gallery) .thumb{box-shadow:0 0 0 1px var(--hair), 0 2px 6px rgba(0,0,0,.5)}
#cards:not(.gallery) .thumb img{border-radius:6px}

/* --- 一列一種強調色：等級徽章、數量鈕改墨色打淡 --- */
#cards:not(.gallery) .gbadge{background:var(--tint);color:color-mix(in srgb, var(--ink) 78%, var(--muted));border-color:transparent;box-shadow:none;font-size:11px;letter-spacing:.02em}
#cards:not(.gallery) .qty button{background:var(--tint);border-color:transparent;color:var(--ink)}
@media (hover:hover){ #cards:not(.gallery) .qty button:hover{background:var(--accent-soft);color:var(--accent)} }
#cards:not(.gallery) .qty span{font-weight:600}
#cards:not(.gallery) .card:not(.cs-album) .mv:not(:hover), #cards:not(.gallery) .card:not(.cs-album) .del:not(:hover){background:none;border-color:transparent;box-shadow:none}
#cards:not(.gallery) .cs-ticker .tk-q{border-color:var(--hair);background:var(--tint)}
#cards:not(.gallery) .card .name{font-weight:500}
#cards:not(.gallery) .card .now, #cards:not(.gallery) .card .subtotal, #cards:not(.gallery) .card .dualp,
#cards:not(.gallery) .card .chip, #cards:not(.gallery) .card .st{font-variant-numeric:tabular-nums}
/* 經典版：徽章之間的細分隔線、價格區上方的線都用同一條 hair */
#cards:not(.gallery) .card.cs-classic .right .chip + .chip::before{background:var(--hair)}
#drawer #cards:not(.gallery) .card.cs-classic .right .price-block{border-top-color:var(--hair)}
@media (max-width:760px){ #cards:not(.gallery) .card.cs-classic .right .price-block{border-top-color:var(--hair)} }
#cards:not(.gallery) .cs-ticker .tk-bot, #cards:not(.gallery) .cs-album .al-tiles, #cards:not(.gallery) .cs-album .al-tiles .st + .st{border-color:var(--hair)}

/* --- 價差雷達：同一套 --- */
#radarList{gap:8px;background:none;border:0;box-shadow:none;padding:0}
#radarList > .rrow{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:none}
#radarList > .rrow:hover{background:var(--hovCard);border-color:color-mix(in srgb, var(--accent) 45%, var(--line));box-shadow:none}
#radarList .rrow img{border:0;box-shadow:0 0 0 1px var(--hair), 0 1px 3px rgba(0,0,0,.28)}
body.dark #radarList .rrow img{box-shadow:0 0 0 1px var(--hair), 0 2px 6px rgba(0,0,0,.5)}
#radarList .rrow .rimg-ph{background:var(--tint);box-shadow:0 0 0 1px var(--hair)}
#radarList .rrow .rmkt, #radarList .rrow .spread{border-left-color:var(--hair)}
#radarList .rrow .rkey b{color:color-mix(in srgb, var(--ink) 80%, var(--muted))}
/* 收藏冊版：等級徽章壓在卡圖上，要實底才看得清 */
#cards:not(.gallery) .cs-album .al-pic .gbadge{background:var(--panel);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.35)}

/* ================= 關閉鈕「×」統一（2026-10-13）=================
   原本：dialog 的 × 被「次要按鈕加漸層底＋陰影」那條規則包到，抽屜的 × 又是裸的；
   .close:hover 把框描成藍色，手機沒有滑鼠、點完 hover 不會消失 → 藍框咬住。
   統一：32px 方形、透明、無框；只有有滑鼠的裝置才有 hover；鍵盤才有焦點框。 */
dialog .close, #drawer .dhead .x, #watchBannerX, .ga-x, .lotRow .ldel{
  width:32px;height:32px;padding:0;margin:0;display:inline-grid;place-items:center;flex:none;
  background:none;background-image:none;border:0;border-radius:8px;box-shadow:none;transform:none;
  color:var(--muted);font-size:20px;line-height:1;cursor:pointer;transition:background .12s,color .12s}
dialog .close{float:right}
.clHead .close{float:none;margin-left:auto}
#drawer .dhead .x{margin-left:auto}
.ga-x, .lotRow .ldel{font-size:15px;width:28px;height:28px}
@media (hover:hover){
  dialog .close:hover, #drawer .dhead .x:hover, #watchBannerX:hover, .ga-x:hover, .lotRow .ldel:hover{
    background:var(--tint2);color:var(--ink);border-color:transparent;transform:none;box-shadow:none}
}
dialog .close:active, #drawer .dhead .x:active, #watchBannerX:active{background:var(--tint2);transform:none}
dialog .close:focus, #drawer .dhead .x:focus, #watchBannerX:focus, .ga-x:focus, .lotRow .ldel:focus{outline:0}
dialog .close:focus-visible, #drawer .dhead .x:focus-visible, #watchBannerX:focus-visible, .ga-x:focus-visible, .lotRow .ldel:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}

/* 卡盒（等級「N個」）：縮圖不是 5:7 直式卡，cover 會切掉兩側 → 完整顯示、白底內縮 */
#cards:not(.gallery) .card.isbox .thumb img{object-fit:contain;padding:4px;background:#fff;transform:none}

/* 可信度（fix032）：舊成交撐的大價格變灰；零錢／惜售的徽章是「註記」不是漲跌 */
#cards:not(.gallery) .card .now.old{color:var(--muted);font-weight:600}
.card .chip.note{color:var(--muted);font-weight:500}
.card .st b.flat{font-weight:600}
.cs-album .al-stack .stale, .dualp .stale{margin-left:4px}
.costSum b.up{color:var(--up-ink)} .costSum b.down{color:var(--down-ink)}

/* 離群分頁 */
.olCard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--panel)}
.olHead{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13.5px}
.olHead b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.olRow{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:10px;align-items:center;padding:5px 0;border-top:1px solid var(--hair);font-size:12.5px;font-variant-numeric:tabular-nums}
.olKind{color:var(--muted);font-size:11px;border:1px solid var(--line);border-radius:4px;padding:0 5px}
.olAt{color:var(--muted)} .olPx{font-weight:700} .olWhy{color:var(--muted);font-size:11px}
.olRow.olDone{opacity:.5}
@media (max-width:600px){ .olRow{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto} .olRow .olAt{grid-column:2} .olRow .olWhy{display:none} .olRow .olActs{grid-column:1 / -1;justify-self:end} }