:root { color-scheme: light dark; --bg:#f5f5f7; --surface:#fff; --surface-2:#f0f1f4; --text:#1d1d1f; --sub:#6e6e73; --line:#dedee3; --blue:#007aff; --green:#34c759; --red:#ff3b30; --shadow:0 10px 30px rgba(0,0,0,.08); }
@media (prefers-color-scheme: dark) { :root { --bg:#000; --surface:#1c1c1e; --surface-2:#2c2c2e; --text:#f5f5f7; --sub:#98989d; --line:#3a3a3c; --blue:#0a84ff; --green:#30d158; --red:#ff453a; --shadow:none; } }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; width:100%; min-height:100%; background:var(--bg); color:var(--text); font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang TC", sans-serif; overscroll-behavior:none; }
body { min-height:100vh; min-height:100dvh; }
button { font:inherit; color:inherit; border:0; cursor:pointer; touch-action:manipulation; }
#app { min-height:100vh; min-height:100dvh; padding:max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); }
.home { max-width:920px; margin:auto; padding-top:5vh; }
.brand { display:flex; justify-content:space-between; align-items:center; margin-bottom:42px; }.brand h1 { font-size:36px; letter-spacing:-1.4px; margin:0; }.offline { color:var(--sub); font-size:16px; }
.summary { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:28px; }.metric { background:var(--surface); border-radius:24px; padding:30px; box-shadow:var(--shadow); }.metric label { color:var(--sub); font-size:18px; }.metric strong { display:block; font-size:48px; letter-spacing:-1.5px; margin-top:12px; }
.home-actions { display:grid; grid-template-columns:2fr 1fr; gap:18px; }.action { min-height:120px; border-radius:24px; background:var(--surface); font-size:26px; font-weight:700; box-shadow:var(--shadow); }.action.primary { color:white; background:var(--blue); }
.data-actions { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:28px; }.data-actions button { min-height:48px; background:transparent; color:var(--blue); font-size:16px; font-weight:600; }
.pos { display:grid; grid-template-columns:minmax(390px, 1fr) minmax(360px, .92fr); gap:20px; height:calc(100dvh - max(36px, env(safe-area-inset-top) + env(safe-area-inset-bottom))); max-height:900px; }
.left, .right { min-height:0; display:flex; flex-direction:column; }.pos > .left { grid-column:2; }.pos > .right { grid-column:1; grid-row:1; }.topbar { min-height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 4px 12px; }.back { background:transparent; color:var(--blue); font-size:19px; padding:12px 4px; }.screen-label { font-size:17px; color:var(--sub); font-weight:600; }.display { background:var(--surface); border-radius:24px; min-height:126px; padding:20px 26px; display:flex; flex-direction:column; justify-content:center; box-shadow:var(--shadow); margin-bottom:16px; }.display small { color:var(--sub); font-size:17px; }.amount { font-size:55px; line-height:1.1; font-weight:750; letter-spacing:-2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.keypad { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; flex:1; }.keypad.is-disabled { pointer-events:none; opacity:.38; }.key { background:var(--surface); border-radius:20px; min-height:68px; font-size:32px; font-weight:600; box-shadow:var(--shadow); }.key:active, .action:active, .command:active { transform:scale(.97); opacity:.8; }.key.delete { color:var(--red); font-size:28px; }
.commands { display:grid; grid-template-columns:1fr 1.25fr 1.25fr; gap:12px; margin-top:14px; }.command { min-height:110px; border-radius:20px; background:var(--surface-2); font-size:19px; font-weight:700; }.command.add-item { background:#F777E6; color:#fff; }.command.checkout { background:var(--green); color:#fff; }.command.clear { background:#F00; color:#fff; }
.quick-pay { display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin:0 0 12px; }.quick-pay button { background:var(--surface-2); color:var(--blue); min-height:42px; border-radius:13px; font-weight:700; font-size:16px; }
.right { background:var(--surface); border-radius:26px; padding:24px; box-shadow:var(--shadow); }.order-title { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:16px; }.order-title h2 { font-size:24px; margin:0; }.count { color:var(--sub); font-size:16px; }.items { flex:1; overflow:auto; padding:8px 0; }.empty { color:var(--sub); text-align:center; padding-top:35%; font-size:18px; }.item { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; padding:14px 2px; border-bottom:1px solid var(--line); }.item-value { font-variant-numeric:tabular-nums; font-size:28px; font-weight:650; }.item-btn { border-radius:12px; padding:10px 12px; background:var(--surface-2); color:var(--blue); font-size:15px; font-weight:600; }.item-btn.remove { color:var(--red); }.total { border-top:1px solid var(--line); padding-top:18px; }.total-row { display:flex; justify-content:space-between; color:var(--sub); font-size:17px; margin-bottom:9px; }.total-row.big { color:var(--text); font-size:27px; font-weight:700; margin:0; }.payment-panel { flex:1; display:flex; flex-direction:column; justify-content:center; gap:16px; }.payment-total { color:var(--sub); font-size:20px; text-align:center; }.payment-total strong { display:block; color:var(--text); font-size:56px; letter-spacing:-2px; }.notice { background:color-mix(in srgb, var(--red) 14%, transparent); color:var(--red); padding:15px 18px; border-radius:16px; font-weight:650; font-size:18px; }.receipt { background:var(--surface-2); border-radius:20px; padding:24px; }.receipt div { display:flex; justify-content:space-between; font-size:21px; margin:10px 0; }.receipt .change { color:var(--green); font-size:32px; font-weight:750; border-top:1px solid var(--line); padding-top:16px; margin-top:18px; }.finish { background:var(--green); color:#fff; border-radius:18px; min-height:82px; font-size:23px; font-weight:750; }
.history { max-width:920px; margin:auto; }.history header { display:flex; align-items:center; gap:18px; margin-bottom:24px; }.history h1 { margin:0; font-size:30px; }.history-section { margin-bottom:34px; }.history-section-title { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:14px; }.history-section-title h2 { margin:0 0 4px; font-size:25px; }.history-section-title span { color:var(--sub); }.excel-button { min-height:46px; padding:0 18px; border-radius:14px; background:#168348; color:white; font-weight:700; }.orders { display:grid; gap:12px; }.order-card { background:var(--surface); border-radius:20px; padding:20px 22px; box-shadow:var(--shadow); display:grid; grid-template-columns:1fr auto; }.order-card time, .order-card span { color:var(--sub); font-size:16px; }.order-card strong { display:block; font-size:28px; margin-top:7px; }.order-card .right-align { text-align:right; }.history-empty { padding:34px; background:var(--surface); border-radius:20px; box-shadow:var(--shadow); }
.pos.sale-pos { grid-template-rows:62px minmax(0, 1fr); }.pos.sale-pos > .order-topbar { grid-column:1; grid-row:1; padding-bottom:0; }.pos.sale-pos > .right { grid-column:1; grid-row:2; }.pos.sale-pos > .left { grid-column:2; grid-row:1 / span 2; }
.delete-order { display:block; margin:14px 0 0 auto; padding:8px 0; color:var(--red); background:transparent; font-size:15px; font-weight:700; }
@media (max-width: 760px), (orientation:portrait) { .pos { grid-template-columns:1fr; height:auto; max-height:none; }.pos.sale-pos { grid-template-rows:none; }.pos > .left, .pos > .right, .pos.sale-pos > .left, .pos.sale-pos > .order-topbar { grid-column:auto; grid-row:auto; }.left { min-height:610px; }.right { min-height:420px; }.home { padding-top:3vh; }.amount { font-size:46px; }.order-card { grid-template-columns:1fr; gap:12px; }.order-card .right-align { text-align:left; }.delete-order { margin-left:0; }.history-section-title { align-items:flex-end; } }