/* 後台設計語言：白底、髮絲線、珊瑚紅只給主要動作（參考 Airbnb）。
   只作用在 html[data-surface="admin"]，客人端不受影響。 */

html[data-surface="admin"]{
  --a-accent:#ff385c;--a-accent-press:#e00b41;--a-accent-soft:#fff0f3;
  --a-ink:#222222;--a-muted:#6a6a6a;--a-faint-ink:#b0b0b0;
  --a-line:#ebebeb;--a-line-strong:#dddddd;--a-canvas:#f7f7f7;--a-card:#ffffff;
  --a-success:#008a05;--a-success-soft:#eaf6ea;--a-warn:#c13515;--a-warn-soft:#fdf0ec;
  --a-radius:12px;--a-radius-sm:8px;
  --a-overlay:0 8px 28px rgba(0,0,0,.18);--a-float:0 6px 20px rgba(0,0,0,.12);
  /* 讓舊的變數也落到新色票 */
  --ink:var(--a-ink);--muted:var(--a-muted);--green:var(--a-ink);--green2:var(--a-ink);
  --mint:var(--a-canvas);--cream:var(--a-canvas);--paper:var(--a-card);--line:var(--a-line);
  --orange:var(--a-accent);--red:var(--a-warn);--shadow:none;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  color:var(--a-ink);background:var(--a-card);
  -webkit-font-smoothing:antialiased;
}
html[data-surface="admin"] body{background:var(--a-card);color:var(--a-ink)}
html[data-surface="admin"] ::selection{background:#e6e6e6;color:var(--a-ink)}
html[data-surface="admin"] :focus-visible{outline:2px solid var(--a-ink);outline-offset:2px}
html[data-surface="admin"] h1,html[data-surface="admin"] h2,html[data-surface="admin"] h3{font-family:inherit;color:var(--a-ink)}
html[data-surface="admin"] .stat strong,html[data-surface="admin"] .batch-lines td,
html[data-surface="admin"] .order-row-card,html[data-surface="admin"] .list-row{font-variant-numeric:tabular-nums}

/* ---------- 頂列 ---------- */
html[data-surface="admin"] .topbar{height:72px;background:#fff;backdrop-filter:none;border-bottom:1px solid var(--a-line);padding:0 24px}
html[data-surface="admin"] .brand{font-weight:700;letter-spacing:0;font-size:17px;gap:10px;color:var(--a-ink)}
html[data-surface="admin"] .brand-mark{width:34px;height:34px;border-radius:50%;background:var(--a-accent);font-size:16px;font-weight:700}
html[data-surface="admin"] .topbar .scene-name,html[data-surface="admin"] .scene-topbar .scene-name{color:var(--a-ink);font-weight:600;font-size:14px}
html[data-surface="admin"] .test-site-badge{background:var(--a-canvas);color:var(--a-muted);border:1px solid var(--a-line);border-radius:999px;font-weight:600;font-size:12px;padding:3px 9px}
html[data-surface="admin"] .topbar .ghost-btn,html[data-surface="admin"] .demo-reset-btn,html[data-surface="admin"] .test-admin-logout{
  border:0;background:transparent;color:var(--a-ink);border-radius:999px;padding:10px 14px;font-weight:600;font-size:14px;box-shadow:none}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .topbar .ghost-btn:hover,html[data-surface="admin"] .demo-reset-btn:hover,html[data-surface="admin"] .test-admin-logout:hover{background:var(--a-canvas)}
}

/* ---------- 側欄 ---------- */
html[data-surface="admin"] .layout{grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 72px)}
html[data-surface="admin"] .sidebar{background:#fff;color:var(--a-ink);border-right:1px solid var(--a-line);padding:20px 12px;top:72px;height:calc(100vh - 72px)}
html[data-surface="admin"] .store-card{padding:8px 12px 18px;margin:0 0 12px;border-bottom:1px solid var(--a-line);border-radius:0;background:transparent}
html[data-surface="admin"] .store-card b,html[data-surface="admin"] .store-card strong{color:var(--a-ink);font-weight:600}
html[data-surface="admin"] .store-card small{color:var(--a-muted)}
html[data-surface="admin"] .store-logo{background:var(--a-ink);color:#fff;font-weight:600}
html[data-surface="admin"] .nav{gap:2px}
html[data-surface="admin"] .nav button{color:var(--a-ink);font-weight:500;font-size:15px;padding:11px 14px;border-radius:var(--a-radius-sm)}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .nav button:hover{background:var(--a-canvas);color:var(--a-ink)}
}
html[data-surface="admin"] .nav button.active{background:var(--a-canvas);color:var(--a-ink);font-weight:600}
html[data-surface="admin"] .nav button .lucide{color:var(--a-muted);stroke-width:1.75}
html[data-surface="admin"] .nav button.active .lucide{color:var(--a-accent);stroke-width:2}
html[data-surface="admin"] .side-footer{color:var(--a-faint-ink);font-size:12px}

/* ---------- 主區與頁標 ---------- */
html[data-surface="admin"] .main{padding:32px 40px 80px;max-width:1360px}
html[data-surface="admin"] .page-head{margin-bottom:28px;gap:16px}
html[data-surface="admin"] .page-head .eyebrow{display:none}
html[data-surface="admin"] .page-head h1{font-family:inherit;font-size:28px;font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:0}
html[data-surface="admin"] .page-head p{color:var(--a-muted);font-size:14px;margin:6px 0 0;line-height:1.5}
html[data-surface="admin"] .eyebrow{color:var(--a-muted);letter-spacing:0;text-transform:none;font-weight:600;font-size:12px}

/* ---------- 按鈕 ---------- */
html[data-surface="admin"] .primary{background:var(--a-ink);color:#fff;border:0;border-radius:var(--a-radius-sm);padding:12px 20px;font-weight:600;font-size:15px;box-shadow:none;transition:background .15s ease,transform .1s ease}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .primary:hover{background:#000}
}
html[data-surface="admin"] .primary:active{transform:scale(.98)}
/* 每頁唯一主要動作：頁標右側的主要按鈕 */
html[data-surface="admin"] .page-head .primary,html[data-surface="admin"] .page-head [data-newnote]{background:var(--a-accent);color:#fff}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .page-head .primary:hover,html[data-surface="admin"] .page-head [data-newnote]:hover{background:var(--a-accent-press)}
}
html[data-surface="admin"] .ghost-btn,html[data-surface="admin"] .icon-btn,html[data-surface="admin"] .small-btn{
  background:#fff;color:var(--a-ink);border:1px solid var(--a-ink);border-radius:var(--a-radius-sm);font-weight:600;box-shadow:none;transition:background .15s ease}
html[data-surface="admin"] .small-btn{padding:8px 14px;font-size:14px}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .ghost-btn:hover,html[data-surface="admin"] .icon-btn:hover,html[data-surface="admin"] .small-btn:hover:not(:disabled){background:var(--a-canvas)}
}
html[data-surface="admin"] .small-btn.danger-text{color:var(--a-warn);border-color:var(--a-warn)}
html[data-surface="admin"] .small-btn.danger-fill{background:var(--a-warn);border-color:var(--a-warn);color:#fff}
html[data-surface="admin"] button:disabled{opacity:.4;cursor:not-allowed}

/* ---------- 篩選膠囊與分頁 ---------- */
html[data-surface="admin"] .tabs{gap:8px}
html[data-surface="admin"] .tab{background:#fff;color:var(--a-ink);border:1px solid var(--a-line-strong);border-radius:999px;padding:8px 16px;font-weight:500;font-size:14px;transition:border-color .15s ease,background .15s ease}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .tab:hover{border-color:var(--a-ink)}
}
html[data-surface="admin"] .tab.active{background:var(--a-ink);color:#fff;border-color:var(--a-ink);font-weight:600}
html[data-surface="admin"] .tab-count{background:transparent;color:inherit;opacity:.7;font-weight:500}
html[data-surface="admin"] .tab.active .tab-count{background:transparent}
/* 頁面層級分頁（叫貨單／叫貨紀錄）改成底線分頁 */
html[data-surface="admin"] .purchase-tabs{gap:24px;border-bottom:1px solid var(--a-line);margin-bottom:24px;padding-bottom:0}
html[data-surface="admin"] .purchase-tabs .tab{border:0;border-radius:0;background:transparent;color:var(--a-muted);padding:10px 0 12px;box-shadow:inset 0 -2px 0 transparent}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .purchase-tabs .tab:hover{color:var(--a-ink)}
}
html[data-surface="admin"] .purchase-tabs .tab.active{background:transparent;color:var(--a-ink);box-shadow:inset 0 -2px 0 var(--a-ink)}
html[data-surface="admin"] select,html[data-surface="admin"] .month-filter{border:1px solid var(--a-line-strong);border-radius:999px;background-color:#fff;color:var(--a-ink);font-weight:500}
html[data-surface="admin"] label.month-filter select{border:0;border-radius:0;background-color:transparent;box-shadow:none}
html[data-surface="admin"] label.month-filter:focus-within{border-color:var(--a-ink);box-shadow:0 0 0 1px var(--a-ink)}

/* ---------- 表單 ---------- */
html[data-surface="admin"] input:not([type=checkbox]):not([type=radio]),html[data-surface="admin"] textarea{border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);background:#fff;color:var(--a-ink)}
html[data-surface="admin"] input:not([type=checkbox]):not([type=radio]):focus,html[data-surface="admin"] textarea:focus,html[data-surface="admin"] select:focus{border-color:var(--a-ink);outline:0;box-shadow:0 0 0 1px var(--a-ink)}
html[data-surface="admin"] input::placeholder,html[data-surface="admin"] textarea::placeholder{color:var(--a-faint-ink)}
html[data-surface="admin"] input[type=checkbox],html[data-surface="admin"] input[type=radio]{accent-color:var(--a-ink)}

/* ---------- 狀態標籤 ---------- */
html[data-surface="admin"] .badge{background:var(--a-canvas);color:var(--a-ink);border-radius:999px;font-weight:600;font-size:12px;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}
html[data-surface="admin"] .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a-faint-ink);flex:none}
html[data-surface="admin"] .badge.orange::before{background:var(--a-accent)}
html[data-surface="admin"] .badge.green::before{background:var(--a-success)}
html[data-surface="admin"] .badge.red{background:var(--a-warn-soft);color:var(--a-warn)}
html[data-surface="admin"] .badge.red::before{background:var(--a-warn)}
html[data-surface="admin"] .badge.unlisted{background:var(--a-canvas);color:var(--a-muted)}

/* ---------- 面板 ---------- */
html[data-surface="admin"] .panel{background:#fff;border:1px solid var(--a-line);border-radius:var(--a-radius);box-shadow:none}
html[data-surface="admin"] .panel-head{padding:20px 24px;border-bottom:1px solid var(--a-line)}
html[data-surface="admin"] .panel-head h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
html[data-surface="admin"] .panel-head a,html[data-surface="admin"] .panel-head small{color:var(--a-muted);font-weight:500}
html[data-surface="admin"] .grid-2{gap:24px}

/* 首頁：四個數字改成一條分隔的資訊列，而不是四張卡 */
html[data-surface="admin"] .stats{gap:0;border:1px solid var(--a-line);border-radius:var(--a-radius);overflow:hidden;margin-bottom:32px}
html[data-surface="admin"] .stat{background:#fff;border:0;border-radius:0;box-shadow:none;padding:20px 24px;border-left:1px solid var(--a-line)}
html[data-surface="admin"] .stat:first-child{border-left:0}
html[data-surface="admin"] .stat .label{color:var(--a-muted);font-weight:500;font-size:13px}
html[data-surface="admin"] .stat strong{font-family:inherit;font-size:26px;font-weight:600;letter-spacing:-.01em;margin-top:4px}
html[data-surface="admin"] .stat .trend{color:var(--a-muted);font-size:12px}
html[data-surface="admin"] .todo{padding:16px 24px;border-bottom:1px solid var(--a-line)}
html[data-surface="admin"] .home-task{transition:background .15s ease}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .home-task:hover{background:var(--a-canvas)}
}
html[data-surface="admin"] .todo-icon{background:var(--a-canvas);border-radius:50%;color:var(--a-ink)}
html[data-surface="admin"] .todo-copy b{font-weight:600}
html[data-surface="admin"] .todo-copy small{color:var(--a-muted)}
html[data-surface="admin"] .todo .badge{background:var(--a-accent-soft);color:var(--a-accent-press)}
html[data-surface="admin"] .todo .badge::before{background:var(--a-accent)}
html[data-surface="admin"] .rank{padding:14px 24px}
html[data-surface="admin"] .rank>b:first-child,html[data-surface="admin"] .rank>span:first-child{color:var(--a-muted);font-weight:600}
html[data-surface="admin"] .bar{height:4px;background:var(--a-line);margin-top:8px}
html[data-surface="admin"] .bar i{background:var(--a-ink)}

/* ---------- 筆記庫：照片牆 ---------- */
html[data-surface="admin"] .note-library{gap:32px 24px}
html[data-surface="admin"] .library-card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
html[data-surface="admin"] .library-cover{height:auto;aspect-ratio:1/1;border-radius:var(--a-radius);background-color:var(--a-canvas);overflow:hidden;transition:filter .2s ease}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .admin-note-card:hover .library-cover{filter:brightness(.94)}
}
html[data-surface="admin"] .library-cover .badge{background:#fff;color:var(--a-ink);box-shadow:0 2px 4px rgba(0,0,0,.18);left:12px;top:12px}
html[data-surface="admin"] .library-body{padding:12px 0 0}
html[data-surface="admin"] .library-body h3{font-size:15px;font-weight:600;line-height:1.35;margin:2px 0 2px}
html[data-surface="admin"] .library-body .sku{color:var(--a-muted);font-weight:500;font-size:13px}
html[data-surface="admin"] .library-body strong,html[data-surface="admin"] .library-body .price{font-weight:600}
html[data-surface="admin"] .library-card .library-meta{margin-top:10px;background:transparent;border:0;border-top:1px solid var(--a-line);border-radius:0;padding:10px 0 0;color:var(--a-muted)}
html[data-surface="admin"] .library-card .library-actions{padding-top:12px;gap:8px}
html[data-surface="admin"] .library-actions .small-btn{border-color:var(--a-line-strong);padding:7px 12px;font-size:13px}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .library-actions .small-btn:hover{border-color:var(--a-ink)}
}
html[data-surface="admin"] .admin-note-card:focus-visible{outline:2px solid var(--a-ink);outline-offset:4px;border-radius:var(--a-radius)}
html[data-surface="admin"] .manage-category-tab{border-style:dashed}

/* ---------- 清單列表 ---------- */
html[data-surface="admin"] .list-row{padding:18px 24px;border-bottom:1px solid var(--a-line);transition:background .15s ease}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .list-row:hover{background:var(--a-canvas)}
}
html[data-surface="admin"] .list-row b,html[data-surface="admin"] .list-row strong{font-weight:600}
html[data-surface="admin"] .list-row .lucide,html[data-surface="admin"] .list-row>span:first-child{color:var(--a-ink)}
html[data-surface="admin"] .list-panel-head{padding:20px 24px}

