:root { color-scheme: light; --paper: #f3f1ea; --surface: #ffffff; --surface-sunk: #eae7dd; --ink: #1b2320; --ink-2: #5b665f; --ink-3: #898781; --line: #dcd8cd; --accent: #0e7c86; --accent-2: #17b6c4; --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-2)); --accent-ink: #ffffff; --accent-soft: #e0f0ee; --accent-glow: rgba(14,124,134,0.22); --good: #0ca30c; --warning: #b5790f; --warning-bg: #fdf1da; --critical: #d03b3b; --critical-bg: #fbe6e6; --series-1: #2a78d6; --series-2: #eb6834; --shadow: 0 1px 2px rgba(27,35,32,0.06), 0 6px 20px -8px rgba(27,35,32,0.18); --shadow-lift: 0 4px 10px -2px rgba(27,35,32,0.14), 0 14px 30px -10px rgba(27,35,32,0.22); --chip-hue-sat: 62%; --chip-hue-bg-l: 92%; --chip-hue-fg-l: 34%; --chip-hue-line-l: 80%; --radius: 10px; --motion: 0.16s cubic-bezier(0.22, 0.9, 0.35, 1); } /* Dark palette applies two ways: automatically when the OS prefers dark and the user hasn't explicitly chosen light (the media-query block — this is what a first-time visitor or a no-JS request gets), or unconditionally once a user has explicitly picked a theme via the sidebar switch, which stamps data-theme="dark"/"light" on and is read before first paint (see the inline script at the top of ) so there's no flash of the wrong theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #14181a; --surface: #1c2124; --surface-sunk: #22282b; --ink: #f0efe9; --ink-2: #b7bcb6; --ink-3: #82887f; --line: #2c3336; --accent: #35aab5; --accent-2: #55d6d9; --accent-ink: #08191a; --accent-soft: #17393b; --accent-glow: rgba(53,170,181,0.28); --good: #2fbe2f; --warning: #fab219; --warning-bg: #392c10; --critical: #e66767; --critical-bg: #3a1c1c; --series-1: #3987e5; --series-2: #d95926; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 20px -8px rgba(0,0,0,0.5); --shadow-lift: 0 4px 12px -2px rgba(0,0,0,0.4), 0 16px 32px -10px rgba(0,0,0,0.55); --chip-hue-sat: 46%; --chip-hue-bg-l: 22%; --chip-hue-fg-l: 76%; --chip-hue-line-l: 32%; } } :root[data-theme="dark"] { color-scheme: dark; --paper: #14181a; --surface: #1c2124; --surface-sunk: #22282b; --ink: #f0efe9; --ink-2: #b7bcb6; --ink-3: #82887f; --line: #2c3336; --accent: #35aab5; --accent-2: #55d6d9; --accent-ink: #08191a; --accent-soft: #17393b; --accent-glow: rgba(53,170,181,0.28); --good: #2fbe2f; --warning: #fab219; --warning-bg: #392c10; --critical: #e66767; --critical-bg: #3a1c1c; --series-1: #3987e5; --series-2: #d95926; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 6px 20px -8px rgba(0,0,0,0.5); --shadow-lift: 0 4px 12px -2px rgba(0,0,0,0.4), 0 16px 32px -10px rgba(0,0,0,0.55); --chip-hue-sat: 46%; --chip-hue-bg-l: 22%; --chip-hue-fg-l: 76%; --chip-hue-line-l: 32%; } @media (prefers-reduced-motion: reduce) { :root { --motion: 0s; } .stat-tile .v, .product-card, .card, tbody tr, .nav-btn, .btn, .chip { transition-duration: 0.001s !important; animation-duration: 0.001s !important; } } * { box-sizing: border-box; } /* The browser's own [hidden] rule loses to any author rule of equal specificity (like .overlay's own display:flex below) — without this, every modal stays visually stacked on screen even while "hidden". */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; } .num { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 600; } button { font: inherit; color: inherit; } input, select, textarea { font: inherit; color: inherit; } #app { display: flex; min-height: 100vh; } /* ---- Sidebar ---- */ .sidebar { width: 208px; flex: none; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 12px; gap: 4px; position: sticky; top: 0; height: 100vh; } .shop-id { padding: 6px 10px 16px; } .shop-id .name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } .shop-id .sub { color: var(--ink-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; } .nav-btn { display: flex; align-items: center; gap: 10px; border: none; background: none; text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--ink-2); font-weight: 500; font-size: 13.5px; transition: background var(--motion), color var(--motion), transform var(--motion), box-shadow var(--motion); } .nav-btn:hover { background: var(--surface-sunk); color: var(--ink); transform: translateX(1px); } .nav-btn.active { background: var(--accent-gradient); color: var(--accent-ink); font-weight: 600; box-shadow: 0 3px 10px -3px var(--accent-glow); } .nav-btn.active:hover { transform: none; } .nav-btn .ic { width: 18px; text-align: center; flex: none; } .sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; } .sidebar-user { padding: 8px 10px; font-size: 11.5px; color: var(--ink-3); border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; } .theme-toggle-row { padding: 9px 10px; margin-bottom: 2px; } .theme-toggle-row .t-label { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 500; font-size: 13.5px; } .theme-toggle-row .ic { width: 18px; text-align: center; flex: none; } main { flex: 1; min-width: 0; padding: 22px 28px 60px; } .view { display: none; max-width: 1180px; } .view.active { display: block; } .view-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .view-head h1 { font-size: 21px; } .view-head .meta { color: var(--ink-3); font-size: 12.5px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: box-shadow var(--motion), transform var(--motion); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 13.5px; color: var(--ink); transition: border-color var(--motion), background var(--motion), transform var(--motion), box-shadow var(--motion), filter var(--motion); } .btn:hover { border-color: var(--ink-3); transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(0.97); } .btn.primary { background: var(--accent-gradient); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: 0 2px 8px -2px var(--accent-glow); } .btn.primary:hover { filter: brightness(1.07); box-shadow: 0 6px 16px -4px var(--accent-glow); transform: translateY(-1px); } .btn.primary:active { transform: translateY(0) scale(0.97); } .btn.primary:disabled { opacity: 0.45; cursor: not-allowed; filter: none; box-shadow: none; transform: none; } .btn.primary:disabled.is-loading { opacity: 0.85; } /* the spinner already communicates "busy" — no need to also dim it */ .btn-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin 0.6s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } .btn.ghost { background: none; border-color: transparent; } .btn.danger { color: var(--critical); } .btn.sm { padding: 5px 10px; font-size: 12.5px; } .btn.icon { padding: 7px 9px; } .btn.block { width: 100%; } input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], input[type="date"], select, textarea { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 7px; padding: 8px 10px; width: 100%; } textarea { resize: vertical; } input:focus, select:focus, textarea:focus, button:focus-visible, .nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; } .pill.good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); } .pill.warning { background: var(--warning-bg); color: var(--warning); } .pill.critical { background: var(--critical-bg); color: var(--critical); } .pill.neutral { background: var(--surface-sunk); color: var(--ink-2); } .pill .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: none; } #toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 90; } .toast { background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow); animation: toast-in 0.18s ease-out; } .toast.err { background: var(--critical); color: #fff; } @keyframes toast-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } } /* ================= SELL ================= */ .sell-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; } .search-row { display: flex; gap: 8px; margin-bottom: 12px; } .search-row input { flex: 1; } .chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .chip { border: 1px solid var(--line); background: var(--surface); padding: 5px 12px; border-radius: 99px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); transition: background var(--motion), border-color var(--motion), color var(--motion), transform var(--motion), box-shadow var(--motion); } .chip:hover { border-color: var(--ink-3); transform: translateY(-1px); } .chip:active { transform: translateY(0) scale(0.96); } .chip.active { background: var(--accent-gradient); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 2px 8px -2px var(--accent-glow); } /* Category chips carry their own hue (set via --hue in JS), so a category family reads consistently everywhere it shows up — same soft tint every time, distinct from its neighbors, in both themes. */ .chip.hued { background: hsl(var(--hue, 200) var(--chip-hue-sat) var(--chip-hue-bg-l)); color: hsl(var(--hue, 200) var(--chip-hue-sat) var(--chip-hue-fg-l)); border-color: hsl(var(--hue, 200) var(--chip-hue-sat) var(--chip-hue-line-l)); } .chip.hued.active { background: hsl(var(--hue, 200) calc(var(--chip-hue-sat) + 6%) 46%); color: #fff; border-color: hsl(var(--hue, 200) calc(var(--chip-hue-sat) + 6%) 40%); box-shadow: 0 2px 8px -2px hsl(var(--hue, 200) var(--chip-hue-sat) 46% / 0.35); } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .product-card-wrap { position: relative; } .pcard-info { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 99px; z-index: 2; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color var(--motion), border-color var(--motion); } .pcard-info:hover { color: var(--accent); border-color: var(--accent); } .product-card { text-align: left; padding: 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-height: 96px; position: relative; overflow: hidden; transition: border-color var(--motion), box-shadow var(--motion), transform var(--motion); } .product-card:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--shadow-lift); transform: translateY(-2px); } .product-card:active:not(:disabled) { transform: translateY(-1px) scale(0.98); } .product-card:disabled { opacity: 0.4; cursor: not-allowed; } .product-card.has-category::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: hsl(var(--hue) 65% 55%); } .product-card .pname { font-weight: 600; font-size: 13.5px; line-height: 1.25; } .product-card .pmeta { color: var(--ink-3); font-size: 11.5px; display: flex; align-items: center; } .cat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: hsl(var(--hue) 65% 55%); margin-right: 5px; flex: none; } .product-card .pfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; } .product-card .price { font-weight: 600; } .empty-state { padding: 40px 20px; text-align: center; color: var(--ink-3); } .cart-panel { position: sticky; top: 22px; display: flex; flex-direction: column; gap: 12px; padding: 16px; } .cart-head { display: flex; align-items: center; justify-content: space-between; } .cart-head h2 { font-size: 14.5px; } .customer-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; } .customer-slot button { flex: none; } .cart-lines { display: flex; flex-direction: column; gap: 8px; max-height: 34vh; overflow-y: auto; } .cart-line { display: flex; align-items: center; gap: 8px; font-size: 13px; } .cart-line .cl-name { flex: 1; min-width: 0; } .cart-line .cl-name .n { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-line .cl-name .p { color: var(--ink-3); font-size: 11.5px; } .qty-stepper { display: flex; align-items: center; gap: 4px; } .qty-stepper button { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; } .qty-stepper .q { width: 18px; text-align: center; } .cart-line .cl-sub { width: 62px; text-align: right; font-weight: 600; } .cart-empty { color: var(--ink-3); font-size: 12.5px; padding: 10px 0; text-align: center; } .pay-row { display: flex; gap: 6px; } .pay-btn { flex: 1; padding: 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); transition: background var(--motion), border-color var(--motion), color var(--motion), box-shadow var(--motion), transform var(--motion); } .pay-btn:active { transform: scale(0.97); } .pay-btn.active { background: var(--accent-gradient); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 10px -3px var(--accent-glow); } .cart-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); } .cart-total .lbl { color: var(--ink-2); font-size: 13px; } .cart-total .amt { font-size: 22px; font-weight: 700; } .cart-total.sub { padding-top: 4px; border-top: none; } .cart-total.sub .lbl, .cart-total.sub .amt { font-size: 12.5px; font-weight: 500; color: var(--ink-2); } .discount-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .discount-inline { display: flex; align-items: center; gap: 6px; } .discount-inline select { width: auto; padding: 5px 6px; font-size: 12.5px; } .discount-inline input[type="number"] { width: 72px; padding: 5px 8px; font-size: 12.5px; } .today-strip { display: flex; gap: 14px; padding: 10px 16px; margin-bottom: 14px; flex-wrap: wrap; } .today-strip .stat { display: flex; flex-direction: column; } .today-strip .stat .v { font-weight: 700; font-size: 15px; } .today-strip .stat .k { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } /* ================= TABLES ================= */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { text-align: left; color: var(--ink-3); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px; border-bottom: 1px solid var(--line); } td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; } tr:last-child td { border-bottom: none; } tbody tr { transition: background var(--motion); } tbody tr:hover { background: var(--surface-sunk); } .table-wrap { overflow-x: auto; } .row-actions { display: flex; gap: 4px; justify-content: flex-end; } .table-toolbar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; } .table-toolbar input[type="search"] { max-width: 260px; } .name-cell { display: flex; align-items: center; gap: 10px; } .name-cell .primary { font-weight: 500; } .clickable { cursor: pointer; } /* ================= REPORTS ================= */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat-tile { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; } .stat-tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-gradient); opacity: 0.85; } .stat-tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); } .stat-tile .k { color: var(--ink-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; } .stat-tile .v { font-size: 22px; font-weight: 700; } .report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } @media (max-width: 860px) { .report-cols { grid-template-columns: 1fr; } .sell-layout { grid-template-columns: 1fr; } .cart-panel { position: static; } } .panel { padding: 16px; margin-bottom: 16px; } .panel h3 { font-size: 13.5px; margin-bottom: 12px; } .bar-row { display: grid; grid-template-columns: 108px 1fr 64px; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12.5px; } .bar-row .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .bar-track { height: 10px; background: var(--surface-sunk); border-radius: 4px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 4px; width: 0; transition: width 0.5s cubic-bezier(0.22, 0.9, 0.35, 1); } .bar-row .val { text-align: right; font-weight: 600; } .legend-row { display: flex; gap: 16px; margin-bottom: 10px; font-size: 12px; color: var(--ink-2); } .legend-row .sw { display: inline-flex; align-items: center; gap: 5px; } .legend-row .sw i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } .date-presets { display: flex; gap: 6px; flex-wrap: wrap; } .report-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .staff-filter { position: relative; } .staff-filter-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 190px; max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 10px; } .staff-filter-panel.open { display: block; } .staff-filter-panel label { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13px; cursor: pointer; } .staff-filter-panel input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } .staff-filter-panel hr { border: none; border-top: 1px solid var(--line); margin: 6px 0; } .custom-range-row { display: none; align-items: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .custom-range-row.open { display: flex; } .custom-range-row label.field { min-width: 140px; } /* ================= MODAL ================= */ .overlay { position: fixed; inset: 0; background: rgba(15,18,17,0.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; } .modal { width: 100%; max-width: 420px; padding: 20px; max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .modal.wide { max-width: 560px; } .modal-head { display: flex; align-items: center; justify-content: space-between; } .modal-head h2 { font-size: 16px; } .form-grid { display: flex; flex-direction: column; gap: 12px; } .form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; } .customer-pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; } .customer-pick-item { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 7px; cursor: pointer; } .customer-pick-item:hover { background: var(--surface-sunk); } .customer-pick-item .n { font-weight: 500; } .customer-pick-item .p { color: var(--ink-3); font-size: 11.5px; } /* ---- Photos ---- */ .thumb { width: 100%; aspect-ratio: 4/3; border-radius: 7px; object-fit: cover; background: var(--surface-sunk); display: block; } .thumb-placeholder { width: 100%; aspect-ratio: 4/3; border-radius: 7px; background: var(--surface-sunk); color: var(--ink-3); display: flex; align-items: center; justify-content: center; font-size: 20px; } .thumb-sm { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex: none; } .thumb-sm-placeholder { width: 34px; height: 34px; border-radius: 6px; background: var(--surface-sunk); color: var(--ink-3); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; } .photo-field { display: flex; align-items: center; gap: 12px; } .photo-field .thumb, .photo-field .thumb-placeholder { width: 72px; aspect-ratio: 1; flex: none; } .photo-field .photo-actions { display: flex; flex-direction: column; gap: 6px; } .photo-field input[type="file"] { display: none; } /* ---- Help ---- */ .help-article { padding: 0; margin-bottom: 10px; overflow: hidden; } .help-article summary { cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 600; font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .help-article summary::-webkit-details-marker { display: none; } .help-article summary::after { content: "+"; color: var(--ink-3); font-weight: 400; font-size: 16px; flex: none; } .help-article[open] summary::after { content: "\2212"; } .help-article summary:hover { background: var(--surface-sunk); } .help-body { padding: 0 16px 16px; color: var(--ink-2); font-size: 13px; } .help-body p { margin: 0 0 10px; } .help-body p:last-child { margin-bottom: 0; } .help-body ul { margin: 0 0 10px; padding-left: 18px; } .help-body li { margin-bottom: 5px; } .help-body code { background: var(--surface-sunk); padding: 1px 5px; border-radius: 4px; font-family: "IBM Plex Mono", monospace; font-size: 12px; } .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; } .toggle-row .t-label { font-size: 12.5px; font-weight: 500; } .switch { position: relative; width: 36px; height: 21px; flex: none; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch .track { position: absolute; inset: 0; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: 99px; transition: background 0.15s; } .switch .knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 99px; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.15s; } .switch input:checked + .track { background: var(--accent); border-color: var(--accent); } .switch input:checked + .track .knob { transform: translateX(15px); } .settings-section + .settings-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .settings-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin-bottom: 10px; } .export-column-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } .export-column-list label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; } .export-column-list input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } /* ================= RECEIPT ================= */ .receipt-modal { width: 100%; max-width: 340px; padding: 0; background: var(--surface); } .receipt-tear { height: 10px; background: linear-gradient(-45deg, var(--paper) 5px, transparent 0) 0 5px, linear-gradient(45deg, var(--paper) 5px, transparent 0) 0 5px; background-repeat: repeat-x; background-size: 10px 10px; } .receipt-body { padding: 20px 22px 8px; font-family: "IBM Plex Mono", monospace; } .receipt-shop { text-align: center; margin-bottom: 12px; } .receipt-shop .rn { font-weight: 700; font-size: 15px; } .receipt-shop .rs { color: var(--ink-3); font-size: 11px; margin-top: 2px; } .receipt-meta { font-size: 11px; color: var(--ink-2); display: flex; justify-content: space-between; margin-bottom: 10px; } .receipt-rule { border-top: 1px dashed var(--line); margin: 10px 0; } .receipt-item { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; gap: 8px; } .receipt-item .rn2 { flex: 1; } .receipt-item .rq { color: var(--ink-3); } .receipt-total-row { display: flex; justify-content: space-between; font-weight: 700; font-size: 15px; margin: 10px 0 4px; } .receipt-pay { font-size: 11.5px; color: var(--ink-2); text-align: center; margin-bottom: 4px; } .receipt-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 22px 22px; } .receipt-actions .btn { flex: 1; min-width: 120px; } .email-row { display: flex; gap: 6px; padding: 0 22px 4px; } .email-row input { flex: 1; } @media print { body * { visibility: hidden; } .receipt-modal, .receipt-modal * { visibility: visible; } .receipt-modal { position: fixed; inset: 0; max-width: 100%; box-shadow: none; } .overlay { position: static; background: none; padding: 0; } .receipt-actions, .email-row { display: none; } } code { background: var(--surface-sunk); padding: 1px 5px; border-radius: 4px; font-family: "IBM Plex Mono", monospace; font-size: 0.92em; } .helper { color: var(--ink-3); font-size: 11.5px; } .banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 8px; background: var(--warning-bg); color: var(--warning); font-size: 12.5px; margin-bottom: 16px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ================= AUTH PAGES (login / setup) ================= */ .auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .auth-card { width: 100%; max-width: 380px; padding: 32px 30px; display: flex; flex-direction: column; gap: 18px; } .auth-brand { text-align: center; } .auth-brand .mark { width: 108px; height: 108px; object-fit: contain; margin-bottom: 14px; border-radius: 20px; } .auth-brand h1 { font-size: 18px; } .auth-brand p { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; } .auth-form { display: flex; flex-direction: column; gap: 12px; } .auth-error { background: var(--critical-bg); color: var(--critical); font-size: 12.5px; padding: 8px 12px; border-radius: 7px; display: none; } .auth-error.show { display: block; } .auth-foot { text-align: center; color: var(--ink-3); font-size: 12px; } .auth-credit { text-align: center; color: var(--ink-3); font-size: 11px; margin-top: 16px; opacity: 0.8; }