.btn kbd,.qi-type-btn kbd,.qi-combo-btn kbd{font-size:var(--font-xs);background:none;padding:0;border:none;box-shadow:none;margin-left:0;font-family:inherit;opacity:.5;font-weight:700;display:block;text-align:center}
@keyframes qiAmtPulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.5)}70%{box-shadow:0 0 0 8px rgba(59,130,246,0)}100%{box-shadow:none}}
.qi-amt-pulse{animation:qiAmtPulse .8s ease-out}
.qi-staged-item{display:flex;align-items:center;background:var(--bg3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-1);transition:background .15s,box-shadow .15s}
.qi-staged-item:hover{background:var(--bg2)}
.qi-staged-handle{cursor:grab;color:var(--text2);margin-right:var(--space-2);font-size:var(--font-sm);user-select:none;touch-action:none}
.qi-staged-dragging{opacity:.4}
.qi-staged-dragover{box-shadow:0 -2px 0 0 var(--accent)}
.qi-staged-editing{box-shadow:0 0 0 2px var(--accent);background:var(--bg2)}
.fav-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.toast-container{position:fixed;top:var(--space-5);left:50%;transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);pointer-events:none}
.toast{background:#1e293b;color:#f1f5f9;border-radius:var(--radius-lg);padding:var(--space-3) var(--space-6);font-size:var(--font-base);font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:auto;animation:toastIn .3s ease,toastOut .3s ease 4.2s forwards;max-width:90vw;text-align:center;will-change:opacity,transform}
.toast.success{background:#166534}
.toast.error{background:#991b1b}
.toast.warn{background:#92400e}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0}}
*{margin:0;padding:0;box-sizing:border-box}

/* ══════ Design Tokens ══════ */
:root{
  /* ── Colors (Dark, default) ── */
  --bg:#1a1a2e;--bg2:#16213e;--bg3:#0f3460;--card:#1e2a4a;
  --text:#e0e0e0;--text2:#d0d0e0;
  --yellow:#f0c040;--green:#40c060;--red:#e04050;--blue:#4090e0;
  --border:#2a3a5a;--accent:#4090e0;

  /* ── Typography (rem, scales with html font-size) ── */
  --font-xs:   0.75rem;   /* 12px – 最小值，標籤/時間戳 */
  --font-sm:   0.875rem;  /* 14px – 次要文字、說明 */
  --font-base: 1rem;      /* 16px – 主要內容 */
  --font-lg:   1.125rem;  /* 18px – 卡片標題、強調 */
  --font-xl:   1.25rem;   /* 20px – 頁面標題 */
  --font-2xl:  1.5rem;    /* 24px – 大標題 */
  --font-3xl:  1.75rem;   /* 28px – 最大標題 */

  /* ── Spacing (4px grid) ── */
  --space-1:  0.25rem;    /*  4px */
  --space-2:  0.5rem;     /*  8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-8:  2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */

  /* ── Border Radius ── */
  --radius-sm: 0.25rem;   /*  4px */
  --radius-md: 0.5rem;    /*  8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */

  /* ── Touch Targets ── */
  --min-tap:    3rem;     /* 54px – 長輩友善 */
  --min-tap-lg: 3.5rem;   /* 63px – 超大觸控 */

  /* ── Z-Index Layers ── */
  --z-scroll:90;--z-overlay:99;--z-sidebar:100;--z-topbar:200;
  --z-modal:300;--z-dialog:350;--z-imgviewer:400;--z-lightbox:500;--z-toast:900;--z-emergency:999
}
[data-theme="light"]{--bg:#f0f2f5;--bg2:#ffffff;--bg3:#e3e8f0;--card:#ffffff;--text:#1a1a2e;--text2:#444;--yellow:#d4a017;--green:#2a9d4a;--red:#d03040;--blue:#3070d0;--border:#d0d5dd;--accent:#3070d0}

/* ══════ Base ══════ */
html{font-size:18px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .3s,color .3s;font-size:var(--font-base);line-height:1.5;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
/* 助手角色：自動隱藏所有 .owner-only 元素（刪單、改費率、改密碼、使用者管理等） */
body.role-assistant .owner-only{display:none!important}
/* 風險監控：拖牌金額輸入 owner-only；助手能看但不能改（視覺 disabled） */
body.role-assistant input[data-change="updateHedge"]{pointer-events:none;background:var(--bg3)!important;opacity:0.7;cursor:not-allowed}
input,select,button,textarea{font-family:inherit;font-size:inherit;line-height:inherit}
button{cursor:pointer}

/* Login */
#loginPage{display:flex;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e)}
[data-theme="light"] #loginPage{background:linear-gradient(135deg,#e3e8f0,#f0f2f5)}
.login-box{background:var(--card);padding:var(--space-10);border-radius:var(--radius-xl);text-align:center;width:360px;max-width:calc(100vw - 32px);box-sizing:border-box;box-shadow:0 8px 32px rgba(0,0,0,.4)}
@media (max-width:420px){.login-box{padding:var(--space-6)}}
.login-box h1{font-size:var(--font-3xl);margin-bottom:var(--space-2)}
.login-box p{color:var(--text2);margin-bottom:var(--space-6)}
.login-box input{width:100%;box-sizing:border-box;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);margin-bottom:var(--space-4);text-align:center;font-size:var(--font-base)}
.login-box button{width:100%;padding:var(--space-3);border:none;border-radius:var(--radius-md);background:var(--blue);color:#fff;font-size:var(--font-base);font-weight:600}
.login-box button:hover{opacity:.9}
.login-err{color:var(--red);font-size:var(--font-sm);margin-bottom:var(--space-2);min-height:var(--space-5)}

/* Layout */
#app{display:none}
.sidebar{position:fixed;left:0;top:0;width:170px;height:100vh;background:var(--bg2);border-right:1px solid var(--border);padding:var(--space-2) 0;z-index:var(--z-sidebar);transition:transform .3s;overflow-y:auto;display:flex;flex-direction:column;will-change:transform}
.sidebar h2{padding:0 var(--space-3);margin-bottom:var(--space-4);font-size:var(--font-base)}
.sidebar a{display:flex;align-items:center;padding:var(--space-3) var(--space-3);color:var(--text2);text-decoration:none;gap:var(--space-1);transition:all .2s;font-size:var(--font-sm)}
.sidebar a:hover{background:var(--bg3);color:var(--text)}
.sidebar a.active{background:var(--accent);color:#fff;border-left:3px solid var(--accent);padding-left:var(--space-3);font-weight:700}
.sidebar a.active:hover{background:var(--accent);opacity:.9}
.sidebar .sidebar-bottom{margin-top:var(--space-2);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,8px)}
.main{margin-left:170px;padding:var(--space-5)}
.hamburger{display:none;position:fixed;top:var(--space-3);left:var(--space-3);z-index:var(--z-topbar);background:var(--card);border:1px solid var(--border);color:var(--text);width:var(--min-tap);height:var(--min-tap);border-radius:var(--radius-md);font-size:var(--font-xl);align-items:center;justify-content:center}
.top-bar{display:none;position:fixed;top:var(--space-3);right:var(--space-3);z-index:var(--z-topbar);gap:var(--space-1)}

@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;padding:var(--space-4);padding-top:3.5rem}
  .hamburger{display:flex}
  .top-bar{display:flex}
  #custBillStickySection{left:0!important}
  .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:var(--z-overlay)}
  .overlay.show{display:block}
}

/* Cards & Stats */
.page{display:none}
.page.active{display:block}
.page-title{font-size:var(--font-xl);font-weight:700;margin-bottom:var(--space-3)}
.stats{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.stats>.stat{flex:1 1 0;min-width:0}
/* Zu reconcile: inline on desktop, wrap on mobile */
.zu-reconcile{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.zu-reconcile .zu-item{white-space:nowrap}
/* Mobile: filter row2 align left, date wider */
.dash-filter-row2{width:100%;justify-content:flex-start}
.dash-filter-row2 input[type="date"]{min-width:145px}
/* Mobile: hide keyboard shortcut hints */
@media(max-width:768px){
  kbd.desktop-only{display:none}
  .stats{gap:var(--space-1);margin-bottom:var(--space-3)}
  .stats>.stat{flex:0 0 calc(25% - 5px);padding:var(--space-2) var(--space-1)}
  .stats>.stat .val{font-size:var(--font-sm)}
  .stats>.stat .label{font-size:var(--font-xs)}
  .dash-filter-mobile-wrap{display:flex;flex-direction:column;gap:6px}
  .dash-filter-mobile-wrap .dash-filter-row{display:flex;gap:6px;align-items:center}
  /* dash-card 內 row 不夠寬就 wrap；搜尋框獨佔一行避免「🔍 搜尋客戶...」placeholder 被 ◀#▶ + 日期擠到只剩「🔍 搜尋」 */
  .dash-card .flex-center{flex-wrap:wrap}
  .dash-card .flex-center>.flex-1{flex:1 1 100%}
}
@media(min-width:769px){
  .stats{gap:var(--space-1);margin-bottom:var(--space-3)}
  .stats>.stat{padding:var(--space-2)}
  .stats>.stat .val{font-size:var(--font-base)}
  .stats>.stat .label{font-size:var(--font-xs)}
  .dash-top-row{margin-bottom:12px;display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
  .dash-top-row>div{flex:1 1 360px;min-width:0;margin-bottom:0!important}
  .dash-top-row .dash-filter-box button[data-action="stepSlipNo"]{min-width:var(--min-tap)!important;min-height:var(--min-tap)!important;padding:var(--space-1)!important;font-size:var(--font-sm)!important}
  .dash-top-row .dash-filter-box #dashFilterSlipNo{width:2.5rem;padding:var(--space-1) 2px;font-size:var(--font-sm)}
  .dash-filter-row2{flex:1 1 100%;justify-content:space-between}
  .dash-filter-row2 input[type="date"]{flex:1;min-width:0}
  .dash-filter-row2 .btn{flex:1;justify-content:center}
  .dash-top-row .dash-draw-inline input[type="text"]{width:2.25rem;padding:var(--space-1) 1px;font-size:var(--font-sm)}
}
.stat{background:var(--card);padding:var(--space-4);border-radius:var(--radius-lg);text-align:center}
.stat .val{font-size:var(--font-2xl);font-weight:700;margin-top:var(--space-1);white-space:nowrap}
.stat .label{color:var(--text2);font-size:var(--font-sm)}
.stat.profit .val{color:var(--green)}
.stat.loss .val{color:var(--red)}

/* Table */
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius-lg);overflow:hidden}
th,td{padding:var(--space-2) var(--space-3);text-align:left;border-bottom:1px solid var(--border)}
th{background:var(--bg3);font-weight:600;font-size:var(--font-sm);color:var(--text2)}
tr:hover{background:rgba(128,128,128,.05)}
.clickable{cursor:pointer;color:var(--blue);text-decoration:underline}

/* Badges */
.badge{padding:var(--space-1) var(--space-2);border-radius:var(--radius-lg);font-size:var(--font-sm);font-weight:600}
.badge-pending{background:rgba(240,192,64,.15);color:var(--yellow)}
.badge-approved{background:rgba(64,192,96,.15);color:var(--green)}
.badge-won{background:rgba(224,64,80,.15);color:var(--red)}

/* Draw input */
.draw-section{background:var(--card);padding:var(--space-5);border-radius:var(--radius-lg);margin-bottom:var(--space-6)}
.draw-section h3{margin-bottom:var(--space-3)}
.draw-inputs{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.draw-inputs input{width:3.5rem;padding:var(--space-2);text-align:center;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font-size:var(--font-lg);font-weight:700}
.btn{padding:var(--space-3) var(--space-5);border:none;border-radius:var(--radius-md);font-weight:600;font-size:var(--font-base);transition:opacity .2s;min-height:var(--min-tap)}
.btn-primary{background:var(--blue);color:#fff}
.btn-success{background:var(--green);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-warning{background:var(--yellow);color:#fff}
[data-theme="light"] .btn-warning{color:#1a1a2e}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn:hover{opacity:.85}
.btn-sm{padding:var(--space-1) var(--space-2);font-size:var(--font-sm);min-height:auto}

/* Slip cards */
.slip-card{background:var(--card);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3);border:1px solid var(--border)}
/* 設定頁：上方 tab + 下方單欄 */
.settings-tabs{display:flex;gap:2px;border-bottom:2px solid var(--border);margin-bottom:var(--space-4);flex-wrap:wrap;max-width:900px}
.settings-tab{background:none;border:none;padding:10px 18px;font-size:15px;color:var(--text2);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;font-weight:500;border-radius:8px 8px 0 0;transition:all .15s}
.settings-tab:hover{background:var(--bg2);color:var(--text)}
.settings-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.settings-tab-panel{display:none;max-width:800px}
.settings-tab-panel.active{display:grid;gap:var(--space-3)}
.settings-tab-panel .slip-card{margin-bottom:0}
/* 舊 .settings-grid 相容 */
.settings-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3);max-width:800px}
.settings-grid .slip-card{margin-bottom:0}
.slip-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-2);flex-wrap:wrap;gap:var(--space-1);position:relative;padding-right:0}
.slip-header>div:last-child{position:absolute;top:0;right:0;display:flex;gap:2px;flex-shrink:0}
.slip-img{max-width:200px;max-height:150px;border-radius:var(--radius-md);cursor:pointer;border:1px solid var(--border)}
.carDet.carExp{max-height:200px!important}

/* Verify page */
.verify-card{background:var(--card);border-radius:var(--radius-lg);padding:var(--space-3);margin-bottom:var(--space-4);border:1px solid var(--border)}
.verify-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);align-items:start}.verify-grid>div:first-child{position:sticky;top:var(--space-3)}.verify-grid>div:last-child{position:relative;z-index:20}
@media(max-width:768px){.verify-grid{grid-template-columns:1fr}.verify-grid>div:first-child{position:static}}
.verify-card img{max-width:100%;object-fit:contain;border-radius:var(--radius-md);cursor:zoom-in}
.verify-img-container{border-radius:var(--radius-md);overflow:hidden;transition:all .2s;position:relative}
.verify-img-container.zoomed{position:sticky;top:0;z-index:10;box-shadow:0 4px 24px rgba(0,0,0,0.3);overflow:auto;max-height:90vh}
.verify-img-container.zoomed img{width:100%;object-fit:contain;transform-origin:top left;cursor:grab}
.verify-img-container.zoomed img.dragging{cursor:grabbing}
.verify-img-container:not(.zoomed) img{max-height:80vh;width:100%;object-fit:contain;cursor:zoom-in}
.verify-zoom-hint{position:absolute;bottom:var(--space-1);right:var(--space-1);background:rgba(0,0,0,0.55);color:#fff;font-size:var(--font-xs);padding:2px var(--space-2);border-radius:var(--radius-lg);pointer-events:none;opacity:0;transition:opacity .3s}
.verify-img-container.zoomed:hover .verify-zoom-hint{opacity:1}
.verify-group{background:var(--bg);border-left:3px solid var(--accent);border-radius:var(--radius-md);padding:var(--space-2);margin-bottom:var(--space-1)}
.verify-group.verify-match{border-left:3px solid #10b981}
.verify-group input,.verify-group select{padding:var(--space-1) var(--space-1);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg2);color:var(--text);font-size:var(--font-sm)}
.verify-bet-row{display:flex;gap:var(--space-1);align-items:center;margin-top:var(--space-1);flex-wrap:wrap}
.verify-header{display:flex;gap:var(--space-1);margin-bottom:var(--space-2);align-items:center;flex-wrap:wrap}
.verify-header select,.verify-header input{padding:var(--space-1) var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font-size:var(--font-sm);height:32px;box-sizing:border-box;line-height:1.2}
.verify-group .vg-label{font-size:var(--font-xs);font-weight:700;color:var(--accent);margin-bottom:0}
.verify-group .vg-nums{display:flex;flex-wrap:wrap;gap:2px;align-items:center;margin:2px 0}
.verify-group .vg-bets{display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center}
.verify-group .vg-bet-chip{display:inline-flex;align-items:center;gap:3px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-1) var(--space-2);font-size:var(--font-xs)}
.verify-group .vg-bet-chip select,.verify-group .vg-bet-chip input{border:none;background:transparent;padding:0;font-size:var(--font-sm);color:var(--text)}
.verify-group .vg-bet-chip input[type=number]{width:56px;text-align:center;font-size:var(--font-sm)}
.verify-group .vg-bet-chip select{width:auto}
.verify-group .vg-bet-chip .vg-bet-rm{cursor:pointer;color:var(--text2);font-size:var(--font-xs);margin-left:2px}
.verify-group .vg-bet-chip .vg-bet-rm:hover{color:var(--red)}
.verify-actions{display:flex;gap:var(--space-1);margin-top:var(--space-2);flex-wrap:wrap}
.verify-status{display:inline-block;padding:2px var(--space-2);border-radius:var(--radius-lg);font-size:var(--font-xs);font-weight:600}
.verify-status.pending{background:rgba(240,192,64,.15);color:var(--yellow)}
.verify-status.processing{background:rgba(64,144,224,.15);color:var(--blue)}
.verify-status.done{background:rgba(64,192,96,.15);color:var(--green)}
.verify-status.error{background:rgba(224,64,80,.15);color:var(--red)}
.verify-spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin 0.6s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.group-table{width:100%;margin:var(--space-1) 0;border-collapse:collapse;table-layout:fixed}
.group-table td{padding:var(--space-1);font-size:var(--font-sm);white-space:nowrap;overflow:visible}
.group-table td:nth-child(1){text-align:left;width:28%}
.group-table td:nth-child(2){text-align:right;width:16%}
.group-table td:nth-child(3){text-align:right;width:16%}
.group-table td:nth-child(4){text-align:right;width:22%}
.group-table td:nth-child(5){text-align:right;width:18%}
.num{display:inline-flex;align-items:center;justify-content:center;min-width:1.875rem;width:1.875rem;height:1.875rem;border-radius:50%;background:var(--bg3);margin:2px;font-size:var(--font-sm);font-weight:600;flex-shrink:0}
.num.hit{background:var(--red);color:#fff}
.win-amount{color:var(--red);font-weight:700}

/* Modal */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:var(--z-modal);align-items:center;justify-content:center;will-change:opacity}
.modal-bg.show{display:flex}
/* customDialog 需比其他 modal 高，才能顯示在前帳編輯等 modal 之上 */
#customDialog{z-index:var(--z-dialog)}
.modal{background:var(--card);border-radius:var(--radius-xl);padding:var(--space-6);max-width:600px;width:90%;max-height:85vh;overflow-y:auto;position:relative}
/* 右上角關閉按鈕（所有 modal 共用）*/
.modal-close-x{position:absolute;top:var(--space-3);right:var(--space-3);width:2.25rem;height:2.25rem;border-radius:50%;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:var(--font-lg);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .15s}
.modal-close-x:hover{background:var(--red);color:#fff;border-color:var(--red)}
.modal h3{margin-bottom:var(--space-4)}
.modal label{display:block;color:var(--text2);font-size:var(--font-sm);margin:var(--space-2) 0 var(--space-1)}
.modal input,.modal textarea,.modal select{width:100%;padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);margin-bottom:var(--space-1)}
.modal textarea{min-height:60px;font-family:monospace;font-size:var(--font-sm);line-height:1.6;field-sizing:content;max-height:50vh}
.modal-actions{display:flex;gap:var(--space-4);justify-content:flex-end;margin-top:var(--space-4)}
/* Share modal */
.share-modal{max-width:960px;overflow-y:visible}
.share-body{display:flex;flex-direction:column;gap:var(--space-3);overflow:hidden;flex:1;min-height:0}
#shareSlipContent{flex:1;min-height:150px;max-height:50vh;overflow-y:auto}
#billFormulaSection{flex-shrink:0;padding-top:var(--space-3);border-top:1px solid var(--border)}
.share-modal .modal-actions{flex-wrap:wrap}
.share-modal .modal-actions .btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-2) var(--space-3);font-size:var(--font-xs);line-height:1.2;min-width:0;flex:1}
.share-modal .modal-actions .btn span:first-child{font-size:18px;line-height:1}
@media(min-width:769px){
  .share-modal{max-width:960px}
  .share-body{flex-direction:row;align-items:flex-start;overflow-y:auto;max-height:75vh}
  #shareSlipContent{flex:1;min-width:0;max-width:420px;max-height:70vh;overflow-y:auto}
  #billFormulaSection{width:280px;flex-shrink:0;padding-top:0;border-top:none;border-left:1px solid var(--border);padding-left:var(--space-4)}
}

