:root { --bg:#0B0E12; --panel:#14171D; --panel2:#1A1E25; --ink:#F5F5F7; --muted:#9BA0A8; --dim:#6E7178; --gold:#C9A968; --line:rgba(237,232,222,.12); --green:#5FBF8A; }
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI Variable Display','Segoe UI',Roboto,sans-serif; line-height:1.5; }
.demo-bar { position:sticky; top:0; z-index:50; display:flex; gap:2px; align-items:center; padding:10px 14px; background:rgba(11,14,18,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); font-size:12px; overflow-x:auto; white-space:nowrap; }
.demo-bar .tag { color:var(--gold); letter-spacing:.12em; font-weight:600; margin-right:8px; font-size:10.5px; }
.demo-bar a { color:var(--dim); text-decoration:none; padding:5px 10px; border-radius:999px; }
.demo-bar a.on { color:var(--ink); background:var(--panel2); }
.demo-bar a:hover { color:var(--ink); }
.page { max-width:640px; margin:0 auto; padding:34px 20px 60px; display:flex; flex-direction:column; gap:16px; }
.page.wide { max-width:860px; }
.wordmark { font-family:'Palatino Linotype','Book Antiqua',Georgia,serif; font-size:13px; letter-spacing:.34em; color:var(--gold); margin:0; text-align:center; }
h1.title { font-size:clamp(28px,6vw,40px); font-weight:700; letter-spacing:-.025em; line-height:1.08; margin:4px 0 0; text-align:center; text-wrap:balance; }
p.sub { color:var(--muted); text-align:center; margin:0 0 6px; text-wrap:balance; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:12px; }
.label { font-size:11px; letter-spacing:.14em; color:var(--gold); font-weight:600; text-transform:uppercase; }
.input, select.input { background:var(--panel2); border:1px solid var(--line); border-radius:10px; color:var(--ink); font-size:15px; padding:12px 14px; width:100%; font-family:inherit; }
.input:focus { outline:2px solid var(--gold); outline-offset:1px; }
.pill { display:inline-block; background:var(--gold); color:#0B0E12; font-size:15px; font-weight:650; padding:14px 28px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; text-align:center; font-family:inherit; }
.pill.block { width:100%; }
.pill:disabled, .pill.off { opacity:.35; cursor:not-allowed; }
.pill.ghost { background:transparent; color:var(--gold); border:1px solid rgba(201,169,104,.5); }
.pill:focus-visible, .opt:focus-visible, .slot:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.chip { display:inline-flex; gap:6px; align-items:center; font-size:12px; padding:5px 12px; border-radius:8px; background:var(--panel2); border:1px solid var(--line); color:var(--muted); }
.chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.mono { font-family:Consolas,'Cascadia Mono',monospace; }
.num { font-variant-numeric:tabular-nums; }
.opt { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; cursor:pointer; background:transparent; color:inherit; font-family:inherit; text-align:left; width:100%; }
.opt .o-name { font-weight:650; font-size:15px; display:flex; gap:8px; align-items:center; }
.opt .o-desc { font-size:12.5px; color:var(--muted); margin-top:2px; }
.opt .o-price { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; font-size:16px; }
.opt.sel { border-color:var(--gold); background:linear-gradient(180deg,rgba(201,169,104,.09),rgba(201,169,104,0)); }
.badge { font-size:10px; letter-spacing:.1em; background:var(--gold); color:#0B0E12; padding:2px 8px; border-radius:999px; font-weight:700; }
.total-row { display:flex; justify-content:space-between; font-size:14px; color:var(--muted); }
.total-row.big { color:var(--ink); font-weight:700; font-size:17px; }
.hr { height:1px; background:var(--line); border:none; margin:4px 0; }
.note { font-size:12.5px; color:var(--dim); }
.ok-card { border-color:rgba(95,191,138,.45); background:linear-gradient(180deg,rgba(95,191,138,.08),rgba(95,191,138,0)); }
.ok { color:var(--green); font-weight:650; }
.checkline { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--muted); cursor:pointer; }
.checkline input { accent-color:var(--gold); width:17px; height:17px; margin-top:2px; flex:none; }
.foot { text-align:center; color:var(--dim); font-size:12px; margin-top:24px; }
.hidden { display:none !important; }
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.photo-tile { aspect-ratio:1; border:1.5px dashed rgba(237,232,222,.25); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--dim); font-size:11.5px; cursor:pointer; overflow:hidden; position:relative; text-align:center; padding:6px; }
.photo-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-tile .plus { font-size:22px; color:var(--gold); line-height:1; }
.slot { background:var(--panel2); border:1px solid var(--line); border-radius:10px; color:var(--ink); font-family:inherit; font-size:13.5px; padding:10px 0; cursor:pointer; text-align:center; width:100%; }
.slot.sel { background:var(--gold); color:#0B0E12; font-weight:700; border-color:var(--gold); }
.slot.busy { opacity:.3; cursor:not-allowed; text-decoration:line-through; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:560px){ .stat-grid { grid-template-columns:1fr; } }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:2px; }
.stat .s-label { font-size:10.5px; letter-spacing:.12em; color:var(--gold); font-weight:600; text-transform:uppercase; }
.stat .s-val { font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; }
.stat .s-sub { font-size:12px; color:var(--muted); }
.list-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.list-row:last-child { border-bottom:none; }
.list-row .r-main { font-size:14px; font-weight:600; }
.list-row .r-sub { font-size:12px; color:var(--muted); }
.mini { font-size:13px; padding:9px 18px; }