:root { --ink:#24313d; --muted:#74808b; --line:#e3e7e6; --cream:#f8f7f2; --paper:#fff; --teal:#0d7c75; --teal-dark:#085e59; --mint:#e3f2ee; --gold:#d79f4c; --shadow:0 14px 38px rgba(32,55,64,.08); }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:'DM Sans',sans-serif; }
button,input { font:inherit; }
.app-shell { min-height:100vh; }
.topbar { height:72px; background:#fff; border-bottom:1px solid var(--line); padding:0 5.2vw; display:flex; align-items:center; gap:32px; }
.brand { font-weight:700; font-size:17px; letter-spacing:-.02em; display:flex; align-items:center; gap:9px; white-space:nowrap; }
.brand-mark { color:var(--gold); font-size:25px; line-height:1; }
.event-name { margin-left:auto; color:#4c5964; font-size:13px; }.muted { color:#98a0a5; }.live-dot { width:7px; height:7px; border-radius:50%; background:#43aa85; display:inline-block; margin-right:2px; }
.avatar { width:35px; height:35px; border:0; border-radius:50%; background:#e8f0ed; color:var(--teal-dark); font-weight:700; font-size:12px; }
.page-wrap { max-width:1280px; margin:0 auto; padding:56px 5.2vw 80px; }
.hero-row { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:36px; }.eyebrow { font-size:10px; letter-spacing:.15em; font-weight:700; color:var(--teal); margin:0 0 9px; }.hero-row h1 { font-family:'Playfair Display',serif; font-size:44px; line-height:1.05; margin:0 0 12px; letter-spacing:-.025em; }.subtitle { color:var(--muted); margin:0; max-width:560px; font-size:15px; line-height:1.55; }
.progress-card { min-width:220px; padding:16px 19px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 15px rgba(32,55,64,.04); }.progress-label { color:var(--muted); font-size:9px; letter-spacing:.15em; font-weight:700; display:block; margin-bottom:8px; }.progress-card strong { font-size:14px; }.progress-track { height:5px; border-radius:8px; margin-top:12px; background:#e8edeb; overflow:hidden; }.progress-track span { display:block; height:100%; width:50%; background:var(--teal); border-radius:8px; transition:width .3s; }
.layout-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; }.notice { display:flex; gap:12px; padding:15px 18px; background:var(--mint); border:1px solid #cfe6df; border-radius:10px; margin-bottom:35px; }.notice-icon { width:23px; height:23px; color:white; background:var(--teal); border-radius:50%; display:grid; place-items:center; font-size:13px; }.notice strong,.notice span { display:block; }.notice strong { font-size:13px; margin:1px 0 3px; }.notice span { font-size:12px; color:#5f7772; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:17px; }.section-heading h2 { margin:0; font-size:21px; letter-spacing:-.03em; }.save-state { color:#7a8788; font-size:11px; }.save-state::before { content:'•'; color:#4fa483; margin-right:6px; }.attendee-list { display:grid; gap:9px; }.attendee { background:#fff; border:1px solid var(--line); border-radius:10px; min-height:74px; padding:13px 16px; display:flex; align-items:center; gap:13px; transition:.2s; }.attendee.active { border-color:#96cfc4; box-shadow:0 0 0 3px rgba(13,124,117,.07); }.attendee-avatar { width:39px; height:39px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:12px; color:#28625f; background:#e7f1ed; }.attendee:nth-child(2) .attendee-avatar { background:#f6e9d8; color:#91662d; }.attendee:nth-child(3) .attendee-avatar { background:#e9e5f3; color:#6b5b91; }.attendee:nth-child(4) .attendee-avatar { background:#f5e4e5; color:#9c5d65; }.attendee-info { flex:1; }.attendee-name { font-weight:600; font-size:14px; margin-bottom:4px; }.attendee-meta { color:var(--muted); font-size:11px; }.seat-status { color:var(--teal); font-weight:600; }.choose-btn { border:1px solid #b6d6d0; color:var(--teal-dark); background:#fff; padding:8px 12px; border-radius:7px; cursor:pointer; font-weight:600; font-size:12px; }.choose-btn:hover { background:#eff8f5; }.choose-btn.seated { border-color:transparent; background:#eff8f5; }
.map-heading { margin-top:46px; }.legend { display:flex; gap:13px; color:#899296; font-size:10px; }.legend span { display:flex; align-items:center; gap:5px; }.legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%; border:1px solid #87aaa3; }.legend-dot.available { background:#fff; }.legend-dot.selected { background:var(--teal); border-color:var(--teal); }.legend-dot.occupied { background:#d9dddc; border-color:#d9dddc; }
.map-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 20px 28px; box-shadow:var(--shadow); }.stage { width:42%; margin:0 auto 18px; text-align:center; color:#a4aaa8; font-size:9px; letter-spacing:.18em; padding:7px; border-bottom:2px solid #dfe5e2; }.map-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }.map-hint { font-size:11px; color:#87918f; }.ghost-btn { border:0; background:none; color:#9aa3a4; font-size:11px; cursor:pointer; }.tables { display:grid; grid-template-columns:repeat(4,1fr); gap:21px 17px; }.table { min-width:0; position:relative; border:1px solid #e0e5e3; border-radius:12px; padding:14px 8px 10px; cursor:pointer; transition:.2s; }.table:hover,.table.focused { border-color:#6db4aa; background:#f7fcfa; transform:translateY(-2px); }.table-title { display:flex; justify-content:space-between; font-size:11px; font-weight:700; margin-bottom:10px; }.table-remaining { color:#92a09e; font-size:9px; font-weight:500; }.table-circle { margin:0 auto 11px; width:58px; height:44px; border:1px solid #bdd3ce; border-radius:50%; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(2,1fr); place-items:center; }.seat { width:8px; height:8px; border-radius:50%; background:#fff; border:1.5px solid #77a9a0; }.seat.occupied { background:#d3dad8; border-color:#d3dad8; }.seat.selected { background:var(--teal); border-color:var(--teal); box-shadow:0 0 0 3px #d6ece7; }.table-capacity { text-align:center; color:#9aa4a1; font-size:9px; }
.side-column { display:flex; flex-direction:column; gap:16px; }.side-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; }.card-title { display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:700; }.search-glyph { color:var(--teal); font-size:21px; }.card-copy { color:#84908e; font-size:12px; line-height:1.5; margin:9px 0 15px; }.search-box { display:flex; align-items:center; gap:8px; border:1px solid #dfe5e3; border-radius:7px; padding:9px 11px; color:#9aa5a4; }.search-box input { width:100%; border:0; outline:0; font-size:12px; color:var(--ink); }.search-results { margin-top:9px; }.result { padding:10px 5px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eef0ef; font-size:12px; }.result:last-child { border-bottom:0; }.result small { display:block; color:#919d9b; margin-top:3px; }.result button { border:0; color:var(--teal); background:none; cursor:pointer; font-size:11px; font-weight:600; }.count-pill { border-radius:20px; padding:4px 8px; color:var(--teal-dark); background:var(--mint); font-size:10px; }.selected-card { min-height:190px; }.summary-row { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid #eef0ef; font-size:12px; }.summary-row:last-child { border:0; }.summary-row span:last-child { color:var(--teal); font-weight:600; }.summary-row .unseated { color:#a0aaa8; font-weight:500; }.help-card { display:flex; gap:12px; align-items:flex-start; background:#f2ebe0; border-color:#eadbc4; }.help-icon { min-width:23px; height:23px; border-radius:50%; background:#c8924a; color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; }.help-card strong { font-size:12px; }.help-card p { color:#8d7f6c; font-size:11px; line-height:1.5; margin:5px 0 7px; }.help-card a { color:#986b32; font-size:11px; text-decoration:none; font-weight:700; }
.toast { position:fixed; bottom:25px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#203b3a; color:#fff; padding:11px 16px; border-radius:8px; font-size:12px; transition:.25s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:850px) { .topbar { padding:0 20px; }.event-name { display:none; }.page-wrap { padding:35px 20px 60px; }.hero-row { display:block; }.progress-card { margin-top:24px; }.layout-grid { grid-template-columns:1fr; }.side-column { display:grid; grid-template-columns:1fr 1fr; }.help-card { grid-column:span 2; }.tables { grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px) { .hero-row h1 { font-size:35px; }.section-heading { display:block; }.legend { margin-top:13px; }.side-column { display:flex; }.tables { grid-template-columns:repeat(2,1fr); }.attendee { padding:12px; }.attendee-meta { font-size:10px; }.choose-btn { padding:7px 9px; } }