:root {
  --ink: #f8f5fa;
  --paper: #312d55;
  --deep: #272446;
  --purple: #5a2d87;
  --lilac: #cfbddb;
  --accent: #ad79c2;
  --line: color-mix(in srgb, var(--lilac) 45%, transparent);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  background: var(--deep);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.screen { width: 100vw; height: 100vh; overflow: hidden; }

.menu-screen {
  background:
    radial-gradient(ellipse 45% 65% at 50% 112%, rgb(179 104 196 / 52%), transparent 68%),
    radial-gradient(ellipse 45% 52% at 92% 5%, rgb(90 45 135 / 72%), transparent 74%),
    linear-gradient(123deg, #242142 0%, #35305c 46%, #2a294f 100%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(12px, 2vh, 28px);
  padding: clamp(9px, 2vw, 36px);
}

.menu-header { border-bottom: clamp(2px, .35vh, 5px) solid var(--lilac); padding-bottom: clamp(8px, 1.2vh, 16px); }
.brand-header { align-items: center; display: flex; justify-content: space-between; gap: 32px; }
.eyebrow { color: var(--lilac); font-size: clamp(11px, 1.4vw, 22px); font-weight: 700; letter-spacing: .16em; margin: 0 0 .25em; text-transform: uppercase; }
h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(36px, 6vw, 96px); line-height: .9; margin: 0; }
.menu-header h1 span { color: var(--lilac); font-size: .62em; }
.logo-frame { align-items: center; background: #fff; border: clamp(2px, .3vw, 5px) solid var(--lilac); border-radius: 50%; display: flex; flex: 0 0 auto; height: clamp(88px, 13vw, 205px); justify-content: center; overflow: hidden; width: clamp(88px, 13vw, 205px); }
.gemini-logo { display: block; height: 100%; object-fit: cover; width: 100%; }

.menu-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 80px); min-height: 0; }
.menu-column { min-width: 0; }
.section-title { border-bottom: 2px solid var(--lilac); color: var(--lilac); font-family: Georgia, 'Times New Roman', serif; font-size: var(--title-size, clamp(20px, 2.6vw, 48px)); line-height: 1; margin: 0 0 var(--row-gap, clamp(8px, 1.3vh, 18px)); padding: 0 0 var(--row-gap, clamp(8px, 1.3vh, 18px)); }
.section-title:not(:first-child) { margin-top: var(--section-gap, clamp(18px, 3.5vh, 42px)); }
.menu-item { align-items: baseline; display: grid; font-size: var(--item-size, clamp(16px, 2.1vw, 38px)); gap: .75em; grid-template-columns: minmax(0, 1fr) auto; line-height: 1.2; margin-bottom: var(--row-gap, clamp(8px, 1.3vh, 18px)); }
.menu-item span { min-width: 0; overflow-wrap: anywhere; }
.menu-item strong { color: var(--lilac); white-space: nowrap; }

.manage-screen { background: linear-gradient(125deg, #29254a, #403460 60%, #302953); overflow-x: hidden; overflow-y: auto; padding: clamp(18px, 3vh, 42px) clamp(18px, 3vw, 56px); }
.manage-header { align-items: end; display: flex; justify-content: space-between; gap: 24px; }
.manage-header h1 { font-size: clamp(28px, 4vw, 62px); }
.manage-logo { background: white; border: 2px solid var(--lilac); border-radius: 50%; height: clamp(64px, 8vw, 112px); object-fit: cover; width: clamp(64px, 8vw, 112px); }
.actions { align-items: flex-start; display: flex; gap: 10px; }
.actions > .button, .save-control { width: clamp(130px, 14vw, 200px); }
.button, .remove { border: 0; cursor: pointer; font: inherit; }
.button { align-items: center; background: var(--accent); color: #251d3b; display: flex; font-weight: 700; justify-content: center; min-height: clamp(56px, 7vw, 82px); padding: .75em 1.1em; text-align: center; text-decoration: none; width: 100%; }
.button.secondary { background: var(--lilac); color: #251d3b; }
.hint, .status { font-size: clamp(13px, 1.2vw, 18px); margin: 1vh 0 2vh; }
.status { color: var(--accent); font-weight: 700; min-height: 1.2em; }
.save-control { align-items: center; display: flex; flex-direction: column; gap: 6px; }
.save-feedback { background: transparent; color: transparent; font-size: clamp(11px, 1vw, 15px); margin: 0; max-width: 16em; min-height: 1.2em; text-align: center; }
.save-feedback.is-pending { color: var(--lilac); }
.save-feedback.is-success { color: #d4f5d4; }
.save-feedback.is-error { color: #ffb5bd; }
.editor-columns { height: calc(100vh - clamp(160px, 24vh, 250px)); }
.editor-column { border-top: 3px solid var(--lilac); min-width: 0; padding-top: 10px; }
.editor-labels, .editor-row { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 7.5em 2em; }
.editor-labels { font-size: .85em; font-weight: 700; grid-template-columns: minmax(0, 1fr) 7.5em 2em; margin-bottom: 6px; }
.editor-labels span:nth-child(2) { grid-column: 2; }
.editor-row { margin-bottom: 7px; }
.editor-row input { background: rgb(255 255 255 / 95%); border: 1px solid var(--line); border-radius: 3px; color: #292444; font: inherit; min-width: 0; padding: .55em; width: 100%; }
.item-price { text-align: right; }
.editor-row.is-heading { margin-top: 1.25em; }
.editor-row.is-heading .item-name { border-color: var(--ink); border-width: 0 0 2px; border-radius: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.15em; font-weight: 700; }
.editor-row.is-heading .item-price { border-color: transparent; color: transparent; }
.editor-row.is-heading .item-price::placeholder { color: transparent; }
.remove { background: transparent; color: var(--lilac); font-size: 1.65em; line-height: 1; padding: 0; }

@media (max-width: 850px), (orientation: portrait) {
  html, body, .screen { overflow: auto; }
  .menu-screen { height: auto; min-height: 100vh; }
  .menu-columns { grid-template-columns: 1fr; }
  .manage-screen { height: auto; min-height: 100vh; }
  .editor-columns { height: auto; grid-template-columns: 1fr; }
  .manage-header { align-items: flex-start; flex-direction: column; }
}