/* Image viewer */
.img-viewer{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:var(--z-imgviewer);align-items:center;justify-content:center;cursor:zoom-out}
.img-viewer.show{display:flex}
.img-viewer img{max-width:95%;max-height:95%}

/* Quick input */
.qi-quick-btns{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:var(--space-1)}
.qi-cust-dropdown{position:absolute;top:100%;left:0;min-width:200px;max-height:240px;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:100;display:none;margin-top:2px}
.qi-cust-dropdown.show{display:block}
.qi-cust-item{padding:var(--space-2) var(--space-3);cursor:pointer;font-size:var(--font-sm);color:var(--text);border-bottom:1px solid var(--bg3);transition:background .1s}
.qi-cust-item:last-child{border-bottom:none}
.qi-cust-item:hover,.qi-cust-item.active{background:var(--accent);color:#fff}
.qi-cust-item .qi-cust-count{float:right;font-size:var(--font-xs);color:var(--text2);font-weight:400}
.qi-cust-item:hover .qi-cust-count,.qi-cust-item.active .qi-cust-count{color:rgba(255,255,255,.7)}
.qi-cust-section-label{padding:var(--space-1) var(--space-3) var(--space-1);font-size:var(--font-xs);font-weight:700;color:var(--accent);border-bottom:1px solid var(--border);margin-bottom:2px}
.qi-cust-section-older{color:var(--text2);margin-top:8px;border-top:2px solid var(--border);padding-top:8px}
@media(min-width:769px){
  #qiCustDropdown{position:fixed;left:50%;transform:translateX(-50%);right:auto;width:min(860px,90vw);max-height:min(720px,80vh);padding:14px 16px;overflow-x:hidden;overflow-y:auto;display:none!important}
  #qiCustDropdown.show{display:block!important}
  .qi-cust-columns{display:flex;gap:16px}
  .qi-cust-column{flex:1;min-width:0}
  .qi-cust-group{padding:6px 0;margin-bottom:2px;display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
  .qi-cust-group-label{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-weight:700;font-size:var(--font-xs);flex-shrink:0}
  .qi-cust-group-items{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center;flex:1}
  #qiCustDropdown .qi-cust-item{padding:var(--space-1) var(--space-2);border:none;border-radius:var(--radius-sm);font-size:var(--font-sm);border-bottom:none;flex-shrink:0;white-space:nowrap;cursor:pointer}
  #qiCustDropdown .qi-cust-item .qi-cust-count{float:none;margin-left:3px;font-size:var(--font-xs)}
}
.verify-cust-input{width:100%;padding:var(--space-1) var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font-size:var(--font-sm);height:32px;box-sizing:border-box;line-height:1.2}
.verify-card-cust-dd{left:auto;right:0;min-width:280px;max-width:calc(100vw - 2rem)}
.qi-quick-btn{padding:var(--space-1) var(--space-3);border-radius:var(--radius-xl);border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:var(--font-sm);font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.qi-quick-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.qi-quick-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.qi-nums{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1);margin-bottom:var(--space-2);justify-items:center}
@media(max-width:480px){.qi-nums{grid-template-columns:repeat(5,1fr);gap:4px}}
.qi-num{width:var(--min-tap);height:var(--min-tap);display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg3);border:2px solid transparent;font-weight:700;font-size:var(--font-sm);cursor:pointer;transition:all .15s;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(max-width:480px){.qi-num{width:var(--min-tap);height:var(--min-tap);font-size:var(--font-sm)}}
.qi-num.selected{background:var(--blue);color:#fff;border-color:#fff;transform:scale(1.1)}
.qi-num.qi-sep{background:var(--accent);color:#fff;border:2px solid var(--accent);font-size:var(--font-lg);font-weight:900;letter-spacing:-1px}
.qi-num.qi-sep:hover{transform:scale(1.15);filter:brightness(1.1)}
.pillar-formula{display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap;padding:var(--space-2) var(--space-2);margin-bottom:var(--space-2);background:var(--bg3);border-radius:var(--radius-lg);min-height:var(--min-tap);font-size:var(--font-sm);font-weight:600;overflow-x:auto}
.pillar-formula .pf-pos{display:inline-flex;align-items:center;gap:2px;padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);cursor:pointer;transition:all .15s;white-space:nowrap;border:2px solid transparent}
.pillar-formula .pf-pos.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.pillar-formula .pf-pos:not(.active){background:var(--bg);color:var(--text);border-color:var(--border)}
.pillar-formula .pf-pos:not(.active):hover{border-color:var(--accent);color:var(--accent)}
.pillar-formula .pf-sep{color:var(--text2);font-size:var(--font-base);font-weight:700;padding:0 2px}
.pillar-formula .pf-pos .pf-remove{margin-left:var(--space-1);color:rgba(255,255,255,0.7);font-size:var(--font-xs);cursor:pointer;font-weight:400}
.pillar-formula .pf-pos:not(.active) .pf-remove{color:var(--red)}
.qi-bets{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0}
.qi-bet-card{background:var(--bg3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);display:flex;align-items:center;gap:var(--space-2)}
.qi-bet-card input{width:70px;padding:var(--space-1);text-align:center;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font-size:var(--font-base)}
.qi-bet-card label{font-size:var(--font-sm);white-space:nowrap}
.qi-summary{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);margin:var(--space-4) 0}
.qi-summary .row{display:flex;justify-content:space-between;padding:var(--space-1) 0;font-size:var(--font-sm)}
.qi-summary .total{font-size:var(--font-lg);font-weight:700;border-top:1px solid var(--border);margin-top:var(--space-2);padding-top:var(--space-2)}

/* Search bar */
.search-bar{display:flex;gap:var(--space-2);margin-bottom:var(--space-4)}
.search-bar input{flex:1;padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font-size:var(--font-sm)}

/* Daily stats */
.daily-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3)}
.daily-card h4{margin-bottom:var(--space-2)}

