:root { color-scheme: light dark; --text:light-dark(#202820,#edf4ed); --surface:light-dark(#fff,#18221c); --muted:light-dark(#edf1ed,#29352d); --line:light-dark(#b7c3b9,#6b8071); --accent:light-dark(#245c40,#b8dfc6); --accent-text:light-dark(#fff,#14261b); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--text); background:light-dark(#f4f6f2,#101812); font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { max-width:1180px; margin:auto; padding:28px 24px 50px; }
h1,h2,p { margin:0; }
h1 { font-size:clamp(25px,4vw,38px); line-height:1.2; font-weight:600; }
h2 { font-size:24px; line-height:1.3; font-weight:600; }
.masthead { display:flex; gap:20px; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-bottom:20px; }
.eyebrow { font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; }
.identity,.toolbar-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
label { display:grid; gap:5px; min-width:0; max-width:100%; }
button,input,select { font:inherit; font-size:16px; }
input,select { max-width:100%; min-height:44px; border:1px solid var(--line); border-radius:7px; padding:9px 11px; background:var(--surface); color:var(--text); }
button,.link-button { min-height:44px; border:1px solid transparent; border-radius:7px; padding:9px 15px; background:var(--accent); color:var(--accent-text); font-weight:500; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
button:disabled { opacity:.45; cursor:default; }
.secondary,.link-button { border-color:var(--line); background:var(--surface); color:var(--text); }
.danger { border-color:light-dark(#a72c32,#ea979a); background:light-dark(#fff1ef,#4b2429); color:light-dark(#881f29,#ffcbce); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.login-panel { max-width:430px; margin:35px auto; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px; display:grid; gap:18px; }
.login-panel form { display:grid; gap:15px; }
.message { overflow-wrap:anywhere; margin-bottom:12px; }
.message:not(:empty) { padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.message[data-error="true"] { border-color:light-dark(#b85b5b,#e28d8d); }
#booking-view { display:grid; gap:16px; }
.toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; align-items:end; }
.legend { display:flex; flex-wrap:wrap; gap:10px 22px; }
.legend>span { display:inline-flex; gap:7px; align-items:center; }
.availability { font-variant-numeric:tabular-nums; }
.action-panel { border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:16px; display:grid; gap:12px; }
.reservation-form,.account-form { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.reservation-form label { flex:1 1 240px; max-width:440px; }
.release-panel { border-top:1px solid var(--line); padding-top:12px; display:grid; gap:8px; }
.release-panel button { justify-self:start; }
.small { font-size:12px; }
.stage { text-align:center; padding:10px; background:var(--muted); letter-spacing:.13em; font-weight:500; }
.map-scroll { max-width:100%; overflow-x:auto; background:var(--surface); padding:6px; border-radius:8px; }
.seat-table { border-collapse:separate; border-spacing:4px 6px; width:100%; text-align:center; }
.seat-table td { padding:0; }
.seat-table th { white-space:nowrap; font-weight:500; padding:0 8px; }
.seat-table caption { caption-side:top; text-align:start; padding:8px; }
.seat-space { display:grid; width:54px; min-width:54px; }
.aisle-space { width:72px; min-width:72px; }
.row-aisle td { height:24px; }
.regia { display:grid; place-items:center; min-height:48px; border:2px solid var(--text); background:var(--muted); color:var(--text); font-weight:500; }
.sector-divider { border:0; border-top:2px solid var(--text); margin-block:22px; }
.poltrona,.legend-seat { --seat-fill:light-dark(#bde8cb,#21543b); --seat-edge:light-dark(#4b9766,#6ab783); --seat-text:light-dark(#123b24,#e1ffeb); }
[data-status="selected"] { --seat-fill:light-dark(#ffe49a,#806200); --seat-edge:light-dark(#b28a22,#e6c350); --seat-text:light-dark(#4c3700,#fff7cb); }
[data-status="reserved"] { --seat-fill:light-dark(#ffc2bc,#702f33); --seat-edge:light-dark(#c16264,#ed9696); --seat-text:light-dark(#5a171d,#fff0ed); }
.poltrona { position:relative; display:block; width:54px; height:54px; min-height:54px; padding:0; border:0; background:transparent; color:var(--seat-text); font:inherit; font-weight:500; font-variant-numeric:tabular-nums; }
.cushion { position:absolute; inset:5px 8px 13px; display:grid; place-items:center; background:var(--seat-fill); border:1px solid var(--seat-edge); border-radius:8px 8px 4px 4px; }
.poltrona::before,.poltrona::after { content:''; position:absolute; z-index:1; top:13px; bottom:10px; width:8px; background:color-mix(in srgb,var(--seat-fill) 80%,var(--seat-edge)); border:1px solid var(--seat-edge); border-radius:5px; }
.poltrona::before { left:2px; }
.poltrona::after { right:2px; }
.backrest { position:absolute; z-index:2; bottom:4px; left:5px; right:5px; height:11px; background:color-mix(in srgb,var(--seat-fill) 75%,var(--seat-edge)); border:1px solid var(--seat-edge); border-radius:4px 4px 8px 8px; }
.status-mark { position:absolute; top:0; right:1px; font-size:12px; line-height:1; color:var(--text); }
.poltrona:hover .cushion { border-width:2px; }
.poltrona:focus-visible { border-radius:8px; }
.legend-seat { width:18px; height:18px; border:1px solid var(--seat-edge); border-radius:4px; background:var(--seat-fill); color:var(--seat-text); display:inline-grid; place-items:center; font-size:12px; font-style:normal; }
details { border-top:1px solid var(--line); padding-top:12px; }
summary { cursor:pointer; font-weight:500; padding:8px 0; }
.account-form { margin:15px 0; }
.user-list { list-style:none; padding:0; display:grid; gap:8px; }
.user-list li { display:flex; gap:10px; justify-content:space-between; align-items:center; flex-wrap:wrap; padding-block:8px; border-bottom:1px solid var(--line); }
footer { margin-top:25px; font-size:12px; }
@media(max-width:600px) { main { padding:18px 12px 32px; } .action-panel { padding:12px; } .reservation-form button { width:100%; } .toolbar-actions { width:100%; } .toolbar-actions>* { flex:1; } .account-form label,.account-form>button { width:100%; } }