/* ---------- 訂單 ---------- */
html[data-surface="admin"] .order-flow li{border:1px solid var(--a-line);background:#fff;padding:8px 14px 8px 8px}
html[data-surface="admin"] .order-flow li.order-flow-arrow{border:0;background:none;padding:0;color:var(--a-faint-ink)}
html[data-surface="admin"] .order-flow li::before{background:var(--a-ink);font-weight:600}
html[data-surface="admin"] .order-flow li b{font-weight:600}
html[data-surface="admin"] .order-card{background:#fff;border:1px solid var(--a-line);border-radius:var(--a-radius);padding:20px 24px;margin-bottom:12px;box-shadow:none;transition:border-color .15s ease}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .order-card:hover{border-color:var(--a-line-strong)}
}
html[data-surface="admin"] .order-card h3{font-weight:600}
html[data-surface="admin"] .avatar{background:var(--a-canvas);color:var(--a-ink);border-radius:50%;font-weight:600}
html[data-surface="admin"] .order-row-card .meta b{color:var(--a-ink);font-weight:600}
html[data-surface="admin"] .order-row-btn{border-radius:var(--a-radius-sm)}
html[data-surface="admin"] .line-share,html[data-surface="admin"] .order-row-card .line-share{background:#fff;color:var(--a-ink);border:1px solid var(--a-line-strong)}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .line-share:hover{border-color:var(--a-ink);background:#fff}
}

/* ---------- 叫貨 ---------- */
html[data-surface="admin"] .purchase-unpaid{background:#fff;border:1px solid var(--a-line);border-radius:var(--a-radius)}
html[data-surface="admin"] .purchase-unpaid>header,html[data-surface="admin"] .purchase-unpaid-head{background:transparent}
html[data-surface="admin"] .unpaid-note{color:var(--a-muted)}
html[data-surface="admin"] .purchase-unpaid-row{border-color:var(--a-line)}
html[data-surface="admin"] .purchase-decision button{border-radius:999px}
html[data-surface="admin"] .purchase-supplier{border-radius:var(--a-radius)}
html[data-surface="admin"] .purchase-supplier>header,html[data-surface="admin"] .ship-card>header{background:#fff;padding:20px 24px;border-bottom:1px solid var(--a-line)}
html[data-surface="admin"] .purchase-supplier>header b,html[data-surface="admin"] .purchase-supplier>header strong{font-size:16px;font-weight:600}
html[data-surface="admin"] .purchase-mark-btn{background:var(--a-ink);color:#fff;border-color:var(--a-ink)}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .purchase-mark-btn:hover:not(:disabled){background:#000}
}
html[data-surface="admin"] .batch-lines th{background:#fff;color:var(--a-muted);font-weight:500;font-size:12px;border-bottom:1px solid var(--a-line)}
html[data-surface="admin"] .batch-lines td{border-bottom:1px solid var(--a-line)}
html[data-surface="admin"] .batch-lines tr:last-child td{border-bottom:0}
html[data-surface="admin"] .batch-sku{color:var(--a-muted);font-weight:500}

/* ---------- 視窗與提示 ---------- */
html[data-surface="admin"] .modal-back{background:rgba(0,0,0,.45)}
html[data-surface="admin"] .modal{border-radius:var(--a-radius);box-shadow:var(--a-overlay)}
html[data-surface="admin"] .modal-head{border-bottom:1px solid var(--a-line)}
html[data-surface="admin"] .modal-head h2{font-size:18px;font-weight:600}
html[data-surface="admin"] .modal-total{background:var(--a-canvas)}
html[data-surface="admin"] .toast{background:var(--a-ink);border-radius:var(--a-radius-sm);box-shadow:var(--a-float)}
html[data-surface="admin"] .empty{color:var(--a-muted)}

/* ---------- 手機 ---------- */
@media(max-width:900px){
  html[data-surface="admin"] .layout{grid-template-columns:1fr}
  html[data-surface="admin"] .main{padding:20px 16px 96px}
  html[data-surface="admin"] .topbar{height:64px;padding:0 16px}
  html[data-surface="admin"] .page-head{margin-bottom:20px}
  html[data-surface="admin"] .page-head h1{font-size:24px}
  html[data-surface="admin"] .stats{grid-template-columns:1fr 1fr}
  html[data-surface="admin"] .stat{padding:16px}
  html[data-surface="admin"] .stat:nth-child(3){border-left:0}
  html[data-surface="admin"] .stat:nth-child(n+3){border-top:1px solid var(--a-line)}
  html[data-surface="admin"] .stat strong{font-size:22px}
  html[data-surface="admin"] .note-library{gap:24px 12px}
  html[data-surface="admin"] .order-card{padding:16px}
  html[data-surface="admin"] .panel-head,html[data-surface="admin"] .todo,html[data-surface="admin"] .rank,html[data-surface="admin"] .list-row{padding-left:16px;padding-right:16px}
  html[data-surface="admin"] .mobile-nav{background:#fff;border-top:1px solid var(--a-line);padding:6px 4px calc(8px + env(safe-area-inset-bottom))}
  html[data-surface="admin"] .mobile-nav button{color:var(--a-muted);font-weight:500;font-size:11px}
  html[data-surface="admin"] .mobile-nav button.active{color:var(--a-accent);font-weight:600}
}

/* ---------- 細節補強 ---------- */
html[data-surface="admin"] label.month-filter select{width:100%}
html[data-surface="admin"] .order-row-btn:not(.primary){background:#fff;color:var(--a-ink);border:1px solid var(--a-line-strong)}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .order-row-btn:not(.primary):hover{border-color:var(--a-ink);background:#fff}
}
html[data-surface="admin"] .order-row-line{color:var(--a-ink);border-color:var(--a-line-strong)}
html[data-surface="admin"] *{scrollbar-width:thin;scrollbar-color:var(--a-line-strong) transparent}
html[data-surface="admin"] ::-webkit-scrollbar{height:6px;width:8px}
html[data-surface="admin"] ::-webkit-scrollbar-thumb{background:var(--a-line-strong);border-radius:999px}
html[data-surface="admin"] ::-webkit-scrollbar-track{background:transparent}
html[data-surface="admin"] .purchase-unpaid small{color:var(--a-muted)}
html[data-surface="admin"] .dropzone{background:var(--a-canvas);border:1px dashed var(--a-line-strong);border-radius:var(--a-radius);color:var(--a-muted)}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .dropzone:hover{border-color:var(--a-ink)}
}
html[data-surface="admin"] .batch-step{background:#fff;border-color:var(--a-line);border-radius:var(--a-radius)}
html[data-surface="admin"] .batch-step.remitted{background:var(--a-canvas);border-color:var(--a-line)}
html[data-surface="admin"] .batch-order-note{color:var(--a-muted)}
html[data-surface="admin"] .list-product-thumb{background-color:var(--a-canvas)}
html[data-surface="admin"] #toast.toast{background:var(--a-ink);border-radius:var(--a-radius-sm);box-shadow:var(--a-float)}

/* 筆記卡：灰色細框線卡片，照片貼齊卡片上緣 */
html[data-surface="admin"] .library-card{background:#fff;border:1px solid var(--a-line);border-radius:var(--a-radius);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .admin-note-card:hover{border-color:var(--a-line-strong);box-shadow:0 6px 16px rgba(0,0,0,.08)}
}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .admin-note-card:hover .library-cover{filter:none}
}
html[data-surface="admin"] .library-cover{border-radius:0}
html[data-surface="admin"] .library-body{padding:14px 16px 16px}
html[data-surface="admin"] .admin-note-card:focus-visible{border-radius:var(--a-radius)}

/* 叫貨頁「未完成匯款」：灰底區塊，和下方白色叫貨表拉開層級 */
html[data-surface="admin"] .purchase-unpaid{background:var(--a-canvas);border-color:var(--a-line)}
html[data-surface="admin"] .purchase-unpaid>header{background:transparent;border-bottom:1px solid var(--a-line-strong)}
html[data-surface="admin"] .purchase-unpaid-row{background:transparent;border-color:var(--a-line-strong)}
html[data-surface="admin"] .purchase-unpaid .purchase-decision{background:#fff;border-color:var(--a-line-strong)}

/* =========================================================
   版面格線系統
   - 12 欄格線，欄距 24px（手機 16px），內容最大寬 1280px
   - 垂直節奏：頁標→內容 32px、區塊之間 24px、重複項目之間 12px
   - 所有面板左右內距一律 24px（手機 16px），讓各區塊文字左緣對齊
   ========================================================= */
html[data-surface="admin"]{
  --g-cols:12;--g-gutter:24px;--g-margin:40px;--g-max:1280px;
  --g-section:32px;--g-block:24px;--g-item:12px;--g-pad:24px;
}
@media(max-width:900px){html[data-surface="admin"]{--g-gutter:16px;--g-margin:16px;--g-section:24px;--g-block:16px;--g-item:12px;--g-pad:16px}}

html[data-surface="admin"] .main{max-width:calc(var(--g-max) + var(--g-margin) * 2);padding:var(--g-section) var(--g-margin) 80px}
@media(max-width:900px){html[data-surface="admin"] .main{padding-bottom:96px}}

/* 垂直節奏：主區每個直接子區塊統一間距 */
html[data-surface="admin"] .main>*{margin-top:0;margin-bottom:var(--g-block)}
html[data-surface="admin"] .main>.page-head{margin-bottom:var(--g-section)}
html[data-surface="admin"] .main>.order-card,html[data-surface="admin"] .main>.purchase-supplier,html[data-surface="admin"] .main>.ship-card{margin-bottom:var(--g-item)}
html[data-surface="admin"] .main>.tabs,html[data-surface="admin"] .main>.notes-toolbar,html[data-surface="admin"] .main>.purchase-view-row{margin-bottom:var(--g-block)}
html[data-surface="admin"] .main>.purchase-tabs{margin-bottom:var(--g-block)}
html[data-surface="admin"] .main>*:last-child{margin-bottom:0}

/* 12 欄格線上的版面 */
html[data-surface="admin"] .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
html[data-surface="admin"] .grid-2{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--g-gutter);align-items:start}
html[data-surface="admin"] .note-library{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g-block) var(--g-gutter)}
@media(max-width:1180px){html[data-surface="admin"] .note-library{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
  html[data-surface="admin"] .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-surface="admin"] .grid-2{grid-template-columns:minmax(0,1fr)}
  html[data-surface="admin"] .note-library{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){html[data-surface="admin"] .note-library{grid-template-columns:minmax(0,1fr)}}

/* 訂單列：4／6／2 欄（店家資訊／物流與動作／查看明細） */
html[data-surface="admin"] .order-card.order-row-card{grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,2fr);gap:var(--g-gutter);padding:20px var(--g-pad)}
@media(max-width:900px){html[data-surface="admin"] .order-card.order-row-card{grid-template-columns:minmax(0,1fr);gap:var(--g-item)}}

/* 面板內距統一 */
html[data-surface="admin"] .panel-head,html[data-surface="admin"] .list-panel-head{padding:20px var(--g-pad)}
html[data-surface="admin"] .todo{padding:16px var(--g-pad)}
html[data-surface="admin"] .rank{padding:14px var(--g-pad)}
html[data-surface="admin"] .list-row{padding:18px var(--g-pad)}
html[data-surface="admin"] .purchase-unpaid>header,html[data-surface="admin"] .purchase-unpaid-row{padding-left:var(--g-pad);padding-right:var(--g-pad)}
html[data-surface="admin"] .purchase-supplier>header,html[data-surface="admin"] .ship-card>header{padding:20px var(--g-pad)}
html[data-surface="admin"] .purchase-supplier .batch-lines th:first-child,html[data-surface="admin"] .purchase-supplier .batch-lines td:first-child,
html[data-surface="admin"] .ship-card .batch-lines th:first-child,html[data-surface="admin"] .ship-card .batch-lines td:first-child{padding-left:var(--g-pad)}
html[data-surface="admin"] .purchase-supplier .batch-lines th:last-child,html[data-surface="admin"] .purchase-supplier .batch-lines td:last-child,
html[data-surface="admin"] .ship-card .batch-lines th:last-child,html[data-surface="admin"] .ship-card .batch-lines td:last-child{padding-right:var(--g-pad)}
html[data-surface="admin"] .stat{padding:20px var(--g-pad)}
html[data-surface="admin"] .order-card{padding:20px var(--g-pad)}
@media(max-width:900px){html[data-surface="admin"] .stat,html[data-surface="admin"] .order-card{padding:16px var(--g-pad)}}

/* 首頁：數字列的分隔線落在格線欄距中央，下方兩欄 6／6 對齊同一條線 */
html[data-surface="admin"] .stats{column-gap:var(--g-gutter);row-gap:0}
html[data-surface="admin"] .stat{border-left:0;position:relative;padding-left:var(--g-pad);padding-right:0}
html[data-surface="admin"] .stat:first-child{padding-left:var(--g-pad)}
html[data-surface="admin"] .stat+.stat::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--g-gutter) / -2);border-left:1px solid var(--a-line)}
html[data-surface="admin"] .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){
  html[data-surface="admin"] .grid-2{grid-template-columns:minmax(0,1fr)}
  html[data-surface="admin"] .stat:nth-child(3)::before{display:none}
  html[data-surface="admin"] .stat:nth-child(n+3){border-top:0}
  html[data-surface="admin"] .stat:nth-child(n+3)::after{content:"";position:absolute;top:0;left:0;right:calc(var(--g-gutter) / -2);border-top:1px solid var(--a-line)}
  html[data-surface="admin"] .stat:nth-child(4)::after{left:calc(var(--g-gutter) / -2);right:0}
}
/* 列上的下一步（確認收款／商品已寄出）維持黑底，其他按鈕為描邊 */
html[data-surface="admin"] .order-row-btn[data-rowconfirm],html[data-surface="admin"] .order-row-btn[type=submit]{background:var(--a-ink);color:#fff;border-color:var(--a-ink)}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .order-row-btn[data-rowconfirm]:hover,html[data-surface="admin"] .order-row-btn[type=submit]:hover{background:#000;border-color:#000}
}

/* =========================================================
   按鈕層級（兩層）
   1. 強調：珊瑚紅實心、白字 —— 這一步最該按的那顆（新增、確認收款、商品已寄出、標記已叫貨、視窗裡的主要動作）
   2. 一般：白底、淺灰框、深字 —— 其他所有動作（查看明細、LINE、複製、分享、篩選以外的操作）
   ========================================================= */
html[data-surface="admin"] .primary,
html[data-surface="admin"] .order-row-btn[data-rowconfirm],
html[data-surface="admin"] .order-row-btn[type=submit],
html[data-surface="admin"] .purchase-mark-btn{
  background:var(--a-accent);color:#fff;border:1px solid var(--a-accent);font-weight:600}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .primary:hover:not(:disabled),html[data-surface="admin"] .order-row-btn[data-rowconfirm]:hover,html[data-surface="admin"] .order-row-btn[type=submit]:hover,html[data-surface="admin"] .purchase-mark-btn:hover:not(:disabled){background:var(--a-accent-press);border-color:var(--a-accent-press)}
}

html[data-surface="admin"] .small-btn:not(.purchase-mark-btn):not(.danger-fill):not(.danger-text),
html[data-surface="admin"] .ghost-btn:not(.demo-reset-btn),
html[data-surface="admin"] .icon-btn,
html[data-surface="admin"] .order-row-btn:not([data-rowconfirm]):not([type=submit]),
html[data-surface="admin"] .line-share{
  background:#fff;color:var(--a-ink);border:1px solid var(--a-line-strong);font-weight:500}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .small-btn:not(.purchase-mark-btn):not(.danger-fill):not(.danger-text):hover:not(:disabled),html[data-surface="admin"] .ghost-btn:not(.demo-reset-btn):hover,html[data-surface="admin"] .icon-btn:hover,html[data-surface="admin"] .order-row-btn:not([data-rowconfirm]):not([type=submit]):hover,html[data-surface="admin"] .line-share:hover{background:var(--a-canvas);border-color:var(--a-ink)}
}

/* 分段切換（保留／排除、總表／依廠商）：外框與選中塊都是圓角方形 */
html[data-surface="admin"] .purchase-decision,html[data-surface="admin"] .purchase-view-toggle{border-radius:var(--a-radius-sm);padding:3px;gap:2px}
html[data-surface="admin"] .purchase-decision button,html[data-surface="admin"] .purchase-view-toggle button{border-radius:5px}

/* 叫貨單／理貨單表格：固定欄寬，每張表的欄位對齊同一條線；數字欄靠右，儲存格一律頂端對齊 */
html[data-surface="admin"] .purchase-supplier .batch-lines,html[data-surface="admin"] .ship-card .batch-lines{table-layout:fixed;width:100%}
html[data-surface="admin"] .purchase-supplier .batch-lines th,html[data-surface="admin"] .purchase-supplier .batch-lines td,
html[data-surface="admin"] .ship-card .batch-lines th,html[data-surface="admin"] .ship-card .batch-lines td{vertical-align:top}
html[data-surface="admin"] .purchase-supplier:not(.purchase-overview) .batch-lines th:nth-child(1){width:18%}
html[data-surface="admin"] .purchase-supplier:not(.purchase-overview) .batch-lines th:nth-child(3){width:16%}
html[data-surface="admin"] .purchase-supplier:not(.purchase-overview) .batch-lines th:nth-child(4){width:14%}
html[data-surface="admin"] .purchase-supplier:not(.purchase-overview) .batch-lines th:nth-child(5){width:14%}
html[data-surface="admin"] .purchase-supplier:not(.purchase-overview) .batch-lines :is(th,td):nth-child(n+4){text-align:right}
html[data-surface="admin"] .purchase-overview .batch-lines th:nth-child(1){width:15%}
html[data-surface="admin"] .purchase-overview .batch-lines th:nth-child(3){width:12%}
html[data-surface="admin"] .purchase-overview .batch-lines th:nth-child(4){width:18%}
html[data-surface="admin"] .purchase-overview .batch-lines th:nth-child(5){width:12%}
html[data-surface="admin"] .purchase-overview .batch-lines th:nth-child(6){width:12%}
html[data-surface="admin"] .purchase-overview .batch-lines :is(th,td):nth-child(n+5){text-align:right}
html[data-surface="admin"] .ship-card .batch-lines th:nth-child(1){width:18%}
html[data-surface="admin"] .ship-card .batch-lines th:nth-child(3){width:18%}
html[data-surface="admin"] .ship-card .batch-lines th:nth-child(4){width:14%}
html[data-surface="admin"] .ship-card .batch-lines :is(th,td):nth-child(4){text-align:right}
html[data-surface="admin"] .batch-lines .unpaid-note{display:block}

/* 「更多」頁：入口是可點的卡片，不套首頁數字列的外框與分隔線，改成等寬卡片格 */
html[data-surface="admin"] .stats:has(>button.stat){border:0;border-radius:0;overflow:visible;gap:var(--g-gutter)}
html[data-surface="admin"] .stats:has(>button.stat)>button.stat{border:1px solid var(--a-line)!important;border-radius:var(--a-radius);padding:20px var(--g-pad);cursor:pointer}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .stats:has(>button.stat)>button.stat:hover{border-color:var(--a-ink)!important}
}
html[data-surface="admin"] .stats:has(>button.stat)>button.stat::before,html[data-surface="admin"] .stats:has(>button.stat)>button.stat::after{display:none}