/* Bill */
.bill-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);font-family:monospace;white-space:pre-wrap;font-size:var(--font-sm);line-height:1.6}

/* Emergency fake notepad */
#emergencyOverlay{display:none;position:fixed;inset:0;z-index:var(--z-emergency);background:#fff;color:#333;font-family:'Courier New',monospace;padding:0}
#emergencyOverlay .fake-toolbar{background:#f0f0f0;border-bottom:1px solid #ccc;padding:var(--space-1) var(--space-3);font-size:var(--font-sm);color:#666;display:flex;justify-content:space-between;align-items:center}
#emergencyOverlay .fake-content{padding:var(--space-4);font-size:var(--font-base);line-height:2;white-space:pre-wrap;height:calc(100vh - 40px);overflow-y:auto;outline:none}
#emergencyOverlay.show{display:block}

/* Theme toggle */
.theme-btn{background:var(--card);border:1px solid var(--border);color:var(--text);width:var(--min-tap);height:var(--min-tap);border-radius:var(--radius-md);font-size:var(--font-lg);display:flex;align-items:center;justify-content:center;cursor:pointer}
.panic-btn{background:var(--red);border:none;color:#fff;width:var(--min-tap);height:var(--min-tap);border-radius:var(--radius-md);font-size:var(--font-lg);display:flex;align-items:center;justify-content:center;cursor:pointer}

/* Pull to refresh */
.pull-refresh-container{position:relative;transition:transform 0.2s ease-out;will-change:transform}
.pull-refresh-indicator{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:2.5rem;height:2.5rem;background:var(--card);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-xl);opacity:0;transition:opacity 0.2s ease;z-index:10}
.pull-refresh-indicator.visible{opacity:1}
.pull-refresh-indicator.loading{animation:pullSpin 1s linear infinite}
@keyframes pullSpin{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}

