:root {
  color-scheme: light;
  --brand-50: #f7f2fa;
  --brand-100: #ede3f2;
  --brand-300: #cdb8d8;
  --brand-500: #a86f96;
  --brand-700: #81245f;
  --brand-800: #68194e;
  --brand-900: #4a153b;
  --page: #fcf8f2;
  --surface: #fffdfb;
  --border: #e6dce8;
  --ink: #25162f;
  --muted: #70677c;
  --pink: #e65f91;
  --blue: #5d91db;
  --empty: #b8b8c2;
  --shadow-card: 0 12px 30px rgba(74, 21, 59, 0.07);
  --shadow-raised: 0 16px 34px rgba(74, 21, 59, 0.15);
  font-family: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-width: 320px; background: var(--page); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(ellipse 48% 34% at -8% 40%, rgba(205, 184, 216, 0.36), transparent 70%),
    radial-gradient(ellipse 48% 40% at 108% 72%, rgba(237, 227, 242, 0.88), transparent 70%),
    var(--page);
}

button, input, select { font: inherit; }
button { color: inherit; }

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

.topbar {
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
  align-items: center;
  gap: 28px;
  padding: 18px clamp(24px, 4vw, 64px);
  border-bottom: 1px solid rgba(230, 220, 232, 0.8);
  background: rgba(255, 253, 251, 0.87);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 12px;
  color: var(--brand-900);
  text-decoration: none;
}

.brand__mark { width: 44px; height: 44px; fill: var(--brand-500); }
.brand__mark circle { fill: var(--brand-900); }

.brand__name {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.progress { display: flex; align-items: flex-start; justify-content: center; }
.progress i { width: clamp(24px, 4vw, 64px); height: 1px; margin-top: 17px; background: var(--border); }

.progress__item {
  min-width: 62px;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #91889a;
  font-size: 0.82rem;
}

.progress__item b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  font-size: 0.85rem;
}

.progress__item.is-active { color: var(--brand-800); font-weight: 700; }
.progress__item.is-active b { color: #fff; border-color: var(--brand-700); background: var(--brand-700); box-shadow: 0 0 0 6px var(--brand-100); }
.progress__item.is-complete { color: var(--brand-700); }
.progress__item.is-complete b { color: #fff; border-color: var(--brand-500); background: var(--brand-500); }

.locale-button {
  justify-self: end;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.7);
  cursor: pointer;
}

.page {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(56px, 8vh, 90px) 0 52px;
}

.page-heading { max-width: 850px; margin: 0 auto 48px; text-align: center; }
.eyebrow { margin: 0 0 12px; color: var(--brand-700); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; }
h1 { margin: 0; font-size: clamp(2.55rem, 5.1vw, 4.5rem); line-height: 1.03; letter-spacing: -0.035em; }

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.event-card {
  position: relative;
  min-height: 168px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255, 253, 251, 0.9);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); border-color: var(--brand-300); }