/* 殘留的舊色（淺綠、米黃）統一收進新色票：底色 → canvas、選中 → 深字描邊、焦點 → 深字外框 */
html[data-surface="admin"] :is(.customer-table-head,.notification-table-head,.connection-row,.admin-note-gallery,.admin-note-thumbs>button,.list-note-config-row>img,.my-past-footer){background:var(--a-canvas)}
html[data-surface="admin"] .modal-head>button.close{background:var(--a-canvas)}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .modal-head>button.close:hover{background:var(--a-line)}
}
html[data-surface="admin"] .customer-directory .customer-avatar,html[data-surface="admin"] .customer-row .avatar,html[data-surface="admin"] button>span.avatar{background:var(--a-canvas)}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] :is(.customer-directory-row,.customer-row,.list-row,.demand-row-button,.home-task,.template-picker-row,.my-order-item-link):hover{background:var(--a-canvas)}
}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] :is(.create-methods>button,.note-picker label,.document-grid button,.cloud-billing-workbench .document-grid a,.photo-drop):hover{background:var(--a-canvas);border-color:var(--a-ink)}
}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .photo-tile .photo-replace:hover{background:var(--a-line)}
}
html[data-surface="admin"] .shipping-mode-option.selected{background:var(--a-canvas);border-color:var(--a-ink)}
html[data-surface="admin"] :is(.batch-step.paid,.batch-shipped-btn.active){background:var(--a-success-soft)}
html[data-surface="admin"] .log-qty.plus{background:var(--a-success-soft);color:var(--a-success)}
html[data-surface="admin"] .log-qty.minus{background:var(--a-warn-soft);color:var(--a-warn)}
html[data-surface="admin"] :is(.main>p.notice,.panel>div.notice,.notice){background:var(--a-canvas);color:var(--a-ink);border-color:var(--a-line)}
html[data-surface="admin"] .switch>span{background:var(--a-line-strong)}
html[data-surface="admin"] .danger-outline{border-color:var(--a-warn);color:var(--a-warn)}
html[data-surface="admin"] .remittance-notice small,html[data-surface="admin"] .my-past-footer{color:var(--a-muted)}
html[data-surface="admin"] :is(.month-filter select,.notes-month-filter select):focus,
html[data-surface="admin"] :is(.deadline-edit,.demand-row-button,.note-pick-card:has(input:focus-visible),.my-order-details>summary,.my-account-back,.my-order-item-link):focus-visible{outline:2px solid var(--a-ink);outline-offset:2px}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .note-pick-card:hover{border-color:var(--a-line-strong)}
}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .product-card-add:hover{background:var(--a-canvas)}
}
html[data-surface="admin"] .customer-filter-tabs button:not(.active):not([aria-selected="true"])>span{background:var(--a-canvas)}

/* 設定頁：面板內的選項與清單要跟面板標題對齊，留出左右與底部內距 */
html[data-surface="admin"] .panel>:is(.shipping-mode,.template-list){padding:0 var(--g-pad) var(--g-pad);gap:12px}
html[data-surface="admin"] .panel>.settings-fields{margin:0 var(--g-pad);padding:0 0 var(--g-pad)}
html[data-surface="admin"] .panel>.notice{margin:0 var(--g-pad) var(--g-pad);border-radius:var(--a-radius-sm)}
html[data-surface="admin"] .template-picker-row{padding:14px 16px}

/* 按鈕層級調整：內容區（列表／卡片裡）的主要操作一律黑色大按鈕；珊瑚紅只留給頁面層級的主要動作（新增筆記、建立清單、視窗主按鈕）
   包含：確認收款、商品已寄出、LINE 通知出貨、LINE 提醒匯款、標記已叫貨。「查看明細」等一般操作維持白底描邊。 */
html[data-surface="admin"] :is(.order-row-btn[data-rowconfirm],.order-row-btn[type=submit],.order-row-btn.order-row-line,.purchase-mark-btn){background:var(--a-ink);color:#fff;border:1px solid var(--a-ink);font-weight:600}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] :is(.order-row-btn[data-rowconfirm],.order-row-btn[type=submit],.order-row-btn.order-row-line,.purchase-mark-btn):hover:not(:disabled){background:#000;border-color:#000;color:#fff}
}
html[data-surface="admin"] .order-row-card .order-row-action .order-row-btn.order-row-line{background:var(--a-ink);color:#fff;border-color:var(--a-ink)}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .order-row-card .order-row-action .order-row-btn.order-row-line:hover{background:#000;border-color:#000;color:#fff}
}
html[data-surface="admin"] .main :is(.packing-toolbar,.purchase-view-row,.purchase-toolbar) .primary{background:var(--a-ink);border-color:var(--a-ink);color:#fff}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .main :is(.packing-toolbar,.purchase-view-row,.purchase-toolbar) .primary:hover:not(:disabled){background:#000;border-color:#000}
}

/* 篩選下拉（全部筆記／月份／清單月份）：統一成同一種膠囊樣式與 Lucide chevron-down；
   點擊時只在外框顯示圓角焦點環，不再疊一個方形外框 */
html[data-surface="admin"] .month-filter{padding:0;border:1px solid var(--a-line-strong);border-radius:999px;background:#fff;display:inline-flex;align-items:center}
html[data-surface="admin"] .month-filter select{appearance:none;-webkit-appearance:none;height:44px;padding:0 40px 0 18px;border:0;border-radius:999px;background:transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat calc(100% - 16px) 50%;font:inherit;font-size:15px;font-weight:500;color:var(--a-ink);cursor:pointer}
html[data-surface="admin"] .month-filter select:focus,html[data-surface="admin"] .month-filter select:focus-visible{outline:none}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .month-filter:hover{border-color:var(--a-ink)}
}
html[data-surface="admin"] .month-filter:focus-within{border-color:var(--a-ink);box-shadow:0 0 0 1px var(--a-ink)}
/* 篩選下拉與旁邊的主按鈕統一：圓角方形（8px）、同高 47px */
html[data-surface="admin"] .month-filter,html[data-surface="admin"] .month-filter select{border-radius:var(--a-radius-sm)}
html[data-surface="admin"] .month-filter select{height:45px}

/* 清單詳情視窗：套用新設計語言（白底髮絲線數字列、區塊間距、按鈕同一層級與尺寸） */
html[data-surface="admin"] .detail-modal:has(.battle-hero) .modal-body{padding:24px var(--g-pad) var(--g-pad)}
html[data-surface="admin"] .battle-hero{background:#fff;color:var(--a-ink);border:1px solid var(--a-line);border-radius:var(--a-radius);box-shadow:none;overflow:hidden}
html[data-surface="admin"] .battle-hero>div{padding:16px 20px;border-left:1px solid var(--a-line)}
html[data-surface="admin"] .battle-hero>div:first-child{border-left:0}
html[data-surface="admin"] .battle-hero span{color:var(--a-muted);font-size:13px;font-weight:500}
html[data-surface="admin"] .battle-hero b{color:var(--a-ink);font-size:22px;font-weight:600;letter-spacing:-.01em;margin-top:4px}
html[data-surface="admin"] .detail-modal:has(.battle-hero) .detail-title{margin-top:28px;padding-bottom:12px;border-bottom:1px solid var(--a-line);align-items:center}
html[data-surface="admin"] .detail-modal:has(.battle-hero) .detail-title h3{font-size:17px;font-weight:600}
html[data-surface="admin"] .detail-modal:has(.battle-hero) :is(.detail-title-actions .small-btn,.list-actions button,.danger-zone button){height:38px;padding:0 14px;border-radius:var(--a-radius-sm);font-size:14px;font-weight:500;background:#fff;color:var(--a-ink);border:1px solid var(--a-line-strong);box-shadow:none}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .detail-modal:has(.battle-hero) :is(.detail-title-actions .small-btn,.list-actions button):hover{border-color:var(--a-ink);background:var(--a-canvas)}
}
html[data-surface="admin"] .detail-modal:has(.battle-hero) .danger-zone button{color:var(--a-warn);border-color:var(--a-warn)}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .detail-modal:has(.battle-hero) .danger-zone button:hover{background:var(--a-warn-soft)}
}
html[data-surface="admin"] .list-product-row{padding:14px 0;border-bottom:1px solid var(--a-line)}
html[data-surface="admin"] .list-product-thumb{width:64px;height:64px;border-radius:var(--a-radius-sm)}
html[data-surface="admin"] .list-product-copy b{font-size:15px;font-weight:600}
html[data-surface="admin"] .list-product-copy small{font-size:13px;color:var(--a-muted)}
html[data-surface="admin"] .list-product-sold small{font-size:13px;color:var(--a-muted)}
html[data-surface="admin"] .list-product-sold strong{font-size:17px;font-weight:600}
html[data-surface="admin"] .detail-modal:has(.battle-hero) .list-actions{margin-top:20px;gap:8px}
html[data-surface="admin"] .detail-modal:has(.battle-hero) .danger-zone{margin-top:20px;padding-top:20px;border-top:1px solid var(--a-line)}
html[data-surface="admin"] .detail-modal:has(.battle-hero) .danger-zone b{font-size:15px;font-weight:600}
html[data-surface="admin"] .detail-modal:has(.battle-hero) .danger-zone small{color:var(--a-muted);font-size:13px}
html[data-surface="admin"] .detail-modal:has(.battle-hero) .list-delete-zone{margin-top:12px}
@media(max-width:560px){html[data-surface="admin"] .battle-hero>div{padding:12px 14px}html[data-surface="admin"] .battle-hero b{font-size:18px}}
html[data-surface="admin"] .detail-modal:has(.battle-hero) .danger-zone button.danger-outline{color:var(--a-warn);border-color:var(--a-warn)}
html[data-surface="admin"] .detail-modal:has(.battle-hero) .modal-body :is(.variant,.small-btn,.add,.ghost-btn,[data-archivelist],[data-unarchivelist],[data-relist]){height:38px;padding:0 14px;border-radius:var(--a-radius-sm);font-size:14px;font-weight:500}
html[data-surface="admin"] .detail-modal:has(.battle-hero) .modal-body :is(.detail-title-actions .small-btn,.list-actions button,.danger-zone button,.variant,.small-btn,.add,.ghost-btn){height:40px;min-height:40px}

/* =========================================================
   彈出視窗規範（後台所有 .modal）
   寬度三級：S 480（確認、單一表單）／M 720（明細 .detail-modal）／L 1040（挑選與預覽：筆記挑選、建立清單、叫貨彙總、預覽）
   外框：白底、16px 圓角、浮層陰影；整窗捲動，標題列黏在頂端
   標題列：20px 24px；標題 18/600＋狀態標籤；副標 13px 灰字一行一項；關閉鈕 36px 圓形
   內容：24px 內距；區塊標題 15/600，上 28px 下 12px；第一個區塊不留上距
   狀態區塊：髮絲線框、12px 圓角、16px 20px
   表格：表頭 12px 灰、內容 14px、數字等寬、最後一欄靠右；表尾合計 15/600，與最後一欄對齊
   摺疊區（details）：髮絲線框、12px 圓角，標題 15/600＋Lucide chevron，展開時轉向
   按鈕：40px 高、8px 圓角；按鈕列靠右、主要按鈕在最右；危險操作放最底，髮絲線分隔、警示色描邊
   手機（≤560px）：改為底部抽屜，滿寬、上方圓角
   ========================================================= */
