:root {
  --bg: #edf2f7; --card: #fff; --soft: #f7f9fc; --text: #172033; --muted: #66758a;
  --line: #dbe3ec; --primary: #0f172a; --blue: #2563eb; --blue-dark: #1d4ed8;
  --green: #15803d; --red: #dc2626; --amber: #d97706; --shadow: 0 8px 24px rgba(15,23,42,.07);
  --radius: 14px; --safe-bottom: env(safe-area-inset-bottom, 0px);
}
body.dark { --bg:#0b1120; --card:#151e2f; --soft:#0e1728; --text:#f1f5f9; --muted:#9aa9bd; --line:#2d3a4f; --shadow:0 12px 32px rgba(0,0,0,.3); }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; padding-bottom:calc(88px + var(--safe-bottom)); }
button,input,select,textarea { font:inherit; } button { cursor:pointer; }
:focus-visible { outline:3px solid rgba(37,99,235,.35); outline-offset:2px; }
.app-header { position:sticky; top:0; z-index:50; background:rgba(15,23,42,.97); color:#fff; box-shadow:0 3px 16px rgba(15,23,42,.22); backdrop-filter:blur(10px); }
.header-inner { max-width:1420px; margin:auto; padding:11px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand h1 { margin:0; font-size:1.05rem; letter-spacing:-.02em; display:flex; gap:8px; align-items:center; white-space:nowrap; }
.brand small { display:block; margin-top:2px; color:rgba(255,255,255,.68); font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.header-actions { display:flex; gap:8px; align-items:center; }
.back-link,.icon-btn { color:rgba(255,255,255,.88); background:transparent; border:1px solid rgba(255,255,255,.2); border-radius:999px; text-decoration:none; padding:8px 10px; font-size:.8rem; line-height:1; display:inline-flex; align-items:center; gap:6px; min-height:36px; }
.icon-btn { min-width:36px; justify-content:center; } .back-link:hover,.icon-btn:hover { background:rgba(255,255,255,.1); }
.wrap { max-width:1420px; margin:auto; padding:18px 20px 32px; }
.workspace { display:grid; gap:22px; } .editor-column { min-width:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:15px; margin-bottom:12px; }
.hero { background:linear-gradient(135deg,var(--card),rgba(37,99,235,.07)); border-color:rgba(37,99,235,.2); }
.hero-top { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }
.hero h2 { margin:0; font-size:1rem; letter-spacing:-.02em; } .hero p { margin:3px 0 0; color:var(--muted); font-size:.83rem; line-height:1.4; }
.total-box { text-align:right; border-left:1px solid var(--line); padding-left:16px; min-width:128px; }
.total-label { display:block; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.total-value { display:block; margin-top:2px; font-size:1.35rem; font-weight:900; letter-spacing:-.03em; color:var(--green); white-space:nowrap; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }.chip { border:1px solid var(--line); background:var(--soft); color:var(--muted); padding:4px 8px; border-radius:999px; font-size:.7rem; font-weight:750; }
.btn { border:0; border-radius:10px; min-height:42px; padding:10px 13px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; transition:transform .08s,background .18s,box-shadow .18s; user-select:none; }
.btn:active { transform:translateY(1px); }.btn-blue{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.2)}.btn-blue:hover{background:var(--blue-dark)}.btn-dark{background:var(--primary);color:#fff}.btn-green{background:var(--green);color:#fff}.btn-amber{background:var(--amber);color:#fff}.btn-red{background:var(--red);color:#fff}.btn-light{background:var(--card);color:var(--text);border:1px solid var(--line)}.btn-soft{background:var(--soft);color:var(--text);border:1px solid var(--line)}.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}.btn-small{min-height:34px;padding:6px 9px;border-radius:8px;font-size:.78rem}.btn-block{width:100%}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}.grid-actions{display:grid;grid-template-columns:1.2fr 1fr;gap:9px;margin-top:11px}.field label,.label{display:block;color:var(--muted);font-weight:800;font-size:.73rem;letter-spacing:.02em;margin-bottom:4px}
input,select,textarea{width:100%;border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:9px;min-height:40px;padding:9px 10px;outline:none}textarea{min-height:70px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.13);background:var(--card)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.section-head h2,.section-head h3{margin:0;font-size:.98rem;letter-spacing:-.015em}.muted{color:var(--muted)}.tiny{font-size:.78rem}
.settings-grid{display:grid;gap:9px}.check-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px;min-height:44px}.check-row span{font-weight:750;font-size:.85rem}.check-row small{color:var(--muted);display:block;margin-top:2px;font-weight:500}.check-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--blue);min-height:auto;flex:none}
.item-form{background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:11px;margin-top:9px}.item-list{display:grid;gap:7px}.item{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.item strong{display:block;line-height:1.25;overflow-wrap:anywhere}.item small{color:var(--muted)}.item-price{color:var(--green);font-weight:900;white-space:nowrap}.item-actions{display:flex;gap:5px;margin-top:6px}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.summary-line{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:9px}.summary-line small{display:block;color:var(--muted);font-weight:750;margin-bottom:2px}.summary-line strong{font-size:.96rem}.summary-line:last-child{border-color:rgba(21,128,61,.35);background:rgba(21,128,61,.07)}.summary-line:last-child strong{color:var(--green);font-size:1.12rem}
.pay-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}.pay{background:var(--soft);border:1px solid var(--line);color:var(--text);border-radius:9px;min-height:42px;font-weight:800}.pay.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.2)}
.history-list{display:grid;gap:7px}.history-item{border:1px solid var(--line);background:var(--soft);border-radius:10px;padding:10px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.history-item strong{display:block}.history-item small{color:var(--muted)}.history-actions{display:flex;gap:5px}.notice{margin-top:11px;padding:10px;border-radius:10px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;font-size:.82rem;line-height:1.4}body.dark .notice{background:rgba(37,99,235,.12);color:#bfdbfe;border-color:rgba(147,197,253,.25)}.footer-links{text-align:center;margin:24px 0 6px;color:var(--muted);font-size:.8rem}.footer-links a{color:var(--muted);text-decoration:none;margin:0 5px}.footer-links a:hover{text-decoration:underline}
.preview-column{min-width:0}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;color:var(--muted);padding:2px 4px 10px;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}.preview-toolbar strong,.preview-toolbar small{display:block}.preview-toolbar small{text-transform:none;letter-spacing:0;font-weight:500;margin-top:2px}.preview-toggle{display:none}.preview-stage{background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(203,213,225,.45));border:1px solid var(--line);border-radius:16px;padding:34px 20px 38px;min-height:680px;display:flex;justify-content:center;align-items:flex-start}body.dark .preview-stage{background:linear-gradient(145deg,#111b2d,#080e19)}
.receipt-paper{position:relative;width:min(100%,390px);background:#fffef9;color:#20242b;padding:32px 27px 34px;border-radius:1px;box-shadow:0 20px 45px rgba(15,23,42,.2);font-family:"Courier New",Courier,monospace;overflow:visible}.receipt-paper:before,.receipt-paper:after{content:"";position:absolute;left:0;width:100%;height:10px;background:linear-gradient(135deg,transparent 6px,#fffef9 0) 0 0/12px 12px repeat-x}.receipt-paper:before{top:-9px;transform:rotate(180deg)}.receipt-paper:after{bottom:-9px}.receipt-brand{text-align:center;margin-bottom:17px}.receipt-brand h2{font:800 1.2rem system-ui,sans-serif;letter-spacing:.08em;margin:0 0 5px;overflow-wrap:anywhere}.receipt-brand p,.receipt-meta p,.receipt-customer p{margin:2px 0;font-size:.75rem;line-height:1.35}.receipt-title{text-align:center;border-top:1px dashed #9ca3af;border-bottom:1px dashed #9ca3af;padding:12px 0;margin:12px 0;font:850 1.05rem system-ui,sans-serif;letter-spacing:.18em}.receipt-meta{display:flex;justify-content:space-between;gap:12px;font-size:.72rem;margin-bottom:12px}.receipt-meta span:last-child{text-align:right}.receipt-customer{border-top:1px dashed #c1c5ca;padding-top:10px;margin-top:8px}.receipt-label{text-transform:uppercase;font-size:.64rem;letter-spacing:.08em;color:#667085;font-weight:700}.receipt-items{margin:15px 0}.receipt-item{padding:8px 0;border-bottom:1px dotted #c8ccd1;font-size:.76rem}.receipt-item-name{font-weight:700;overflow-wrap:anywhere}.receipt-item-detail{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:4px;color:#4b5563}.receipt-empty{text-align:center;color:#808791;padding:18px 4px;font-size:.78rem}.receipt-totals{font-size:.78rem}.receipt-total-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0}.receipt-grand{border-top:2px solid #262b32;margin-top:7px;padding-top:9px;font:bold 1.08rem system-ui,sans-serif}.receipt-note{text-align:center;font-size:.68rem;line-height:1.45;margin:16px 0 0;color:#414750;overflow-wrap:anywhere}.receipt-thanks{text-align:center;border-top:1px dashed #aeb3ba;padding-top:14px;margin-top:15px;font-weight:700;font-size:.76rem}
.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.94);border-top:1px solid var(--line);backdrop-filter:blur(10px);padding:9px 14px calc(9px + var(--safe-bottom))}body.dark .bottom-bar{background:rgba(15,23,42,.94)}.bottom-inner{max-width:900px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr;gap:9px}.hidden{display:none!important}
@media (min-width:760px){body{padding-bottom:20px}.bottom-bar{display:none}.settings-grid{grid-template-columns:1fr 1fr}.preview-stage{display:flex!important}}
@media (min-width:1120px){.workspace{grid-template-columns:clamp(420px,34vw,480px) minmax(0,1fr);align-items:start}.preview-column{position:sticky;top:76px;max-height:calc(100vh - 90px)}.preview-stage{min-height:calc(100vh - 130px);max-height:calc(100vh - 130px);overflow:auto}.receipt-paper{width:390px}.editor-column{width:100%}}
@media (min-width:760px) and (max-width:1119px){.wrap{max-width:820px}.preview-column{margin-top:8px}.preview-stage{min-height:auto;padding:42px 20px 50px}}
@media (max-width:759px){.wrap{padding:12px}.preview-column{margin-top:4px}.preview-toggle{display:inline-flex}.preview-toolbar{padding:10px 2px}.preview-stage{display:none;min-height:auto;padding:30px 12px 36px;border-radius:12px}.preview-stage.open{display:flex}.receipt-paper{width:min(100%,390px);padding:27px 18px 30px}.settings-grid{display:grid;gap:9px}}
@media (max-width:560px){.brand small{max-width:170px}.back-link span{display:none}.hero-top{grid-template-columns:1fr auto}.hero p{display:none}.total-box{min-width:112px}.grid-2,.grid-actions,.summary-grid{grid-template-columns:1fr}.item{grid-template-columns:1fr}.item-price{font-size:1.02rem}.history-item{grid-template-columns:1fr}.history-actions{justify-content:flex-end}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}