.event-card:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(205, 184, 216, 0.54), var(--shadow-raised); }
.event-card.is-selected { border-color: var(--brand-700); background: linear-gradient(155deg, #fffdfb, var(--brand-50)); }

.event-card__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: var(--brand-700);
  background: linear-gradient(145deg, #f7eff7, #eadde9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 16px rgba(74,21,59,.09);
  font-family: Georgia, serif;
  font-size: 2rem;
}

.event-card__label { font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; font-weight: 700; }

.event-card__check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  background: transparent;
  font-weight: 700;
}

.event-card.is-selected .event-card__check { color: #fff; background: var(--brand-700); }

.step-actions { display: flex; gap: 16px; margin-top: 38px; }
.step-actions--end { justify-content: flex-end; }

.button {
  min-height: 56px;
  min-width: 240px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 0 32px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px rgba(74,21,59,.14);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 24px rgba(74,21,59,.19); }
.button:active { transform: translateY(0); box-shadow: inset 0 2px 3px rgba(74,21,59,.18), 0 4px 10px rgba(74,21,59,.12); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(205,184,216,.62), 0 10px 22px rgba(74,21,59,.18); }
.button--primary { color: #fff; border-color: var(--brand-800); background: linear-gradient(180deg, #963474 0%, #7a1f5c 100%); }
.button--secondary { color: var(--ink); border-color: #cfc1d4; background: linear-gradient(#fffdfb, #f8f2f7); }
.button--ghost { min-width: auto; min-height: 44px; padding-inline: 18px; color: var(--brand-800); border-color: var(--border); background: rgba(255,255,255,.72); box-shadow: 0 5px 14px rgba(74,21,59,.08); }
.button--small { min-width: auto; min-height: 44px; padding-inline: 18px; border-radius: 13px; font-size: .9rem; }

.choice-group { display: flex; gap: 10px; flex-wrap: wrap; }
.choice-pill {
  min-height: 46px;
  padding: 0 19px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
}
.choice-pill.is-selected { color: var(--brand-800); border-color: var(--brand-700); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(205,184,216,.32); }

.split-layout { display: grid; grid-template-columns: minmax(360px, .85fr) minmax(480px, 1.35fr); gap: 22px; align-items: stretch; }
.panel {
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 30px;
  background: rgba(255,253,251,.92);
  box-shadow: var(--shadow-card);
}
.panel h2, .panel h3 { margin: 0; }
.form-stack { display: grid; gap: 22px; }
.field-group { display: grid; gap: 9px; }
.field-label { font-size: .9rem; font-weight: 700; color: var(--ink); }
.field-help { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.input-wrap { position: relative; }
.input-wrap input, .text-input, .select-input {
  width: 100%;
  min-height: 54px;
  padding: 0 54px 0 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  outline: none;
}
.input-wrap input:focus, .text-input:focus, .select-input:focus { border-color: var(--brand-700); box-shadow: 0 0 0 4px rgba(205,184,216,.42); }
.input-unit { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--muted); font-size: .86rem; }
.area-summary { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; border-radius: 16px; background: var(--brand-50); }
.area-summary strong { font-family: "Fraunces", Georgia, serif; font-size: 1.65rem; color: var(--brand-800); }
.upload-tile { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; min-height: 76px; padding: 16px 18px; border: 1px dashed var(--brand-300); border-radius: 16px; background: #fff; cursor: pointer; }
.upload-tile input { position: absolute; opacity: 0; pointer-events: none; }
.upload-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--brand-700); background: var(--brand-100); font-size: 1.25rem; }
.upload-tile b, .upload-tile small { display: block; }
.upload-tile small { margin-top: 3px; color: var(--muted); }

.venue-preview, .summary-plan {
  position: relative;
  min-height: 530px;
  overflow: hidden;
  border: 1px solid #e2d5dc;
  border-radius: 24px;
  background:
    linear-gradient(rgba(126,72,104,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,72,104,.055) 1px, transparent 1px),
    linear-gradient(145deg, #fff9f2, #efe4df);
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: inset 0 0 70px rgba(104,25,78,.05), var(--shadow-card);
}
.venue-preview::before, .summary-plan::before { content: "SAHNE"; position: absolute; top: 25px; left: 50%; transform: translateX(-50%); width: 150px; padding: 12px 0; border-radius: 12px; text-align: center; color: var(--brand-800); background: #e7d7e9; font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.preview-floor { position: absolute; inset: 84px 38px 54px; }
.preview-table { position: absolute; width: 84px; height: 84px; display: grid; place-items: center; border: 8px solid #f6eee9; border-radius: 50%; color: var(--brand-900); background: #fffdf9; box-shadow: 0 10px 18px rgba(92,55,73,.12), inset 0 0 0 1px #e5d7d2; font-family: "Fraunces", serif; font-weight: 700; transform: translate(-50%,-50%); }
.preview-table::after { content: ""; position: absolute; inset: -18px; border: 7px dotted #c99a9d; border-radius: 50%; opacity: .78; }
.preview-dance { position: absolute; left: 50%; top: 51%; width: 29%; aspect-ratio: 1.18; display: grid; place-items: center; transform: translate(-50%,-50%); border: 1px solid #e4bbc7; border-radius: 22px; color: #895b67; background: rgba(238,202,211,.58); font-family: "Fraunces", serif; font-weight: 700; }
.entrance-label { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--brand-800); font-size: .78rem; font-weight: 800; letter-spacing: .06em; }

.arrangement-grid { display: grid; grid-template-columns: .82fr 1.35fr .82fr; gap: 16px; }
.metric-card { min-height: 234px; }
.metric-card h3, .shape-panel h3 { font-size: 1.3rem; }
.metric-card p, .shape-panel p { margin: 5px 0 0; color: var(--muted); font-size: .88rem; }
.number-stepper { display: grid; grid-template-columns: 62px 1fr 62px; min-height: 76px; margin-top: 28px; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #fff; }
.number-stepper button { border: 0; color: var(--brand-700); background: var(--brand-50); font-size: 1.5rem; cursor: pointer; }
.number-stepper strong { display: grid; place-items: center; font-family: "Fraunces", serif; font-size: 2.1rem; }
.shape-panel { min-height: 234px; }
.shape-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.shape-card { position: relative; min-height: 132px; display: grid; place-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 17px; background: #fff; cursor: pointer; }
.shape-card.is-selected { border-color: var(--brand-700); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(205,184,216,.3); }
.shape-icon { display: block; width: 58px; height: 42px; border: 6px solid #c99791; background: #fff8f3; box-shadow: 0 7px 12px rgba(74,21,59,.1); }
.shape-icon.round { border-radius: 50%; }
.shape-icon.square { width: 44px; }
.shape-icon.rectangle { width: 67px; }
.capacity-card { display: grid; grid-template-columns: 1fr minmax(440px, 1.7fr); gap: 20px; align-items: center; margin-top: 17px; }
.capacity-copy { padding: 8px 18px; }
.status-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; color: #286446; background: #e4f4e9; font-weight: 700; font-size: .86rem; }
.status-badge--warning { color: #8a4b16; background: #fff0dc; }
.capacity-copy h3 { margin: 16px 0 4px; font-size: 1.65rem; }
.capacity-copy p { margin: 0; color: var(--muted); }
.mini-hall { min-height: 230px; border-radius: 20px; }

.summary-layout { display: grid; grid-template-columns: 340px 1fr; gap: 18px; }
.summary-list { margin: 0; padding: 0; list-style: none; }
.summary-list li { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 62px; border-bottom: 1px solid var(--border); }
.summary-list li:last-child { border: 0; }
.summary-list span { color: var(--muted); }
.summary-list strong { font-family: "Fraunces", serif; font-size: 1.15rem; }
.summary-plan { min-height: 560px; }

.editor-shell { min-height: 100vh; background: #f7f2f7; }
.editor-header { min-height: 80px; display: grid; grid-template-columns: auto minmax(240px,1fr) auto; align-items: center; gap: 24px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: #fffdfb; }
.event-name { min-width: 0; padding-left: 24px; border-left: 1px solid var(--border); }
.event-name strong, .event-name small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-name small { margin-top: 2px; color: var(--muted); }
.editor-actions { display: flex; gap: 10px; align-items: center; }
.save-status { margin-right: 8px; color: #347451; font-size: .84rem; }
.editor-layout { height: calc(100vh - 80px); display: grid; grid-template-columns: 330px 1fr; }
.inspector { z-index: 5; overflow-y: auto; padding: 24px; border-right: 1px solid var(--border); background: #fffdfb; box-shadow: 8px 0 26px rgba(74,21,59,.06); }
.inspector-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.inspector-title .button { width: 44px; min-width: 44px; padding: 0; flex: 0 0 44px; }
.inspector h2 { margin: 0; font-size: 1.8rem; }
.occupancy { display: inline-flex; margin-top: 7px; padding: 7px 12px; border-radius: 999px; color: #286446; background: #e4f4e9; font-size: .82rem; font-weight: 700; }
.inspector-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.inspector-section h3 { margin: 0 0 14px; font-size: 1rem; font-family: "DM Sans", sans-serif; }
.capacity-control { display: grid; grid-template-columns: 46px 1fr 46px; min-height: 46px; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; }
.capacity-control button { border: 0; color: var(--brand-700); background: var(--brand-50); cursor: pointer; }
.capacity-control strong { display: grid; place-items: center; }
.guest-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.guest-row { min-height: 35px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; }
.guest-row small { color: var(--muted); }
.guest-row--editable { grid-template-columns: 20px minmax(0, 1fr) 96px; padding: 5px; border: 1px solid transparent; border-radius: 10px; }
.guest-row--editable.is-selected { border-color: var(--brand-300); background: var(--brand-50); }
.guest-name-input, .guest-side-select { width: 100%; min-height: 34px; border: 1px solid var(--border); border-radius: 9px; color: var(--ink); background: #fff; font: 500 .78rem/1.2 "DM Sans", sans-serif; }
.guest-name-input { padding: 0 9px; }
.guest-side-select { padding: 0 6px; cursor: pointer; }
.guest-name-input:focus, .guest-side-select:focus { outline: 2px solid var(--brand-300); outline-offset: 1px; }
.seat-dot { width: 18px; height: 18px; display: block; border: 1px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(37,22,47,.18); }
.seat--empty { background: var(--empty); }
.seat--bride { background: var(--pink); }
.seat--groom { background: var(--blue); }
.seat--both { background: linear-gradient(to right, var(--pink) 0%, var(--pink) 50%, var(--blue) 50%, var(--blue) 100%); }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.legend-item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; }
.canvas-wrap { position: relative; min-width: 0; overflow: hidden; background: #ede6eb; }
.floor-canvas { position: absolute; inset: 18px 18px 84px; overflow: hidden; border: 1px solid #ddd1d8; border-radius: 20px; background: linear-gradient(rgba(126,72,104,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(126,72,104,.045) 1px, transparent 1px), #fbf5ef; background-size: 28px 28px; box-shadow: 0 14px 34px rgba(74,21,59,.09); touch-action: none; }
.stage { position: absolute; top: 18px; left: 50%; width: 220px; height: 64px; display: grid; place-items: center; transform: translateX(-50%); border-radius: 14px; color: var(--brand-800); background: #e5d6e7; font-weight: 800; }
.dance-floor { position: absolute; left: 50%; top: 48%; width: min(25%, 260px); aspect-ratio: 1.18; display: grid; place-items: center; transform: translate(-50%,-50%); border: 2px solid #e3b4c2; border-radius: 24px; color: #845966; background: rgba(237,200,210,.58); font-family: "Fraunces", serif; font-size: 1.1rem; font-weight: 700; }
.floor-entrance { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: var(--brand-800); font-size: .8rem; font-weight: 800; }
.canvas-table { position: absolute; z-index: 3; width: clamp(64px, 8vw, 116px); height: clamp(64px, 8vw, 116px); transform: translate(-50%,-50%); cursor: grab; user-select: none; touch-action: none; }
.canvas-table:active { cursor: grabbing; }
.table-surface { position: absolute; inset: 22%; display: grid; place-items: center; border: 1px solid #ddcfca; border-radius: 50%; background: #fffdfa; box-shadow: 0 8px 14px rgba(74,21,59,.12), inset 0 0 0 7px #f3eae5; text-align: center; font-size: clamp(.52rem, .72vw, .73rem); font-weight: 800; }
.canvas-table.shape--square .table-surface { border-radius: 13px; }
.canvas-table.shape--rectangle .table-surface { inset: 27% 13%; border-radius: 12px; }
.table-surface small { display: block; margin-top: 2px; color: var(--muted); font-size: .65rem; font-weight: 500; }
.canvas-table.is-selected::after { content: ""; position: absolute; inset: 7px; border: 2px solid var(--brand-700); border-radius: 18px; box-shadow: 0 0 0 3px rgba(129,36,95,.11); pointer-events: none; }
.seat-button { position: absolute; left: 50%; top: 50%; width: 22px; height: 18px; padding: 0; border: 3px solid #fffaf5; border-radius: 7px 7px 10px 10px; box-shadow: 0 2px 5px rgba(37,22,47,.22), inset 0 -3px 0 rgba(74,21,59,.08); transform: translate(-50%,-50%); cursor: pointer; }
.seat-button:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 2px; }
.floating-toolbar { position: absolute; left: 50%; bottom: 20px; min-height: 52px; display: flex; align-items: stretch; gap: 4px; padding: 5px; transform: translateX(-50%); border: 1px solid var(--border); border-radius: 17px; background: rgba(255,253,251,.94); box-shadow: 0 12px 32px rgba(74,21,59,.16); backdrop-filter: blur(14px); }
.tool-button { min-width: 78px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; }
.tool-button.is-active { color: #fff; background: var(--brand-700); }
.zoom-control { display: flex; align-items: center; gap: 7px; padding: 0 8px; border-left: 1px solid var(--border); color: var(--muted); }
.zoom-control button { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 9px; background: #fff; cursor: pointer; }
.custom-text, .custom-area { position: absolute; z-index: 1; transform: translate(-50%,-50%); color: var(--brand-800); }
.custom-text { padding: 8px 12px; border: 1px dashed var(--brand-300); border-radius: 10px; background: rgba(255,253,251,.84); font-weight: 700; }
.custom-area { width: 150px; height: 86px; display: grid; place-items: center; border: 2px dashed var(--brand-500); border-radius: 18px; background: rgba(237,227,242,.44); font-weight: 700; }
.venue-feature { position: absolute; z-index: 2; display: grid; place-items: center; transform: translate(-50%,-50%); border: 2px solid color-mix(in srgb, var(--venue-accent, #81245f) 62%, #fff); border-radius: 22px; color: color-mix(in srgb, var(--venue-accent, #81245f) 82%, #25162f); background: color-mix(in srgb, var(--venue-soft, #eadde9) 78%, rgba(255,255,255,.72)); box-shadow: 0 10px 24px rgba(74,21,59,.12), inset 0 1px rgba(255,255,255,.7); font-family: "Fraunces", Georgia, serif; font-size: clamp(.78rem, 1.2vw, 1.05rem); font-weight: 700; text-align: center; cursor: grab; user-select: none; touch-action: none; }
.venue-feature:active { cursor: grabbing; }
.venue-feature b { font: inherit; }
.feature-grip { position: absolute; top: 7px; left: 9px; opacity: .48; font-family: sans-serif; font-size: .72rem; letter-spacing: -3px; }
.venue-feature.is-selected { outline: 3px solid color-mix(in srgb, var(--venue-accent, #81245f) 78%, #fff); outline-offset: 4px; box-shadow: 0 0 0 7px rgba(129,36,95,.09), 0 12px 28px rgba(74,21,59,.16); }
.element-delete, .element-resize { position: absolute; z-index: 8; padding: 0; opacity: 0; pointer-events: none; transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.is-selected > .element-delete, .is-selected > .element-resize { opacity: 1; pointer-events: auto; }
.element-delete { top: -14px; right: 16px; width: 27px; height: 27px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 9px; color: #fff; background: #c73545; box-shadow: 0 5px 14px rgba(118,24,36,.34); cursor: pointer; }
.element-delete svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.element-delete:hover, .element-delete:focus-visible { transform: scale(1.08); background: #ad2435; box-shadow: 0 7px 18px rgba(118,24,36,.4); }
.element-delete:focus-visible, .element-resize:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.element-resize { width: 14px; height: 14px; border: 2px solid var(--brand-700); border-radius: 4px; background: #fff; box-shadow: 0 2px 7px rgba(74,21,59,.24); }
.element-resize--nw { left: -7px; top: -7px; cursor: nwse-resize; }
.element-resize--ne { right: -7px; top: -7px; cursor: nesw-resize; }
.element-resize--sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.element-resize--se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.element-resize:hover { transform: scale(1.2); background: var(--brand-50); }
.venue-feature--stage { border-radius: 16px; }
.is-collision { filter: saturate(1.2); outline: 4px solid rgba(194,49,62,.7); outline-offset: 3px; }
.venue-theme--wedding { --venue-accent:#8d2f6e; --venue-soft:#ead7e8; }
.venue-theme--engagement { --venue-accent:#9f557c; --venue-soft:#f1dce8; }
.venue-theme--henna { --venue-accent:#9d263f; --venue-soft:#f3d3d8; }
.venue-theme--birthday { --venue-accent:#aa6b42; --venue-soft:#f5dfcf; }
.venue-theme--corporate { --venue-accent:#3f5b79; --venue-soft:#dce6ef; }
.venue-theme--other { --venue-accent:#6f527f; --venue-soft:#e7dfec; }
.floor-canvas.venue-theme--engagement { background-color:#fbf2f6; }
.floor-canvas.venue-theme--henna { background-color:#fcf1f1; }
.floor-canvas.venue-theme--birthday { background-color:#fff7ee; }
.floor-canvas.venue-theme--corporate { background-color:#f2f6f9; }
.inspector-event-details .field-row { grid-template-columns: 1fr; }
.editor-layout.is-preview { grid-template-columns: 1fr; }
.editor-layout.is-preview .inspector, .editor-layout.is-preview .floating-toolbar { display: none; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 340px; padding: 14px 17px; border: 1px solid var(--border); border-radius: 14px; color: var(--ink); background: #fff; box-shadow: var(--shadow-raised); animation: toast-in 180ms ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; min-height: 84px; }
  .progress { grid-column: 1 / -1; grid-row: 2; width: 100%; padding-top: 8px; }
  .locale-button { grid-column: 2; grid-row: 1; }
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-layout, .summary-layout { grid-template-columns: 1fr; }
  .arrangement-grid { grid-template-columns: 1fr 1fr; }
  .shape-panel { grid-column: 1 / -1; grid-row: 1; }
  .capacity-card { grid-template-columns: 1fr; }
  .editor-header { grid-template-columns: 1fr auto; }
  .editor-header .brand { display: none; }
  .event-name { padding-left: 0; border-left: 0; }
  .editor-layout { grid-template-columns: 280px 1fr; }
  .editor-actions .button--ghost { display: none; }
}

@media (max-width: 620px) {
  .topbar { padding: 14px 18px; gap: 14px; }
  .brand__name { font-size: 1.35rem; }
  .brand__mark { width: 38px; height: 38px; }
  .progress__item span { display: none; }
  .progress__item { min-width: 38px; }
  .page { width: min(100% - 28px, 1180px); padding-top: 48px; }
  .event-grid { grid-template-columns: 1fr; gap: 14px; }
  .event-card { min-height: 112px; grid-template-columns: auto 1fr; justify-items: start; align-items: center; align-content: center; text-align: left; }
  .event-card__icon { width: 54px; height: 54px; }
  .step-actions, .step-actions--end { justify-content: stretch; }
  .button { width: 100%; min-width: 0; }
  .field-row, .arrangement-grid { grid-template-columns: 1fr; }
  .shape-panel { grid-column: auto; }
  .shape-options { grid-template-columns: 1fr 1fr 1fr; }
  .capacity-card { padding: 20px; }
  .summary-plan { min-height: 480px; }
  .editor-header { min-height: 70px; padding: 10px 14px; }
  .editor-actions .save-status, .editor-actions .button--ghost { display: none; }
  .editor-layout { height: calc(100vh - 70px); grid-template-columns: 1fr; }
  .inspector { position: absolute; left: 12px; right: 12px; bottom: 82px; z-index: 10; max-height: 54vh; display: none; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-raised); }
  .inspector.is-open { display: block; }
  .floor-canvas { inset: 10px 10px 76px; }
  .floating-toolbar { max-width: calc(100% - 20px); overflow-x: auto; justify-content: flex-start; }
  .tool-button { min-width: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* The approved 1672 × 941 screens are the visual source of truth. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.reference-mode {
  min-width: 0;
  overflow: hidden;
  background: #f7f2f5;
}

.reference-mode .app-shell {
  width: 100vw;
  height: 100vh;
  min-height: 0;
}

.reference-app {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: auto;
  background: #f7f2f5;
}

.reference-shell {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.reference-canvas {
  position: relative;
  width: min(100vw, calc(100vh * 1.7768331562));
  aspect-ratio: 1672 / 941;
  flex: none;
  overflow: hidden;
  background: #fbf8f6;
  box-shadow: 0 0 42px rgba(61, 35, 55, 0.08);
}

.reference-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.reference-brand-fix {
  position: absolute;
  left: 2.8%;
  top: 1.0%;
  z-index: 8;
  width: 22.5%;
  height: 8.2%;
  display: flex;
  align-items: center;
  gap: 2.1%;
  padding: 0 1.1%;
  border: 0;
  color: #351336;
  background: rgba(255,253,251,.985);
  cursor: pointer;
}

.reference-brand-fix__mark {
  width: 17%;
  max-height: 78%;
  flex: 0 0 auto;
  fill: #a86f96;
}

.reference-brand-fix__mark circle { fill: #4a153b; }
.reference-brand-fix span { display:flex; align-items:center; min-height:100%; white-space:nowrap; font:700 clamp(18px,2.15vw,35px)/1 "Fraunces",Georgia,serif; transform:translateY(-1%); }

.reference-event-venue {
  position: absolute;
  z-index: 1;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #f7f2f5;
  pointer-events: none;
  user-select: none;
  animation: reference-venue-in 260ms ease-out both;
}

.reference-event-venue--venue { left:42.25%; top:20.65%; width:49.05%; height:53.5%; border-radius:9px; }
.reference-event-venue--arrangement { left:28.0%; top:62.85%; width:68.0%; height:26.1%; border-radius:0 13px 13px 0; object-position:center 48%; }
.reference-event-venue--summary { left:30.45%; top:23.2%; width:65.4%; height:62.9%; border-radius:13px; }

@keyframes reference-venue-in {
  from { transform: scale(.994); filter:blur(1px); }
  to { transform: scale(1); filter:blur(0); }
}

.reference-hotspot,
.reference-file {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  color: transparent;
  background: transparent;
  font-size: 0;
  cursor: pointer;
  text-decoration: none;
}

.reference-hotspot:hover {
  box-shadow: inset 0 0 0 2px rgba(129, 36, 95, 0.18);
}

.reference-hotspot.is-current { box-shadow: inset 0 0 0 3px #81245f, 0 8px 22px rgba(74,21,59,.16); }
.reference-hotspot.is-current::after { content:"✓"; position:absolute; top:12px; right:12px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#81245f; font-size:16px; }
.reference-hide-default-check { position:absolute; left:70.1%; top:15.8%; z-index:3; width:3.6%; aspect-ratio:1; border-radius:50%; background:#efe3f0; box-shadow:0 0 0 4px rgba(239,227,240,.86); }
.reference-neutral-card { position:absolute; z-index:3; pointer-events:none; border-radius:18px; box-shadow: 0 0 0 7px rgba(245,240,242,.98), inset 0 0 0 5px rgba(247,239,248,.98); }
.reference-neutral-card::after { content:""; position:absolute; top:6%; right:3%; width:31px; height:31px; border-radius:50%; background:#f7ecf7; }
.reference-neutral-event { left:52.4%; top:14.5%; width:21%; height:24.2%; background:rgba(255,253,251,.22); backdrop-filter:saturate(.96) brightness(1.03); }
.reference-neutral-event::after { top:3.5%; right:1.2%; width:38px; height:38px; box-shadow:0 0 0 5px #f7ecf7; }
.reference-neutral-round { left:31.1%; top:37.6%; width:12%; height:21.4%; z-index:1; }
.reference-neutral-room { left:6.2%; top:29.7%; width:10.3%; height:15.4%; z-index:1; }

.reference-hotspot:focus-visible,
.reference-file:focus-within {
  outline: 4px solid #81245f;
  outline-offset: 2px;
}

.reference-file input {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  cursor: pointer;
}

.reference-seat {
  z-index: 4;
  width: 1.52%;
  height: 3.10%;
  padding: 0;
  border: max(1px, 0.12vw) solid #fffaf5;
  border-radius: 42%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 5px rgba(48, 30, 42, 0.32);
}

.reference-seat.seat--empty { background: #b8b8c2; }
.reference-seat.seat--bride { background: #e65f91; }
.reference-seat.seat--groom { background: #5d91db; }
.reference-seat.seat--both {
  background: linear-gradient(to right, #e65f91 0%, #e65f91 50%, #5d91db 50%, #5d91db 100%);
}

.reference-event-summary { position:absolute; left:18.8%; bottom:3.7%; z-index:4; width:29%; min-height:64px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-items:center; gap:2px 12px; padding:11px 16px; border:1px solid rgba(129,36,95,.22); border-radius:18px; color:#4a153b; background:rgba(255,253,251,.92); box-shadow:0 12px 30px rgba(74,21,59,.12); text-align:left; cursor:pointer; backdrop-filter:blur(16px); }
.reference-event-summary b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 17px/1.2 "Fraunces", Georgia, serif; }
.reference-event-summary span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#70677c; font-size:12px; }
.reference-event-summary em { grid-column:2; grid-row:1 / 3; font-style:normal; font-size:20px; }
.reference-modal__backdrop { position:absolute; inset:0; z-index:19; border:0; background:rgba(45,26,42,.28); backdrop-filter:blur(3px); }
.reference-modal { position:absolute; left:50%; top:50%; z-index:20; width:min(560px,82%); transform:translate(-50%,-50%); padding:28px; border:1px solid #e2d7e3; border-radius:26px; color:#25162f; background:#fffdfb; box-shadow:0 28px 80px rgba(43,20,38,.28); }
.reference-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.reference-modal__head small { color:#81245f; font-weight:800; letter-spacing:.12em; }
.reference-modal__head h2 { margin:5px 0 0; font-size:30px; }
.reference-modal__head button { width:42px; height:42px; border:1px solid #e6dce8; border-radius:13px; background:#fff; cursor:pointer; }
.reference-modal__grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.reference-modal__grid label:first-child { grid-column:1 / -1; }
.reference-modal__grid label { display:grid; gap:7px; color:#4a153b; font-size:13px; font-weight:700; }
.reference-modal__grid input { width:100%; min-height:50px; padding:0 14px; border:1px solid #e6dce8; border-radius:13px; color:#25162f; background:#fff; outline:none; }
.reference-modal__grid input:focus { border-color:#81245f; box-shadow:0 0 0 4px rgba(205,184,216,.45); }
.reference-modal__save { width:100%; min-height:50px; margin-top:20px; border:1px solid #68194e; border-radius:14px; color:#fff; background:linear-gradient(#963474,#7a1f5c); font-weight:800; cursor:pointer; box-shadow:0 9px 20px rgba(74,21,59,.18); }
.reference-number-input { position:absolute; z-index:4; padding:0 54px 0 18px; border:0; color:#25162f; background:#fffdfb; font:700 24px/1 "Fraunces",Georgia,serif; outline:none; }
.reference-number-input:focus { box-shadow:inset 0 0 0 3px rgba(129,36,95,.38); }
.reference-area-value { position:absolute; left:28.0%; top:60.5%; z-index:4; width:11.8%; height:7.1%; display:grid; place-items:center; white-space:nowrap; color:#68194e; background:#f7eff7; font:700 25px/1 "Fraunces",Georgia,serif; }
.reference-step-value { position:absolute; z-index:4; display:grid; place-items:center; color:#25162f; background:#fffdfb; font:700 35px/1 "Fraunces",Georgia,serif; }
.reference-step-value--guests { left:11%; top:42%; width:10.8%; height:8%; }
.reference-step-value--tables { left:82%; top:36.3%; width:8.5%; height:6.4%; }
.reference-step-value--seats { left:82%; top:53.3%; width:8.5%; height:6.4%; }
.reference-capacity-value { position:absolute; left:6.2%; top:64.7%; z-index:4; width:24.8%; min-height:17.0%; display:grid; align-content:center; gap:5px; padding:8px 16px; color:#25162f; background:rgba(255,253,251,.99); border-radius:12px; }
.reference-capacity-value b { display:block; white-space:nowrap; font:700 clamp(14px,1.25vw,21px)/1.2 "Fraunces",Georgia,serif; }
.reference-capacity-value span { display:block; white-space:nowrap; color:#367450; font-size:clamp(10px,0.78vw,13px); font-weight:700; }
.reference-capacity-value small { color:#70677c; font-size:11px; }
.reference-capacity-value.status-danger { border-left:4px solid #c2444c; }
.reference-capacity-value.status-danger span { color:#b23b46 !important; }
.reference-capacity-value.status-surplus { border-left:4px solid #b7833f; }
.reference-capacity-value.status-surplus span { color:#9b6726 !important; }
.reference-summary-values { position:absolute; left:20.8%; top:25.5%; z-index:4; width:7.2%; height:51.5%; display:grid; grid-template-rows:repeat(6,1fr); align-items:center; color:#25162f; background:linear-gradient(90deg,rgba(255,253,251,.12),rgba(255,253,251,.99) 18%); font:700 clamp(13px,1.15vw,19px)/1 "Fraunces",Georgia,serif; }
.reference-summary-values b { display:flex; align-items:center; min-height:100%; }
.reference-summary-status { position:absolute; left:5.8%; top:77.0%; z-index:4; width:22.6%; min-height:6.4%; display:flex; align-items:center; padding:0 24px; border-radius:14px; color:#286446; background:rgba(228,244,233,.98); font-size:15px; font-weight:800; }
.reference-summary-status.status-danger { color:#a73946; background:rgba(253,231,232,.98); }
.reference-summary-status.status-surplus { color:#8d5f26; background:rgba(255,241,220,.98); }

@media (max-width: 760px) and (orientation: portrait) {
  body.reference-mode { overflow: auto; }
  .reference-app { place-items: start center; }
  .reference-shell { width: 100%; height: auto; min-width: 0; min-height: 0; display: block; }
  .reference-canvas { width: 100vw; max-width: 100%; overflow: visible; }
  .reference-event-summary { min-height: 34px; padding: 5px 8px; border-radius: 9px; }
  .reference-event-summary b { font-size: 9px; }
  .reference-event-summary span { font-size: 7px; }
  .reference-event-summary em { font-size: 11px; }
  .reference-hotspot.is-current::after { top:4px; right:4px; width:15px; height:15px; font-size:8px; }
  .reference-brand-fix span { font-size:10px; }
  .reference-number-input { padding: 0 22px 0 8px; font-size: 13px; }
  .reference-area-value, .reference-step-value { font-size: 14px; }
  .reference-capacity-value { min-height: 36px; padding: 3px 7px; }
  .reference-capacity-value b { font-size: 10px; }
  .reference-capacity-value span { font-size: 7px; }
  .reference-summary-values { font-size: 10px; }
  .reference-summary-status { min-height: 34px; padding: 3px 7px; border-radius: 8px; font-size: 8px; }
  .reference-modal { width: 94%; padding: 18px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .reference-event-venue { animation: none; }
}