:root {
  --bg: #f6f3eb;
  --panel: #fffdf8;
  --panel-strong: #ffffff;
  --text: #2f332f;
  --muted: #747a74;
  --line: #ddd8ca;
  --accent: #7a8b76;
  --accent-strong: #596b56;
  --accent-soft: #dfe6dc;
  --secondary: #d8c5a2;
  --danger: #a75454;
  --warning: #9a6e2f;
  --shadow: 0 14px 35px rgba(54, 61, 51, .09);
  --radius: 18px;
}

body[data-theme="black"] { --bg:#f3f1ec; --panel:#fffefa; --text:#1e1e1c; --muted:#6d6b65; --line:#d7d2c8; --accent:#242421; --accent-strong:#0f0f0e; --accent-soft:#deddd8; --secondary:#b8aa8f; }
body[data-theme="blue"] { --bg:#f2f5f6; --panel:#fff; --text:#29363c; --muted:#6b7880; --line:#d7e0e4; --accent:#728c9b; --accent-strong:#536d7c; --accent-soft:#dfe9ed; --secondary:#c7b28e; }
body[data-theme="terracotta"] { --bg:#f8f1eb; --panel:#fffaf6; --text:#44332d; --muted:#806e66; --line:#ead8cd; --accent:#b56f56; --accent-strong:#8f4f3b; --accent-soft:#f0ddd4; --secondary:#b7a37b; }
body[data-theme="champagne"] { --bg:#f7f3eb; --panel:#fffdf8; --text:#3a342c; --muted:#786f65; --line:#e5dccd; --accent:#9d8560; --accent-strong:#776242; --accent-soft:#ece2d2; --secondary:#d8c4a3; }

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }
input, select, textarea { width:100%; border:1px solid var(--line); border-radius:12px; background:var(--panel-strong); color:var(--text); padding:12px 13px; outline:none; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea { resize:vertical; }
label > span, .compact-field > span { display:block; color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.03em; margin-bottom:6px; text-transform:uppercase; }

.app-shell { display:grid; grid-template-columns:250px 1fr; grid-template-rows:76px 1fr; min-height:100vh; }
.topbar { grid-column:1 / -1; position:sticky; top:0; z-index:30; height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 24px; background:color-mix(in srgb, var(--panel) 94%, transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.brand-wrap { display:flex; align-items:center; gap:12px; min-width:max-content; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; color:white; background:var(--accent); font-family:Georgia, serif; font-weight:700; }
.brand-name { font-family:Georgia, "Times New Roman", serif; font-size:1.2rem; font-weight:700; }
.brand-subtitle { color:var(--muted); font-size:.78rem; margin-top:2px; }
.topbar-actions { display:flex; align-items:center; gap:9px; overflow:auto; padding:4px 0; }
.compact-field { min-width:150px; }
.compact-field select { padding:9px 11px; min-height:39px; }

.sidebar { grid-column:1; grid-row:2; position:sticky; top:76px; align-self:start; height:calc(100vh - 76px); display:flex; flex-direction:column; justify-content:space-between; background:var(--panel); border-right:1px solid var(--line); padding:18px 14px; z-index:20; }
.nav-list { display:flex; flex-direction:column; gap:7px; }
.nav-item { border:0; background:transparent; color:var(--muted); display:flex; align-items:center; gap:11px; text-align:left; padding:12px 13px; border-radius:12px; cursor:pointer; font-weight:700; }
.nav-item span { width:26px; color:var(--accent); font-size:.75rem; }
.nav-item:hover { background:var(--accent-soft); color:var(--text); }
.nav-item.active { background:var(--accent); color:#fff; }
.nav-item.active span { color:#fff; }
.sidebar-footer { border-top:1px solid var(--line); padding:14px 10px 0; color:var(--muted); font-size:.77rem; line-height:1.45; }
.save-state { display:flex; align-items:center; gap:8px; color:var(--text); font-weight:700; }
.save-dot { width:8px; height:8px; border-radius:50%; background:#6aa06b; }

.main-content { grid-column:2; grid-row:2; padding:34px; min-width:0; }
.view { display:none; max-width:1460px; margin:0 auto; }
.view.active { display:block; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:24px; }
.section-heading h1 { font-family:Georgia, "Times New Roman", serif; font-size:clamp(2rem, 4vw, 3.2rem); line-height:1; margin:6px 0 8px; font-weight:600; letter-spacing:-.03em; }
.section-heading p { margin:0; color:var(--muted); }
.eyebrow { color:var(--accent) !important; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }

.button { border:1px solid transparent; border-radius:12px; min-height:42px; padding:10px 15px; cursor:pointer; font-weight:800; white-space:nowrap; }
.button.primary { background:var(--accent); color:#fff; }
.button.primary:hover { background:var(--accent-strong); }
.button.secondary { background:var(--panel-strong); color:var(--text); border-color:var(--line); }
.button.secondary:hover { border-color:var(--accent); }
.button.danger { background:#fff5f4; color:var(--danger); border-color:#e8c7c4; }
.button.small { min-height:34px; padding:7px 10px; font-size:.82rem; }
.button-row { display:flex; flex-wrap:wrap; gap:9px; }
.icon-button { border:0; background:transparent; font-size:1.4rem; padding:8px; }
.file-button { position:relative; display:inline-flex; align-items:center; }
.file-button input { position:absolute; inset:0; opacity:0; cursor:pointer; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.card h2 { margin:0 0 18px; font-family:Georgia, serif; font-size:1.35rem; }
.card h3 { margin:0 0 10px; }
.card-grid { display:grid; gap:20px; }
.card-grid.two-columns { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:15px; }
.form-grid .full { grid-column:1/-1; }

.stats-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin:20px 0; }
.stat-card { background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:16px; }
.stat-card .label { color:var(--muted); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.stat-card .value { font-family:Georgia, serif; font-size:1.8rem; margin-top:5px; }
.stat-card .hint { color:var(--muted); font-size:.78rem; margin-top:4px; }

.guest-add-card, .table-add-card { margin-bottom:18px; }
.guest-add-row { display:grid; grid-template-columns:1.1fr 1fr 1fr auto; align-items:end; gap:12px; }
.table-add-row { display:grid; grid-template-columns:1.2fr 1fr .55fr auto; align-items:end; gap:12px; }
details { margin-top:17px; border-top:1px solid var(--line); padding-top:14px; }
summary { cursor:pointer; font-weight:800; }
.helper-text { color:var(--muted); font-size:.85rem; }
.toolbar-row { display:flex; align-items:end; gap:12px; margin:14px 0; }
.search-input { max-width:500px; }

.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:15px; background:var(--panel); }
.data-table { width:100%; border-collapse:collapse; min-width:980px; }
.data-table th { position:sticky; top:0; background:var(--accent-soft); color:var(--text); text-align:left; padding:12px; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; z-index:1; }
.data-table td { padding:9px 10px; border-top:1px solid var(--line); vertical-align:middle; }
.data-table td input, .data-table td select { padding:9px 10px; min-width:120px; }
.empty-state { display:none; border:1px dashed var(--line); border-radius:15px; padding:30px; text-align:center; color:var(--muted); background:var(--panel); }
.empty-state.visible { display:block; }

.table-card-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:15px; }
.table-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:17px; }
.table-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.table-card h3 { margin:0; font-family:Georgia, serif; font-size:1.2rem; }
.table-shape-chip { padding:5px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent-strong); font-size:.72rem; font-weight:800; text-transform:uppercase; }
.table-card-fields { display:grid; grid-template-columns:1.2fr .65fr; gap:10px; margin:14px 0; }
.capacity-meter { height:7px; border-radius:999px; background:var(--line); overflow:hidden; }
.capacity-meter > span { display:block; height:100%; background:var(--accent); }
.capacity-meter.over > span { background:var(--danger); }
.table-card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:11px; color:var(--muted); font-size:.8rem; }

.floor-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:16px; align-items:start; }
.fixture-panel { position:sticky; top:94px; box-shadow:none; }
.fixture-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fixture-buttons button { border:1px solid var(--line); background:var(--panel-strong); border-radius:10px; padding:10px 8px; cursor:pointer; font-size:.8rem; font-weight:700; }
.fixture-buttons button:hover { border-color:var(--accent); background:var(--accent-soft); }
.selection-panel { margin-top:18px; border-top:1px solid var(--line); padding-top:15px; color:var(--muted); font-size:.84rem; }
.selection-controls { display:grid; gap:10px; }
.selection-button-row { display:flex; gap:8px; }
.floor-stage-wrap { overflow:auto; border-radius:18px; box-shadow:var(--shadow); background:#d7d1c5; padding:18px; }
.floor-stage { position:relative; width:min(1120px, 100%); aspect-ratio:14/9; min-width:720px; margin:0 auto; border:3px solid var(--accent); border-radius:18px; background-color:var(--panel-strong); background-image:linear-gradient(var(--line) 1px, transparent 1px),linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:32px 32px; overflow:hidden; touch-action:none; }
.floor-label { position:absolute; left:50%; top:14px; transform:translateX(-50%); padding:6px 12px; border-radius:999px; background:var(--panel); border:1px solid var(--line); font-size:.78rem; color:var(--muted); pointer-events:none; z-index:1; }
.floor-item { position:absolute; transform:translate(-50%, -50%); user-select:none; touch-action:none; cursor:grab; display:grid; place-items:center; text-align:center; border:2px solid var(--accent); background:color-mix(in srgb, var(--accent-soft) 70%, white); box-shadow:0 5px 12px rgba(50,50,45,.12); color:var(--text); font-size:.72rem; font-weight:800; line-height:1.15; padding:5px; z-index:3; }
.floor-item:active { cursor:grabbing; }
.floor-item.selected { outline:4px solid color-mix(in srgb, var(--accent) 30%, transparent); z-index:5; }
.floor-item.round { width:82px; height:82px; border-radius:50%; }
.floor-item.square { width:82px; height:82px; border-radius:12px; }
.floor-item.rectangle { width:132px; height:70px; border-radius:13px; }
.floor-item.oval { width:130px; height:76px; border-radius:50%; }
.floor-item.head { width:180px; height:64px; border-radius:12px; }
.floor-item.sweetheart { width:100px; height:60px; border-radius:40px; }
.floor-item.cocktail { width:60px; height:60px; border-radius:50%; }
.floor-item.fixture { border-style:dashed; background:color-mix(in srgb, var(--secondary) 25%, white); border-color:var(--secondary); }
.floor-item.fixture.dance { width:180px; height:125px; border-radius:12px; }
.floor-item.fixture.bar { width:150px; height:54px; border-radius:12px; }
.floor-item.fixture.stage, .floor-item.fixture.buffet { width:165px; height:62px; border-radius:12px; }
.floor-item.fixture.cake, .floor-item.fixture.photo, .floor-item.fixture.gifts { width:90px; height:70px; border-radius:12px; }
.floor-item.fixture.entrance, .floor-item.fixture.exit { width:92px; height:42px; border-radius:999px; }

.warning-list { display:grid; gap:8px; margin:14px 0 20px; }
.warning { border:1px solid #ead2aa; background:#fff8eb; color:#735323; border-radius:12px; padding:11px 13px; }
.warning.danger { border-color:#e5c4c1; background:#fff5f4; color:#7b3737; }
.seating-chart-output { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:15px; }
.chart-title-card { grid-column:1/-1; text-align:center; padding:24px; border-bottom:2px solid var(--accent); }
.chart-title-card h2 { font-family:Georgia, serif; font-size:2rem; margin:0 0 6px; }
.chart-title-card p { color:var(--muted); margin:0; }
.chart-table-card { break-inside:avoid; background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:16px; }
.chart-table-card h3 { font-family:Georgia, serif; font-size:1.25rem; margin:0 0 5px; }
.chart-table-meta { color:var(--muted); font-size:.78rem; margin-bottom:10px; }
.chart-guest-list { margin:0; padding-left:20px; line-height:1.7; }
.alpha-grid { grid-column:1/-1; columns:3 260px; column-gap:25px; }
.alpha-row { break-inside:avoid; display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dotted var(--line); }
.alpha-row strong { font-weight:700; }
.chart-header { text-align:center; margin-bottom:20px; }
.print-only { display:none; }
.steps { padding-left:20px; line-height:1.8; }
.toast { position:fixed; right:20px; bottom:20px; z-index:100; background:var(--text); color:var(--panel); padding:12px 16px; border-radius:12px; opacity:0; transform:translateY(15px); pointer-events:none; transition:.22s ease; box-shadow:var(--shadow); }
.toast.show { opacity:1; transform:none; }
.mobile-only { display:none; }

@media (max-width: 1120px) {
  .topbar { align-items:flex-start; height:auto; min-height:76px; padding:12px 16px; }
  .topbar-actions { width:100%; }
  .app-shell { grid-template-rows:auto 1fr; }
  .sidebar { top:92px; height:calc(100vh - 92px); }
  .main-content { padding:25px; }
  .stats-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .table-card-grid, .seating-chart-output { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .app-shell { display:block; }
  .topbar { position:sticky; display:block; }
  .brand-wrap { margin-bottom:9px; }
  .brand-subtitle { display:none; }
  .topbar-actions { gap:7px; }
  .topbar-actions .compact-field { min-width:135px; }
  .topbar-actions .button { padding:9px 11px; font-size:.82rem; }
  .sidebar { position:fixed; top:0; left:0; width:270px; height:100vh; transform:translateX(-105%); transition:.22s ease; box-shadow:var(--shadow); z-index:80; }
  .sidebar.open { transform:none; }
  .main-content { padding:22px 15px 50px; }
  .mobile-only { display:inline-block; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .section-heading h1 { font-size:2.25rem; }
  .card-grid.two-columns, .table-card-grid, .seating-chart-output { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .full { grid-column:auto; }
  .guest-add-row, .table-add-row { grid-template-columns:1fr; }
  .toolbar-row { align-items:stretch; flex-direction:column; }
  .search-input { max-width:none; }
  .floor-layout { grid-template-columns:1fr; }
  .fixture-panel { position:static; }
  .fixture-buttons { grid-template-columns:repeat(3,1fr); }
  .alpha-grid { columns:1; }
}

@media (max-width: 520px) {
  .topbar-actions #installButton, .topbar-actions .file-button { display:none; }
  .topbar-actions { flex-wrap:wrap; overflow:visible; padding-bottom:7px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .fixture-buttons { grid-template-columns:1fr 1fr; }
  .card { padding:17px; }
  .floor-stage-wrap { padding:8px; overflow:hidden; }
  .floor-stage { width:100%; min-width:0; border-radius:13px; background-size:20px 20px; }
  .floor-label { top:6px; max-width:80%; padding:3px 7px; font-size:.56rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .floor-item { padding:2px; font-size:.52rem; border-width:1.5px; }
  .floor-item.round, .floor-item.square { width:46px; height:46px; }
  .floor-item.rectangle { width:74px; height:40px; }
  .floor-item.oval { width:72px; height:42px; }
  .floor-item.head { width:100px; height:38px; }
  .floor-item.sweetheart { width:60px; height:36px; }
  .floor-item.cocktail { width:36px; height:36px; }
  .floor-item.fixture.dance { width:92px; height:65px; }
  .floor-item.fixture.bar { width:82px; height:34px; }
  .floor-item.fixture.stage, .floor-item.fixture.buffet { width:88px; height:36px; }
  .floor-item.fixture.cake, .floor-item.fixture.photo, .floor-item.fixture.gifts { width:52px; height:42px; }
  .floor-item.fixture.entrance, .floor-item.fixture.exit { width:60px; height:28px; }
}

@media print {
  @page { margin:12mm; }
  body { background:white !important; color:#111 !important; }
  .topbar, .sidebar, .no-print-hide, .toast { display:none !important; }
  .app-shell, .main-content { display:block !important; padding:0 !important; }
  .view { display:none !important; max-width:none !important; }
  #view-chart.active, body.print-floor #view-floor.active { display:block !important; }
  .print-only { display:block !important; }
  .seating-chart-output { grid-template-columns:repeat(3,1fr); gap:9mm; }
  .chart-table-card { box-shadow:none; border:1px solid #aaa; background:white; }
  .chart-title-card { padding-top:0; }
  .floor-layout { display:block; }
  .fixture-panel { display:none; }
  .floor-stage-wrap { background:white; padding:0; box-shadow:none; overflow:visible; }
  .floor-stage { width:100%; min-width:0; border-color:#555; background-size:24px 24px; }
}

/* ArrangeMyGuests refined staging UI */
:root {
  --bg:#f8f6f1; --panel:#fffdf9; --text:#343735; --muted:#7b7f7a;
  --line:#dedfd9; --accent:#83917d; --accent-strong:#687562;
  --accent-soft:#edf0e9; --secondary:#b5a890;
  --shadow:0 12px 35px rgba(52,55,53,.07);
}
body[data-theme="modern"] {
  --bg:#f7f7f5; --panel:#ffffff; --text:#2f3333; --muted:#747979;
  --line:#dfe2df; --accent:#616967; --accent-strong:#424947;
  --accent-soft:#eff1ef; --secondary:#aaa79f;
}
body { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight:400; letter-spacing:.005em; }
h1,h2,h3 { font-family: Georgia, "Times New Roman", serif; font-weight:400; letter-spacing:-.018em; }
h1 { font-size:clamp(1.65rem,2.7vw,2.35rem); }
h2 { font-size:1.22rem; }
.topbar { min-height:92px; height:auto; padding:12px 22px; display:grid; grid-template-columns:minmax(230px,320px) minmax(170px,240px) 1fr; align-items:center; gap:24px; }
.brand-wrap { min-width:0; }
.brand-logo { display:block; width:min(300px,100%); height:58px; object-fit:contain; object-position:left center; }
.event-switcher-wrap { display:flex; flex-direction:column; gap:5px; min-width:0; }
.event-switcher-wrap label,.toolbar-label { font-size:.67rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); }
.event-switcher-wrap select,.theme-group select { min-height:39px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); padding:8px 34px 8px 12px; font-size:.88rem; font-weight:400; }
.topbar-tools { display:flex; align-items:end; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.theme-group { display:flex; flex-direction:column; gap:5px; min-width:155px; }
.button { font-weight:500; font-size:.84rem; border-radius:10px; box-shadow:none; }
.button.primary { background:var(--accent); }
.sidebar { top:92px; height:calc(100vh - 92px); padding-top:22px; }
.nav-item { font-size:.88rem; font-weight:400; border-radius:10px; padding:11px 12px; }
.nav-item span { color:var(--accent); font-size:.9rem; min-width:22px; }
.card { border-radius:14px; box-shadow:0 6px 22px rgba(52,55,53,.045); }
.floor-layout { grid-template-columns:minmax(0,1fr) 240px; }
.fixture-panel { grid-column:2; grid-row:1; }
.floor-stage-wrap { grid-column:1; grid-row:1; }
.fixture-buttons button { text-align:left; font-weight:400; border-radius:10px; }

.floor-item.lounge { width:118px; height:58px; border-radius:14px; }
.floor-item.podium { width:62px; height:45px; }
.floor-item.screen { width:130px; height:38px; border-radius:5px; }
@media (max-width:1050px){.topbar{grid-template-columns:240px 190px 1fr;gap:12px}.brand-logo{height:50px}.topbar-tools{justify-content:flex-start}}
@media (max-width:820px){.topbar{display:grid;grid-template-columns:1fr;gap:10px;padding:10px 14px}.brand-logo{width:250px;height:48px}.event-switcher-wrap{display:none}.topbar-tools{width:100%;overflow:auto;flex-wrap:nowrap;align-items:end}.sidebar{top:0;height:100vh}.floor-layout{grid-template-columns:1fr}.fixture-panel,.floor-stage-wrap{grid-column:1}.fixture-panel{grid-row:1}.floor-stage-wrap{grid-row:2}}


/* v0.3 typography and navigation refinements */
:root {
  --heading-font: Baskerville, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
.section-heading h1 {
  font-family:var(--heading-font);
  font-size:clamp(1.9rem,3vw,2.65rem);
  line-height:1.06;
  font-weight:400;
  letter-spacing:-.025em;
  color:#3d423f;
  margin:5px 0 8px;
}
.card h2,
.fixture-panel h2,
.selection-panel h3,
.table-card h3,
.chart-title-card h2,
.chart-table-card h3 {
  font-family:var(--heading-font);
  font-weight:400;
  color:#414642;
  letter-spacing:-.012em;
}
.card h2,.fixture-panel h2 { font-size:1.22rem; }
.selection-panel h3,.table-card h3,.chart-table-card h3 { font-size:1.08rem; }
.chart-title-card h2 { font-size:1.7rem; }
.eyebrow { font-weight:600; }
.nav-item {
  gap:13px;
  min-height:50px;
  padding:11px 13px;
  font-size:.92rem;
  line-height:1.2;
}
.nav-item .nav-icon {
  width:27px;
  min-width:27px;
  height:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent-strong);
}
.nav-item .nav-icon svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-item .nav-label { width:auto; color:inherit; font-size:inherit; }
.nav-item.active .nav-icon { color:#fff; }
.floor-item.fixture { font-weight:600; }
@media (max-width:820px) {
  .section-heading h1 { font-size:2.05rem; }
  .nav-item { min-height:52px; font-size:.96rem; }
  .nav-item .nav-icon { width:29px; min-width:29px; height:29px; }
  .nav-item .nav-icon svg { width:26px; height:26px; }
}

/* v0.4 unified interface typography */
:root {
  --ui-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Use one clean interface family for navigation, labels and working content. */
body,
button,
input,
select,
textarea,
.nav-item,
.card h2,
.fixture-panel h2,
.selection-panel h3,
.table-card h3,
.chart-table-card h3,
.chart-table-meta,
.chart-guest-list,
.alpha-grid,
.stat-card,
.helper-text {
  font-family:var(--ui-font);
}

/* Reserve the classic serif for true display headings only. */
.section-heading h1,
.chart-title-card h2,
.print-chart-header h1 {
  font-family:var(--heading-font);
}

.card h2,
.fixture-panel h2 {
  font-size:1rem;
  font-weight:500;
  letter-spacing:0;
  line-height:1.35;
}

.selection-panel h3,
.table-card h3,
.chart-table-card h3 {
  font-size:.96rem;
  font-weight:500;
  letter-spacing:0;
  line-height:1.35;
  color:var(--text);
}

.chart-table-card h3 {
  margin-bottom:6px;
}

.chart-guest-list {
  font-size:.92rem;
  line-height:1.72;
}

.chart-table-meta {
  font-family:var(--ui-font);
  font-size:.78rem;
  letter-spacing:0;
}

.stat-card .value {
  font-family:var(--ui-font);
  font-weight:400;
  letter-spacing:-.02em;
}

/* v0.5 approved typography system: Montserrat + Raleway */
:root {
  --ui-font: "Montserrat", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --heading-font: "Raleway", "Montserrat", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Core interface and readable working content */
body,
button,
input,
select,
textarea,
.nav-item,
.nav-label,
.sidebar-footer,
.helper-text,
.chart-table-meta,
.chart-guest-list,
.alpha-grid,
.stat-card,
.data-table,
.table-card-footer,
.fixture-buttons button,
.selection-panel,
.steps,
p,
li {
  font-family:var(--ui-font);
}

body {
  font-weight:400;
  letter-spacing:0;
}

/* Clean navigation and controls */
.nav-item,
.button,
.event-switcher-wrap select,
.theme-group select {
  font-family:var(--ui-font);
  font-weight:500;
}

/* Labels use restrained emphasis rather than bold blocks */
label > span,
.compact-field > span,
.event-switcher-wrap label,
.toolbar-label,
.eyebrow,
.stat-card .label,
.data-table th,
.table-shape-chip {
  font-family:var(--ui-font);
  font-weight:600;
}

/* Raleway provides the elegant display layer */
.section-heading h1,
.chart-title-card h2,
.print-chart-header h1,
.card h2,
.fixture-panel h2,
.selection-panel h3,
.table-card h3,
.chart-table-card h3 {
  font-family:var(--heading-font);
}

.section-heading h1,
.chart-title-card h2,
.print-chart-header h1 {
  font-weight:400;
  letter-spacing:-.025em;
}

.card h2,
.fixture-panel h2,
.selection-panel h3,
.table-card h3,
.chart-table-card h3 {
  font-weight:500;
  letter-spacing:-.01em;
}

/* Keep table titles distinct but close in character to guest names. */
.chart-table-card h3,
.table-card h3 {
  font-size:.98rem;
  line-height:1.35;
}

.chart-guest-list {
  font-weight:400;
  letter-spacing:0;
}

.stat-card .value {
  font-family:var(--ui-font);
  font-weight:400;
}


/* v0.6 header alignment, logo visibility and print corrections */
:root {
  --topbar-height: 104px;
}

.app-shell {
  grid-template-rows: var(--topbar-height) 1fr;
}

.topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  padding: 14px 24px;
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(210px, 250px) minmax(0, 1fr);
  align-items: end;
  gap: clamp(14px, 1.5vw, 22px);
  overflow: visible;
}

.brand-wrap {
  align-self: center;
  min-width: 0;
  height: 70px;
  overflow: visible;
}

.brand-logo {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 70px;
  object-fit: contain;
  object-position: left center;
}

.event-switcher-wrap,
.theme-group {
  min-width: 0;
  width: 100%;
}

.event-switcher-wrap label,
.toolbar-label {
  display: block;
  min-height: 16px;
  margin: 0 0 6px;
  line-height: 1;
}

.event-switcher-wrap select,
.theme-group select,
.topbar .button,
.topbar .file-button {
  min-height: 48px;
  height: 48px;
  border-radius: 11px;
}

.event-switcher-wrap select,
.theme-group select {
  width: 100%;
  padding: 10px 38px 10px 14px;
}

.topbar-tools {
  display: grid;
  grid-template-columns: minmax(160px, 190px) max-content max-content max-content;
  align-items: end;
  justify-content: end;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.topbar .button,
.topbar .file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 13px;
  font-size: .8rem;
  line-height: 1.15;
}

#printChartButton {
  min-width: 160px;
}

.sidebar {
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
}

.help-install-button {
  margin-top: 14px;
}

@media (max-width: 1320px) {
  :root { --topbar-height: 166px; }

  .topbar {
    grid-template-columns: minmax(280px, 360px) minmax(240px, 1fr);
    grid-template-rows: 72px 56px;
    align-items: center;
    row-gap: 10px;
  }

  .brand-wrap { grid-column: 1; grid-row: 1; }
  .event-switcher-wrap { grid-column: 2; grid-row: 1; align-self: end; }
  .topbar-tools {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(190px, 240px) repeat(3, max-content);
    justify-content: end;
  }
}

@media (max-width: 900px) {
  :root { --topbar-height: 0px; }

  .app-shell { display: block; }
  .topbar {
    position: sticky;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
    padding: 10px 14px 12px;
  }
  .brand-wrap,
  .event-switcher-wrap,
  .topbar-tools {
    grid-column: 1;
    grid-row: auto;
  }
  .brand-wrap { height: 58px; margin: 0; }
  .brand-logo { width: min(310px, 88vw); max-width: 100%; height: 58px; }
  .event-switcher-wrap { display: flex; }
  .topbar-tools {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) repeat(3, max-content);
    overflow-x: auto;
    justify-content: start;
    padding-bottom: 2px;
  }
  .sidebar { top: 0; height: 100vh; }
}

@media (max-width: 620px) {
  .event-switcher-wrap { display: none; }
  .topbar-tools {
    grid-template-columns: minmax(145px, 1fr) repeat(3, max-content);
  }
  .topbar .button,
  .topbar .file-button {
    min-height: 44px;
    height: 44px;
    padding: 9px 12px;
    font-size: .78rem;
  }
  #printChartButton { min-width: 150px; }
}

@media print {
  .chart-title-card {
    display: none !important;
  }

  .print-chart-header {
    display: block !important;
    text-align: center;
    margin: 0 0 7mm;
    padding: 0 0 5mm;
    border-bottom: 1.5px solid #6d786a;
  }

  .print-chart-header h1 {
    margin: 0 0 2mm;
    font-family: "Raleway", "Montserrat", Arial, sans-serif;
    font-size: 22pt;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.1;
  }

  .print-chart-header p {
    margin: 0;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 10.5pt;
    line-height: 1.35;
    color: #4d514e !important;
  }

  .seating-chart-output {
    padding-top: 0;
  }
}


/* v0.7 responsive toolbar: event selector removed, controls aligned */
:root {
  --topbar-height: 96px;
  --control-height: 48px;
}

.app-shell {
  grid-template-rows: var(--topbar-height) 1fr;
}

.topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  padding: 12px clamp(18px, 2.2vw, 34px);
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 52px);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  overflow: visible;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 72px;
  overflow: visible;
}

.brand-logo {
  display: block;
  width: min(340px, 100%);
  max-width: 100%;
  height: 72px;
  object-fit: contain;
  object-position: left center;
}

.topbar-tools {
  display: grid;
  grid-template-columns: minmax(176px, 220px) minmax(148px, max-content) minmax(148px, max-content) minmax(172px, max-content);
  align-items: end;
  justify-content: end;
  gap: clamp(8px, 1vw, 14px);
  width: 100%;
  min-width: 0;
}

.theme-group {
  display: grid;
  grid-template-rows: 16px var(--control-height);
  gap: 6px;
  width: 100%;
  min-width: 0;
  align-self: end;
}

.toolbar-label {
  display: flex;
  align-items: center;
  min-height: 16px;
  margin: 0;
  line-height: 1;
  font-family: var(--ui-font);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.theme-group select,
.topbar .topbar-action {
  height: var(--control-height);
  min-height: var(--control-height);
  border-radius: 11px;
}

.theme-group select {
  width: 100%;
  padding: 10px 38px 10px 14px;
  font-family: var(--ui-font);
  font-size: .88rem;
  font-weight: 500;
}

.topbar .topbar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 10px 14px;
  font-size: .8rem;
  line-height: 1.15;
  white-space: nowrap;
}

.button-icon,
.menu-toggle svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.sidebar {
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
}

/* Compact desktop and tablet: logo gets its own row, controls stay aligned. */
@media (max-width: 1180px) {
  :root { --topbar-height: 174px; }

  .topbar {
    grid-template-columns: 1fr;
    grid-template-rows: 68px 70px;
    gap: 10px;
    padding: 10px 20px 14px;
  }

  .brand-wrap {
    grid-row: 1;
    height: 68px;
  }

  .brand-logo {
    height: 66px;
    width: min(330px, 100%);
  }

  .topbar-tools {
    grid-row: 2;
    grid-template-columns: minmax(176px, 1fr) repeat(2, minmax(145px, 180px)) minmax(170px, 205px);
    justify-content: stretch;
  }
}

/* Phones and portrait tablets: deliberate stacked toolbar, no horizontal scrolling. */
@media (max-width: 900px) {
  :root { --topbar-height: 0px; --control-height: 48px; }

  .app-shell { display: block; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: max(8px, env(safe-area-inset-top)) 12px 12px;
  }

  .brand-wrap {
    height: 58px;
    justify-content: flex-start;
  }

  .brand-logo {
    width: min(300px, calc(100vw - 76px));
    height: 58px;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    background: var(--panel-strong);
  }

  .topbar-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "theme theme theme"
      "export import print";
    gap: 8px;
    width: 100%;
    overflow: visible;
  }

  .theme-group { grid-area: theme; }
  #exportProjectButton { grid-area: export; }
  .file-button { grid-area: import; }
  #printChartButton { grid-area: print; }

  .topbar .topbar-action {
    min-width: 0;
    padding: 10px 8px;
    font-size: .75rem;
  }

  .topbar .topbar-action .button-icon {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }

  .sidebar {
    top: 0;
    height: 100dvh;
  }
}

@media (max-width: 620px) {
  .topbar-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "theme theme"
      "export import"
      "print print";
  }

  .topbar .topbar-action {
    min-height: 48px;
    height: 48px;
    font-size: .79rem;
  }
}

@media (max-width: 390px) {
  .brand-logo {
    width: calc(100vw - 72px);
    height: 54px;
  }

  .topbar {
    padding-left: 8px;
    padding-right: 8px;
  }

  .topbar-tools {
    grid-template-columns: 1fr;
    grid-template-areas:
      "theme"
      "export"
      "import"
      "print";
  }
}

@media print {
  .topbar { display: none !important; }
}

/* v0.8 structural header rebuild
   The header participates in normal document flow so it can never overlap page content.
   Explicit breakpoint layouts prevent implicit grid wrapping at browser zoom levels. */
:root {
  --amg-header-height: 112px;
  --amg-control-height: 48px;
}

.app-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
}

.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 70;
  width: 100%;
  height: auto;
  min-height: var(--amg-header-height);
  padding: 16px clamp(20px, 2.5vw, 40px);
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(680px, 1fr);
  align-items: center;
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: 0;
  overflow: visible;
  background: color-mix(in srgb, var(--panel) 98%, transparent);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  height: 78px;
  margin: 0;
  overflow: visible;
}

.brand-logo {
  display: block;
  width: min(390px, 100%);
  max-width: 100%;
  height: 78px;
  object-fit: contain;
  object-position: left center;
}

.topbar-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(168px, max-content) minmax(168px, max-content) minmax(190px, max-content);
  align-items: end;
  justify-content: end;
  gap: clamp(10px, 1vw, 16px);
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.theme-group {
  display: grid;
  grid-template-rows: 16px var(--amg-control-height);
  gap: 7px;
  width: 100%;
  min-width: 0;
  margin: 0;
  align-self: end;
}

.toolbar-label {
  display: flex;
  align-items: center;
  min-height: 16px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: var(--ui-font);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.theme-group select,
.topbar .topbar-action {
  box-sizing: border-box;
  width: 100%;
  height: var(--amg-control-height);
  min-height: var(--amg-control-height);
  margin: 0;
  border-radius: 11px;
}

.theme-group select {
  padding: 10px 38px 10px 14px;
  font-family: var(--ui-font);
  font-size: .88rem;
  font-weight: 500;
}

.topbar .topbar-action {
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 15px;
  font-size: .8rem;
  line-height: 1.15;
  white-space: nowrap;
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: var(--amg-header-height);
  height: calc(100dvh - var(--amg-header-height));
}

.main-content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

/* Compact desktop and landscape tablet: the logo receives a dedicated row.
   The toolbar remains a single aligned row beneath it. */
@media (max-width: 1399px) {
  :root { --amg-header-height: 190px; }

  .topbar {
    min-height: var(--amg-header-height);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 76px 76px;
    align-items: center;
    gap: 10px;
    padding: 12px clamp(18px, 2.5vw, 30px) 16px;
  }

  .brand-wrap {
    grid-row: 1;
    height: 76px;
  }

  .brand-logo {
    width: min(370px, 100%);
    height: 74px;
  }

  .topbar-tools {
    grid-row: 2;
    grid-template-columns: minmax(190px, 1fr) repeat(2, minmax(160px, 190px)) minmax(190px, 220px);
    justify-content: stretch;
    align-items: end;
  }
}

/* Portrait tablets and phones: header stays in normal flow and becomes touch-friendly. */
@media (max-width: 900px) {
  :root { --amg-header-height: 0px; --amg-control-height: 48px; }

  .app-shell {
    display: block;
    min-height: 100vh;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    width: 100%;
    min-height: 0;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
    padding: max(8px, env(safe-area-inset-top)) 12px 12px;
  }

  .brand-wrap {
    grid-row: 1;
    height: 58px;
    margin: 0;
    justify-content: flex-start;
  }

  .brand-logo {
    width: min(305px, calc(100vw - 78px));
    height: 58px;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    background: var(--panel-strong);
  }

  .topbar-tools {
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "theme theme theme"
      "export import print";
    gap: 8px;
    width: 100%;
    overflow: visible;
  }

  .theme-group { grid-area: theme; }
  #exportProjectButton { grid-area: export; }
  .file-button { grid-area: import; }
  #printChartButton { grid-area: print; }

  .topbar .topbar-action {
    min-width: 0;
    padding: 10px 8px;
    font-size: .75rem;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 270px;
    height: 100dvh;
  }

  .main-content {
    min-width: 0;
  }
}

@media (max-width: 620px) {
  .topbar-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "theme theme"
      "export import"
      "print print";
  }

  .topbar .topbar-action {
    height: 48px;
    min-height: 48px;
    font-size: .79rem;
  }
}

@media (max-width: 390px) {
  .topbar {
    padding-left: 8px;
    padding-right: 8px;
  }

  .brand-logo {
    width: calc(100vw - 72px);
    height: 54px;
  }

  .topbar-tools {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "theme"
      "export"
      "import"
      "print";
  }
}

@media print {
  .topbar { display: none !important; }
}

/* v0.8 polish: keep toolbar tiles balanced and prevent the import label from inheriting form-label uppercase styling. */
@media (min-width: 1400px) {
  .topbar-tools {
    grid-template-columns: minmax(190px, 230px) minmax(168px, max-content) minmax(168px, max-content) minmax(190px, max-content);
    justify-content: end;
  }
}

@media (min-width: 901px) and (max-width: 1399px) {
  .topbar-tools {
    grid-template-columns: minmax(210px, 260px) repeat(2, minmax(160px, 190px)) minmax(190px, 220px);
    justify-content: end;
  }
}

.topbar .file-button > span {
  display: inline;
  width: auto;
  color: inherit;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0;
  line-height: inherit;
  margin: 0;
  text-transform: none;
}


/* v0.9 responsive floor plan, visual seats, unit selector and print reliability */
.action-label-short { display:none; }

/* Visual seat markers around each table. Assigned seats show guest initials. */
.floor-item.table-item { overflow:visible; }
.floor-item .table-label {
  position:relative;
  z-index:3;
  display:block;
  pointer-events:none;
}
.floor-item .table-label small { font-size:.82em; }
.table-seat {
  position:absolute;
  left:var(--seat-x);
  top:var(--seat-y);
  width:22px;
  height:22px;
  transform:translate(-50%,-50%) rotate(var(--seat-counter-rotation));
  display:grid;
  place-items:center;
  border:1.5px solid var(--accent);
  border-radius:7px 7px 5px 5px;
  background:var(--panel-strong);
  color:var(--accent-strong);
  box-shadow:0 2px 5px rgba(52,55,53,.14);
  font-family:var(--ui-font);
  font-size:7.5px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.02em;
  pointer-events:none;
  z-index:4;
}
.table-seat::after {
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  bottom:-4px;
  height:4px;
  border:1.5px solid var(--accent);
  border-top:0;
  border-radius:0 0 4px 4px;
  background:var(--panel-strong);
}
.table-seat.assigned {
  background:var(--accent);
  border-color:var(--accent-strong);
  color:#fff;
}
.table-seat.assigned::after {
  background:var(--accent);
  border-color:var(--accent-strong);
}
.seat-overflow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:16px;
  margin-left:4px;
  padding:0 4px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-size:8px;
  font-weight:600;
}

/* The floor always fits its available column; no pinch zoom or sideways clipping required. */
.floor-stage {
  width:100%;
  max-width:1120px;
  min-width:0;
}
.floor-stage-wrap { min-width:0; }

/* Move the fixture controls above the canvas before a two-column layout becomes too narrow. */
@media (max-width:1280px) {
  .floor-layout { grid-template-columns:minmax(0,1fr); }
  .fixture-panel { position:static; grid-column:1; grid-row:1; }
  .floor-stage-wrap { grid-column:1; grid-row:2; }
  .fixture-buttons { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* iPad Air and portrait tablet toolbar: shorter button labels and guaranteed non-overlap. */
@media (max-width:900px) {
  .action-label-full { display:none; }
  .action-label-short { display:inline; }
  .topbar-tools {
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-areas:
      "theme theme theme"
      "export import print";
  }
  .topbar .topbar-action {
    min-width:0;
    width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .floor-stage-wrap { padding:12px; overflow:hidden; }
  .fixture-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:700px) {
  .topbar-tools {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "theme theme"
      "export import"
      "print print";
  }
  .fixture-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:520px) {
  .table-seat { width:15px; height:15px; border-radius:5px; font-size:5.5px; border-width:1px; }
  .table-seat::after { left:3px; right:3px; bottom:-3px; height:3px; border-width:1px; }
  .seat-overflow { min-width:16px; height:12px; font-size:6px; }
}

/* Always print the completed chart, including on iPhone/iPad Safari. */
@media print {
  body.print-chart .view { display:none !important; }
  body.print-chart #view-chart { display:block !important; }
  body.print-chart #seatingChartOutput,
  body.print-chart .chart-table-card,
  body.print-chart .alpha-grid,
  body.print-chart .alpha-row { visibility:visible !important; opacity:1 !important; }
  body.print-chart .seating-chart-output { display:grid !important; }
  body.print-chart .chart-table-card { display:block !important; }
}