/* 新版介面（0.4.33 卡 F 第一階段：設計系統與外框）。
   這個檔的每一條規則都以 html[data-ui=v2] 開頭：帳號沒有開「新版介面」（data-ui=classic，預設）時一條都不套用，原來的畫面一模一樣。
   顏色、字級、間距、圓角照 docs/design/0.4.33_UI提案（方向 A「墨與瓷」：瓷白底、墨黑字與主按鈕、深青只做選取；本人 2026-10-19 確認）。
   原來各頁的樣式都用 app.css 的變數（--jade、--ink…）：這裡換掉變數的值，各頁跟著換；外框（頂列、選單、手機頁籤）是新的。
   品牌標誌一律正黑（brand/logo_mark.png，本人原圖的衍生檔），不反白、不改灰；狀態色和店家的重點色分開。 */
html[data-ui=v2]{
  --paper:#F6F4F0;--sunken:#EEEBE6;--ink-2:#45413C;--ink-3:#655F58;--line-strong:#8A847C;
  --accent:#0E6B66;--accent-soft:#E1EFED;--focus:#0E6B66;--overlay:rgba(21,20,19,.42);
  --jade:#0E6B66;--jade-2:#0A524E;--jade-tint:#E1EFED;--ink:#151413;--muted:#5C564F;--line:#E3DFD9;--line-2:#EEEBE6;
  --surface:#F6F4F0;--panel:#FFFFFF;--amber:#874600;--amber-tint:#FBEEDA;--red:#AE2419;--red-tint:#FBE8E5;--green:#145C36;--green-tint:#E5F2EA;
  --blue:#34458A;--blue-tint:#E8EBF6;--radius:10px;--appbar:3.5rem;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
}
html[data-ui=v2][lang=ja]{--font:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic UI",Meiryo,"Noto Sans JP",sans-serif}
html[data-ui=v2] body{background:var(--paper);color:var(--ink)}
html[data-ui=v2] a{color:var(--accent)}
html[data-ui=v2] :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* 輸入框實際的字級不小於 16px（iPhone 點進去不會自動放大；不用 transform 假縮小，也不限制使用者放大） */
html[data-ui=v2] input,html[data-ui=v2] select,html[data-ui=v2] textarea{font-size:max(1rem,16px)}
html[data-ui=v2] .input{min-height:2.75rem;border:1.5px solid var(--line-strong);border-radius:var(--radius);background:#fff}
html[data-ui=v2] .input:disabled{background:var(--sunken);color:var(--ink-3)}

/* ---- 按鈕：照用途（主要＝墨色填滿、次要＝白底墨框、第三＝只有字、危險＝紅框紅字）；可點的高度至少 44px ---- */
html[data-ui=v2] .btn{min-height:2.75rem;border-radius:var(--radius);border:1.5px solid var(--line-strong);background:var(--panel);color:var(--ink);font-weight:600;
  transition:background-color .16s cubic-bezier(.2,.8,.2,1),border-color .16s,transform .09s}
html[data-ui=v2] .btn:hover{border-color:var(--ink)}
html[data-ui=v2] .btn:active:not(:disabled){transform:scale(.97)}
html[data-ui=v2] .btn.primary{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
html[data-ui=v2] .btn.primary:hover{background:#2E2B28;border-color:#2E2B28}
html[data-ui=v2] .btn.danger{background:var(--panel);border-color:var(--red);color:var(--red)}
html[data-ui=v2] .btn.danger:hover{background:var(--red-tint)}
html[data-ui=v2] .btn.plain{background:none;border-color:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
html[data-ui=v2] .btn.small{min-height:2.5rem;padding:6px 12px}
html[data-ui=v2] .btn:disabled{opacity:1;background:var(--sunken);border-color:transparent;color:var(--ink-3);cursor:not-allowed}
html[data-ui=v2] .btn.primary[aria-busy=true]::after{border-color:#fff transparent #fff transparent}
html[data-ui=v2] .icon-btn{width:2.75rem;height:2.75rem;border-radius:var(--radius);border-color:var(--line)}
@media (pointer:coarse){html[data-ui=v2] .btn.small{min-height:2.75rem}}

/* ---- 選取與篩選：選中＝墨色填滿（形狀＋顏色兩種提示）；分頁的選中線用墨色 ---- */
html[data-ui=v2] .tab.on{border-bottom-color:var(--ink)}
html[data-ui=v2] .subtabs a{min-height:2.75rem;border:1.5px solid var(--line-strong);background:var(--panel)}
html[data-ui=v2] .subtabs a.on,html[data-ui=v2] .form-choice.on{background:var(--ink);border-color:var(--ink);color:#fff}
html[data-ui=v2] .size-pick button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
html[data-ui=v2] .check input{accent-color:var(--ink)}

/* ---- 面板、表格、提示：安靜的瓷白與細邊 ---- */
html[data-ui=v2] .panel{border-color:var(--line);border-radius:14px}
html[data-ui=v2] .table-wrap{border-color:var(--line);border-radius:14px}
html[data-ui=v2] .table th{background:#FBFAF8}
html[data-ui=v2] .board{border-color:var(--line);border-radius:14px}
html[data-ui=v2] .board-head,html[data-ui=v2] .board-corner{background:#FBFAF8}
html[data-ui=v2] .modal-box{border-radius:14px}
html[data-ui=v2] dialog.modal::backdrop{background:var(--overlay)}
html[data-ui=v2] .toast{background:var(--ink)}
html[data-ui=v2] .now-line{border-top-color:var(--accent)}

/* ---- 外框：頂列（每一種寬度都有）＋選單（蓋在畫面上，不擠壓預約表）＋手機的四格頁籤 ---- */
html[data-ui=v2] .shell{display:block;min-height:100vh;min-height:100dvh}
html[data-ui=v2] .rail,html[data-ui=v2] .topbar,html[data-ui=v2] .tabbar,html[data-ui=v2] .more-sheet{display:none}
html[data-ui=v2] .main{min-width:0;padding:0 0 40px}
html[data-ui=v2] .tabbar4{display:none}
html[data-ui=v2] .appbar{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:10px;min-height:var(--appbar);
  padding:max(6px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));background:var(--paper);border-bottom:1px solid var(--line)}
html[data-ui=v2] .appbar-menu{display:inline-flex;align-items:center;gap:8px;min-height:2.75rem;min-width:2.75rem;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:var(--radius);
  background:var(--panel);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
/* 標誌與店名（本人 10/20：原來的標誌太大、沒有精品感）：標誌縮小（電腦 20px、手機 17px、選單 18px）、四周多留白；店名用細一點、字距寬一點的小字，前面一條細線隔開。
   標誌照舊是本人原圖的正黑衍生檔，不改顏色；可以點的範圍照舊至少 44×44（連結的高度不變，只有圖變小） */
html[data-ui=v2] .appbar-brand{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 12px 0 6px;flex:none}
html[data-ui=v2] .brand-mark{display:block;height:20px;width:auto}
html[data-ui=v2] .appbar-store{font-weight:500;font-size:.875rem;letter-spacing:.12em;color:var(--ink-2);padding-left:12px;border-left:1px solid var(--line-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html[data-ui=v2] .appbar .store-chip{min-height:2.75rem;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--ink-2);font:inherit;font-size:.875rem;font-weight:500;letter-spacing:.08em;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16rem}
html[data-ui=v2] .appbar-grow{flex:1;min-width:0}
html[data-ui=v2] .appbar-quick{display:inline-flex;align-items:center;gap:8px;min-height:2.75rem;padding:0 12px;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--panel);
  color:var(--ink-2);font:inherit;cursor:pointer;white-space:nowrap}
html[data-ui=v2] .appbar-quick kbd{font:600 .8125rem/1 ui-monospace,Menlo,Consolas,monospace;padding:3px 6px;border:1px solid var(--line-strong);border-radius:6px;color:var(--ink-2)}
html[data-ui=v2] .appbar-mio{display:inline-flex;align-items:center;gap:6px;min-height:2.75rem;padding:0 16px 0 12px;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--panel);
  color:var(--ink);text-decoration:none;font-weight:700;white-space:nowrap}
html[data-ui=v2] .appbar-mio.on{background:var(--ink);border-color:var(--ink);color:#fff}
html[data-ui=v2] .appbar-who{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-width:0;max-width:12rem;overflow:hidden;text-overflow:ellipsis}
html[data-ui=v2] .appbar-switch{min-height:2.75rem;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
/* Mio 的標記：一條像髮絲也像水流的弧線，尾端一個點（不是機器人、不是對話泡泡）。只是入口：不開麥克風、不常駐聆聽 */
html[data-ui=v2] .mio-mark{width:1.375rem;height:1.375rem;flex:none}
html[data-ui=v2] .mio-mark path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
html[data-ui=v2] .mio-mark circle{fill:var(--accent);stroke:none}
html[data-ui=v2] .appbar-mio.on .mio-mark circle{fill:#fff}
/* 選單：從左邊蓋上來（不推擠內容，預約表的寬度不變）；Esc、點旁邊、按關閉都會收起來，焦點回到打開它的那一顆 */
html[data-ui=v2] .menu-scrim{display:block;position:fixed;inset:0;z-index:27;background:var(--overlay)}
html[data-ui=v2] .menu-panel{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:29;width:min(20rem,86vw);overflow-y:auto;background:var(--panel);
  box-shadow:0 8px 24px rgba(21,20,19,.18);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);overscroll-behavior:contain}
html[data-ui=v2] .menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 20px;border-bottom:1px solid var(--line)}
html[data-ui=v2] .menu-head .brand-mark{height:18px}
html[data-ui=v2] .menu-close{width:2.75rem;height:2.75rem;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);font:inherit;font-size:1.1rem;cursor:pointer}
html[data-ui=v2] .menu-who{padding:12px 20px 4px;color:var(--ink-2)}
html[data-ui=v2] .menu-who b{color:var(--ink);font-size:1.0625rem}
html[data-ui=v2] .menu-group{padding:6px 0;border-bottom:1px solid var(--line)}
html[data-ui=v2] .menu-panel a{display:flex;align-items:center;min-height:3rem;padding:0 20px;border-left:4px solid transparent;color:var(--ink);text-decoration:none;font-weight:600}
html[data-ui=v2] .menu-panel a:hover{background:var(--sunken)}
html[data-ui=v2] .menu-panel a.on{border-left-color:var(--accent);background:var(--accent-soft)}
html[data-ui=v2] .menu-foot{display:grid;gap:8px;padding:12px 20px 16px;margin-top:auto}
html[data-ui=v2] .menu-foot .lang-switch{border-color:var(--line-strong);color:var(--ink);background:var(--panel);min-height:2.75rem}
html[data-ui=v2] .menu-foot .ver{color:var(--ink-3);font-size:.8125rem}
/* Ctrl K：快速前往 */
html[data-ui=v2] .quick-list{display:grid;gap:4px;margin-top:10px;max-height:min(60vh,26rem);overflow-y:auto}
html[data-ui=v2] .quick-item{display:flex;align-items:center;min-height:2.75rem;padding:0 12px;border:0;border-radius:var(--radius);background:none;color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer}
html[data-ui=v2] .quick-item:hover,html[data-ui=v2] .quick-item.on{background:var(--accent-soft)}
html[data-ui=v2] .frozenbar,html[data-ui=v2] .authbar{top:var(--appbar)}
html[data-ui=v2] .roundbar{top:var(--appbar)}          /* 0.4.38 卡 Q：逐次 PIN 的橫幅黏在頂列下面 */

/* ---- 平板直向與手機（≤1000px）：頂列只留選單以外的必要資訊；下方四格頁籤（第三格是 Mio），「更多」打開同一個選單 ---- */
@media (max-width:1000px){
  html[data-ui=v2] .appbar{gap:8px}
  html[data-ui=v2] .appbar-menu,html[data-ui=v2] .appbar-quick,html[data-ui=v2] .appbar-mio{display:none}
  html[data-ui=v2] .brand-mark{height:17px}
  html[data-ui=v2] .main{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  html[data-ui=v2] .tabbar4{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--panel);
    box-shadow:0 -1px 0 var(--line);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  html[data-ui=v2] .tabbar4 a,html[data-ui=v2] .tabbar4 button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:3.5rem;padding:3px 2px;border:0;
    background:none;color:var(--ink-2);font:inherit;font-size:.8125rem;line-height:1.2;font-weight:600;text-decoration:none;cursor:pointer;overflow:hidden}
  html[data-ui=v2] .tabbar4 .tab-ic{display:grid;place-items:center;width:3.25rem;height:1.75rem;border-radius:999px}
  html[data-ui=v2] .tabbar4 .on{color:var(--ink)}
  html[data-ui=v2] .tabbar4 .on .tab-ic{background:var(--accent-soft)}
  html[data-ui=v2] .menu-panel{top:auto;left:0;right:0;bottom:calc(3.5rem + env(safe-area-inset-bottom));width:auto;max-height:min(75vh,40rem);border-radius:20px 20px 0 0;
    box-shadow:0 -12px 32px rgba(21,20,19,.16);padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
}
@media (max-width:640px){
  html[data-ui=v2] .appbar-who,html[data-ui=v2] .appbar-switch{display:none}
}
html[data-ui=v2] .tab-svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html[data-ui=v2] .tab-svg .fill{fill:currentColor;stroke:none}
@media (prefers-reduced-motion:reduce){html[data-ui=v2] .btn{transition:none}html[data-ui=v2] .btn:active:not(:disabled){transform:none}}
@media print{html[data-ui=v2] .appbar,html[data-ui=v2] .tabbar4,html[data-ui=v2] .menu-panel,html[data-ui=v2] .menu-scrim{display:none!important}}

/* ---- 0.4.34 卡 F 第二階段：電腦今日總覽（預約表）——篩選片與數字、圖例；選了篩選，其餘的變淡、不藏；預約內容在電腦寬度從右邊滑出（蓋上來、不擠預約表） ---- */
html[data-ui=v2] .board-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.5rem 0 .75rem}
html[data-ui=v2] .board-filters .chip{min-height:2.75rem;padding:0 1rem;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--panel);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
html[data-ui=v2] .board-filters .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
html[data-ui=v2] .board-filters .chip.on::before{content:"✓ "}
html[data-ui=v2] .board-filters .num{font-variant-numeric:tabular-nums}
html[data-ui=v2] .board-legend{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;color:var(--ink-3);font-size:.875rem;margin-left:auto}
html[data-ui=v2] .board-legend .lg{display:inline-block;width:1.25rem;height:.875rem;border-radius:4px;border:2px solid var(--ink);vertical-align:middle}
html[data-ui=v2] .board-legend .lg-tent{border-style:dashed}
html[data-ui=v2] .board-legend .lg-wait{border-color:var(--amber);background:var(--amber-tint)}
html[data-ui=v2] .board-legend .lg-bad{border-color:var(--red);background:var(--red-tint)}
html[data-ui=v2] .board-legend .lg-live{border-color:var(--accent)}
html[data-ui=v2] .appt.dim{opacity:.35}
html[data-ui=v2] .appt.is-bad{box-shadow:inset 0 0 0 2px var(--red)}
html[data-ui=v2] .appt.is-wait{box-shadow:inset 0 0 0 2px var(--amber)}
html[data-ui=v2] .appt.is-tent{border-style:dashed}
@media (min-width:1001px){
  html[data-ui=v2] dialog#appt-view{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(34rem,100vw);max-width:100vw;border-radius:0}
  html[data-ui=v2] dialog#appt-view .modal-box{height:100%;max-height:100%;border-radius:0}
}

/* ---- 0.4.34 卡 F 第三階段：座位旁結帳的底部抽屜（新版介面的手機寬度）——裡面是既有的結帳畫面，規則不變；上緣留一條看得到後面。
   主要按鈕固定在抽屜底部（不用捲到最下面才按得到）；數量加減至少 44×44；金額不做動畫。往下拉放手時退回或收起有過渡，減少動態時直接就位 ---- */
/* 結帳抽屜的 class 用自己的前綴 co-sheet-*：結帳頁原本的類別抽屜叫 co-drawer（css/checkout.css），同名會被套成整頁的抽屜（0.4.34 卡 F 41b 的 UW04） */
html[data-ui=v2] .co-sheet-wrap[hidden]{display:none}
html[data-ui=v2] .co-sheet-wrap{position:fixed;inset:0;z-index:60}
html[data-ui=v2] .co-sheet-scrim{position:absolute;inset:0;background:var(--overlay)}
html[data-ui=v2] .co-sheet{position:absolute;left:0;right:0;bottom:0;height:90vh;height:90dvh;display:flex;flex-direction:column;background:var(--paper);
  border-radius:18px 18px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom)}
@media (prefers-reduced-motion:no-preference){html[data-ui=v2] .co-sheet{transition:transform .2s ease}}
html[data-ui=v2] .co-sheet-grip{display:flex;align-items:center;justify-content:center;position:relative;min-height:2.75rem;touch-action:none;cursor:grab;flex:none}
html[data-ui=v2] .co-sheet-handle{width:2.75rem;height:.3125rem;border-radius:999px;background:var(--line-strong)}
html[data-ui=v2] .co-sheet-grip .icon-btn{position:absolute;right:.5rem;top:0;min-width:2.75rem;min-height:2.75rem}
html[data-ui=v2] .co-sheet-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 .75rem}
html[data-ui=v2] .co-sheet-body .page{padding-bottom:1rem}
html[data-ui=v2] .co-sheet-body #bill-create,html[data-ui=v2] .co-sheet-body #instore-open,html[data-ui=v2] .co-sheet-body #settle,html[data-ui=v2] .co-sheet-body #bill-save{
  position:sticky;bottom:.5rem;z-index:2;box-shadow:0 4px 18px rgba(0,0,0,.16)}
html[data-ui=v2] .co-sheet-body #total,html[data-ui=v2] .co-sheet-body #due{font-variant-numeric:tabular-nums}
html[data-ui=v2] .qty-row{display:inline-flex;align-items:center;gap:.375rem}
html[data-ui=v2] .qty-step{min-width:2.75rem;min-height:2.75rem;padding:0;font-size:1.25rem;font-weight:700;line-height:1}
html[data-ui=v2] .qty-row .input.short{min-height:2.75rem;width:4.5rem;text-align:center;font-size:1rem;font-variant-numeric:tabular-nums}

/* ---- 0.4.34 卡 F 第四階段：Mio 入口的狀態——平常是墨色的點；有新回覆＝重點色；處理中＝重點色、輕輕閃（SVG 的動畫，減少動態時改寫字）；
   暫停＝線變虛線、點變空心；沒送出＝紅點。每一種都有文字（滑過與讀屏看得到），不只靠顏色 ---- */
html[data-ui=v2] .mio-mark:not([class*="is-"]) circle{fill:var(--ink-2)}
html[data-ui=v2] .mio-mark.is-new circle,html[data-ui=v2] .mio-mark.is-busy circle{fill:var(--accent)}
html[data-ui=v2] .mio-mark.is-paused path{stroke-dasharray:2.5 3}
html[data-ui=v2] .mio-mark.is-paused circle{fill:none;stroke:currentColor;stroke-width:1.6}
html[data-ui=v2] .mio-mark.is-failed circle{fill:var(--red)}
html[data-ui=v2] .mio-state-text{font-size:.75rem;margin-left:.25rem;font-weight:600}