html[data-surface="admin"] .modal{width:min(480px,calc(100vw - 48px));max-height:calc(100dvh - 48px);overflow:auto;border-radius:16px;background:#fff;box-shadow:var(--a-overlay);padding:0}
html[data-surface="admin"] .modal.detail-modal{width:min(720px,calc(100vw - 48px))}
html[data-surface="admin"] .modal:is(.note-pick-modal,.list-builder,.procurement-modal,.customer-preview-modal,.admin-list-preview,.order-workbench){width:min(1040px,calc(100vw - 48px))}
html[data-surface="admin"] .modal.ui-confirm{width:min(440px,calc(100vw - 48px))}

html[data-surface="admin"] .modal>.modal-head{position:sticky;top:0;z-index:2;background:#fff;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--a-line)}
html[data-surface="admin"] .modal-head h2{font-size:18px;font-weight:600;line-height:1.35;margin:0;display:inline}
html[data-surface="admin"] .modal-head .badge{vertical-align:3px;margin-left:8px}
html[data-surface="admin"] .modal-head small{display:block;margin-top:4px;color:var(--a-muted);font-size:13px;line-height:1.5}
html[data-surface="admin"] .modal-head .modal-title-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html[data-surface="admin"] .modal-head .modal-title-status h2{display:block}
html[data-surface="admin"] .modal-head .modal-title-status .badge{margin-left:0;vertical-align:0}
html[data-surface="admin"] .modal-head>button.close{flex:0 0 auto;width:36px;height:36px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;font-size:18px;line-height:1}
html[data-surface="admin"] .modal-head>button.close .lucide{width:18px;height:18px}

html[data-surface="admin"] .modal>.modal-body{padding:24px}
html[data-surface="admin"] .modal-body>:first-child{margin-top:0}
html[data-surface="admin"] .modal-body :is(h3.batch-section-title,.detail-title,.modal-section-title){margin:28px 0 12px}
html[data-surface="admin"] .modal-body :is(h3.batch-section-title,.detail-title h3,.modal-section-title){font-size:15px;font-weight:600;color:var(--a-ink)}

html[data-surface="admin"] .modal-body .batch-step{border:1px solid var(--a-line);border-radius:var(--a-radius);padding:16px 20px;background:#fff}
html[data-surface="admin"] .modal-body .batch-step.remitted{background:var(--a-canvas);border-color:var(--a-canvas)}
html[data-surface="admin"] .modal-body .batch-step>b{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
html[data-surface="admin"] .modal-body .batch-step :is(p,small){color:var(--a-muted);font-size:14px;line-height:1.55;margin:0}

html[data-surface="admin"] .modal-body .batch-lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
html[data-surface="admin"] .modal-body .batch-lines th{font-size:12px;font-weight:500;color:var(--a-muted);text-align:left;padding:0 12px 10px;border-bottom:1px solid var(--a-line)}
html[data-surface="admin"] .modal-body .batch-lines td{font-size:14px;padding:12px;vertical-align:top;border-bottom:1px solid var(--a-line)}
html[data-surface="admin"] .modal-body .batch-lines :is(th,td):first-child{padding-left:0}
html[data-surface="admin"] .modal-body .batch-lines :is(th,td):last-child{padding-right:0;text-align:right;white-space:nowrap}
html[data-surface="admin"] .modal-body .batch-lines tfoot td{border-bottom:0;border-top:1px solid var(--a-ink);padding-top:14px;font-size:15px;font-weight:600}
html[data-surface="admin"] .modal-body .batch-lines tbody tr:last-child td{border-bottom:0}

html[data-surface="admin"] .modal-body details{border:1px solid var(--a-line);border-radius:var(--a-radius);padding:0;margin-top:16px;background:#fff}
html[data-surface="admin"] .modal-body details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:15px;font-weight:600;color:var(--a-ink)}
html[data-surface="admin"] .modal-body details>summary::-webkit-details-marker{display:none}
html[data-surface="admin"] .modal-body details>summary::before{content:"";width:16px;height:16px;flex:0 0 auto;background:currentColor;-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
html[data-surface="admin"] .modal-body details[open]>summary::before{transform:rotate(90deg)}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .modal-body details>summary:hover{background:var(--a-canvas);border-radius:var(--a-radius)}
}
html[data-surface="admin"] .modal-body details[open]>summary{border-bottom:1px solid var(--a-line);border-radius:var(--a-radius) var(--a-radius) 0 0}
html[data-surface="admin"] .modal-body details>:not(summary){margin-left:16px;margin-right:16px}
html[data-surface="admin"] .modal-body details>:last-child:not(summary){margin-bottom:16px}
html[data-surface="admin"] .modal-body details .batch-order{padding:12px 0;border-bottom:1px solid var(--a-line)}
html[data-surface="admin"] .modal-body details .batch-order:last-of-type{border-bottom:0}

html[data-surface="admin"] .modal-body :is(.flow-actions,.modal-actions,.form-actions){display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:24px}
html[data-surface="admin"] .modal-body :is(.flow-actions,.modal-actions,.form-actions,.list-actions) :is(button,a.small-btn){height:40px;min-height:40px;padding:0 16px;border-radius:var(--a-radius-sm);font-size:14px}
html[data-surface="admin"] .modal-body .form-field label{font-size:13px;font-weight:600;color:var(--a-ink)}
html[data-surface="admin"] .modal-body .form-field :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);font:inherit;font-size:15px;color:var(--a-ink);background:#fff}
html[data-surface="admin"] .modal-body .form-field :is(input:not([type=checkbox]):not([type=radio]),select){min-height:44px;padding:0 12px}
html[data-surface="admin"] .modal-body .form-field :is(input,select,textarea):focus{outline:none;border-color:var(--a-ink);box-shadow:0 0 0 1px var(--a-ink)}
html[data-surface="admin"] .modal-body .danger-zone{margin-top:24px;padding-top:20px;border-top:1px solid var(--a-line)}

@media(max-width:560px){
  html[data-surface="admin"] .modal-back:has(>.modal){align-items:flex-end;padding:0}
  html[data-surface="admin"] .modal,html[data-surface="admin"] .modal.detail-modal,html[data-surface="admin"] .modal:is(.note-pick-modal,.list-builder,.procurement-modal,.customer-preview-modal,.admin-list-preview,.order-workbench),html[data-surface="admin"] .modal.ui-confirm{width:100%;max-height:92dvh;border-radius:16px 16px 0 0}
  html[data-surface="admin"] .modal>.modal-head{padding:16px}
  html[data-surface="admin"] .modal>.modal-body{padding:16px}
}
/* 視窗內所有按鈕同一尺寸：40px 高、8px 圓角 */
html[data-surface="admin"] .modal .modal-body :is(.primary,.add,.ghost-btn,.small-btn,.variant,.danger-outline,.danger-btn,.secondary):not(.tab){height:40px;min-height:40px;padding:0 16px;border-radius:var(--a-radius-sm);font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:6px}
html[data-surface="admin"] .modal .modal-body :is(.primary,.add,.ghost-btn,.small-btn,.variant,.danger-outline,.danger-btn,.secondary).full-action:not(.tab),html[data-surface="admin"] .modal .modal-body form>:is(.primary,.add):last-child:not(.tab){width:100%}
/* 手機：明細表改成一列一品項——上排品名＋小計，下排產品編號 · 規格＋數量 */
@media(max-width:560px){
  html[data-surface="admin"] .modal-body .batch-lines thead{display:none}
  html[data-surface="admin"] .modal-body .batch-lines tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"name name total" "sku variant qty";column-gap:8px;row-gap:4px;padding:12px 0;border-bottom:1px solid var(--a-line)}
  html[data-surface="admin"] .modal-body .batch-lines tbody tr:last-child{border-bottom:0}
  html[data-surface="admin"] .modal-body .batch-lines tbody td{display:block;padding:0!important;border:0;text-align:left}
  html[data-surface="admin"] .modal-body .batch-lines tbody td:nth-child(1){grid-area:sku;font-size:13px;color:var(--a-muted)}
  html[data-surface="admin"] .modal-body .batch-lines tbody td:nth-child(2){grid-area:name;font-size:15px;font-weight:600}
  html[data-surface="admin"] .modal-body .batch-lines tbody td:nth-child(3){grid-area:variant;font-size:13px;color:var(--a-muted)}
  html[data-surface="admin"] .modal-body .batch-lines tbody td:nth-child(3)::before{content:"· "}
  html[data-surface="admin"] .modal-body .batch-lines tbody td:nth-child(4){grid-area:qty;font-size:13px;color:var(--a-muted);text-align:right}
  html[data-surface="admin"] .modal-body .batch-lines tbody td:nth-child(5){grid-area:total;text-align:right}
  html[data-surface="admin"] .modal-body .batch-lines tfoot tr{display:flex;justify-content:space-between;border-top:1px solid var(--a-ink)}
  html[data-surface="admin"] .modal-body .batch-lines tfoot td{border-top:0;padding:14px 0 0!important}
}

/* =========================================================
   字體系統（後台）— 8 個層級、4 種字重，全部從這裡取值；說明見 DESIGN.md「Typography」
   字重只用 400 一般／500 中等／600 半粗／700 粗（只給頁面標題）
   ========================================================= */
html[data-surface="admin"]{
  --a-font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --text-caption:500 12px/1.4 var(--a-font-family);   --text-caption-ls:0;
  --text-small:400 13px/1.5 var(--a-font-family);     --text-small-ls:0;
  --text-body:400 14px/1.55 var(--a-font-family);     --text-body-ls:0;
  --text-ui:500 15px/1.4 var(--a-font-family);        --text-ui-ls:0;
  --text-title:600 16px/1.4 var(--a-font-family);     --text-title-ls:0;
  --text-subheading:600 18px/1.35 var(--a-font-family);--text-subheading-ls:-.01em;
  --text-numeral:600 26px/1.2 var(--a-font-family);   --text-numeral-ls:-.02em;
  --text-heading:700 28px/1.25 var(--a-font-family);  --text-heading-ls:-.02em;
}
/* heading：頁面標題 */
html[data-surface="admin"] .main h1,html[data-surface="admin"] .page-head h1{font:var(--text-heading);letter-spacing:var(--text-heading-ls);font-family:inherit}
/* subheading：面板標題、視窗標題 */
html[data-surface="admin"] :is(.panel-head h2,.panel>h2,.modal-head h2,.list-panel-head h2,.purchase-lists-head b,.purchase-unpaid>header b){font:var(--text-subheading);letter-spacing:var(--text-subheading-ls);font-family:inherit}
/* title：區塊標題、卡片與列的主名稱 */
html[data-surface="admin"] :is(.main h3,.modal-body h3,.batch-section-title,.detail-title h3,.order-card h3,.purchase-supplier>header b,.ship-card>header b,.library-body h3,.list-row .todo-copy b,.danger-zone b){font:var(--text-title);letter-spacing:var(--text-title-ls);font-family:inherit}
/* numeral：統計數字（等寬數字） */
html[data-surface="admin"] :is(.stat strong,.battle-hero b){font:var(--text-numeral);letter-spacing:var(--text-numeral-ls);font-family:inherit;font-variant-numeric:tabular-nums}
/* ui：按鈕、分頁、輸入框、列表內商品名 */
html[data-surface="admin"] :is(button,.tab,select,input:not([type=checkbox]):not([type=radio]),textarea,.list-product-copy b,.order-row-info b,a.small-btn,a.order-row-btn){font-family:inherit;font-size:15px;line-height:1.4;letter-spacing:0}
html[data-surface="admin"] :is(button,.tab,a.small-btn,a.order-row-btn){font-weight:500}
html[data-surface="admin"] :is(.primary,.tab.active,button.active,.order-row-btn[data-rowconfirm],.order-row-btn[type=submit],.order-row-line,.purchase-mark-btn,.list-product-copy b,.order-row-info b){font-weight:600}
html[data-surface="admin"] :is(.small-btn,.order-row-btn,.variant,.ghost-btn,.danger-outline,.tab,.modal .modal-body button:not(.list-product-row):not(.demand-row-button)){font-size:14px}
/* body：內文、表格內容、說明段落 */
html[data-surface="admin"] :is(.page-head p,.modal-body p,.batch-lines td,.todo-copy small,.notice){font:var(--text-body);letter-spacing:0;font-family:inherit}
html[data-surface="admin"] .page-head p{color:var(--a-muted)}
/* small：次要資訊（副標、meta、商品編號、備註） */
html[data-surface="admin"] :is(small,.meta,.sku,td.batch-sku,.modal-head small,.list-product-copy small,.order-row-info span,.unpaid-note,.library-meta span){font:var(--text-small);letter-spacing:0;font-family:inherit}
/* caption：標籤、表頭、計數、提示 */
html[data-surface="admin"] :is(.badge,.batch-lines th,.tab-count,.stat .label,.stat .trend,.battle-hero span,.side-footer,.test-site-badge,.order-flow-title,.note-new-badge){font:var(--text-caption);letter-spacing:0;font-family:inherit}
/* 其他粗體一律半粗；價格、合計用等寬數字 */
html[data-surface="admin"] :is(b,strong){font-weight:600}
html[data-surface="admin"] :is(.library-body strong,.list-product-sold strong,.order-money strong,.batch-lines tfoot td){font-variant-numeric:tabular-nums}
/* 收尾：表單標籤＝small 半粗；清單詳情的區塊標題與已銷售數字＝title；客戶篩選計數＝caption */
html[data-surface="admin"] :is(.form-field label,.settings-fields label,label.check-row,.panel label:not(.switch):not(.shipping-mode-option):not(.template-picker-row)){font-size:13px;font-weight:600;line-height:1.5}
html[data-surface="admin"] .detail-modal:has(.battle-hero) .detail-title h3,html[data-surface="admin"] .list-product-sold strong{font:var(--text-title);letter-spacing:0}
html[data-surface="admin"] .customer-filter-tabs button>span,html[data-surface="admin"] .customer-filter-tabs span{font:var(--text-caption)}
html[data-surface="admin"] .platform-brand span{font-size:17px;font-weight:700;letter-spacing:-.01em}

/* =========================================================
   稽核修正（無障礙）
   1. 珊瑚紅上的白字對比只有 3.5:1 → 有文字的珊瑚紅底改用 --a-accent-fill（#e00b41，4.9:1）；Logo、圖示、狀態點仍用 #ff385c
   2. 白底上的珊瑚紅文字 → --a-accent-text（#d10a3c，≥4.5:1）
   3. 淡灰文字（#b0b0b0，2.2:1）只留給裝飾；可讀文字一律 --a-muted
   4. 手機點擊區至少 44px
   ========================================================= */
html[data-surface="admin"]{--a-accent-fill:#e00b41;--a-accent-fill-press:#c1063a;--a-accent-text:#d10a3c}
html[data-surface="admin"] .primary{background:var(--a-accent-fill);border-color:var(--a-accent-fill)}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .primary:hover:not(:disabled){background:var(--a-accent-fill-press);border-color:var(--a-accent-fill-press)}
}
html[data-surface="admin"] .main :is(.packing-toolbar,.purchase-view-row,.purchase-toolbar) .primary{background:var(--a-ink);border-color:var(--a-ink)}
html[data-surface="admin"] .todo .badge,html[data-surface="admin"] .badge.orange{color:var(--a-accent-text)}
html[data-surface="admin"] .side-footer,html[data-surface="admin"] .order-flow li.order-flow-arrow{color:var(--a-muted)}

/* 手機底部分頁：圖示＋文字、56px 高；目前分頁用珊瑚紅圖示與深珊瑚紅文字 */
html[data-surface="admin"] .mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;font-size:11px;font-weight:500;color:var(--a-muted)}
html[data-surface="admin"] .mobile-nav .mobile-nav-icon{width:22px;height:22px}
html[data-surface="admin"] .mobile-nav button.active{color:var(--a-accent-text);font-weight:600}
html[data-surface="admin"] .mobile-nav button.active .mobile-nav-icon{color:var(--a-accent)}

@media(max-width:560px){
  html[data-surface="admin"] :is(.tab,.small-btn,.order-row-btn,.ghost-btn,.variant,.customer-filter-tabs button,.purchase-view-toggle button,.purchase-decision button){min-height:44px}
  html[data-surface="admin"] .library-actions .small-btn{min-height:44px;padding:0 16px}
}
html[data-surface="admin"] :is(.page-head,.modal,.main) :is(.primary,[data-newnote]):not(.purchase-toolbar .primary):not(.packing-toolbar .primary):not(.purchase-view-row .primary){background:var(--a-accent-fill);border-color:var(--a-accent-fill);color:#fff}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] :is(.page-head,.modal,.main) :is(.primary,[data-newnote]):not(.purchase-toolbar .primary):not(.packing-toolbar .primary):not(.purchase-view-row .primary):hover:not(:disabled){background:var(--a-accent-fill-press);border-color:var(--a-accent-fill-press)}
}
@media(max-width:560px){html[data-surface="admin"] :is(.modal-head>button.close,.topbar button,.modal .modal-body :is(.primary,.small-btn,.ghost-btn,.variant,.danger-outline)){min-height:44px}html[data-surface="admin"] .modal-head>button.close{width:44px;height:44px}}
@media(max-width:560px){
  html[data-surface="admin"] body .modal .modal-body :is(button.primary,button.small-btn,button.ghost-btn,button.variant,button.danger-outline,button.add):not(.tab):not(.list-product-row){height:44px;min-height:44px}
  html[data-surface="admin"] .list-delete-btn{min-height:44px;padding:0 4px}
}
html[data-surface="admin"] .order-row-card .meta b{font-weight:inherit;color:inherit}

/* 平台 Logo（Figma 36:764）：文字標誌 Notedrop——Inter Bold、字距 -0.08em；Note 黑、drop 珊瑚紅 #ff395c */
html[data-surface="admin"] .brand.notedrop-wordmark{display:inline-flex;align-items:baseline;gap:0;font-family:"Inter",var(--a-font-family);font-weight:700;font-size:40px;line-height:1;letter-spacing:-.08em;color:#000;white-space:nowrap;text-decoration:none}
html[data-surface="admin"] .notedrop-wordmark .wm-drop{color:#ff395c}
html[data-surface="admin"] .notedrop-wordmark span{font:inherit;letter-spacing:inherit}
@media(max-width:560px){html[data-surface="admin"] .brand.notedrop-wordmark{font-size:28px}}
html[data-surface="admin"] .brand.notedrop-wordmark span{display:inline}
@media(max-width:560px){
  html[data-surface="admin"] .topbar :is(button,span,a){white-space:nowrap}
  html[data-surface="admin"] .topbar .scene-name{display:none}
  html[data-surface="admin"] .brand.notedrop-wordmark{font-size:26px}
}

/* 清單詳情標題列的「展示方式」選單，和旁邊按鈕同高 */
html[data-surface="admin"] .detail-title-actions .list-display-select{display:inline-flex;align-items:center;border-radius:var(--a-radius-sm);min-height:40px;padding:0 12px}
html[data-surface="admin"] .detail-title-actions .list-display-select select{font-size:14px;font-weight:500;padding:0 36px 0 4px;min-height:38px;background-position:calc(100% - 8px) 50%}
html[data-surface="admin"] .detail-title-actions .list-display-select{box-sizing:border-box;height:40px;min-height:0;padding:0 0 0 8px}
html[data-surface="admin"] .detail-title-actions .list-display-select select{height:100%;min-height:0;line-height:normal;padding-top:0;padding-bottom:0;margin:0}

/* 設定 → 店家首頁 */
html[data-surface="admin"] .home-settings .panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
html[data-surface="admin"] .home-template-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:20px var(--g-pad,24px) 4px}
html[data-surface="admin"] .home-template-option{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border:1px solid var(--a-line-strong);border-radius:var(--a-radius);cursor:pointer;transition:border-color .15s ease}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .home-template-option:hover{border-color:var(--a-ink)}
}
html[data-surface="admin"] .home-template-option.selected{border-color:var(--a-ink);box-shadow:0 0 0 1px var(--a-ink)}
html[data-surface="admin"] .home-template-option input{margin-top:3px}
html[data-surface="admin"] .home-template-option span{display:grid;gap:2px}
html[data-surface="admin"] .home-template-option small{color:var(--a-muted)}
html[data-surface="admin"] .home-settings .form-field.wide{grid-column:1/-1}
html[data-surface="admin"] .home-settings textarea{width:100%;resize:vertical;font:inherit;padding:10px 12px}
html[data-surface="admin"] .home-cover-preview{display:grid;place-items:center;height:140px;border:1px dashed var(--a-line-strong);border-radius:var(--a-radius);background:var(--a-canvas) center/cover no-repeat;color:var(--a-muted);font-size:13px}
html[data-surface="admin"] .home-cover-preview.loading{opacity:.6}
html[data-surface="admin"] .home-cover-actions{display:flex;gap:8px;margin-top:8px}
html[data-surface="admin"] .home-cover-actions label.small-btn{cursor:pointer}
html[data-surface="admin"] .home-settings-hint{margin:0;padding:0 var(--g-pad,24px) 20px;color:var(--a-muted);font-size:13px}
@media(max-width:560px){html[data-surface="admin"] .home-template-options{grid-template-columns:1fr}}
html[data-surface="admin"] .settings-grid>.home-settings{grid-column:1/-1}
html[data-surface="admin"] .home-settings .settings-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:700px){html[data-surface="admin"] .home-settings .settings-fields{grid-template-columns:1fr}}
html[data-surface="admin"] .home-settings .settings-fields{padding-top:16px}

/* ---------- 更多 → 店家首頁 編輯頁 ---------- */
html[data-surface="admin"] .sf-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html[data-surface="admin"] .sf-dirty{display:inline-flex;align-items:center;gap:6px;color:var(--a-muted);font-size:13px}
html[data-surface="admin"] .sf-dirty::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a-accent)}
html[data-surface="admin"] .sf-layout{display:grid;grid-template-columns:minmax(0,1fr) 375px;gap:var(--g-gutter,24px);align-items:start}
html[data-surface="admin"] .sf-form{display:grid;gap:var(--g-block,24px);min-width:0}
html[data-surface="admin"] .sf-form .panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
html[data-surface="admin"] .sf-count{color:var(--a-muted);font-size:13px;white-space:nowrap}
html[data-surface="admin"] .sf-form .home-template-options{padding:20px var(--g-pad,24px)}
html[data-surface="admin"] .sf-fields{display:grid;gap:16px;padding:20px var(--g-pad,24px)}
html[data-surface="admin"] .sf-fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-surface="admin"] .sf-fields textarea{width:100%;resize:vertical;font:inherit;padding:10px 12px}
html[data-surface="admin"] .sf-fields input{width:100%}
html[data-surface="admin"] .sf-list{list-style:none;margin:0;padding:0}
html[data-surface="admin"] .sf-row{display:flex;align-items:center;gap:12px;padding:12px var(--g-pad,24px);border-top:1px solid var(--a-line)}
html[data-surface="admin"] .sf-list .sf-row:first-child{border-top:0}
html[data-surface="admin"] .sf-row.is-off .sf-check span{opacity:.5}
html[data-surface="admin"] .sf-check{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer}
html[data-surface="admin"] .sf-check input{width:18px;height:18px;flex:none}
html[data-surface="admin"] .sf-check span,html[data-surface="admin"] .sf-row-main{display:grid;gap:2px;min-width:0;flex:1}
html[data-surface="admin"] .sf-check b,html[data-surface="admin"] .sf-row-main b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-surface="admin"] .sf-check small,html[data-surface="admin"] .sf-row-main small{color:var(--a-muted);font-size:13px}
html[data-surface="admin"] .sf-move{display:flex;gap:6px;flex:none}
html[data-surface="admin"] .sf-move .small-btn.icon-only{width:36px;height:36px;padding:0;display:grid;place-items:center}
html[data-surface="admin"] .sf-move .lucide{width:16px;height:16px}
html[data-surface="admin"] .sf-empty{padding:20px var(--g-pad,24px);color:var(--a-muted);font-size:14px;list-style:none;margin:0}
html[data-surface="admin"] .sf-thumb{flex:none;width:48px;height:48px;border-radius:var(--a-radius-sm);background:var(--a-canvas) center/cover no-repeat}
html[data-surface="admin"] .sf-thumb.large{width:100%;height:auto;aspect-ratio:3/4}
html[data-surface="admin"] .sf-mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:20px var(--g-pad,24px)}
html[data-surface="admin"] .sf-mode label{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border:1px solid var(--a-line-strong);border-radius:var(--a-radius);cursor:pointer}
html[data-surface="admin"] .sf-mode label.selected{border-color:var(--a-ink);box-shadow:0 0 0 1px var(--a-ink)}
html[data-surface="admin"] .sf-mode span{display:grid;gap:2px}
html[data-surface="admin"] .sf-mode small{color:var(--a-muted)}
html[data-surface="admin"] .sf-mode input{margin-top:3px}
html[data-surface="admin"] .sf-mode+.sf-list{border-top:1px solid var(--a-line)}
html[data-surface="admin"] .sf-picker{border-top:1px solid var(--a-line);background:var(--a-canvas);padding:16px var(--g-pad,24px) 20px}
html[data-surface="admin"] .sf-picker-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
html[data-surface="admin"] .sf-picker-head input{flex:1;height:40px;padding:0 12px}
html[data-surface="admin"] .sf-picker-head span{color:var(--a-muted);font-size:13px;white-space:nowrap}
html[data-surface="admin"] .sf-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;max-height:520px;overflow:auto;padding:2px}
html[data-surface="admin"] .sf-pick{position:relative;display:grid;gap:4px;align-content:start;padding:8px;border:1px solid var(--a-line);border-radius:var(--a-radius);background:#fff;cursor:pointer}
html[data-surface="admin"] .sf-pick input{position:absolute;top:14px;left:14px;width:18px;height:18px;z-index:1}
html[data-surface="admin"] .sf-pick.selected{border-color:var(--a-ink);box-shadow:0 0 0 1px var(--a-ink)}
html[data-surface="admin"] .sf-pick.is-disabled{opacity:.45;cursor:not-allowed}
html[data-surface="admin"] .sf-pick b{font-size:13px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-surface="admin"] .sf-pick small{color:var(--a-muted);font-size:12px}
html[data-surface="admin"] .sf-preview{position:sticky;top:96px;display:grid;gap:8px;justify-items:center}
html[data-surface="admin"] .sf-phone{width:375px;height:min(760px,calc(100vh - 140px));border:1px solid var(--a-line-strong);border-radius:32px;overflow:hidden;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.08)}
html[data-surface="admin"] .sf-frame{width:100%;height:100%;border:0;display:block}
html[data-surface="admin"] .sf-preview small{color:var(--a-muted);font-size:12px}
@media(max-width:1180px){
  html[data-surface="admin"] .sf-layout{grid-template-columns:minmax(0,1fr)}
  html[data-surface="admin"] .sf-preview{position:static;order:-1}
  html[data-surface="admin"] .sf-phone{height:560px;max-width:100%}
}
@media(max-width:700px){
  html[data-surface="admin"] .sf-fields.two,html[data-surface="admin"] .sf-mode,html[data-surface="admin"] .sf-form .home-template-options{grid-template-columns:1fr}
  html[data-surface="admin"] .sf-preview{order:0}
}
html[data-surface="admin"] a.small-btn{text-decoration:none;display:inline-flex;align-items:center}