/* ── Dashboard-specific ── */
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2);font-size:var(--font-xs);overflow:visible}
/* 開獎卡片：內容置中 + label 後留間距，避免右側大片空白且 label 跟輸入框黏在一起 */
.dash-draw-card .flex-center{justify-content:center}
.dash-draw-card .dash-draw-label{margin-right:var(--space-2)}
/* ── Dashboard 工具列：第一列 2rem 高、第二列 1.875rem 高 ── */
.dash-draw-input{width:2.25rem;height:2rem;padding:0 1px;text-align:center;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-size:var(--font-sm);font-weight:700;box-sizing:border-box;flex-shrink:0}
.dash-filter-input{width:100%;height:2rem;padding:0 var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font-size:var(--font-sm);box-sizing:border-box}
/* 平板/手機（≤1024px）：用 custom button「📅 04/29」取代 native date input 顯示
   webkit 沒辦法 CSS 只藏年份後的「/」（所有分隔符共用 pseudo），改 JS 方案最乾淨。
   native input 用 visually-hidden（保留 showPicker 功能、但畫面上看不到） */
.dash-date-btn{display:none}
@media (max-width:1024px){
  .dash-date-btn{display:inline-flex;align-items:center;height:2rem;padding:0 var(--space-2);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--font-sm);color:var(--text);cursor:pointer;flex:0 0 auto;white-space:nowrap;box-sizing:border-box}
  #dashFilterDate{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;flex:0 0 1px!important;min-width:0!important}
}
/* === 風險監控頁 RWD === */
/* 預設單欄堆疊（手機/平板）；桌面 ≥1101px 三欄並排 */
.risk-combo-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3)}
/* 響應式 4 段（2/3/4 星 + 車）：手機 1 欄、平板 2 欄（2x2）、桌面 4 欄一排 */
@media (min-width:769px){.risk-combo-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1025px){.risk-combo-grid{grid-template-columns:repeat(4,1fr)}}
.risk-combo-section{background:var(--card);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-2)}
.risk-combo-section[open]>summary::after{content:'▲';font-size:10px;margin-left:auto;color:var(--text2)}
.risk-combo-section:not([open])>summary::after{content:'▼';font-size:10px;margin-left:auto;color:var(--text2)}
.risk-section-summary{cursor:pointer;list-style:none;padding:var(--space-2) var(--space-3);background:var(--bg3);display:flex;align-items:center;user-select:none}
.risk-section-summary::-webkit-details-marker{display:none}
.risk-combo-list{display:flex;flex-direction:column}
.risk-combo-row{display:flex;align-items:center;gap:6px;padding:var(--space-2);border-top:1px solid var(--border);flex-wrap:wrap}
.risk-combo-row.is-danger{background:#fef2f2}
.rcr-balls{flex:1 1 auto;min-width:100px;display:flex;flex-wrap:wrap;align-items:center}
.rcr-carats{font-size:var(--font-sm);font-weight:800;text-align:right;min-width:55px;white-space:nowrap}
.rcr-net{font-family:monospace;font-size:var(--font-sm);font-weight:700;text-align:right;min-width:65px;white-space:nowrap}
.rcr-hedge-wrap{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.rcr-hedge-label{font-size:11px;color:var(--text2);font-weight:600}
.rcr-hedge{width:60px;height:26px;padding:2px 4px;border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-family:monospace;font-size:var(--font-xs);text-align:right;box-sizing:border-box}
/* 排行式 row：rank + 進度條（待處理 / 監看中）— 字體放大讓長輩好讀 */
.rcr-rank{font-family:monospace;font-weight:800;color:var(--text2);min-width:32px;font-size:15px;letter-spacing:-0.5px}
.rcr-bar{flex:1 1 60px;min-width:50px;height:8px;background:var(--bg3);border-radius:4px;overflow:hidden}
.rcr-bar-fill{height:100%;border-radius:4px;transition:width 0.3s ease}
/* row 的 net / carats 字體在排行 layout 下放大 */
.risk-combo-row .rcr-net{font-size:var(--font-base);font-weight:800;min-width:80px}
.risk-combo-row .rcr-carats{font-size:var(--font-sm);font-weight:800}
.risk-combo-row{padding:10px var(--space-2)}
.rcr-toggle{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:2px 6px;color:var(--text2);font-size:11px;line-height:1}
.rcr-detail{padding:var(--space-2) var(--space-3);background:var(--bg);border-top:1px solid var(--border);font-size:var(--font-xs)}
.dash-filter-btn{height:1.875rem;padding:0 var(--space-2);white-space:nowrap;font-size:var(--font-xs);text-align:center;min-height:auto;box-sizing:border-box;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.dash-btn-sm{flex:1 1 0;min-width:0}
.dash-btn-lg{flex:2 1 0;min-width:0}
.dash-step-btn{background:none;border:none;font-size:var(--font-sm);cursor:pointer;padding:0 var(--space-1);color:var(--text);min-width:1.25rem;height:100%;display:flex;align-items:center;justify-content:center}
.dash-step-wrap{display:inline-flex;align-items:center;gap:1px;height:2rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);padding:0 var(--space-1);flex-shrink:0;box-sizing:border-box}
.dash-slip-no-input{width:1.75rem;height:100%;padding:0;border:none;background:transparent;color:var(--text);font-size:var(--font-sm);text-align:center;box-sizing:border-box}
.dash-clear-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-md);height:1.875rem;padding:0 var(--space-2);cursor:pointer;color:var(--text2);font-size:var(--font-xs);flex:0 0 auto;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
.dash-label{font-size:var(--font-sm);font-weight:700;color:var(--text2);height:2rem;display:inline-flex;align-items:center;flex-shrink:0}

/* ── Game type toggle buttons ── */
.game-toggle-btn{padding:var(--space-2) var(--space-3);border:2px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font-weight:600;cursor:pointer;transition:all .2s;font-size:var(--font-sm)}
.game-toggle-btn.active{border-color:var(--accent);background:var(--accent);color:#fff}

/* ── QI type/combo buttons ── */
.qi-type-toggle{flex:1;min-width:2.25rem;padding:var(--space-1) 2px;border-radius:var(--radius-md);border:2px solid var(--border);background:var(--bg);color:var(--text);font-weight:700;cursor:pointer;font-size:var(--font-sm);touch-action:manipulation;text-align:center}
.qi-type-toggle.active,.qi-combo-btn.active{border-color:var(--accent);background:var(--accent);color:#fff}
.qi-combo-toggle{flex:1;min-width:2.25rem;padding:var(--space-1) 2px;border-radius:var(--radius-md);border:2px solid var(--accent);background:var(--bg);color:var(--accent);font-weight:700;cursor:pointer;font-size:var(--font-sm);touch-action:manipulation;text-align:center}

/* Misc */
.empty{text-align:center;color:var(--text2);padding:var(--space-10)}
.tag{display:inline-block;padding:2px var(--space-2);border-radius:var(--radius-md);font-size:var(--font-sm);margin:2px;background:var(--bg3);color:var(--text2)}

/* Parsed group cards */
.parsed-group{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-3);margin-bottom:var(--space-2);position:relative}
.parsed-group .pg-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2)}
.parsed-group .pg-del{background:var(--red);color:#fff;border:none;width:var(--min-tap);height:var(--min-tap);border-radius:50%;font-size:var(--font-sm);cursor:pointer;display:flex;align-items:center;justify-content:center}
.parsed-group input{padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font-size:var(--font-sm)}
.parsed-group .pg-nums{width:100%;margin-bottom:var(--space-1)}
.parsed-group .pg-bets{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.parsed-group .pg-bet{display:flex;align-items:center;gap:var(--space-1);background:var(--card);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md)}
.parsed-group .pg-bet select{padding:var(--space-1);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-size:var(--font-sm)}
.parsed-group .pg-bet input{width:70px;font-size:var(--font-sm)}
.parsed-group .pg-bet .pg-bet-del{background:none;border:none;color:var(--red);font-size:var(--font-base);cursor:pointer;padding:0 2px}
.pg-add-bet{background:none;border:1px dashed var(--border);color:var(--text2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-size:var(--font-xs);cursor:pointer;margin-top:var(--space-1)}
.pg-car-section{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--border)}
.pg-car{display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1)}
.pg-car input{width:60px;font-size:var(--font-sm)}
.verify-conflict{background:#fef3c7;border-left:3px solid #f59e0b;padding:var(--space-1) var(--space-2);margin:2px 0;border-radius:var(--radius-sm);font-size:var(--font-sm)}
.verify-confidence{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-sm);margin-top:var(--space-2);margin-bottom:var(--space-3)}
.verify-confidence.high{background:#d1fae5;color:#065f46}
.verify-confidence.low{background:#fef3c7;color:#92400e}
[data-theme="light"] .verify-conflict{background:#fef3c7;color:#92400e}
[data-theme="light"] .verify-confidence.high{background:#d1fae5;color:#065f46}
[data-theme="light"] .verify-confidence.low{background:#fef3c7;color:#92400e}
.verify-triple{padding:var(--space-1) var(--space-2);background:var(--bg2);border-radius:var(--radius-md);margin:var(--space-1) 0;font-size:var(--font-sm)}
.verify-source{padding:2px 0;display:flex;gap:8px}
.verify-suggest{font-weight:700;color:var(--accent);padding-top:4px;border-top:1px solid var(--border);margin-top:4px}
.verify-pending{color:var(--text2);font-style:italic;display:flex;align-items:center;gap:6px}
.verify-pending .spinner{width:14px;height:14px}

/* Lightbox */
#verifyLightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:var(--z-lightbox);align-items:center;justify-content:center;cursor:pointer}
#verifyLightbox.show{display:flex}
#verifyLightbox img{max-width:95%;max-height:95%;object-fit:contain;cursor:default;transition:transform .2s}
#verifyLightbox .lb-close{position:fixed;top:var(--space-4);right:var(--space-4);color:#fff;font-size:var(--font-2xl);cursor:pointer;z-index:calc(var(--z-lightbox) + 1);background:rgba(0,0,0,.5);width:var(--min-tap);height:var(--min-tap);border-radius:50%;display:flex;align-items:center;justify-content:center;border:none}
/* Rotate button */
.verify-rotate-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-size:var(--font-xs);cursor:pointer;margin-top:var(--space-1)}
/* Batch controls */
.verify-batch-bar{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;font-size:var(--font-sm)}
/* 統一批次列所有互動元素高度與字體 */
.verify-batch-bar input,
.verify-batch-bar select,
.verify-batch-bar button,
.verify-batch-bar .game-toggle-btn{
  height:2.25rem;
  padding:0 var(--space-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg2);
  color:var(--text);
  font-size:var(--font-sm);
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  line-height:1;
  font-weight:normal;
}
.verify-batch-bar input[type=date]{padding:0 var(--space-2)}
.verify-batch-bar input{width:auto}
.verify-batch-bar .custom-prefix{width:60px;display:none}
/* game-toggle-btn 在批次列內覆寫，保持一致高度 */
.verify-batch-bar .game-toggle-btn{border-width:2px;padding:0 var(--space-3);font-weight:600}
.verify-batch-bar .game-toggle-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Apply button in triple comparison */
.verify-apply-btn{background:var(--accent);color:#fff;border:none;padding:2px var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-xs);cursor:pointer;margin-left:var(--space-1)}
.verify-apply-btn:hover{opacity:.8}
.verify-apply-all{background:var(--green);color:#fff;border:none;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-xs);cursor:pointer;margin-top:var(--space-1)}
.verify-apply-all:hover{opacity:.8}

/* ══════ Utility Classes (Design Token based) ══════ */

/* ── Typography ── */
.text-xs   { font-size:var(--font-xs) }    /* 12px */
.text-sm   { font-size:var(--font-sm) }    /* 14px */
.text-base { font-size:var(--font-base) }  /* 16px */
.text-lg   { font-size:var(--font-lg) }    /* 18px */
.text-xl   { font-size:var(--font-xl) }    /* 20px */
.text-2xl  { font-size:var(--font-2xl) }   /* 24px */
.text-3xl  { font-size:var(--font-3xl) }   /* 28px */
.text-muted { color:var(--text2) }
.text-accent { color:var(--accent) }
.text-red { color:var(--red) }
.text-green { color:var(--green) }
.text-nowrap { white-space:nowrap }
.text-center { text-align:center }
.text-right { text-align:right }
.fw-400 { font-weight:400 }
.fw-600 { font-weight:600 }
.fw-700 { font-weight:700 }
.fw-800 { font-weight:800 }
.fw-bold { font-weight:600 }

/* ── Spacing (margin) ── */
.mt-1 { margin-top:var(--space-1) }
.mt-2 { margin-top:var(--space-2) }
.mt-3 { margin-top:var(--space-3) }
.mt-4 { margin-top:var(--space-4) }
.mb-0 { margin-bottom:0 }
.mb-1 { margin-bottom:var(--space-1) }
.mb-2 { margin-bottom:var(--space-2) }
.mb-3 { margin-bottom:var(--space-3) }
.mb-4 { margin-bottom:var(--space-4) }
.mb-6 { margin-bottom:var(--space-6) }
.mb-sm { margin-bottom:var(--space-2) }
.mb-md { margin-bottom:var(--space-4) }
.mb-lg { margin-bottom:var(--space-6) }
.mb-12 { margin-bottom:var(--space-3) }
.mt-8{margin-top:var(--space-2)}.mb-16{margin-bottom:var(--space-4)}

/* ── Spacing (padding) ── */
.p-1 { padding:var(--space-1) }
.p-2 { padding:var(--space-2) }
.p-3 { padding:var(--space-3) }
.p-4 { padding:var(--space-4) }
.px-2 { padding-left:var(--space-2);padding-right:var(--space-2) }
.px-3 { padding-left:var(--space-3);padding-right:var(--space-3) }
.px-4 { padding-left:var(--space-4);padding-right:var(--space-4) }
.py-1 { padding-top:var(--space-1);padding-bottom:var(--space-1) }
.py-2 { padding-top:var(--space-2);padding-bottom:var(--space-2) }
.py-3 { padding-top:var(--space-3);padding-bottom:var(--space-3) }

/* ── Flexbox ── */
.flex { display:flex }
.flex-col { display:flex;flex-direction:column }
.flex-center { display:flex;align-items:center }
.flex-between { display:flex;justify-content:space-between;align-items:center }
.flex-wrap { display:flex;flex-wrap:wrap }
.flex-end { display:flex;justify-content:flex-end }
.flex-1 { flex:1;min-width:0 }
.items-start { align-items:flex-start }
.items-center { align-items:center }
.items-stretch { align-items:stretch }
.justify-center { justify-content:center }
.self-start { align-self:flex-start }
.shrink-0 { flex-shrink:0 }

/* ── Gap ── */
.gap-1 { gap:var(--space-1) }
.gap-2 { gap:var(--space-2) }
.gap-3 { gap:var(--space-3) }
.gap-4 { gap:var(--space-4) }
.gap-sm { gap:var(--space-1) }
.gap-md { gap:var(--space-2) }

/* ── Border Radius ── */
.rounded-sm { border-radius:var(--radius-sm) }
.rounded-md { border-radius:var(--radius-md) }
.rounded-lg { border-radius:var(--radius-lg) }
.rounded-xl { border-radius:var(--radius-xl) }
.rounded-full { border-radius:9999px }

/* ── Sizing ── */
.w-full { width:100% }
.max-w-md { max-width:500px }
.max-w-lg { max-width:600px }
.hidden { display:none }

/* ── Form Elements ── */
.form-input {
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg);
  color:var(--text);
  font-size:var(--font-sm);
  min-height:var(--min-tap);
}
.form-select {
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg);
  color:var(--text);
  font-size:var(--font-sm);
  min-height:var(--min-tap);
}
.form-input-sm {
  width:2rem;
  padding:var(--space-1) 2px;
  text-align:center;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg);
  color:var(--text);
  font-size:var(--font-sm);
  font-weight:700;
}
.form-input-md {
  width:100px;
  padding:var(--space-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg);
  color:var(--text);
}
.form-input-narrow {
  width:50px;
  padding:var(--space-1);
  margin-left:var(--space-1);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg);
  color:var(--text);
}

/* ── Card / Container ── */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
}
.card-sm {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-3);
}
.section-bg {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-3) var(--space-4);
}
.surface {
  background:var(--bg3);
  border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3);
}

