:root{--bg: #EEF3EE;--surface: #FFFFFF;--surface-2: #F6F9F6;--ink: #12211C;--ink-soft: #5A6B63;--line: #DCE6E0;--primary: #0C5C4C;--primary-600: #0A4E41;--primary-ink: #E9F3EF;--accent: #E8A020;--accent-600: #D18E12;--accent-ink: #2A1B00;--danger: #C0432F;--ok: #2E7D5B;--radius: 14px;--radius-sm: 10px;--shadow: 0 1px 2px rgba(18,33,28,.05), 0 10px 28px rgba(18,33,28,.07);--shadow-sm: 0 1px 2px rgba(18,33,28,.08);--display: "Bricolage Grotesque", system-ui, sans-serif;--body: "Inter", system-ui, -apple-system, sans-serif;--app-w: 480px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;margin:0}a{color:inherit}button,input,select,textarea{font-family:inherit}.num{font-variant-numeric:tabular-nums}.app{max-width:var(--app-w);margin:0 auto;min-height:100%;background:var(--bg);display:flex;flex-direction:column;position:relative}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:14px 18px calc(14px + env(safe-area-inset-top));padding-top:max(14px,env(safe-area-inset-top));background:var(--primary);color:var(--primary-ink)}.topbar .brandmark{width:30px;height:30px;border-radius:9px;background:var(--primary-600);display:grid;place-items:center;flex:none}.topbar h1{font-size:18px;color:#fff;font-weight:800}.topbar .sub{font-size:12px;color:#bfdacf;margin-top:1px}.content{flex:1;padding:18px 18px 96px}.section-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:4px 0 10px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.card.pad{padding:16px}.stack>*+*{margin-top:12px}.row{display:flex;align-items:center;gap:12px}.between{display:flex;align-items:center;justify-content:space-between;gap:12px}.muted{color:var(--ink-soft)}.tiny{font-size:12px}label.field{display:block}label.field .lbl{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}.input{width:100%;padding:13px 14px;font-size:16px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);outline:none;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0c5c4c24}textarea.input{resize:vertical;min-height:72px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;font-size:15px;font-weight:600;border-radius:var(--radius-sm);transition:transform .04s ease,background .15s,opacity .15s}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-block{width:100%}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-600)}.btn-accent{background:var(--accent);color:var(--accent-ink)}.btn-accent:hover{background:var(--accent-600)}.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}.btn-ghost:hover{background:var(--surface-2)}.btn-danger{background:transparent;color:var(--danger);border-color:transparent}.nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--app-w);z-index:20;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0 12px;text-decoration:none;color:var(--ink-soft);font-size:11px;font-weight:600}.nav a.active{color:var(--primary)}.nav a.sell{color:var(--accent-600)}.nav a svg{width:22px;height:22px}.item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.item+.item{margin-top:8px}.item .thumb{width:44px;height:44px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden;flex:none;color:var(--ink-soft);font-weight:700;font-family:var(--display)}.item .thumb img{width:100%;height:100%;object-fit:cover}.pill{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft)}.pill.paid{background:#e4f3eb;color:#1e6b47}.pill.unpaid{background:#fbead2;color:#8a5a05}.empty{text-align:center;padding:40px 20px;color:var(--ink-soft)}.empty h3{font-size:18px;color:var(--ink);margin-bottom:6px}.msg{padding:11px 13px;border-radius:var(--radius-sm);font-size:14px}.msg.err{background:#fbeae6;color:#93301e}.msg.ok{background:#e4f3eb;color:#1e6b47}.auth{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:32px 22px;max-width:var(--app-w);margin:0 auto}.auth .logo{display:grid;place-items:center;margin-bottom:22px}.auth h1{font-size:30px;font-weight:800;text-align:center}.auth .tag{text-align:center;color:var(--ink-soft);margin:6px 0 26px}.receipt{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line)}.receipt .head{padding:22px 22px 18px;text-align:center;border-bottom:1px dashed var(--line)}.receipt .logo{width:64px;height:64px;border-radius:14px;margin:0 auto 12px;overflow:hidden;background:var(--primary);display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:26px}.receipt .logo img{width:100%;height:100%;object-fit:cover}.receipt .shop-name{font-family:var(--display);font-size:20px;font-weight:800}.receipt .shop-meta{font-size:12px;color:var(--ink-soft);margin-top:2px;line-height:1.5}.receipt .meta-row{display:flex;justify-content:space-between;padding:14px 22px 0;font-size:13px}.receipt .meta-row .k{color:var(--ink-soft)}.receipt .lines{padding:12px 22px}.receipt .line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--surface-2)}.receipt .line:last-child{border-bottom:0}.receipt .line .desc{font-weight:600}.receipt .line .qty{font-size:12px;color:var(--ink-soft);margin-top:2px}.receipt .totals{padding:6px 22px 18px}.receipt .totals .t{display:flex;justify-content:space-between;padding:5px 0;font-size:14px}.receipt .totals .grand{border-top:1px dashed var(--line);margin-top:6px;padding-top:12px;font-size:17px;font-weight:800;font-family:var(--display)}.receipt .foot{padding:16px 22px 20px;text-align:center;border-top:1px dashed var(--line)}.receipt .thanks{font-size:13px;color:var(--ink-soft)}.powered{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;font-weight:600;color:var(--ink-soft);background:var(--surface-2);padding:5px 10px;border-radius:999px}.powered b{color:var(--primary);font-weight:800}.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}.stepper button{width:34px;height:34px;border:0;background:var(--surface);font-size:18px;color:var(--ink);cursor:pointer}.stepper button:hover{background:var(--surface-2)}.stepper .n{min-width:30px;text-align:center;font-weight:700}.center-screen{min-height:100%;display:grid;place-items:center;padding:24px;text-align:center}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}