/* 商品筆記：加入精選按鈕與精選分頁 */
html[data-surface="admin"] .feature-btn{display:inline-flex;align-items:center;gap:6px}
html[data-surface="admin"] .feature-btn .lucide{width:15px;height:15px}
html[data-surface="admin"] .feature-btn.is-on{border-color:var(--a-accent);color:var(--a-accent-press,#e00b41);background:var(--a-accent-soft,#fff0f3)}
html[data-surface="admin"] .feature-btn.is-on .lucide{fill:currentColor}
html[data-surface="admin"] .tab.featured-tab{display:inline-flex;align-items:center;gap:6px}
html[data-surface="admin"] .tab.featured-tab .tab-icon{width:14px;height:14px}
html[data-surface="admin"] .tab.featured-tab.active .tab-icon{fill:currentColor}
html[data-surface="admin"] .note-featured-empty{grid-column:1/-1}
html[data-surface="admin"] .library-actions .small-btn.feature-btn.is-on:not(.purchase-mark-btn){border-color:var(--a-accent);color:#e00b41;background:#fff0f3}

/* 頭部：拿掉「商家後台／測試站」字樣；恢復測試資料、登出改為細框按鈕 */
html[data-surface="admin"] .topbar .scene-name,html[data-surface="admin"] .topbar .test-site-badge{display:none}
html[data-surface="admin"] .topbar{gap:8px}
html[data-surface="admin"] .topbar .demo-reset-btn{margin-left:auto}
html[data-surface="admin"] .topbar .demo-reset-btn,html[data-surface="admin"] .topbar .test-admin-logout button{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);background:#fff;color:var(--a-ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .topbar .demo-reset-btn:hover,html[data-surface="admin"] .topbar .test-admin-logout button:hover{border-color:var(--a-ink);background:var(--a-canvas)}}
html[data-surface="admin"] .topbar .test-admin-logout{margin:0;padding:0;background:transparent}
/* 首頁快速動作：三顆同層級珊瑚紅按鈕（沿用頁首主要按鈕樣式） */
html[data-surface="admin"] .page-head .head-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
html[data-surface="admin"] .page-head .head-actions .primary.quick-action{display:inline-flex;align-items:center;gap:8px;padding:12px 20px}
html[data-surface="admin"] .btn-icon{width:18px;height:18px;flex:none}
html[data-surface="admin"] .primary .btn-icon,html[data-surface="admin"] .small-btn .btn-icon{margin-right:2px}
@media(max-width:700px){
  html[data-surface="admin"] .page-head .head-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  html[data-surface="admin"] .page-head .head-actions .primary.quick-action{justify-content:center;padding:10px 6px;font-size:14px;gap:6px}
  html[data-surface="admin"] .topbar .demo-reset-btn,html[data-surface="admin"] .topbar .test-admin-logout button{height:36px;padding:0 12px;font-size:13px}
}
@media(max-width:700px){html[data-surface="admin"] .page-head:has(.head-actions){flex-direction:column;align-items:stretch}}
/* 店家首頁編輯頁：頁首按鈕同高 */
html[data-surface="admin"] .sf-head-actions .small-btn,html[data-surface="admin"] .sf-head-actions .primary{box-sizing:border-box;height:44px;min-height:44px;padding:0 20px;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center}

/* 客戶資料：LINE 頭像、暱稱與標籤 */
/* LINE-linked customer identity */
html[data-surface="admin"] .avatar.line-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--a-canvas);flex:none}
html[data-surface="admin"] .customer-identity em i.line-tag{background:#e8f7ee;color:#05722f;font-weight:600}
html[data-surface="admin"] .customer-line-linked{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--a-muted);font-size:13px}
html[data-surface="admin"] .customer-line-linked .avatar,html[data-surface="admin"] .customer-line-linked .avatar.line-avatar{width:24px;height:24px;font-size:11px;border-radius:50%}

/* 叫貨頁「標記已叫貨」屬於內容區的主要動作：黑底白字（與「確認收款」同層級，見 DESIGN.md 按鈕層級） */
html[data-surface="admin"] .purchase-supplier-actions .small-btn.purchase-mark-btn{background:var(--a-ink);border-color:var(--a-ink);color:#fff}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .purchase-supplier-actions .small-btn.purchase-mark-btn:hover:not(:disabled){background:#000;border-color:#000}}

/* =========================================================
   後台手機版修整（audit 2026-10-01）
   - 輸入框 16px：避免 iPhone 點擊時自動放大畫面
   - 可點元素至少 44px；橫向分頁列不顯示捲軸
   - 各頁標頭、列表、表格改成適合拇指操作的排法
   ========================================================= */
/* 客戶明細分頁：底線改用 2px 內陰影（原 3px 透明底框配圓角，偵測器 border-accent-on-rounded） */
html[data-surface="admin"] .customer-detail-tabs button{border-bottom:0;border-radius:0;box-shadow:inset 0 -2px 0 transparent;color:var(--a-muted);font-weight:500}
html[data-surface="admin"] .customer-detail-tabs button.active{color:var(--a-ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--a-ink)}

@media(max-width:900px){
  html[data-surface="admin"] :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){font-size:16px}
  html[data-surface="admin"] label.month-filter select,html[data-surface="admin"] .detail-title-actions .list-display-select select{font-size:16px}
  /* 觸控尺寸 */
  html[data-surface="admin"] :is(.small-btn,.ghost-btn,.icon-btn,.tab,.order-row-btn,.primary,.variant,.add,.purchase-decision button){min-height:44px}
  html[data-surface="admin"] .page-head .head-actions .primary.quick-action{min-height:44px}
  html[data-surface="admin"] .sf-move .small-btn.icon-only{width:44px;height:44px}
  html[data-surface="admin"] .detail-title-actions .list-display-select{height:44px}
  html[data-surface="admin"] [data-backlibrary],html[data-surface="admin"] .note-flow-head a,html[data-surface="admin"] .back-link{display:inline-flex;align-items:center;min-height:44px}
  /* 橫向分頁列：可左右滑，但不顯示捲軸 */
  html[data-surface="admin"] .main .tabs{scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html[data-surface="admin"] .main .tabs::-webkit-scrollbar{display:none}
  /* 頁標：標題與說明在上，動作在下滿寬 */
  html[data-surface="admin"] .page-head{flex-direction:column;align-items:stretch;gap:12px}
  html[data-surface="admin"] .page-head>.primary,html[data-surface="admin"] .page-head>button{width:100%;justify-content:center}
  html[data-surface="admin"] .page-head p{margin-top:4px}
  /* 筆記：兩個篩選並排、新增筆記滿寬 */
  html[data-surface="admin"] .note-head-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html[data-surface="admin"] .note-head-actions>*{min-width:0;width:100%;flex:none}
  html[data-surface="admin"] .note-head-actions>.primary,html[data-surface="admin"] .note-head-actions>[data-newnote]{grid-column:1/-1;justify-content:center}
  html[data-surface="admin"] .note-head-actions .note-month-filter{flex-basis:auto}
  /* 客戶：搜尋框改到標題下方滿寬 */
  html[data-surface="admin"] .customer-page-head .customer-search,html[data-surface="admin"] .customer-page-head .customer-search input{width:100%;max-width:none}
  /* 訂單流程說明：壓成一列，可左右滑 */
  html[data-surface="admin"] .order-flow ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  html[data-surface="admin"] .order-flow ol::-webkit-scrollbar{display:none}
  html[data-surface="admin"] .order-flow li{flex:none}
  html[data-surface="admin"] .order-flow li small{display:none}
  /* 叫貨：未匯款店家的三個動作排成兩列等寬 */
  html[data-surface="admin"] .purchase-unpaid-row{display:grid;gap:10px}
  html[data-surface="admin"] .purchase-unpaid-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html[data-surface="admin"] .purchase-unpaid-actions>*{justify-content:center;width:100%}
  html[data-surface="admin"] .purchase-unpaid-actions .purchase-decision{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 叫貨表：廠商標頭的按鈕換到下一行 */
  html[data-surface="admin"] .purchase-supplier>header{flex-wrap:wrap}
  html[data-surface="admin"] .purchase-supplier>header>.purchase-supplier-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 商品與庫存：表格改成卡片列，不再左右溢出 */
  html[data-surface="admin"] .inventory-head-action{display:none}
  html[data-surface="admin"] :is(.inventory-row,.inventory-row-action){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;min-width:0}
  html[data-surface="admin"] :is(.inventory-row,.inventory-row-action)>div:first-child{grid-column:1/-1}
  html[data-surface="admin"] .inventory-row-action>span:empty{display:none}
  html[data-surface="admin"] .inventory-row-action .small-btn{grid-column:1/-1;justify-self:stretch}
  /* 清單詳情：標題一行，動作兩欄等寬，展示方式滿寬 */
  html[data-surface="admin"] .detail-title{flex-direction:column;align-items:stretch;gap:12px}
  html[data-surface="admin"] .detail-title h3{text-align:left}
  html[data-surface="admin"] .detail-title-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html[data-surface="admin"] .detail-title-actions>*{width:100%;justify-content:center}
  html[data-surface="admin"] .detail-title-actions .list-display-select{grid-column:1/-1}
  html[data-surface="admin"] .detail-title-actions .list-display-select select{width:100%}
  /* 設定：第一個欄位不要貼著面板標題 */
  html[data-surface="admin"] .settings-section .settings-fields{padding-top:16px}
}
@media(max-width:560px){
  /* 筆記庫：手機兩欄，卡片內文精簡 */
  html[data-surface="admin"] .note-library{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  html[data-surface="admin"] .library-body{padding:10px 10px 12px}
  html[data-surface="admin"] .library-body h3{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  html[data-surface="admin"] .library-body .sku{font-size:12px}
  html[data-surface="admin"] .library-card .library-meta{font-size:12px;padding-top:8px;margin-top:8px}
  html[data-surface="admin"] .library-card .library-actions{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px}
  html[data-surface="admin"] .library-card .library-actions .small-btn{flex:1 1 auto;justify-content:center;padding:0 8px;font-size:13px}
  html[data-surface="admin"] .library-cover .badge{left:8px;top:8px;font-size:11px;padding:3px 8px}
}
@media(max-width:900px){
  html[data-surface="admin"] .customer-filter-tabs{scrollbar-width:none}
  html[data-surface="admin"] .customer-filter-tabs::-webkit-scrollbar{display:none}
  html[data-surface="admin"] .purchase-tabs .tab{min-width:56px;padding:0 6px;justify-content:center}
}
@media(max-width:900px){html[data-surface="admin"] .purchase-unpaid-actions .purchase-decision{width:100%;box-sizing:border-box}html[data-surface="admin"] .purchase-unpaid-actions .purchase-decision button{width:100%}}
@media(max-width:900px){
  html[data-surface="admin"] .inventory-row-action>strong:nth-of-type(1)::before{content:"在庫 ";color:var(--a-muted);font-weight:500;font-size:13px}
  html[data-surface="admin"] .inventory-row-action>strong:nth-of-type(2)::before{content:"餘貨 ";color:var(--a-muted);font-weight:500;font-size:13px}
}

/* =========================================================
   後台手機版簡化（以好用為主）
   ========================================================= */
html[data-surface="admin"] .mobile-only-tools{display:none}
@media(max-width:900px){
  /* 頂列只留登出；恢復測試資料移到「更多」頁底部 */
  html[data-surface="admin"] .topbar .demo-reset-btn{display:none}
  html[data-surface="admin"] .topbar .test-admin-logout{margin-left:auto}
  html[data-surface="admin"] .mobile-only-tools{display:grid;gap:8px;margin-top:var(--g-block,24px);padding:16px;border:1px dashed var(--a-line-strong);border-radius:var(--a-radius);color:var(--a-muted);font-size:13px}
  html[data-surface="admin"] .mobile-only-tools .small-btn{justify-content:center}
  /* 更多：LINE 尚未串接的通知中心先不顯示 */
  html[data-surface="admin"] .stats .stat[data-page="notifications"]{display:none}
  /* 首頁：先看今日待辦，統計數字放後面 */
  html[data-surface="admin"] .main:has(.page-head .head-actions){display:flex;flex-direction:column}
  html[data-surface="admin"] .main:has(.page-head .head-actions)>.grid-2{order:2}
  html[data-surface="admin"] .main:has(.page-head .head-actions)>.stats{order:3;margin:var(--g-block,24px) 0 0}
  /* 訂單：流程說明熟悉後用不到，手機上不顯示 */
  html[data-surface="admin"] .order-flow,html[data-surface="admin"] .order-flow-title{display:none}
  /* 叫貨：每家店一列＝「LINE 提醒匯款」＋「保留／排除」；複製訊息留給電腦版 */
  html[data-surface="admin"] .purchase-unpaid-actions [data-copyreminder]{display:none}
  html[data-surface="admin"] .purchase-unpaid-actions{grid-template-columns:minmax(0,1fr) auto}
  html[data-surface="admin"] .purchase-unpaid-actions .purchase-decision{grid-column:auto;width:auto;display:flex}
  html[data-surface="admin"] .purchase-unpaid-actions .purchase-decision button{width:auto;min-width:56px}
}
@media(max-width:560px){
  /* 新增筆記／建立清單：改成右下角浮動按鈕，標頭只留標題與篩選 */
  html[data-surface="admin"] .note-head-actions>[data-newnote],html[data-surface="admin"] .list-head-actions>.primary[data-newlist]{position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:25;width:auto;height:52px;min-height:52px;padding:0 20px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.22);gap:6px}
  html[data-surface="admin"] .main:has(.note-head-actions),html[data-surface="admin"] .main:has(.list-head-actions){padding-bottom:160px}
}
@media(max-width:900px){
  html[data-surface="admin"] .purchase-unpaid-row>.purchase-unpaid-actions{width:100%;align-items:center}
  html[data-surface="admin"] .purchase-unpaid-actions .purchase-decision{height:44px;box-sizing:border-box;align-items:stretch}
  html[data-surface="admin"] .purchase-unpaid-actions .purchase-decision button{min-height:0;height:100%}
}
@media(max-width:900px){html[data-surface="admin"] .purchase-unpaid-row{grid-template-columns:minmax(0,1fr);justify-content:stretch}}

/* 手機版右下角「＋」快速選單 */
html[data-surface="admin"] .quick-fab{display:none}
@media(max-width:900px){
  html[data-surface="admin"] .quick-fab{display:block}
  /* 各頁原本的新增按鈕在手機上收進「＋」選單 */
  html[data-surface="admin"] .page-head .head-actions,
  html[data-surface="admin"] .note-head-actions>[data-newnote],
  html[data-surface="admin"] .list-head-actions>.primary[data-newlist]{display:none}
  html[data-surface="admin"] .main:has(.note-head-actions),html[data-surface="admin"] .main:has(.list-head-actions),html[data-surface="admin"] .main{padding-bottom:160px}
  html[data-surface="admin"] .quick-fab-btn{position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:41;display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--a-accent-fill,#e00b41);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.24);cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
  html[data-surface="admin"] .quick-fab-btn .lucide{width:26px;height:26px;stroke-width:2.25;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
  html[data-surface="admin"] .quick-fab.open .quick-fab-btn .lucide{transform:rotate(45deg)}
  html[data-surface="admin"] .quick-fab-btn:active{transform:scale(.94)}
  html[data-surface="admin"] .quick-fab-backdrop{position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.28)}
  html[data-surface="admin"] .quick-fab-menu{position:fixed;right:16px;bottom:calc(148px + env(safe-area-inset-bottom));z-index:40;display:grid;min-width:200px;padding:6px;border-radius:var(--a-radius);background:#fff;box-shadow:var(--a-overlay)}
  html[data-surface="admin"] .quick-fab-menu[hidden]{display:none}
  html[data-surface="admin"] .quick-fab.open .quick-fab-menu{animation:quick-fab-in .18s cubic-bezier(.2,.8,.2,1)}
  html[data-surface="admin"] .quick-fab-menu .quick-fab-item.primary,html[data-surface="admin"] .quick-fab-menu .quick-fab-item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 14px;border:0;border-radius:var(--a-radius-sm);background:#fff;color:var(--a-ink);font:inherit;font-size:16px;font-weight:500;text-align:left;box-shadow:none;cursor:pointer}
  html[data-surface="admin"] .quick-fab-menu .quick-fab-item:active{background:var(--a-canvas)}
  html[data-surface="admin"] .quick-fab-menu .quick-fab-item .lucide{width:20px;height:20px;color:var(--a-accent-text,#d10a3c)}
}
@keyframes quick-fab-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html[data-surface="admin"] .quick-fab.open .quick-fab-menu{animation:none}html[data-surface="admin"] .quick-fab-btn,html[data-surface="admin"] .quick-fab-btn .lucide{transition:none}}

/* 商品筆記（手機）分類列：全部、精選固定＋其他分類下拉＋管理分類 */
html[data-surface="admin"] .note-cat-compact{display:none}
@media(max-width:900px){
  html[data-surface="admin"] .note-category-toolbar>.tabs{display:none}
  html[data-surface="admin"] .note-cat-compact{display:flex;align-items:center;gap:8px;width:100%}
  html[data-surface="admin"] .note-cat-compact .tab{flex:none;min-height:44px;display:inline-flex;align-items:center;gap:6px}
  html[data-surface="admin"] .note-cat-select{flex:1 1 auto;min-width:0;display:flex;align-items:center;height:44px;border:1px solid var(--a-line-strong);border-radius:999px;background:#fff}
  html[data-surface="admin"] .note-cat-select.active{border-color:var(--a-ink);box-shadow:0 0 0 1px var(--a-ink)}
  html[data-surface="admin"] .note-cat-select select{width:100%;height:100%;min-height:0;padding:0 34px 0 16px;border:0;border-radius:999px;background-color:transparent;box-shadow:none;font-size:16px;font-weight:500;color:var(--a-ink);text-overflow:ellipsis}
  html[data-surface="admin"] .note-cat-select select:focus{box-shadow:none}
  html[data-surface="admin"] .note-cat-select:focus-within{border-color:var(--a-ink);box-shadow:0 0 0 1px var(--a-ink)}
  html[data-surface="admin"] .note-cat-manage{flex:none;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%}
  html[data-surface="admin"] .note-cat-manage .lucide{width:20px;height:20px}
}
@media(max-width:900px){
  html[data-surface="admin"] .note-cat-compact{gap:6px}
  html[data-surface="admin"] .note-cat-compact .tab{padding:0 12px;gap:4px}
  html[data-surface="admin"] .note-cat-select{min-width:112px}
  html[data-surface="admin"] .note-cat-select select{padding:0 30px 0 14px}
}
@media(max-width:900px){html[data-surface="admin"] .note-cat-select{min-width:96px}html[data-surface="admin"] .note-cat-compact{min-width:0;max-width:100%}}
@media(max-width:900px){
  html[data-surface="admin"] .note-cat-compact>.tab{padding-left:12px;padding-right:12px;gap:4px}
  html[data-surface="admin"] .note-cat-compact .tab .tab-count{padding:0;margin:0;min-width:0}
  html[data-surface="admin"] .note-cat-compact .tab .tab-icon{width:14px;height:14px}
  html[data-surface="admin"] .note-cat-select select{padding:0 26px 0 12px;background-position:calc(100% - 8px) 50%}
}
@media(max-width:900px){html[data-surface="admin"] .note-cat-compact>.tab .tab-count{display:none}}

/* 清單列表：封面照片（疊卡）＋名稱＋統計＋建立時間＋狀態 */
html[data-surface="admin"] .list-row.list-row-cover{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px var(--g-pad,24px);text-align:left}
html[data-surface="admin"] .list-cover{position:relative;width:76px;height:76px;padding-top:6px}
html[data-surface="admin"] .list-cover::before{content:"";position:absolute;top:0;left:8px;right:8px;height:12px;border-radius:8px 8px 0 0;background:var(--a-line)}
html[data-surface="admin"] .list-cover-photo{position:relative;display:grid;place-items:center;width:76px;height:70px;border-radius:var(--a-radius-sm);background:var(--a-canvas) center/cover no-repeat;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
html[data-surface="admin"] .list-cover-photo.empty .lucide{width:24px;height:24px;color:var(--a-muted)}
html[data-surface="admin"] .list-row-main{display:grid;gap:4px;min-width:0}
html[data-surface="admin"] .list-row-main b{font-size:16px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-surface="admin"] .list-row-main small{color:var(--a-muted);font-size:13px;font-variant-numeric:tabular-nums}
html[data-surface="admin"] .list-row-main time{color:var(--a-muted);font-size:12px;font-variant-numeric:tabular-nums}
html[data-surface="admin"] .list-row.list-row-cover>.badge{justify-self:end;white-space:nowrap}
@media(max-width:560px){
  html[data-surface="admin"] .list-row.list-row-cover{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:14px 16px}
  html[data-surface="admin"] .list-cover,html[data-surface="admin"] .list-cover-photo{width:64px}
  html[data-surface="admin"] .list-cover{height:64px}
  html[data-surface="admin"] .list-cover-photo{height:58px}
  html[data-surface="admin"] .list-row.list-row-cover>.badge{grid-column:2;justify-self:start;margin-top:-2px}
  html[data-surface="admin"] .list-row-main b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
@media(max-width:560px){
  html[data-surface="admin"] .list-row.list-row-cover{grid-template-columns:64px minmax(0,1fr) auto}
  html[data-surface="admin"] .list-row.list-row-cover>.badge{grid-column:auto;justify-self:end;margin-top:0}
}
/* 蓋過 qa-fixes 對 .list-row 的 !important 兩欄規則，只作用在新版清單列 */
html[data-surface="admin"] .list-row.list-row-cover{grid-template-columns:76px minmax(0,1fr) auto!important}
@media(max-width:560px){html[data-surface="admin"] .list-row.list-row-cover{grid-template-columns:64px minmax(0,1fr) auto!important}}
/* 手機分類下拉：箭頭離右邊框 16px，文字留出箭頭空間 */
@media(max-width:900px){html[data-surface="admin"] .note-cat-select select{padding:0 40px 0 16px;background-position:calc(100% - 16px) 50%}}
@media(max-width:900px){html[data-surface="admin"] .note-cat-select select{padding:0 34px 0 14px;background-position:calc(100% - 14px) 50%}}
@media(max-width:900px){html[data-surface="admin"] .note-cat-select select{-webkit-appearance:none;appearance:none}}
@media(max-width:900px){html[data-surface="admin"] .note-cat-select select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px 16px;background-position:calc(100% - 14px) 50%}}

/* 管理分類：新增在上、拖曳排序 */
html[data-surface="admin"] .category-manager-body{padding-top:0}
html[data-surface="admin"] .category-add-top{position:sticky;top:0;z-index:2;display:flex;gap:8px;margin:0 -24px;padding:16px 24px;background:#fff;border-bottom:1px solid var(--a-line)}
html[data-surface="admin"] .category-add-top input{flex:1;min-width:0;height:44px;padding:0 14px}
html[data-surface="admin"] .category-add-top .small-btn{min-height:44px;padding:0 18px}
html[data-surface="admin"] .category-drag-hint{margin:12px 0 4px;color:var(--a-muted);font-size:13px}
html[data-surface="admin"] .category-row.draggable{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:8px;background:#fff;transition:transform .15s ease,box-shadow .15s ease}
html[data-surface="admin"] .category-row.draggable.dragging{position:relative;z-index:3;transition:none;box-shadow:var(--a-float);border-radius:var(--a-radius-sm)}
html[data-surface="admin"] .cat-drag{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--a-radius-sm);background:transparent;color:var(--a-muted);cursor:grab;touch-action:none}
html[data-surface="admin"] .cat-drag:active,html[data-surface="admin"] .dragging .cat-drag{cursor:grabbing;color:var(--a-ink)}
html[data-surface="admin"] .cat-drag .lucide{width:20px;height:20px}
html[data-surface="admin"] .category-row.draggable .category-actions{display:flex;gap:8px;flex-wrap:nowrap}
@media(max-width:560px){
  html[data-surface="admin"] .category-add-top{margin:0 -16px;padding:12px 16px}
  html[data-surface="admin"] .category-row.draggable{grid-template-columns:44px minmax(0,1fr);row-gap:8px;padding:12px 0}
  html[data-surface="admin"] .category-row.draggable .category-actions{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-surface="admin"] .category-row.draggable .category-actions .small-btn{min-height:40px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){html[data-surface="admin"] .category-row.draggable{transition:none}}
html[data-surface="admin"] .category-row.draggable>div:not(.category-actions){display:grid;gap:2px;min-width:0}
html[data-surface="admin"] .category-row.draggable>div b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-surface="admin"] .category-row.draggable>div small{color:var(--a-muted);font-size:13px}
@media(max-width:560px){
  html[data-surface="admin"] .category-row.draggable{grid-template-columns:44px minmax(0,1fr) auto;row-gap:0;padding:8px 0}
  html[data-surface="admin"] .category-row.draggable .category-actions{grid-column:auto;display:flex;gap:6px}
  html[data-surface="admin"] .category-row.draggable .category-actions .small-btn{min-height:40px;padding:0 12px}
}

/* 表單內的下拉（物流、分類、單位等）：與輸入框同為 8px 圓角方框，箭頭離右邊 14px；篩選用的膠囊下拉不受影響 */
html[data-surface="admin"] select:not(label.month-filter select):not(.note-cat-select select):not(.list-display-select select){
  border-radius:var(--a-radius-sm);-webkit-appearance:none;appearance:none;padding-left:14px;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:16px 16px;background-position:calc(100% - 14px) 50%}
html[data-surface="admin"] select:not(label.month-filter select):not(.note-cat-select select):not(.list-display-select select):disabled{opacity:.5}
/* 訂單卡（手機）：兩個資訊欄並排，按鈕滿寬；空的資訊欄不佔位 */
@media(max-width:900px){
  html[data-surface="admin"] .order-row-card .order-row-action{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
  html[data-surface="admin"] .order-row-card .order-row-action>:is(.order-row-btn,button,a){grid-column:1/-1}
  html[data-surface="admin"] .order-row-card .order-row-action>.order-row-info:empty{display:none}
  html[data-surface="admin"] .order-row-card .order-row-action>.order-row-info:only-of-type{grid-column:1/-1}
  html[data-surface="admin"] .order-row-card .order-row-action label{display:grid;gap:6px;min-width:0}
  html[data-surface="admin"] .order-row-card .order-row-action :is(select,input){width:100%;min-width:0}
}
html[data-surface="admin"] .order-row-due b{font-variant-numeric:tabular-nums}
@media(max-width:900px){html[data-surface="admin"] .order-row-card .order-row-action>.order-row-info:has(+ .order-row-info:empty){grid-column:1/-1}}
/* 訂單卡（手機）：店家資訊與下方資料之間加分隔線；欄位標籤與數值靠近 */
@media(max-width:900px){
  html[data-surface="admin"] .order-row-card .order-row-action{border-top:1px solid var(--a-line);padding-top:16px;margin-top:4px}
  html[data-surface="admin"] .order-row-card .order-row-info{display:grid;gap:4px;align-content:start}
  html[data-surface="admin"] .order-row-card .order-row-info>*{margin:0}
  html[data-surface="admin"] .order-row-card .order-row-info span{line-height:1.4}
  html[data-surface="admin"] .order-row-card .order-row-info b{line-height:1.35}
  html[data-surface="admin"] .order-row-card .order-row-action label{gap:4px}
}
/* 訂單卡資訊欄：數值緊接在標籤下方（取消 44px 最小高度與垂直置中） */
html[data-surface="admin"] .order-row-card .order-row-info{gap:4px;justify-content:center}
html[data-surface="admin"] .order-row-card .order-row-info b{min-height:0;display:block;line-height:1.35}
@media(max-width:900px){html[data-surface="admin"] .order-row-card .order-row-info{justify-content:start;justify-items:start}}
/* 「＋」只在首頁／筆記／清單；其他頁面底部只留一般空間 */
@media(max-width:900px){
  html[data-surface="admin"] .main{padding-bottom:96px}
  html[data-surface="admin"] #app:has(.quick-fab) .main{padding-bottom:160px}
}

/* =========================================================
   叫貨單（手機）：表格改成一品項一張卡，資訊不再被截斷
   依廠商：編號／品名／規格＋箱數，數量靠右
   總表：多一行廠商；叫貨紀錄：沒有箱數
   ========================================================= */
@media(max-width:700px){
  html[data-surface="admin"] :is(.purchase-supplier,.purchase-record) .batch-lines{display:block;width:100%;min-width:0;border-collapse:separate}
  html[data-surface="admin"] :is(.purchase-supplier,.purchase-record) .batch-lines thead{display:none}
  html[data-surface="admin"] :is(.purchase-supplier,.purchase-record) .batch-lines :is(tbody,tfoot){display:block}
  html[data-surface="admin"] :is(.purchase-supplier,.purchase-record) .batch-lines tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sku qty" "name qty" "var pack";column-gap:12px;row-gap:2px;padding:12px 16px;border-top:1px solid var(--a-line)}
  html[data-surface="admin"] :is(.purchase-supplier,.purchase-record) .batch-lines tbody tr:first-child{border-top:0}
  html[data-surface="admin"] :is(.purchase-supplier,.purchase-record) .batch-lines td{display:block;padding:0!important;border:0!important;text-align:left;min-width:0;white-space:normal;overflow-wrap:anywhere}
  html[data-surface="admin"] :is(.purchase-supplier,.purchase-record) .batch-lines td:nth-child(1){grid-area:sku;color:var(--a-muted);font-size:12px}
  html[data-surface="admin"] :is(.purchase-supplier,.purchase-record) .batch-lines td:nth-child(2){grid-area:name;font-size:15px;font-weight:600;color:var(--a-ink);line-height:1.4}
  html[data-surface="admin"] :is(.purchase-supplier,.purchase-record) .batch-lines td:nth-child(3){grid-area:var;color:var(--a-muted);font-size:13px}
  html[data-surface="admin"] :is(.purchase-supplier,.purchase-record) .batch-lines td:nth-child(3)::before{content:"規格 "}
  html[data-surface="admin"] .purchase-supplier:not(.purchase-overview) .batch-lines td:nth-child(4),
  html[data-surface="admin"] .purchase-overview .batch-lines td:nth-child(5),
  html[data-surface="admin"] .purchase-record .batch-lines td:nth-child(4){grid-area:qty;align-self:center;text-align:right!important;font-size:16px;font-weight:700;color:var(--a-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
  html[data-surface="admin"] :is(.purchase-supplier,.purchase-record) .batch-lines .unpaid-note{display:block;font-size:12px;font-weight:500;color:var(--a-muted);white-space:nowrap}
  html[data-surface="admin"] .purchase-supplier:not(.purchase-overview) .batch-lines td:nth-child(5),
  html[data-surface="admin"] .purchase-overview .batch-lines td:nth-child(6){grid-area:pack;justify-self:end;color:var(--a-muted)!important;font-size:13px;white-space:nowrap}
  /* 總表：廠商另起一行 */
  html[data-surface="admin"] .purchase-overview .batch-lines tbody tr{grid-template-areas:"sku qty" "name qty" "var pack" "sup sup"}
  html[data-surface="admin"] .purchase-overview .batch-lines td:nth-child(4){grid-area:sup;color:var(--a-muted);font-size:13px}
  html[data-surface="admin"] .purchase-overview .batch-lines td:nth-child(4)::before{content:"廠商 "}
  html[data-surface="admin"] .purchase-overview .batch-lines tfoot tr{display:flex;justify-content:space-between;padding:14px 16px;border-top:1px solid var(--a-line-strong);font-weight:700}
  html[data-surface="admin"] .purchase-overview .batch-lines tfoot td{padding:0!important;border:0!important}
  html[data-surface="admin"] .purchase-overview .batch-lines tfoot td:empty{display:none}
  /* 叫貨紀錄：摘要列與按鈕換行 */
  html[data-surface="admin"] .purchase-record summary{display:grid;gap:10px;padding:16px}
  html[data-surface="admin"] .purchase-record summary .small-btn{justify-self:start}
  /* 廠商標頭：名稱與統計在上、兩顆按鈕在下 */
  html[data-surface="admin"] .purchase-supplier>header{padding:16px}
  html[data-surface="admin"] .purchase-overview>header .small-btn{width:100%;justify-content:center}
}

/* 筆記內容欄上方的「從範本開始寫」 */
html[data-surface="admin"] .note-template-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:12px 14px;border:1px dashed var(--a-line-strong);border-radius:var(--a-radius-sm);background:var(--a-canvas)}
html[data-surface="admin"] .note-template-bar>span{flex:1 1 100%;font-size:13px;color:var(--a-muted)}
html[data-surface="admin"] .note-template-bar .small-btn{min-height:40px}
@media(min-width:701px){html[data-surface="admin"] .note-template-bar>span{flex:0 1 auto;margin-right:4px}}
/* 設定 → 商家類型與內容範本：範本卡片與面板內距對齊，標籤不換行 */
html[data-surface="admin"] [data-templatesection] [data-templatelist]{padding:0 var(--g-pad,24px) var(--g-pad,24px)}
html[data-surface="admin"] [data-templatesection] .note-template-list{display:grid;gap:12px;margin:0;padding:0}
html[data-surface="admin"] [data-templatesection] .settings-fields{padding-bottom:16px}
html[data-surface="admin"] [data-templatesection] .panel-head .badge{white-space:nowrap;flex:none}

/* 設定頁：區塊標題下方不加分隔線 */
html[data-surface="admin"] [data-settingsform] .settings-section>.panel-head{border-bottom:0;padding-bottom:4px}
/* 店家資料：上傳店家 LOGO */
html[data-surface="admin"] .store-logo-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
html[data-surface="admin"] .store-logo-upload{display:flex;align-items:center;gap:16px;min-width:0;cursor:pointer}
html[data-surface="admin"] .store-logo-preview{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--a-ink) center/cover no-repeat;color:#fff;font-size:28px;font-weight:600;transition:opacity .15s ease}
html[data-surface="admin"] .store-logo-preview.has-image{background-color:var(--a-canvas)}
html[data-surface="admin"] .store-logo-preview.loading{opacity:.5}
html[data-surface="admin"] .store-logo-text{display:grid;gap:4px;min-width:0}
html[data-surface="admin"] .store-logo-text b{font-size:18px;font-weight:600;color:var(--a-ink)}
html[data-surface="admin"] .store-logo-text small{color:var(--a-muted);font-size:13px}
html[data-surface="admin"] .store-logo-upload:focus-within .store-logo-preview{outline:2px solid var(--a-ink);outline-offset:2px}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .store-logo-upload:hover .store-logo-text b{text-decoration:underline;text-underline-offset:3px}}
html[data-surface="admin"] .store-logo.has-image{background:var(--a-canvas) center/cover no-repeat}
html[data-surface="admin"] .store-logo-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* 編輯筆記：分類選單下方的「新增分類」 */
html[data-surface="admin"] .quick-category{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
html[data-surface="admin"] .quick-category input{flex:1 1 160px;min-width:0;height:44px}
html[data-surface="admin"] .quick-category .small-btn{min-height:44px}
html[data-surface="admin"] .quick-category-error{flex:1 1 100%;color:var(--a-warn);font-size:13px}
html[data-surface="admin"] .quick-category-error:empty{display:none}

/* 「更多」頁的平台管理入口（只有平台管理者看得到） */
html[data-surface="admin"] .platform-entry{display:flex;align-items:center;gap:14px;margin-top:24px;padding:16px 20px;border:1px solid var(--a-line);border-radius:var(--a-radius);background:#fff;color:var(--a-ink);text-decoration:none}
html[data-surface="admin"] .platform-entry span{flex:1;display:grid;gap:2px}
html[data-surface="admin"] .platform-entry small{color:var(--a-muted);font-size:13px}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .platform-entry:hover{border-color:var(--a-ink)}}

/* 開關：打開是黑底（原本開、關都是灰色，看不出狀態）；鍵盤操作時顯示外框 */
html[data-surface="admin"] .switch input:checked+span{background:var(--a-ink)}
html[data-surface="admin"] .switch input:focus-visible+span{outline:2px solid var(--a-ink);outline-offset:2px}

/* 貼上商品網址建立筆記 */
html[data-surface="admin"] .url-import{display:grid;gap:10px;margin-bottom:24px;padding:16px;border:1px solid var(--a-line);border-radius:var(--a-radius-sm);background:var(--a-canvas)}
html[data-surface="admin"] .url-import label{display:grid;gap:2px}
html[data-surface="admin"] .url-import label b{font-size:15px;font-weight:600;color:var(--a-ink)}
html[data-surface="admin"] .url-import label small{font-size:13px;color:var(--a-muted)}
html[data-surface="admin"] .url-import-row{display:flex;gap:8px}
html[data-surface="admin"] .url-import-row input{flex:1;min-width:0;height:44px;padding:0 12px;background:#fff}
html[data-surface="admin"] .url-import .url-import-go{flex:none;min-height:44px;padding:0 18px;border:1px solid var(--a-ink);border-radius:var(--a-radius-sm);background:var(--a-ink);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
html[data-surface="admin"] .url-import .url-import-go:focus-visible{outline:2px solid var(--a-ink);outline-offset:2px}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .url-import .url-import-go:hover:not(:disabled){background:#000}}
html[data-surface="admin"] .url-import .url-import-go:disabled{opacity:.6;cursor:progress}
html[data-surface="admin"] .url-import-status{margin:0;font-size:14px;line-height:1.6;color:var(--a-muted)}
html[data-surface="admin"] .url-import-status.is-error{color:var(--a-warn)}

/* 筆記編輯：照片、影片上傳區塊與「貼上商品網址」統一成灰底卡片＋黑色按鈕 */
html[data-surface="admin"] .note-editor-single .url-import{margin-bottom:16px}
html[data-surface="admin"] .note-editor-single :is(.photo-section,.video-section){margin:0 0 16px;padding:16px;border:1px solid var(--a-line);border-radius:var(--a-radius-sm);background:var(--a-canvas)}
html[data-surface="admin"] .note-editor-single :is(.photo-section,.video-section) .photo-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
html[data-surface="admin"] .note-editor-single :is(.photo-section,.video-section) .photo-section-head>div{display:grid;gap:2px;min-width:0}
html[data-surface="admin"] .note-editor-single :is(.photo-section,.video-section) .photo-section-head b{font-size:15px;font-weight:600;color:var(--a-ink)}
html[data-surface="admin"] .note-editor-single :is(.photo-section,.video-section) .photo-section-head small{display:block;font-size:13px;color:var(--a-muted)}
html[data-surface="admin"] .note-editor-single :is(.photo-section,.video-section) label.photo-add{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--a-ink);border-radius:var(--a-radius-sm);background:var(--a-ink);color:#fff;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .note-editor-single :is(.photo-section,.video-section) label.photo-add:hover{background:#000}}
html[data-surface="admin"] .note-editor-single :is(.photo-section,.video-section) :is(.photo-grid,.note-video-grid):not(:empty){margin-top:16px}
html[data-surface="admin"] .note-editor-single .video-section>.field-help{display:block;margin-top:8px}

/* 清單挑選筆記：恢復預設篩選按鈕，大小與篩選下拉一致 */
html[data-surface="admin"] .list-picker-filters .pick-reset{flex:none;display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--a-line-strong);border-radius:12px;background:#fff;color:var(--a-ink);cursor:pointer}
html[data-surface="admin"] .list-picker-filters .pick-reset svg{width:20px;height:20px}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .list-picker-filters .pick-reset:hover{background:var(--a-canvas);border-color:var(--a-ink)}}
html[data-surface="admin"] .list-picker-filters .pick-reset:focus-visible{outline:2px solid var(--a-ink);outline-offset:2px}

/* 清單詳情「調整排序」：拖曳把手（樣式沿用管理分類的 .cat-drag） */
html[data-surface="admin"] .demand-row.list-product-row.list-row-draggable{grid-template-columns:44px 72px minmax(0,1fr) auto;align-items:center;background:#fff;transition:transform .15s ease,box-shadow .15s ease}
html[data-surface="admin"] .demand-row.list-product-row.list-row-draggable.dragging{position:relative;z-index:3;transition:none;box-shadow:var(--a-float);border-radius:var(--a-radius-sm)}
html[data-surface="admin"] .list-drag-hint{margin:0 0 4px}
@media(max-width:560px){html[data-surface="admin"] .demand-row.list-product-row.list-row-draggable{grid-template-columns:44px 60px minmax(0,1fr) auto}}
@media(prefers-reduced-motion:reduce){html[data-surface="admin"] .demand-row.list-product-row.list-row-draggable{transition:none}}

/* 載入示範商品／建立示範清單：與頁首其他次要按鈕同字級 */
html[data-surface="admin"] .page-head .ghost-btn.demo-import-btn{min-height:44px;font-size:15px;font-weight:500}

/* 清單詳情：關閉顧客下單的筆記標示「暫停下單」 */
html[data-surface="admin"] .offsale-tag{display:inline-flex;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--a-canvas);border:1px solid var(--a-line-strong);color:var(--a-muted);font-size:12px;font-weight:600;vertical-align:middle;white-space:nowrap}

/* 方案與用量：「更多」頁的方案卡與「我的方案」視窗 */
html[data-surface="admin"] .plan-card{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 24px;padding:16px 20px;border:1px solid var(--a-line);border-radius:var(--a-radius);background:#fff;color:var(--a-ink);font:inherit;text-align:left;cursor:pointer}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .plan-card:hover{border-color:var(--a-ink)}}
html[data-surface="admin"] .plan-card:focus-visible{outline:2px solid var(--a-ink);outline-offset:2px}
html[data-surface="admin"] .plan-card-main{flex:1;display:grid;gap:2px;min-width:0}
html[data-surface="admin"] .plan-card-main b{font-size:15px;font-weight:600}
html[data-surface="admin"] .plan-card-main small{color:var(--a-muted);font-size:13px}
html[data-surface="admin"] .plan-card .lucide{width:20px;height:20px;color:var(--a-muted)}
html[data-surface="admin"] .plan-card-badge{flex:none;padding:3px 10px;border-radius:999px;background:var(--a-canvas);border:1px solid var(--a-line-strong);color:var(--a-ink);font-size:12px;font-weight:600}
html[data-surface="admin"] .plan-card-badge.pro{background:var(--a-ink);border-color:var(--a-ink);color:#fff}
html[data-surface="admin"] .plan-modal{max-width:640px}
html[data-surface="admin"] .plan-usage{display:grid;gap:16px;margin-bottom:16px}
html[data-surface="admin"] .plan-usage-row{display:grid;gap:8px}
html[data-surface="admin"] .plan-usage-row>div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
html[data-surface="admin"] .plan-usage-row b{font-variant-numeric:tabular-nums}
html[data-surface="admin"] .plan-usage-row small{color:var(--a-muted);font-size:13px}
html[data-surface="admin"] .plan-bar{display:block;height:8px;border-radius:999px;background:var(--a-canvas);overflow:hidden}
html[data-surface="admin"] .plan-bar i{display:block;height:100%;border-radius:inherit;background:var(--a-ink)}
html[data-surface="admin"] .plan-bar.is-full i{background:var(--a-warn)}
html[data-surface="admin"] .plan-expiry{margin:0 0 16px;color:var(--a-muted);font-size:13px}
html[data-surface="admin"] .plan-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html[data-surface="admin"] .plan-tier{padding:16px;border:1px solid var(--a-line);border-radius:var(--a-radius-sm);background:#fff}
html[data-surface="admin"] .plan-tier.is-current{border-color:var(--a-ink);box-shadow:0 0 0 1px var(--a-ink)}
html[data-surface="admin"] .plan-tier h3{margin:0;font-size:15px;font-weight:600}
html[data-surface="admin"] .plan-modal .plan-tier .plan-price{margin:4px 0 12px;font-size:22px;font-weight:700;line-height:1.3;color:var(--a-ink)}
html[data-surface="admin"] .plan-modal .plan-tier .plan-price small{font-size:13px;font-weight:500;color:var(--a-muted)}
html[data-surface="admin"] .plan-tier ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;line-height:1.5}
html[data-surface="admin"] .plan-contact{margin:16px 0 0;color:var(--a-muted);font-size:14px}
@media(max-width:560px){html[data-surface="admin"] .plan-compare{grid-template-columns:1fr}}
/* 店家首頁編輯：首頁清單、精選筆記改用拖曳把手（樣式沿用 .cat-drag） */
html[data-surface="admin"] .sf-row.sf-row-draggable{background:#fff;transition:transform .15s ease,box-shadow .15s ease;padding-left:calc(var(--g-pad,24px) - 12px)}
html[data-surface="admin"] .sf-row.sf-row-draggable .cat-drag{flex:none}
html[data-surface="admin"] .sf-row.sf-row-draggable.dragging{position:relative;z-index:3;transition:none;box-shadow:var(--a-float);border-radius:var(--a-radius-sm)}
@media(prefers-reduced-motion:reduce){html[data-surface="admin"] .sf-row.sf-row-draggable{transition:none}}

/* 後台首頁（Figma Dashboard Desktop）：頁首動作純文字 132×48、需求排名附 48px 縮圖方塊、下方兩個面板 6／6 */
html[data-surface="admin"] .rank.rank-figma{display:flex;align-items:center;gap:10px;min-height:64px;padding:14px var(--g-pad,24px)}
html[data-surface="admin"] .rank-thumb{flex:none;width:48px;height:48px;border-radius:var(--a-radius-sm);background:var(--a-canvas) center/cover no-repeat}
html[data-surface="admin"] .rank-body{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
html[data-surface="admin"] .rank-line{display:flex;justify-content:space-between;gap:12px;font-size:16px;line-height:24px}
html[data-surface="admin"] .rank-line span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-surface="admin"] .rank-line b{flex:none;font-weight:500}
html[data-surface="admin"] .rank-figma .bar{margin-top:0}
@media(min-width:901px){
  html[data-surface="admin"] .grid-2:has(.rank-figma){grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-surface="admin"] .page-head .head-actions .primary.quick-action{justify-content:center;min-width:132px;height:48px;padding:0 20px;font-size:15px}
}

/* 訂單列右側兩顆按鈕（例如「確認收款」＋「查看明細」）固定間距 16px：最後一欄改成內容寬度，用負邊距把欄距扣成 16px */
@media(min-width:901px){
  html[data-surface="admin"] .order-card.order-row-card{grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto}
  html[data-surface="admin"] .order-card.order-row-card .order-actions{margin-left:calc(16px - var(--g-gutter));justify-self:end}
}

/* 商品照片／影片區塊：沒有檔案時，空的縮圖格不再多留 12px 上邊距，上下內距才會一致（16px） */
html[data-surface="admin"] .note-editor-single :is(.photo-section,.video-section) :is(.photo-grid,.note-video-grid):empty{margin:0}

/* 新增筆記：供應商與標籤同一排，標籤下方有說明字，欄位改為頂端對齊 */
html[data-surface="admin"] .spec-fields:has(.note-tags-field){align-items:start}
html[data-surface="admin"] .spec-fields .note-tags-field{margin-top:0}

/* 新增筆記：附加選項（開放顧客直接下單／附加店家預設注意事項）同一行，放在表單最後 */
html[data-surface="admin"] .check-row-group{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:8px}
html[data-surface="admin"] .check-row-group .check-row{margin:0}

/* 叫貨／出貨／明細表格：滑鼠移到資料列時顯示淺灰底（與列表 hover 一致） */
@media(hover:hover) and (pointer:fine){
  html[data-surface="admin"] .batch-lines tr:has(td):hover td{background:var(--a-canvas)}
}

/* 後台筆記詳情的縮圖列：qa-fixes 的 button{flex:none} 會蓋掉 65px 寬度，按鈕寬度變成「依圖片」。
   Safari 會拿圖片原始寬度撐成一整條，所以明確指定寬度 */
html[data-surface="admin"] .admin-note-thumbs>button{flex:0 0 65px;width:65px;min-width:65px}

/* iOS Safari 的 button 預設文字色是藍色：彈窗關閉鈕的 × 明確指定墨色 */
html[data-surface="admin"] .modal-head>button.close{color:var(--a-ink)}

/* 手機後台修正 */
/* 1. iOS Safari 的 button 預設文字色是藍色（Chrome 是黑色）：沒指定顏色的按鈕改成繼承；用 :where 讓優先權為 0，不會蓋掉任何既有顏色規則 */
:where(html[data-surface="admin"]) :where(button){color:inherit}
/* 2. 網址帶入：grid 子項預設 min-width:auto，輸入框的固有寬度會把整列撐出卡片 */
html[data-surface="admin"] .url-import{grid-template-columns:minmax(0,1fr)}
/* 3. 編輯流程底部固定按鈕列要停在分頁列上方（分頁列約 75px 高＋安全區） */
@media(max-width:560px){html[data-surface="admin"] .flow-actions{bottom:var(--mobile-nav-h,76px)}}

/* 手機後台修正（第二批） */
/* 6. 照片／影片區塊：手機上標題區變直排並置中，影片說明比較短就「縮在中間」；讓文字區塊撐滿、靠左對齊 */
@media(max-width:560px){
  /* 商品圖片／商品影片：手機上也維持「說明在左、上傳按鈕在右」同一排（reservation.css 的手機規則會把它改成直排） */
  html[data-surface="admin"] .note-editor-single :is(.photo-section,.video-section) .photo-section-head{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  html[data-surface="admin"] .note-editor-single :is(.photo-section,.video-section) .photo-section-head>div{flex:1;min-width:0;align-self:center}
  html[data-surface="admin"] .note-editor-single :is(.photo-section,.video-section) label.photo-add{padding:0 14px;white-space:nowrap}
}
/* 7. 篩選下拉：文字太長時用省略號；窄螢幕改成上下兩列，各自撐滿 */
html[data-surface="admin"] .month-filter select{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
@media(max-width:480px){html[data-surface="admin"] .note-head-actions{grid-template-columns:minmax(0,1fr)}}
/* 8. 橫向捲動的膠囊列：延伸到螢幕／面板邊緣，捲動時不會在內距線被硬切（叫貨的底線式分頁不動） */
@media(max-width:900px){
  html[data-surface="admin"] .main>.tabs:not(.purchase-tabs),html[data-surface="admin"] .panel-head .tabs{width:auto;max-width:none;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;scroll-padding-inline:16px}
  /* 清單頁的膠囊列帶有行內 style="margin:0"，需要 !important */
  html[data-surface="admin"] .panel-head .tabs{margin-left:-16px!important;margin-right:-16px!important}
}
/* 9. 清單縮圖的「疊卡」：改成清楚的第二張卡片（白底細框），不再像灰色殘影 */
html[data-surface="admin"] .list-cover::before{left:7px;right:7px;height:14px;border:1px solid var(--a-line-strong);border-bottom:0;border-radius:var(--a-radius-sm) var(--a-radius-sm) 0 0;background:#fff}

/* 手機後台修正（第三批） */
/* 11. 筆記詳情／清單預覽彈窗：標題列內容垂直置中（全站彈窗預設是靠上對齊，會讓標題比關閉鈕高） */
html[data-surface="admin"] .admin-note-modal>.modal-head,html[data-surface="admin"] .admin-list-preview>.modal-head{align-items:center}
/* 13. 右下角浮動「＋」：往下捲動閱讀時收起，往上捲或回到頂端再出現，避免蓋住資料 */
html[data-surface="admin"] .quick-fab{transition:transform .2s ease,opacity .2s ease}
html[data-surface="admin"] .quick-fab.is-hidden{transform:translateY(24px);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){html[data-surface="admin"] .quick-fab{transition:none}}

/* 手機後台修正（第四批） */
/* 16. 頁首說明文字：兩行以上時平均分配，避免最後一行只剩一兩個字（孤字） */
html[data-surface="admin"] .page-head p{text-wrap:balance}

/* 清單詳情「商品與需求」等區塊標題：手機上標題區是直排，桌面版的 align-items:center 會變成水平置中，改回靠左撐滿 */
@media(max-width:900px){html[data-surface="admin"] .detail-modal:has(.battle-hero) .detail-title{align-items:stretch}}

/* 清單詳情（手機）：「展示方式」與「添加商品筆記」同一列、等寬；「調整排序／移出清單」在下一列 */
@media(max-width:900px){
  html[data-surface="admin"] .detail-title-actions:has([data-addlistnote])>.list-display-select{grid-column:auto;order:1}
  html[data-surface="admin"] .detail-title-actions:has([data-addlistnote])>[data-addlistnote]{order:2}
  html[data-surface="admin"] .detail-title-actions:has([data-addlistnote])>[data-listeditmode]{order:3}
  /* 半寬放得下「展示方式：雙欄卡片」：縮小左右內距 */
  html[data-surface="admin"] .detail-title-actions .list-display-select select{padding-left:12px;padding-right:26px;background-position:right 8px center}
}

/* 清單詳情「移出清單／調整排序」編輯模式（手機）：提示文字獨佔一列；取消｜移除清單同一列等寬；只有「完成排序」時撐滿整列 */
@media(max-width:900px){
  html[data-surface="admin"] .detail-title-actions.editing>.list-edit-hint{grid-column:1/-1;order:0}
  html[data-surface="admin"] .detail-title-actions.editing>[data-listeditdone]{order:1}
  html[data-surface="admin"] .detail-title-actions.editing>[data-listremoveconfirm]{order:2}
  html[data-surface="admin"] .detail-title-actions.editing>[data-listeditdone]:only-child{grid-column:1/-1}
}

/* 清單詳情最上方三格統計（手機 ≤560px）：不再直排成三大列，改成同一列三欄並排，騰出空間給下方的商品列表。
   金額欄給較寬的比例；欄與欄之間用細直線（第 1 欄不加） */
@media(max-width:560px){
  html[data-surface="admin"] .battle-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr)}
  html[data-surface="admin"] .battle-hero>div{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:2px;padding:10px 12px;border-left:1px solid var(--a-line);border-bottom:0}
  html[data-surface="admin"] .battle-hero>div:first-child{border-left:0}
  html[data-surface="admin"] .battle-hero span{font-size:12px}
  html[data-surface="admin"] .battle-hero b{font-size:17px;margin-top:0;white-space:nowrap}
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .detail-title{margin-top:16px}
}

/* 清單詳情操作列（手機）：下拉選單必須 ≥16px（iOS 聚焦時才不會自動放大頁面），同一組的按鈕也用 16px，字級才一致 */
@media(max-width:900px){
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .modal-body .detail-title-actions>:is(button,.small-btn){font-size:16px}
}

/* 清單詳情底部的「提前結束收單／刪除清單」是不建議操作的次級功能：手機上不要做成整列大按鈕。
   改成各一列：左邊說明文字，右邊小型操作（立即截止＝細紅框按鈕；刪除清單＝純文字），觸控高度仍保留 44px */
@media(max-width:560px){
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .danger-zone{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px}
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .danger-zone>div{min-width:0;flex:1}
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .danger-zone b{font-size:14px}
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .danger-zone small{display:block;font-size:12px;line-height:1.5}
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .modal-body .danger-zone button{flex:none;width:auto;height:44px;min-height:44px;padding:0 14px;font-size:14px;white-space:nowrap}
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .list-delete-zone{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .list-delete-zone small{flex:1;min-width:0;font-size:12px;line-height:1.5}
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .modal-body .list-delete-zone .list-delete-btn{flex:none;width:auto;height:44px;min-height:44px;padding:0 14px;border:0;background:none;font-size:14px;white-space:nowrap}
}

/* 清單詳情操作列的圖示版：預設（桌面／平板）隱藏圖示、顯示文字；手機（≤560px）改成圓形圖示按鈕排成一排，與標題同一列 */
html[data-surface="admin"] .detail-title-actions :is(.btn-ic,.ic-feed,.ic-grid){display:none}
@media(max-width:560px){
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .detail-title:has(>.detail-title-actions:not(.editing)){flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .detail-title>.detail-title-actions:not(.editing){display:flex;flex-wrap:nowrap;gap:8px;width:auto;flex:none}
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .detail-title-actions:not(.editing)>:is(button,.list-display-select){position:relative;order:3;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:var(--a-canvas);display:grid;place-items:center;flex:none;font-size:0;color:var(--a-ink)}
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .detail-title-actions:not(.editing)>.list-display-select{order:1}
  html[data-surface="admin"] .detail-modal:has(.battle-hero) .detail-title-actions:not(.editing)>[data-addlistnote]{order:2}
  html[data-surface="admin"] .detail-title-actions:not(.editing) .btn-ic{display:block;width:20px;height:20px}
  html[data-surface="admin"] .detail-title-actions:not(.editing) .btn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* 展示方式：原生選單透明蓋在圖示上，點圖示就開選單；圖示依目前模式切換 */
  html[data-surface="admin"] .detail-title-actions:not(.editing) .list-display-select select{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;font-size:16px;background:none}
  html[data-surface="admin"] .detail-title-actions:not(.editing) .list-display-select .ic-feed{display:block;width:20px;height:20px;pointer-events:none}
  html[data-surface="admin"] .detail-title-actions:not(.editing) .list-display-select:has(option[value="grid"]:checked) .ic-feed{display:none}
  html[data-surface="admin"] .detail-title-actions:not(.editing) .list-display-select:has(option[value="grid"]:checked) .ic-grid{display:block;width:20px;height:20px;pointer-events:none}
  html[data-surface="admin"] .detail-title-actions:not(.editing)>:is(button,.list-display-select):active{background:var(--a-line)}
}

/* 清單詳情：標題區下方的分隔線要貼著第一列商品（列與列之間的線本來就貼著列），不要隔著 12px 空白懸在上面 */
html[data-surface="admin"] .detail-modal:has(.battle-hero) .detail-title{margin-bottom:0}

/* 彈窗／表單內的下拉（分類、單位、物流…）箭頭被 `.modal-body .form-field :is(input,select,textarea){background:#fff;padding:0 12px}` 蓋掉，補回箭頭與右內距。
   用三個無害的 :not() 把優先權提高到高於那條規則（不使用 !important） */
html[data-surface="admin"] .modal-body .form-field select:not([multiple]):not([size]):not([hidden]){
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:16px 16px;background-position:calc(100% - 14px) 50%}

/* 手機後台：鎖住橫向拖動（整個畫面不能左右滑出去）。
   - overflow-x:clip：頁面內容超出寬度時直接裁切，且不會變成捲動容器（固定／吸附定位不受影響）
   - overscroll-behavior-x:none：不出現橫向橡皮筋與滑動返回
   - touch-action:pan-y pinch-zoom：手指橫向拖動不再平移頁面，直向捲動與雙指縮放（無障礙）保留
   本來就要橫向滑的區塊（膠囊列、縮圖列）明確放行 pan-x */
@media(max-width:900px) and (pointer:coarse){
  html[data-surface="admin"],html[data-surface="admin"] body{overflow-x:clip;overscroll-behavior-x:none;touch-action:pan-y pinch-zoom}
  html[data-surface="admin"] :is(.tabs,.admin-note-thumbs,.preview-thumbs,.order-flow ol){touch-action:pan-x pan-y pinch-zoom}
}

/* 訂單處理流程：箭頭改用圖示；平板直向（≤1100px）說明小字隱藏、四步維持單列，不再折成兩列留下行尾孤立的箭頭 */
html[data-surface="admin"] .order-flow li.order-flow-arrow .lucide{display:block;width:16px;height:16px}
@media(min-width:901px) and (max-width:1100px){
  html[data-surface="admin"] .order-flow ol{flex-wrap:nowrap}
  html[data-surface="admin"] .order-flow li{flex:none}
  html[data-surface="admin"] .order-flow li small{display:none}
}

/* 筆記詳情彈窗：電腦與平板加寬到 880px（手機維持滿版）。原本被 .modal 的 480px 預設寬度蓋住 */
@media(min-width:901px){
  html[data-surface="admin"] .modal.admin-note-modal{width:min(880px,calc(100vw - 48px))}
  html[data-surface="admin"] .admin-note-gallery img{max-height:480px}
}

/* 平板／小桌面（901–1100px）三個小調整 */
@media(min-width:901px){
  /* 頂列右側內距與內容區邊距（--g-margin）一致，「登出」右緣才會和下面的內容對齊 */
  html[data-surface="admin"] .topbar{padding-right:var(--g-margin,40px)}
}
@media(min-width:901px) and (max-width:1100px){
  /* 筆記頁：標題區放不下時，控件換到說明文字下面，不要把副標題擠成兩行窄欄 */
  html[data-surface="admin"] .page-head:has(.note-head-actions){flex-wrap:wrap;align-items:flex-start}
  html[data-surface="admin"] .page-head:has(.note-head-actions)>div:first-child{flex:1 1 100%}
  html[data-surface="admin"] .page-head:has(.note-head-actions) .note-head-actions{flex:1 1 100%;justify-content:flex-start}
}

/* 叫貨頁「未完成匯款」每家店的操作（平板／桌面）：次要的「複製提醒訊息／LINE 提醒匯款」靠在一起，與「保留｜排除」切換開關之間拉開 20px，分成兩組 */
@media(min-width:901px){
  html[data-surface="admin"] .purchase-unpaid-actions{gap:8px}
  html[data-surface="admin"] .purchase-unpaid-actions .purchase-decision{margin-left:12px}
}

/* 筆記詳情彈窗（電腦／平板）：左右兩欄，左邊圖片＋縮圖，右邊文字，直式照片兩側不再留大片灰底 */
@media(min-width:901px){
  html[data-surface="admin"] .admin-note-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:28px;align-items:start}
  html[data-surface="admin"] .admin-note-body>.admin-note-gallery,html[data-surface="admin"] .admin-note-body>.admin-note-thumbs{grid-column:1}
  html[data-surface="admin"] .admin-note-body>.admin-note-copy{grid-column:2;grid-row:1/span 2;padding-top:0;min-width:0}
  html[data-surface="admin"] .admin-note-gallery img{max-height:560px}
}

/* 自動帶入商品資料：截圖上傳列 */
html[data-surface="admin"] .shot-import-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
html[data-surface="admin"] .shot-import-or{color:var(--a-muted);font-size:13px}
html[data-surface="admin"] .shot-import-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);background:#fff;color:var(--a-ink);font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
@media(hover:hover) and (pointer:fine){html[data-surface="admin"] .shot-import-btn:hover{border-color:var(--a-ink)}}
html[data-surface="admin"] .shot-import-btn.is-disabled{opacity:.5;pointer-events:none}
html[data-surface="admin"] .shot-import-row:focus-within .shot-import-btn{outline:2px solid var(--a-ink);outline-offset:2px}
html[data-surface="admin"] .shot-import-row small{color:var(--a-muted);font-size:13px}

/* 自動帶入商品資料：網址與截圖左右並排 */
html[data-surface="admin"] .auto-fill-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:12px}
html[data-surface="admin"] .auto-fill-option{display:grid;align-content:start;gap:8px;min-width:0;padding:14px;border:1px solid var(--a-line);border-radius:var(--a-radius-sm);background:#fff}
html[data-surface="admin"] .auto-fill-label{font-size:13px;font-weight:600;color:var(--a-ink)}
html[data-surface="admin"] .auto-fill-option>small{color:var(--a-muted);font-size:13px;line-height:1.5}
html[data-surface="admin"] .auto-fill-option .shot-import-btn{justify-content:center;width:100%;box-sizing:border-box}
html[data-surface="admin"] .auto-fill-option:focus-within:has(.shot-import-btn) .shot-import-btn{outline:2px solid var(--a-ink);outline-offset:2px}
@media(max-width:720px){html[data-surface="admin"] .auto-fill-grid{grid-template-columns:1fr}}
html[data-surface="admin"] .auto-fill-option>*{min-width:0}
html[data-surface="admin"] .auto-fill-option .url-import-row input{width:100%}

/* 自動帶入商品內容（Figma 200:20）：精簡版，左右各半 */
html[data-surface="admin"] .auto-fill-compact .auto-fill-title{margin:0;font-size:15px;font-weight:700;line-height:1.5;color:var(--a-ink)}
html[data-surface="admin"] .auto-fill-compact .auto-fill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-surface="admin"] .auto-fill-compact .auto-fill-option{align-content:center;padding:0;border:0;border-radius:0;background:none}
@media(max-width:720px){html[data-surface="admin"] .auto-fill-compact .auto-fill-grid{grid-template-columns:1fr}}

/* 店家首頁：有未套用的修改時，副標題改成提示文字（前面一個珊瑚紅小點）；原本右上角的「有尚未儲存的修改」移除 */
html[data-surface="admin"] .sf-head p.sf-sub-dirty{display:flex;align-items:center;gap:6px;color:var(--a-ink)}
html[data-surface="admin"] .sf-head p.sf-sub-dirty::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--a-accent)}

/* ---------- 分享清單：預覽卡、清單連結、分享到 LINE 群／Threads／IG 限動／FB 社團 ---------- */
html[data-surface="admin"] .modal.list-share-modal{width:min(440px,calc(100vw - 32px));padding:0;overflow:auto}
html[data-surface="admin"] .list-share-head{display:flex;align-items:center;padding:18px 20px 4px}
html[data-surface="admin"] .list-share-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-left:-8px;padding:0 8px;border:0;background:transparent;color:var(--a-ink);font:inherit;font-size:20px;font-weight:700;border-radius:var(--a-radius-sm);cursor:pointer}
html[data-surface="admin"] .list-share-back svg{width:22px;height:22px;stroke-width:2.4}
html[data-surface="admin"] .list-share-body{padding:8px 20px 24px}
html[data-surface="admin"] .list-share-card{border:1px solid var(--a-line);border-radius:16px;overflow:hidden;background:var(--a-card)}
html[data-surface="admin"] .list-share-cover{aspect-ratio:2/1;background:var(--a-canvas) center 25%/cover no-repeat}
html[data-surface="admin"] .list-share-card>div:last-child{padding:16px 20px 18px}
html[data-surface="admin"] .list-share-card h3{margin:0;font-size:18px;font-weight:700;line-height:1.4}
html[data-surface="admin"] .list-share-card p{margin:6px 0 0;color:var(--a-muted);font-size:15px;font-variant-numeric:tabular-nums}
html[data-surface="admin"] .list-share-body h4{margin:22px 0 10px;font-size:15px;font-weight:700;color:var(--a-ink)}
html[data-surface="admin"] .list-share-link{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 8px 8px 18px;border:1px solid var(--a-line-strong);border-radius:var(--a-radius)}
html[data-surface="admin"] .list-share-link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;-webkit-user-select:all;user-select:all}
html[data-surface="admin"] .list-share-link button{flex:none;min-height:40px;padding:0 16px;border:1px solid var(--a-line-strong);border-radius:var(--a-radius-sm);background:#fff;color:var(--a-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
html[data-surface="admin"] .list-share-targets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
html[data-surface="admin"] .list-share-target{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0;border:0;background:transparent;color:var(--a-ink);font:inherit;font-size:13px;font-weight:600;line-height:1.3;text-decoration:none;cursor:pointer;border-radius:var(--a-radius)}
html[data-surface="admin"] .list-share-target>span:last-child{line-height:1.3}
html[data-surface="admin"] .list-share-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:16px;color:#fff}
html[data-surface="admin"] .list-share-icon img{display:block;width:40px;height:40px}
html[data-surface="admin"] .list-share-target.is-line .list-share-icon{background:#06c755}
html[data-surface="admin"] .list-share-target.is-threads .list-share-icon{background:#000}
html[data-surface="admin"] .list-share-target.is-ig .list-share-icon{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
html[data-surface="admin"] .list-share-target.is-fb .list-share-icon{background:#1877f2}
html[data-surface="admin"] .list-share-hint{margin:16px 0 0;padding:12px 14px;border-radius:var(--a-radius-sm);background:var(--a-canvas);color:var(--a-ink);font-size:14px;line-height:1.6}
@media(hover:hover) and (pointer:fine){
  html[data-surface="admin"] .list-share-link button:hover{background:var(--a-canvas)}
  html[data-surface="admin"] .list-share-target:hover .list-share-icon{filter:brightness(.94)}
}

/* 我的方案：Pro 早鳥價（原價刪除線）、徽章、小字，以及指向官網方案頁的連結（官網為方案內容的唯一詳細來源） */
html[data-surface="admin"] .plan-modal .plan-tier .plan-price s{font-size:14px;font-weight:500;color:var(--a-muted);margin-left:4px}
html[data-surface="admin"] .plan-badge{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--a-accent-soft);color:var(--a-accent-text,#d10a3c);font-size:12px;font-weight:600;vertical-align:1px}
html[data-surface="admin"] .plan-tier .plan-fine{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--a-muted)}
html[data-surface="admin"] .plan-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;color:var(--a-ink);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
html[data-surface="admin"] .plan-link .lucide{width:16px;height:16px}

/* 免費版看到的 Pro 專屬標記：貼網址的「解析」與「上傳截圖」前面加小「Pro」標籤，仍可點擊（點了會說明並導到方案） */
html[data-surface="admin"] .pro-chip{display:inline-flex;align-items:center;margin-right:6px;padding:0 6px;border-radius:999px;background:var(--a-accent-soft);color:var(--a-accent-text,#d10a3c);font-size:11px;font-weight:700;line-height:18px;vertical-align:1px}
html[data-surface="admin"] .url-import-go .pro-chip{background:#fff}