/* Abeach101 POS 示範版：共用樣式 */
:root { --bg:#f4f1ec; --card:#fff; --ink:#1b1b1b; --muted:#555; --line:#d6d0c6; --brand:#0d5c63; --brand2:#e07a2e; --ok:#1f7a3a; --warn:#b54708; --bad:#b42318; --busy:#fde7d0; }
* { box-sizing: border-box; }
body { margin:0; font-family:"Noto Sans CJK TC","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; color:var(--ink); background:var(--bg); font-size:16px; }
h1 { font-size:22px; margin:0 0 12px; } h2 { font-size:18px; margin:16px 0 8px; } h3 { font-size:16px; margin:8px 0; }
.topbar { display:flex; align-items:center; gap:16px; padding:8px 16px; background:var(--brand); color:#fff; }
.brand { font-weight:700; font-size:18px; white-space:nowrap; }
.header-slot { display:flex; gap:12px; align-items:center; flex:1; }
.header-right { display:flex; gap:10px; align-items:center; }
.demo-badge { display:inline-block; background:#ffe08a; color:#3d2e00; font-size:12px; font-weight:700; padding:2px 8px; border-radius:6px; margin-left:6px; vertical-align:middle; }
.chip { padding:3px 10px; border-radius:999px; font-size:13px; font-weight:700; }
.chip.online { background:#d1fadf; color:#054f31; } .chip.offline { background:#fee4e2; color:#7a1a14; }
.net-toggle { display:flex; align-items:center; gap:4px; font-size:14px; background:rgba(255,255,255,.15); padding:4px 8px; border-radius:6px; cursor:pointer; }
.nav { display:flex; gap:4px; padding:6px 12px; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.nav-btn { border:0; background:transparent; padding:8px 14px; border-radius:8px; font-size:15px; cursor:pointer; color:var(--ink); font-family:inherit; }
.nav-btn.active { background:var(--brand); color:#fff; }
.main { padding:16px; }
.muted { color:var(--muted); } .error { color:var(--bad); }
.btn { font-family:inherit; font-size:15px; padding:8px 14px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; }
.btn.primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.accent { background:var(--brand2); color:#fff; border-color:var(--brand2); }
.btn.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.small { padding:4px 10px; font-size:13px; }
.icon-btn { border:0; background:none; font-size:20px; cursor:pointer; }
input, select, textarea { font-family:inherit; font-size:15px; padding:7px 9px; border:1px solid #8a8378; border-radius:6px; }
/* 高對比下拉選單：深色文字＋白底（對比 18:1 以上） */
select.hi-contrast, select { color:#111111; background-color:#ffffff; }
select option { color:#111111; background:#ffffff; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.split { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.grid-table { width:100%; border-collapse:collapse; background:#fff; }
.grid-table th, .grid-table td { border-bottom:1px solid var(--line); padding:7px 9px; text-align:left; font-size:14px; }
.grid-table th { background:#efebe4; }
.toasts { position:fixed; left:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:1000; }
.toast { background:#1b1b1b; color:#fff; padding:10px 14px; border-radius:8px; font-size:14px; max-width:380px; }
.toast.ok { background:var(--ok); } .toast.warn { background:var(--warn); } .toast.bad { background:var(--bad); }
.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center; padding-top:40px; z-index:900; overflow:auto; }
.modal { background:#fff; border-radius:12px; width:520px; max-width:96vw; box-shadow:0 10px 40px rgba(0,0,0,.3); }
.modal.wide { width:900px; }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; }
.modal-body { padding:14px 16px; max-height:70vh; overflow:auto; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--line); }
.notice { background:#fff4e5; border:1px solid #f5c48a; color:#5a2d00; padding:8px 12px; border-radius:8px; font-size:14px; }
.notice.bad { background:#fee4e2; border-color:#f3a59d; color:#7a1a14; }
.notice.ok { background:#e3f7ea; border-color:#9ad6ad; color:#0b4a22; }
.tabs { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.tab { padding:6px 12px; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; font-family:inherit; font-size:14px; color:var(--ink); }
.tab.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.stat { display:inline-block; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 16px; margin:0 10px 10px 0; min-width:150px; }
.stat b { display:block; font-size:22px; }