/* ── Button Variants ── */
.btn-card {
  padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-md);
  border:2px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font-weight:600;
  cursor:pointer;
  min-height:var(--min-tap);
}
.btn-sm-card {
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-md);
  border:2px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font-weight:600;
  cursor:pointer;
  font-size:var(--font-xs);
}
.btn-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--min-tap);
  height:var(--min-tap);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--bg2);
  color:var(--text);
  cursor:pointer;
  font-size:var(--font-base);
}
.btn-tag {
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-md);
  font-size:var(--font-xs);
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  border:1px solid;
}
.btn-tag-blue   { background:#e0f2fe;border-color:#93c5fd;color:#2563eb }
.btn-tag-purple { background:#f3e8ff;border-color:#c4b5fd;color:#7c3aed }
.btn-tag-green  { background:#ecfdf5;border-color:#86efac;color:#16a34a }
.btn-tag-red    { background:#fef2f2;border-color:#fca5a5;color:#dc2626 }

/* ── Grid ── */
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3) }
.grid-3 { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2) }

/* Sidebar groups */
.sidebar-group {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.sidebar-group:first-of-type {
  margin-top: 4px;
  border-top: none;
}
/* QI split mode */
.qi-staged-split-selected{background:rgba(64,144,224,0.15)!important;border-color:var(--accent)!important}

/* QI action buttons */
.qi-act-btn{flex:1;font-size:var(--font-sm)!important;padding:var(--space-2) var(--space-1)!important;text-align:center;line-height:1.3}
.qi-act-btn kbd{display:block;font-size:var(--font-xs);opacity:0.5;margin-top:2px;background:none;border:none;box-shadow:none;padding:0;font-family:inherit;font-weight:700}

/* Sidebar collapse */
.sidebar-title-mini{display:none}
.sidebar-collapse-row{display:none;text-align:right;padding:2px 8px 0}
.sidebar-collapse-btn{background:none;border:none;color:var(--text2);cursor:pointer;font-size:var(--font-sm);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:all .2s}
.sidebar-collapse-btn:hover{color:var(--text);background:var(--bg3)}
@media(min-width:769px){
  .sidebar-collapse-row{display:block}
  .sidebar{transition:width .25s ease}
  .main{transition:margin-left .25s ease}
  /* Collapsed state */
  .sidebar.mini{width:52px;overflow:visible}
  .sidebar.mini .sidebar-label{display:none}
  .sidebar.mini .sidebar-title-full{display:none}
  .sidebar.mini .sidebar-title-mini{display:block;margin:0;font-size:var(--font-xl);text-align:center}
  .sidebar.mini h2{padding:0}
  .sidebar.mini a{justify-content:center;padding:10px 0}
  .sidebar.mini a.active{padding-left:0;border-left:3px solid var(--accent)}
  .sidebar.mini .sidebar-icon{font-size:var(--font-lg)}
  .sidebar.mini .sidebar-collapse-row{text-align:center;padding:6px 0 0}
  .sidebar.mini .sidebar-collapse-btn{transform:rotate(180deg)}
  .sidebar.mini .sidebar-group{padding-top:8px;margin-top:8px}
  .sidebar.mini~.main{margin-left:52px}
}

/* Quick Input layout */
#pageQuickInput{max-width:100%}
.qi-topbar{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.qi-topbar .qi-game-btn{display:flex;align-items:center}
.qi-topbar input{box-sizing:border-box}
.qi-layout{display:flex;flex-direction:column;gap:10px}
.qi-col-main{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.qi-col-left,.qi-col-right{min-width:0}
.qi-col-staged{margin-bottom:12px}
/* === Tablet (769px+): staged + main side by side === */
@media(min-width:769px){
  .qi-layout{flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:10px}
  .qi-col-staged{width:160px;max-width:180px;flex-shrink:0;margin-bottom:0;max-height:calc(100vh - 40px);overflow-y:auto;display:block!important;position:sticky;top:20px}
  .qi-col-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
  /* 寬螢幕時 left+right 並排 */
  .qi-col-right .qi-type-btn,.qi-col-right .qi-combo-btn{padding:var(--space-2) 2px!important;font-size:var(--font-sm)!important}
  .qi-col-left .qi-nums{grid-template-columns:repeat(10,1fr)!important;gap:3px!important}
  .qi-col-left .qi-nums .qi-num{width:100%!important;max-width:2.5rem!important;aspect-ratio:1!important;height:auto!important;font-size:var(--font-sm)!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .qi-col-left.slip-card,.qi-col-right.slip-card,.qi-col-staged.slip-card{padding:12px}
}
/* === Desktop (1101px+): left+right side by side inside main === */
@media(min-width:1101px){
  .qi-col-main{flex-direction:row;align-items:flex-start}
  .qi-col-left{flex:1;min-width:280px}
  .qi-col-right{width:30%;min-width:220px;max-width:320px;flex-shrink:0;position:sticky;top:20px}
  .qi-col-staged{width:220px;max-width:250px;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto}
}
.qi-help-popover{display:none;position:absolute;right:0;top:100%;margin-top:4px;z-index:100;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;box-shadow:0 4px 12px rgba(0,0,0,0.15);white-space:nowrap}
.qi-help-popover.open{display:block}
.qi-help-popover kbd{font-weight:700;font-family:inherit;background:none;border:none;padding:0;text-decoration:underline;text-decoration-color:rgba(0,0,0,0.2)}

/* Skeleton loading */
.skeleton{background:var(--bg3);border-radius:var(--radius-md);animation:skeleton-pulse 1.5s ease-in-out infinite}
.skeleton-card{height:5rem;margin-bottom:var(--space-3)}
.skeleton-stat{height:70px;flex:1 1 130px}
@keyframes skeleton-pulse{0%,100%{opacity:.4}50%{opacity:.8}}

/* Reduced motion preference */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}

/* ══════ Accessibility: focus-visible (鍵盤導覽) ══════ */
/* 只在鍵盤 tab 時顯示 outline，滑鼠點擊不會干擾 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 隱藏 label 的 class（只給 screen reader 讀到） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}