@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap');

html.admin-booting .admin-shell { visibility: hidden; }

:root {
  --ink: #18251f;
  --muted: #69746e;
  --line: #e5e9e5;
  --paper: #fbfcfa;
  --card: #fff;
  --green: #1e6c49;
  --green-dark: #155238;
  --green-soft: #e7f2ea;
  --orange: #b74b29;
  --orange-soft: #fff0e9;
  --sidebar: #16372a;
  --sidebar-muted: #a9bdb2;
  --radius: 16px;
  --shadow: 0 12px 30px rgba(23, 47, 36, .055);
  font-family: 'DM Sans', Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; margin: 0; background: var(--paper); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(30, 108, 73, .3); outline-offset: 2px; }

.admin-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 23px 14px 16px; overflow-y: auto; color: #fff; background: var(--sidebar); }
.brand { display: flex; gap: 10px; align-items: center; margin: 0 8px 33px; color: #fff; text-decoration: none; }
.brand-mark { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; color: #16372a; background: #d8edb5; border-radius: 12px; font-family: Newsreader, Georgia, serif; font-size: 25px; font-weight: 600; }
.brand strong { display: block; font-size: 14px; letter-spacing: -.02em; }
.sidebar-nav { display: grid; gap: 4px; }
.sidebar-nav button { display: flex; gap: 11px; align-items: center; min-height: 42px; border: 0; padding: 0 11px; color: var(--sidebar-muted); background: transparent; border-radius: 10px; text-align: left; font-size: 13px; font-weight: 500; transition: background .15s ease, color .15s ease; }
.sidebar-nav button > span { display: grid; width: 17px; place-items: center; font-size: 18px; line-height: 1; }
.sidebar-nav button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sidebar-nav button.is-active { color: #18372a; background: #e3efcd; font-weight: 700; }
.sidebar-nav em { margin-left: auto; padding: 3px 6px; color: #93aa9e; background: rgba(255,255,255,.08); border-radius: 99px; font-size: 9px; font-style: normal; font-weight: 600; letter-spacing: .03em; }
.sidebar-bottom { display: grid; gap: 17px; margin-top: auto; }
.help-link { display: flex; width: 100%; min-height: 43px; gap: 9px; align-items: center; border: 1px solid #f7e5a2; padding: 8px 10px; color: #173d2a; background: linear-gradient(135deg, #f9e7a5, #f2d582); border-radius: 10px; box-shadow: 0 7px 18px rgba(0,0,0,.16); font-size: 12px; font-weight: 800; line-height: 1.2; text-align: left; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.help-link__icon { display: grid; flex: 0 0 23px; place-items: center; width: 23px; height: 23px; }.help-link__icon::before { width: 19px; height: 19px; background: #111; content: ''; -webkit-mask: url('/assets/header-icons/support-help.png') center / contain no-repeat; mask: url('/assets/header-icons/support-help.png') center / contain no-repeat; }.help-link__label { min-width: 0; }.help-link:hover { color: #173d2a; filter: brightness(1.04); box-shadow: 0 10px 23px rgba(0,0,0,.23); transform: translateY(-1px); }.help-link:focus-visible { outline: 3px solid #fff2be; outline-offset: 3px; }
.account { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 12px 9px 0; border-top: 1px solid rgba(255,255,255,.14); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; color: #143428; background: #f2d5a7; border-radius: 50%; font-size: 10px; font-weight: 700; }
.account strong, .account small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account strong { font-size: 12px; }.account small { margin-top: 2px; color: var(--sidebar-muted); font-size: 10px; }
.more-button { border: 0; padding: 4px; color: var(--sidebar-muted); background: transparent; letter-spacing: 1px; }

.main-area { display: flex; flex-direction: column; min-width: 0; }
.topbar { position: sticky; z-index: 5; top: 0; display: flex; justify-content: space-between; gap: 24px; align-items: center; min-height: 75px; border-bottom: 1px solid var(--line); padding: 0 42px; background: rgba(251,252,250,.92); backdrop-filter: blur(12px); }
.breadcrumb { display: flex; gap: 8px; color: var(--muted); font-size: 12px; }.breadcrumb strong { color: var(--ink); font-weight: 600; }
.topbar-actions, .heading-actions { display: flex; gap: 10px; align-items: center; }.topbar-actions { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; min-width: 0; }.topbar-language-group { display: flex; min-width: 0; gap: 10px; align-items: center; justify-content: center; justify-self: center; }.topbar-menu-link { justify-self: center; }.topbar-primary-actions { display: flex; min-width: 0; gap: 10px; align-items: center; justify-self: end; }.interface-language { display: inline-flex; flex: 0 0 auto; gap: 10px; align-items: center; justify-content: center; color: #40594a; white-space: nowrap; font-size: 12px; font-weight: 600; }.interface-language-label { display: inline-block; }.interface-language select { max-width: 132px; border: 1px solid #d7e1da; padding: 8px 9px; color: var(--ink); background: #fff; border-radius: 8px; font: inherit; font-size: 11px; font-weight: 600; }
.saved-state { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-size: 11px; }.saved-state i { width: 7px; height: 7px; background: #5cac80; border-radius: 50%; }.saved-state.saving i { background: #c18d3e; }.saved-state.error { color: var(--orange); }.saved-state.error i { background: var(--orange); }
.button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 38px; border: 1px solid transparent; padding: 8px 13px; border-radius: 9px; font-size: 12px; font-weight: 700; line-height: 1; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }.button:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(28,67,49,.11); }.button:disabled { cursor: not-allowed; opacity: .55; transform: none; }.button-primary { color: #fff; background: var(--green); }.button-primary:hover { background: var(--green-dark); }.button-secondary { border-color: #d8dfd9; color: #31503e; background: #fff; }.button-secondary:hover { background: #f6faf7; }.topbar-menu-link { border-color: #78bce7; color: #155b82; background: #f5fbff; box-shadow: inset 0 1px rgba(255,255,255,.9), 0 3px 8px rgba(35,117,166,.13); text-decoration: none; }.topbar-menu-link:hover { border-color: #439fd6; color: #0d4f75; background: #edf8ff; box-shadow: inset 0 1px rgba(255,255,255,.95), 0 5px 12px rgba(35,117,166,.18); text-decoration: none; }
.external-link-icon { display: inline-grid; flex: 0 0 auto; width: 17px; height: 17px; place-items: center; }
.external-link-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }
.topbar-publish.is-published { border-color: #102d21; color: #c5d2cb; background: #18382a; filter: saturate(.5); opacity: 1; }

.workspace { flex: 1 0 auto; width: min(1680px, 100%); margin: 0 auto; padding: 42px; }.view { min-width: 0; }
.admin-legal-footer { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 21px 42px; color: var(--muted); background: #f7f9f7; }.admin-legal-footer__inner { display: flex; justify-content: space-between; gap: 20px; align-items: center; width: min(1680px, 100%); margin: 0 auto; }.admin-legal-footer strong { color: #40594a; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.admin-legal-links { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: flex-end; }.admin-legal-links a { color: #486353; font-size: 11px; font-weight: 600; text-decoration: none; }.admin-legal-links a:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.page-heading { display: flex; justify-content: space-between; gap: 25px; align-items: flex-start; margin-bottom: 29px; }.page-heading h1 { margin: 3px 0 8px; font-family: Newsreader, Georgia, serif; font-size: clamp(32px, 3vw, 45px); font-weight: 600; letter-spacing: -.045em; line-height: 1; }.page-heading > div > p:not(.eyebrow) { max-width: 640px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }.eyebrow { margin: 0; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .11em; line-height: 1.3; text-transform: uppercase; }
.surface-card { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }.card-heading { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }.card-heading h2 { margin: 4px 0 0; font-family: Newsreader, Georgia, serif; font-size: 25px; font-weight: 600; letter-spacing: -.035em; }.text-button { border: 0; padding: 4px 0; color: var(--green); background: transparent; font-size: 12px; font-weight: 700; }.text-button:hover { color: var(--green-dark); text-decoration: underline; }

.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }.metric-card { padding: 21px 22px; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }.metric-card span, .metric-card small { display: block; color: var(--muted); font-size: 11px; }.metric-card strong { display: block; margin: 13px 0 5px; font-family: Newsreader, Georgia, serif; font-size: 39px; font-weight: 600; letter-spacing: -.05em; }.overview-columns { display: grid; grid-template-columns: 1.35fr 1fr; gap: 15px; margin-top: 15px; }.overview-columns .surface-card { padding: 24px; }
.audit-log { display: grid; margin-top: 17px; }.audit-entry { display: grid; grid-template-columns: 28px 1fr auto; gap: 11px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }.audit-icon { display: grid; place-items: center; width: 26px; height: 26px; color: var(--green); background: var(--green-soft); border-radius: 50%; font-size: 14px; }.audit-entry strong, .audit-entry p { display: block; margin: 0; }.audit-entry strong { font-size: 12px; }.audit-entry p, .audit-entry time { margin-top: 2px; color: var(--muted); font-size: 10px; }.audit-entry time { align-self: start; white-space: nowrap; }
.checklist ul { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }.checklist li { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 12px; }.checklist li span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; }.checklist li.is-valid span { color: #fff; background: var(--green); }.checklist li.is-warning span { color: var(--orange); background: var(--orange-soft); }

.menu-heading { align-items: flex-end; }.editor-layout { display: grid; grid-template-columns: minmax(280px, .68fr) minmax(360px, .88fr) minmax(330px, .78fr); gap: 15px; align-items: start; }.menu-list-panel { min-height: 630px; overflow: hidden; }.menu-list-toolbar { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }.search { display: flex; flex: 1; gap: 8px; align-items: center; height: 36px; padding: 0 10px; color: var(--muted); background: #f5f7f5; border-radius: 8px; }.search span { font-size: 20px; line-height: 1; }.search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }.icon-button { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border: 1px solid #d9e1dc; padding: 0; color: var(--green); background: #fff; border-radius: 8px; font-size: 20px; line-height: 1; }.icon-button:hover { background: var(--green-soft); }.danger-icon { color: var(--orange); }.danger-icon:hover { background: var(--orange-soft); }
.category-pills-shell { position: relative; min-width: 0; border-bottom: 1px solid var(--line); background: #fff; }.category-pills { display: flex; gap: 7px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; padding: 13px 40px 9px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #a9bbae transparent; }.category-pills::-webkit-scrollbar { height: 5px; }.category-pills::-webkit-scrollbar-track { background: transparent; }.category-pills::-webkit-scrollbar-thumb { background: #a9bbae; border-radius: 99px; }.category-pills:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }.category-pills button { flex: 0 0 auto; border: 1px solid #dde4df; padding: 6px 8px 6px 10px; color: #496052; background: #fff; border-radius: 99px; font-size: 10px; font-weight: 600; white-space: nowrap; }.category-pills button span { margin-left: 4px; color: #7d8a81; }.category-pills button.is-active { border-color: var(--green); color: #fff; background: var(--green); }.category-pills button.is-active span { color: #d9eee0; }.category-pills-scroll { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 34px; height: calc(100% - 5px); border: 0; padding: 0; color: var(--green); background: #fff; font-size: 25px; font-weight: 500; line-height: 1; transform: translateY(-50%); transition: opacity .15s ease, color .15s ease; }.category-pills-scroll:hover { color: var(--green-dark); }.category-pills-scroll:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }.category-pills-scroll--prev { left: 0; background: linear-gradient(90deg, #fff 72%, rgba(255,255,255,0)); }.category-pills-scroll--next { right: 0; background: linear-gradient(270deg, #fff 72%, rgba(255,255,255,0)); }.category-pills-scroll:disabled { opacity: 0; pointer-events: none; }.category-pills-shell:not(.has-overflow) .category-pills { padding-inline: 14px; }
.menu-item-list { display: grid; padding: 7px; }.menu-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 63px; border: 0; border-bottom: 1px solid #edf0ed; padding: 9px 8px; color: var(--ink); background: transparent; text-align: left; }.menu-row:last-child { border-bottom: 0; }.menu-row:hover, .menu-row.is-selected { background: #f0f7f2; }.menu-row.is-selected { box-shadow: inset 2px 0 var(--green); }.food-image { display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; color: #8aa894; background: #eaf2eb; border-radius: 9px; font-size: 18px; }.food-image img { width: 100%; height: 100%; object-fit: cover; }.menu-row-content, .menu-row-meta { min-width: 0; }.menu-row-content strong, .menu-row-content small, .menu-row-meta b, .menu-row-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.menu-row-content strong { font-size: 12px; font-weight: 700; }.menu-row-content small, .menu-row-meta small { margin-top: 3px; color: var(--muted); font-size: 10px; }.menu-row-meta { text-align: right; }.menu-row-meta b { color: #365946; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; }.menu-row-meta small.is-unavailable { color: var(--orange); }.empty-list { display: grid; place-items: center; min-height: 260px; color: var(--muted); text-align: center; }.empty-list span { color: #a5b5aa; font-size: 28px; }.empty-list p { font-size: 12px; }

.item-editor { min-height: 630px; padding: 24px; }.empty-editor { display: grid; place-items: center; min-height: 530px; color: var(--muted); text-align: center; }.empty-editor > span { display: grid; place-items: center; width: 46px; height: 46px; color: var(--green); background: var(--green-soft); border-radius: 50%; font-size: 22px; }.empty-editor h2 { margin: 17px 0 5px; color: var(--ink); font-family: Newsreader, Georgia, serif; font-size: 25px; font-weight: 600; }.empty-editor p { max-width: 230px; margin: 0; font-size: 12px; line-height: 1.5; }.editor-title-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.editor-title-row h2 { max-width: 280px; margin: 5px 0 0; overflow-wrap: anywhere; font-family: Newsreader, Georgia, serif; font-size: 27px; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.quick-controls { display: flex; gap: 18px; padding: 17px 0; }.toggle-field { display: inline-flex; gap: 7px; align-items: center; color: #40594a; font-size: 11px; }.toggle-field input { position: absolute; opacity: 0; }.toggle-field > span { position: relative; width: 31px; height: 18px; background: #d9dfdb; border-radius: 99px; transition: background .18s ease; }.toggle-field > span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .18s ease; }.toggle-field input:checked + span { background: var(--green); }.toggle-field input:checked + span::after { transform: translateX(13px); }.toggle-field b { font-size: 11px; font-weight: 600; }.language-tabs { display: flex; gap: 5px; margin: 1px 0 20px; overflow-x: auto; padding: 4px; background: #f0f3f0; border-radius: 8px; scrollbar-width: thin; }.language-tabs button { flex: 0 0 auto; min-width: 37px; min-height: 29px; border: 0; color: var(--muted); background: transparent; border-radius: 6px; font-size: 10px; font-weight: 700; }.language-tabs button.is-active { color: var(--ink); background: #fff; box-shadow: 0 1px 4px rgba(29,50,39,.11); }
.form-section { display: grid; gap: 14px; margin-bottom: 14px; }.form-section label, .field-grid label, .contact-form label { display: grid; gap: 6px; color: #40594a; font-size: 11px; font-weight: 600; }.form-section small { margin-top: -2px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.35; }.form-section input, .form-section textarea, .field-grid input, .field-grid select, .contact-form input, .contact-form textarea { width: 100%; border: 1px solid #dbe3dd; padding: 9px 10px; color: var(--ink); background: #fff; border-radius: 8px; font-size: 12px; font-weight: 400; outline: 0; transition: border .15s ease, box-shadow .15s ease; }.form-section input:focus, .form-section textarea:focus, .field-grid input:focus, .field-grid select:focus, .contact-form input:focus, .contact-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,108,73,.1); }.form-section textarea, .contact-form textarea { resize: vertical; line-height: 1.45; }.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }.price-input { display: flex; overflow: hidden; border: 1px solid #dbe3dd; border-radius: 8px; }.price-input input { min-width: 0; border: 0; border-radius: 0; }.price-input select { flex: 0 0 92px; width: 92px; border: 0; border-left: 1px solid #dbe3dd; padding: 0 8px; color: #40594a; background: #f7f9f7; border-radius: 0; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700; outline: 0; }.price-input select:focus { box-shadow: inset 0 0 0 2px rgba(30,108,73,.22); }.check-field { display: flex; gap: 8px; align-items: center; color: #40594a; font-size: 11px; font-weight: 600; }.check-field input { width: 15px; height: 15px; accent-color: var(--green); }
.allergen-field { display: grid; gap: 6px; }.allergen-combobox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 41px; border: 1px solid #dbe3dd; padding: 5px 7px; background: #fff; border-radius: 8px; transition: border .15s ease, box-shadow .15s ease; }.allergen-combobox:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,108,73,.1); }.allergen-chips { display: flex; flex-wrap: wrap; gap: 5px; }.allergen-chip { display: inline-flex; gap: 5px; align-items: center; max-width: 100%; border: 0; padding: 4px 6px 4px 8px; color: #245c3a; background: #e5f2e8; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.2; }.allergen-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.allergen-chip b { display: grid; place-items: center; width: 14px; height: 14px; color: #5d7a67; background: rgba(255,255,255,.72); border-radius: 50%; font-size: 12px; line-height: 1; }.allergen-chip:hover b { color: #fff; background: var(--green); }.allergen-combobox #item-allergen-search { flex: 1 1 145px; width: auto; min-width: 120px; border: 0; padding: 5px 3px; box-shadow: none; }.allergen-combobox #item-allergen-search:focus { border: 0; box-shadow: none; }.allergen-suggestions { display: grid; max-height: 190px; overflow-y: auto; border: 1px solid #cddbd1; background: #fff; border-radius: 8px; box-shadow: 0 8px 20px rgba(31,66,45,.13); }.allergen-suggestion { display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; border: 0; border-bottom: 1px solid #edf1ee; padding: 9px 10px; color: #2f4939; background: #fff; text-align: left; font: inherit; font-size: 11px; font-weight: 600; }.allergen-suggestion:last-child { border-bottom: 0; }.allergen-suggestion:hover, .allergen-suggestion:focus-visible { color: #1a5635; background: #eff8f1; outline: 0; }.allergen-suggestion small { margin: 0; color: #76857b; font-size: 9px; font-weight: 500; }.allergen-empty { margin: 0; padding: 10px; color: var(--muted); font-size: 11px; font-weight: 400; }

.preview-panel { position: sticky; top: 96px; overflow: hidden; border: 1px solid var(--line); background: #eff4f0; border-radius: var(--radius); box-shadow: var(--shadow); }.preview-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 47px; border-bottom: 1px solid #dce6df; padding: 0 14px; color: #466151; font-size: 10px; font-weight: 700; }.preview-toolbar > span { display: inline-flex; gap: 6px; align-items: center; }.preview-toolbar i { width: 6px; height: 6px; background: #53a879; border-radius: 50%; }.device-switcher { display: flex; gap: 2px; padding: 3px; background: #dfe9e2; border-radius: 6px; }.device-switcher button { display: grid; place-items: center; width: 30px; height: 27px; border: 0; padding: 0; color: #60776a; background: transparent; border-radius: 4px; }.device-switcher button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.device-switcher button.is-active { color: var(--green); background: #fff; box-shadow: 0 1px 3px rgba(20,50,35,.1); }.device-switcher button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }.preview-frame-wrap { display: grid; place-items: start center; min-height: 580px; padding: 18px; background: radial-gradient(circle at 50% 0, #fafcf9, #e8f0ea 74%); }.preview-frame { width: 100%; overflow: hidden; border: 1px solid #c8d5cb; background: #fbf9f3; border-radius: 10px; box-shadow: 0 12px 27px rgba(20,52,37,.13); transform-origin: top center; transition: width .22s ease; }.preview-frame.is-tablet { width: 79%; }.preview-frame.is-mobile { width: 48%; min-width: 226px; }.preview-site { min-height: 542px; color: #26362e; font-family: 'DM Sans', sans-serif; }.preview-site header { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 12px; background: #fff; }.preview-logo { display: grid; place-items: center; width: 23px; height: 23px; color: #fff; background: var(--green); border-radius: 7px; font-family: Newsreader, Georgia, serif; font-size: 16px; }.preview-site header strong, .preview-site header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.preview-site header strong { font-family: Newsreader, Georgia, serif; font-size: 12px; }.preview-site header small { margin-top: 1px; color: #8a948e; font-size: 6px; }.preview-site header button { border: 0; padding: 4px; color: var(--green); background: transparent; font-size: 7px; font-weight: 800; }.preview-site nav { display: flex; gap: 10px; overflow: hidden; border-top: 1px solid #edf0ed; border-bottom: 1px solid #e4e7e0; padding: 8px 12px; background: #fff; white-space: nowrap; }.preview-site nav span { color: #87928a; font-size: 7px; font-weight: 600; }.preview-site nav span.is-active { color: var(--green); font-weight: 800; }.preview-site main { padding: 19px 13px; }.preview-kicker { margin: 0 0 8px; color: var(--green); font-size: 7px; font-weight: 800; letter-spacing: .08em; }.preview-dish { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 8px; border: 1px solid #e4e3db; background: #fff; border-radius: 8px; box-shadow: 0 3px 9px rgba(30,33,26,.04); }.preview-dish + .preview-dish { margin-top: 9px; }.preview-dish-photo { display: grid; place-items: center; min-height: 78px; overflow: hidden; color: #a3b7a6; background: #e6eee5; border-radius: 5px; }.preview-dish-photo img { width: 100%; height: 100%; object-fit: cover; }.preview-dish-photo span { font-size: 20px; }.preview-dish-title { display: flex; gap: 6px; justify-content: space-between; align-items: flex-start; }.preview-dish h3 { margin: 1px 0; font-family: Newsreader, Georgia, serif; font-size: 12px; font-weight: 600; line-height: 1.08; }.preview-dish strong { flex: 0 0 auto; color: var(--green); font-family: 'DM Mono', monospace; font-size: 8px; }.preview-dish p { display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: #69756d; font-size: 7px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.preview-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }.preview-tags span { padding: 2px 4px; color: var(--green); background: var(--green-soft); border-radius: 99px; font-size: 6px; }.preview-stock { display: block; margin-top: 7px; color: var(--orange); font-family: 'DM Sans', sans-serif; font-size: 6px; }.preview-dish.is-unavailable { opacity: .63; }.preview-secondary { opacity: .66; }.preview-site footer { display: flex; justify-content: space-between; gap: 6px; margin: 0 13px; border-top: 1px solid #e4e7df; padding: 10px 0; color: #748078; font-size: 6px; }.preview-site footer span { max-width: 150px; }.preview-site footer a { color: var(--green); font-size: 7px; font-weight: 700; text-decoration: none; }

.settings-card { padding: 27px; }.settings-intro { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding-bottom: 19px; border-bottom: 1px solid var(--line); }.settings-intro h2 { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 26px; font-weight: 600; letter-spacing: -.035em; }.settings-intro p { margin: 0; color: var(--muted); font-size: 12px; }.hours-list { display: grid; }.hours-row { display: grid; grid-template-columns: minmax(120px, 1fr) 130px 230px; gap: 20px; align-items: center; min-height: 70px; border-bottom: 1px solid var(--line); }.hours-row:last-child { border-bottom: 0; }.hours-row strong { font-size: 12px; }.toggle-field.compact { justify-content: flex-start; }.time-range { display: grid; grid-template-columns: 1fr 13px 1fr; gap: 6px; align-items: center; }.time-range input { width: 100%; border: 1px solid #dbe3dd; padding: 7px 8px; color: var(--ink); border-radius: 7px; font-size: 11px; }.time-range input:disabled { color: #98a39c; background: #f3f5f3; }.time-range > span { color: #93a099; text-align: center; }.contact-form, .menu-language-manager { max-width: 900px; }.contact-form .field-grid { align-items: start; margin: 0; }.contact-form label { align-content: start; }.contact-form .field-help { margin-top: -2px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.35; }.full-width { grid-column: 1 / -1; }
.menu-language-manager { display: grid; gap: 20px; margin-bottom: 18px; }
.menu-language-manager__heading { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.menu-language-manager__heading h2 { margin: 2px 0 5px; font-family: Newsreader, Georgia, serif; font-size: 26px; line-height: 1; }
.menu-language-manager__heading p:not(.eyebrow) { max-width: 610px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.menu-language-manager__heading .button { flex: 0 0 auto; }
.menu-language-manager__list { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.menu-language-chip { display: inline-flex; min-height: 36px; align-items: center; gap: 8px; border: 1px solid #dce5de; padding: 7px 9px 7px 11px; color: #294936; background: #f8faf8; border-radius: 999px; font-size: 11px; font-weight: 700; }
.menu-language-chip strong { display: grid; min-width: 25px; height: 22px; place-items: center; padding: 0 5px; color: #fff; background: var(--green); border-radius: 999px; font-size: 9px; letter-spacing: .05em; }
.menu-language-chip small { color: #79877f; font-size: 9px; font-weight: 600; }
.menu-language-chip__remove { display: grid; flex: 0 0 auto; width: 27px; height: 27px; margin-left: 2px; place-items: center; border: 1px solid #efc7c3; padding: 0; color: #b83931; background: #fffafa; border-radius: 50%; }
.menu-language-chip__remove svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.menu-language-chip__remove:hover { color: #fff; background: #b83931; }
.menu-language-modal { display: grid; gap: 18px; margin-top: 20px; }
.menu-language-modal label { display: grid; gap: 7px; color: #40594a; font-size: 11px; font-weight: 700; }
.menu-language-modal select { width: 100%; min-height: 44px; }
.menu-language-modal__actions { display: flex; justify-content: flex-end; gap: 10px; }
.menu-language-progress { display: flex; align-items: flex-start; gap: 9px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.menu-language-progress::before { content: ''; width: 8px; height: 8px; margin-top: 3px; border: 2px solid #cbd8ce; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
.coming-soon { display: grid; place-items: center; min-height: 65vh; padding: 35px; color: var(--muted); text-align: center; }.coming-soon > span { display: grid; place-items: center; width: 52px; height: 52px; color: var(--green); background: var(--green-soft); border-radius: 16px; font-size: 24px; }.coming-soon h1 { margin: 19px 0 6px; color: var(--ink); font-family: Newsreader, Georgia, serif; font-size: 36px; font-weight: 600; letter-spacing: -.04em; }.coming-soon p { max-width: 440px; margin: 0; font-size: 13px; line-height: 1.6; }

.modal { width: min(680px, calc(100% - 32px)); max-height: min(760px, calc(100% - 32px)); overflow: auto; border: 0; padding: 24px; color: var(--ink); background: #fff; border-radius: 18px; box-shadow: 0 25px 70px rgba(16,43,30,.24); }.modal:not([open]) { display: none !important; }.modal::backdrop { background: rgba(19, 43, 31, .45); backdrop-filter: blur(3px); }.modal-heading { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; margin-bottom: 20px; }.modal-heading h2 { margin: 4px 0 0; font-family: Newsreader, Georgia, serif; font-size: 30px; font-weight: 600; letter-spacing: -.04em; }.modal-close { display: grid; place-items: center; width: 29px; height: 29px; border: 0; color: #597064; background: #f1f4f1; border-radius: 50%; font-size: 23px; line-height: 1; }.modal-copy { color: var(--muted); font-size: 13px; line-height: 1.6; }.modal-copy a { color: var(--green); }.version-list { display: grid; }.version-list article { display: flex; justify-content: space-between; gap: 14px; align-items: center; border-top: 1px solid var(--line); padding: 16px 0; }.version-list article > div { display: grid; grid-template-columns: 42px 1fr; column-gap: 11px; align-items: center; }.version-number { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 32px; color: var(--green); background: var(--green-soft); border-radius: 7px; font-family: 'DM Mono', monospace; font-size: 11px; }.version-list strong, .version-list small { display: block; }.version-list strong { font-size: 12px; }.version-list small { margin-top: 3px; color: var(--muted); font-size: 10px; }.published-badge { padding: 5px 7px; color: var(--green); background: var(--green-soft); border-radius: 99px; font-size: 9px; font-weight: 700; white-space: nowrap; }.preview-modal { width: min(420px, 100%); margin: 0 auto; overflow: hidden; border: 1px solid #c8d5cb; border-radius: 10px; box-shadow: 0 12px 27px rgba(20,52,37,.13); }.load-error { display: grid; place-items: center; min-height: 70vh; text-align: center; }.load-error h1 { font-family: Newsreader, Georgia, serif; font-size: 38px; }.load-error p { color: var(--muted); }
.modal--categories { width: min(920px, calc(100% - 32px)); max-height: min(900px, calc(100% - 32px)); }.category-language-tabs { margin: 15px 0 2px; }.category-language-tabs button { min-width: 52px; }.category-editor-list article { align-items: flex-start; padding: 20px 0; }.version-list article > .category-editor-main { display: grid; flex: 1 1 auto; grid-template-columns: 42px minmax(180px, 330px); gap: 11px; min-width: 0; align-items: start; }.category-editor-main .version-number { grid-row: 1 / span 2; margin-top: 18px; }.category-edit-label { display: grid; gap: 5px; min-width: 0; }.category-edit-label input { width: 100%; border: 1px solid #dbe3dd; padding: 9px 10px; color: var(--ink); background: #fff; border-radius: 8px; font-size: 12px; outline: 0; }.category-edit-label input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,108,73,.1); }.category-icon-field { grid-column: 2; min-width: 0; margin-top: 11px; }.category-icon-field__heading { display: grid; gap: 3px; margin-bottom: 9px; }.category-icon-field__heading strong { color: #40594a; font-size: 11px; }.category-icon-field__heading small { max-width: 620px; margin: 0; line-height: 1.35; }.category-icon-grid { display: grid; grid-template-columns: repeat(6, minmax(78px, 1fr)); gap: 7px; }.category-icon-option { display: grid; min-width: 0; min-height: 66px; place-items: center; gap: 5px; border: 1px solid #dbe3dd; padding: 8px 5px; color: #3d5948; background: #fff; border-radius: 9px; transition: border-color .15s ease, background .15s ease, transform .15s ease; }.category-icon-option:hover { border-color: #9fb8a7; background: #f5faf6; transform: translateY(-1px); }.category-icon-option.is-selected { border-color: var(--green); color: #fff; background: var(--green); box-shadow: 0 4px 10px rgba(30,108,73,.2); }.category-icon-option > span { display: grid; place-items: center; min-height: 22px; font-size: 20px; }.category-icon-option small { display: -webkit-box; min-width: 0; overflow: hidden; color: inherit; font-size: 9px; font-weight: 700; line-height: 1.15; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.category-row-actions { flex: 0 0 auto; padding-top: 17px; }
.toast { position: fixed; z-index: 20; right: 22px; bottom: 22px; max-width: min(390px, calc(100vw - 44px)); padding: 12px 15px; transform: translateY(15px); color: #fff; background: #263d31; border-radius: 10px; box-shadow: 0 10px 30px rgba(21,48,34,.18); opacity: 0; pointer-events: none; font-size: 12px; transition: opacity .2s ease, transform .2s ease; }.toast.is-visible { transform: translateY(0); opacity: 1; }.toast.success { background: var(--green); }.toast.error { background: var(--orange); }
.editor-row-actions { display: flex; gap: 6px; }.upload-field input[type="file"] { padding: 8px !important; color: var(--muted); }.check-grid { display: grid; gap: 10px; }.hours-extra { margin-top: 15px; }.special-hours-list { display: grid; margin: 16px 0; }.special-hours-row { display: grid; grid-template-columns: 132px minmax(120px, 1fr) 130px 190px 34px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }.special-hours-row input:not([type="checkbox"]), .closure-grid input, .inline-form input { width: 100%; border: 1px solid #dbe3dd; padding: 8px 9px; color: var(--ink); background: #fff; border-radius: 8px; font-size: 12px; outline: 0; }.special-hours-row input:not([type="checkbox"]):focus, .closure-grid input:focus, .inline-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,108,73,.1); }.special-hours-row .toggle-field input { width: auto; padding: 0; }.localized-date-control { position: relative; display: flex; width: 100%; min-width: 0; }.localized-date-control > input[type="text"] { width: 100%; min-width: 0; padding-right: 38px !important; }.localized-date-picker { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }.date-picker-button { position: absolute; top: 50%; right: 6px; display: inline-grid; width: 28px; height: 28px; padding: 0; place-items: center; color: var(--ink); background: transparent; border: 0; border-radius: 6px; transform: translateY(-50%); cursor: pointer; }.date-picker-button:hover, .date-picker-button:focus-visible { color: var(--green); background: #eef5ef; outline: 0; }.date-picker-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }.closure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; margin-top: 20px; }.closure-grid > label:not(.toggle-field) { display: grid; gap: 6px; color: #40594a; font-size: 11px; font-weight: 600; }.analytics-content { display: grid; gap: 15px; }.analytics-loading { color: var(--muted); }.period-switcher { display: flex; gap: 4px; padding: 4px; background: #eef3ef; border-radius: 9px; }.period-switcher button { border: 0; padding: 8px 10px; color: var(--muted); background: transparent; border-radius: 6px; font-size: 11px; font-weight: 700; }.period-switcher button.is-active { color: var(--green); background: #fff; box-shadow: 0 1px 5px rgba(25, 56, 38, .12); }.analytics-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.analytics-metric { padding: 20px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }.analytics-panel { padding: 22px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }.analytics-panel h2 { margin: 0 0 14px; font-family: Newsreader, Georgia, serif; font-size: 23px; }.analytics-bars { display: grid; gap: 9px; }.analytics-bar { display: grid; grid-template-columns: minmax(90px, 1fr) 1.4fr 34px; gap: 10px; align-items: center; color: #52675a; font-size: 11px; }.analytics-bar i { display: block; height: 7px; min-width: 2px; background: var(--green); border-radius: 99px; }.analytics-bar b { color: var(--ink); text-align: right; font-size: 11px; }.domain-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 15px; }.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 18px; }.inline-form label { display: grid; gap: 6px; color: #40594a; font-size: 11px; font-weight: 700; }.qr-form { grid-template-columns: 1fr 1fr auto; }.domain-state { margin: 14px 0 0; color: var(--muted); font-size: 12px; }.qr-codes-list { display: grid; margin-top: 18px; }.qr-code-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }.qr-code-row img { width: 70px; height: 70px; padding: 4px; border: 1px solid var(--line); background: #fff; border-radius: 8px; }.qr-code-row strong, .qr-code-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.qr-code-row strong { font-size: 12px; }.qr-code-row small { margin-top: 4px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; }.qr-row-actions { display: flex; gap: 6px; }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 0, #edf5ee, transparent 42%), var(--paper); }.login-card { width: min(430px, 100%); padding: 38px; border: 1px solid var(--line); background: #fff; border-radius: 20px; box-shadow: 0 18px 60px rgba(24, 59, 39, .12); }.login-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; color: #fff; background: var(--green); border-radius: 14px; font-family: Newsreader, Georgia, serif; font-size: 30px; }.login-card h1 { margin: 6px 0 8px; font-family: Newsreader, Georgia, serif; font-size: 38px; letter-spacing: -.04em; }.login-card > p { margin: 0 0 26px; color: var(--muted); font-size: 13px; line-height: 1.55; }.login-card form { display: grid; gap: 15px; }.login-card label { display: grid; gap: 6px; color: #40594a; font-size: 12px; font-weight: 700; }.login-card input { width: 100%; border: 1px solid #dbe3dd; padding: 11px 12px; color: var(--ink); border-radius: 9px; outline: 0; }.login-card input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,108,73,.1); }.login-card .button { justify-content: center; margin-top: 4px; }.login-error { margin: -4px 0 0 !important; color: var(--orange) !important; font-size: 12px !important; }

@media (max-width: 1280px) { .workspace { padding: 31px; }.topbar { padding: 0 31px; }.editor-layout { grid-template-columns: minmax(250px, .72fr) minmax(335px, 1fr); }.preview-panel { position: static; grid-column: 1 / -1; }.preview-frame-wrap { min-height: 500px; }.preview-frame { max-width: 520px; }.preview-frame.is-tablet { width: 410px; }.preview-frame.is-mobile { width: 250px; }.menu-list-panel, .item-editor { min-height: 580px; } }
@media (min-width: 901px) and (max-width: 1480px) { .topbar { align-content: center; flex-wrap: wrap; min-height: 0; padding-top: 13px; padding-bottom: 13px; }.topbar-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; } }
@media (max-width: 900px) { .admin-shell { grid-template-columns: 1fr; }.sidebar { position: static; display: block; height: auto; padding: 12px 18px; overflow: visible; }.brand { margin: 0 0 12px; }.sidebar-nav { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 3px; }.sidebar-nav button { flex: 0 0 auto; min-height: 35px; padding: 0 9px; font-size: 11px; }.sidebar-nav button > span { font-size: 15px; }.sidebar-bottom { display: grid; gap: 0; margin-top: 12px; }.sidebar-bottom .help-link { min-height: 41px; justify-content: center; text-align: center; }.topbar { position: static; min-height: 65px; padding: 0 22px; }.workspace { padding: 26px 22px; }.editor-layout { grid-template-columns: 1fr; }.menu-list-panel, .item-editor { min-height: auto; }.preview-panel { grid-column: auto; }.overview-grid, .overview-columns { grid-template-columns: 1fr; }.page-heading { align-items: flex-start; }.hours-row { grid-template-columns: 1fr 130px; gap: 12px; padding: 13px 0; }.time-range { grid-column: 1 / -1; max-width: 260px; }.account { display: none; } }
@media (max-width: 580px) { .sidebar { padding-inline: 12px; }.brand { margin-left: 4px; }.sidebar-nav em { display: none; }.topbar { flex-wrap: wrap; align-content: center; gap: 6px; min-height: 65px; padding: 10px 15px; }.topbar-actions { width: 100%; justify-content: space-between; }.topbar-actions .saved-state { display: none; }.button { min-height: 35px; padding: 7px 10px; font-size: 11px; }.workspace { padding: 24px 15px; }.page-heading, .menu-heading { display: grid; margin-bottom: 22px; }.page-heading h1 { font-size: 35px; }.heading-actions { width: 100%; }.heading-actions .button { flex: 1; }.field-grid, .contact-form .field-grid { grid-template-columns: 1fr; }.full-width { grid-column: auto; }.item-editor { padding: 18px; }.preview-frame-wrap { padding: 14px 8px; }.preview-frame, .preview-frame.is-tablet { width: min(100%, 390px); }.preview-frame.is-mobile { width: 245px; }.settings-card { padding: 19px; }.settings-intro { display: grid; }.hours-row { grid-template-columns: 1fr; gap: 8px; }.time-range { grid-column: auto; }.overview-columns .surface-card { padding: 19px; }.audit-entry { grid-template-columns: 28px 1fr; }.audit-entry time { grid-column: 2; }.version-list article { align-items: flex-start; flex-direction: column; }.modal { padding: 18px; }.toast { right: 15px; bottom: 15px; } }
@media (max-width: 580px) { .menu-language-manager__heading { align-items: stretch; flex-direction: column; gap: 15px; }.menu-language-manager__heading .button, .menu-language-modal__actions .button { width: 100%; }.menu-language-modal__actions { flex-direction: column-reverse; } }
@media (max-width: 900px) { .analytics-grid, .domain-layout { grid-template-columns: 1fr; }.analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.special-hours-row { grid-template-columns: 1fr 1fr; }.special-hours-row .icon-button { justify-self: start; }.qr-form { grid-template-columns: 1fr 1fr; }.qr-form .button { grid-column: 1 / -1; } }
@media (max-width: 580px) { .analytics-metrics, .closure-grid, .inline-form, .qr-form { grid-template-columns: 1fr; }.period-switcher { width: 100%; }.period-switcher button { flex: 1; }.special-hours-row { grid-template-columns: 1fr; }.qr-code-row { grid-template-columns: 65px minmax(0, 1fr); }.qr-row-actions { grid-column: 1 / -1; } }

/* Destructive actions use one recognisable, high-contrast trash icon. */
.analytics-metric span { color: var(--muted); font-size: 11px; }
.analytics-metric strong { display: block; margin-top: 10px; font-family: Newsreader, Georgia, serif; font-size: 34px; letter-spacing: -.04em; }
.danger-icon { color: #be3028; border-color: #efc7c3; background: #fffafa; }
.danger-icon:hover { color: #a8231d; background: #fff0ee; }
.trash-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.qr-code-title { display: flex; gap: 8px; align-items: center; min-width: 0; }
.qr-code-title strong { min-width: 0; }
.code-copy-button { flex: 0 0 auto; border: 1px solid #cfdcd3; padding: 4px 7px; color: var(--green); background: #fff; border-radius: 6px; font-size: 10px; font-weight: 700; line-height: 1.2; }
.code-copy-button:hover { border-color: var(--green); background: var(--green-soft); }

@media (max-width: 760px) {
  .category-icon-grid { grid-template-columns: repeat(4, minmax(66px, 1fr)); }
}
@media (max-width: 580px) {
  .version-list article > .category-editor-main { width: 100%; grid-template-columns: 38px minmax(0, 1fr); }
  .category-icon-field { grid-column: 1 / -1; }
  .category-editor-main .version-number { margin-top: 17px; }
  .category-icon-grid { grid-template-columns: repeat(3, minmax(64px, 1fr)); }
  .category-row-actions { padding-top: 0; }
}

/* Commercial conversion flow */
.subscription-nav { display: flex !important; justify-content: center; gap: 8px !important; margin-top: 0; margin-bottom: 4px; border: 1px solid rgba(231, 197, 115, .34) !important; color: #f8df9d !important; background: rgba(218, 158, 48, .13) !important; font-weight: 700 !important; text-align: center !important; }.subscription-nav__icon { flex: 0 0 17px; }.subscription-nav__label { display: block !important; flex: 0 1 auto; width: auto !important; font-size: inherit !important; line-height: inherit !important; text-align: center; }
.subscription-nav:hover, .subscription-nav.is-active { color: #1b3528 !important; background: #f5d98b !important; }
.button-subscription-cta, .button-subscription-submit { min-height: 45px; border-color: #5b3a88; padding-inline: 17px; color: #fff; background: linear-gradient(135deg, #7d58ad, #55357f); box-shadow: 0 8px 20px rgba(82, 49, 129, .27); font-size: 13px; letter-spacing: .01em; }
.button-subscription-cta:hover, .button-subscription-submit:hover { border-color: #4b2e72; background: linear-gradient(135deg, #916bc2, #654394); box-shadow: 0 10px 23px rgba(82, 49, 129, .35); }
.commercial-workspace { padding-top: 0; }
.subscription-view { padding-bottom: 42px; }
.subscription-hero { display: flex; justify-content: space-between; gap: 30px; align-items: center; padding: 31px 33px; background: radial-gradient(circle at 100% 0, #f7e2b1, transparent 38%), linear-gradient(135deg, #fffdf8, #f2f8ef); }
.subscription-hero h1 { max-width: 680px; margin: 5px 0 10px; font-family: Newsreader, Georgia, serif; font-size: clamp(36px, 3.2vw, 52px); font-weight: 600; letter-spacing: -.052em; line-height: .98; }
.subscription-hero p:not(.eyebrow) { max-width: 670px; margin: 0; color: #52665a; font-size: 14px; line-height: 1.58; }
.button-subscription-hero { min-height: 46px; margin-top: 20px; border-color: #5b3a88; padding-inline: 18px; color: #fff; background: linear-gradient(135deg, #7d58ad, #55357f); box-shadow: 0 8px 20px rgba(82, 49, 129, .27); font-size: 13px; }
.button-subscription-hero:hover { border-color: #4b2e72; background: linear-gradient(135deg, #916bc2, #654394); box-shadow: 0 10px 23px rgba(82, 49, 129, .35); }
.region-badge { display: grid; flex: 0 0 min(310px, 34%); gap: 4px; border: 1px solid #ead7a1; padding: 17px 18px; background: rgba(255, 253, 246, .9); border-radius: 12px; box-shadow: 0 8px 18px rgba(79, 61, 25, .08); }
.region-badge span, .region-badge small { color: #726f61; font-size: 11px; }.region-badge strong { color: #58451c; font-size: 16px; line-height: 1.25; }
.subscription-value { margin-top: 17px; padding: 27px; background: linear-gradient(180deg, #fff, #fbfdf9); }.value-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; }.value-heading h2, .subscription-process h2 { max-width: 660px; margin: 5px 0 0; font-family: Newsreader, Georgia, serif; font-size: clamp(29px, 2.5vw, 38px); font-weight: 600; letter-spacing: -.045em; line-height: 1.04; }.value-heading h2[data-offer-copy="subscriptionStatistic"] { max-width: 880px; font-family: 'DM Sans', Arial, sans-serif; font-size: clamp(24px, 2.1vw, 32px); font-weight: 700; letter-spacing: -.03em; line-height: 1.18; }.value-heading > p { max-width: 350px; margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.55; }.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }.value-card { min-height: 176px; border: 1px solid #e1e9e1; padding: 19px; background: #fff; border-radius: 12px; }.value-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; color: #fff; background: #356c4b; border-radius: 8px; font-size: 17px; font-weight: 800; }.value-card h3 { margin: 14px 0 6px; color: #244533; font-size: 15px; }.value-card p { margin: 0; color: #637569; font-size: 12px; line-height: 1.55; }.subscription-outcome { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; border-radius: 10px; padding: 13px 15px; color: #3e5c49; background: #edf5e9; font-size: 12px; line-height: 1.45; }.subscription-outcome strong { color: #29523a; }
.subscription-process { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(410px, 1.3fr) auto; gap: 25px; align-items: center; margin-top: 17px; padding: 25px 27px; background: #1e3b2d; }.subscription-process .eyebrow { color: #f3dc9d; }.subscription-process h2 { color: #fff; }.subscription-process p:not(.eyebrow) { margin: 9px 0 0; color: #c9d9d0; font-size: 12px; line-height: 1.55; }.process-steps { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }.process-steps li { display: flex; gap: 10px; align-items: center; color: #f5f8f4; }.process-steps li > span { display: grid; flex: 0 0 25px; place-items: center; width: 25px; height: 25px; color: #244331; background: #f4dc9d; border-radius: 50%; font: 700 11px 'DM Mono', monospace; }.process-steps strong { display: block; font-size: 12px; }.process-steps small { display: block; margin-top: 2px; color: #b9cdbf; font-size: 10px; line-height: 1.35; }.subscription-process .button-subscription-hero { margin: 0; white-space: nowrap; background: #f4dc9d; border-color: #f4dc9d; color: #253e30; box-shadow: none; }.subscription-process .button-subscription-hero:hover { background: #ffe9ad; box-shadow: none; }
.subscription-layout { display: grid; grid-template-columns: minmax(265px, .62fr) minmax(460px, 1.38fr); gap: 17px; align-items: start; margin-top: 17px; }
.subscription-offer, .subscription-flow { padding: 26px; }.subscription-offer h2, .subscription-flow h2, .support-card h2 { margin: 5px 0 7px; font-family: Newsreader, Georgia, serif; font-size: 30px; font-weight: 600; letter-spacing: -.04em; }
.offer-copy, .flow-copy, .support-card p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.price-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-top: 1px solid var(--line); padding: 15px 0 9px; margin-top: 18px; color: #52675a; font-size: 12px; }.price-line + .price-line { margin-top: 0; }.price-line strong { color: #1f4431; font-family: Newsreader, Georgia, serif; font-size: 26px; }.price-line strong small { color: var(--muted); font-family: 'DM Sans', Arial, sans-serif; font-size: 11px; font-weight: 600; }
.offer-list { display: grid; gap: 9px; margin: 17px 0 0; padding: 0; list-style: none; }.offer-list li { position: relative; padding-left: 22px; color: #42594b; font-size: 12px; line-height: 1.4; }.offer-list li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 800; }.offer-note { margin: 20px 0 0; color: #8a7860; font-size: 10px; line-height: 1.5; }
.flow-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }.flow-step { padding: 6px 8px; color: #86502d; background: #fff2e7; border-radius: 99px; font-family: 'DM Mono', monospace; font-size: 10px; }.subscription-fields { margin-top: 20px; }.subscription-fields label { display: grid; gap: 6px; color: #40594a; font-size: 11px; font-weight: 700; }.subscription-fields input, .subscription-fields select { width: 100%; border: 1px solid #dbe3dd; padding: 10px 11px; color: var(--ink); background: #fff; border-radius: 8px; outline: 0; font-size: 12px; }.subscription-fields input:focus, .subscription-fields select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,108,73,.1); }
.legal-preview { margin-top: 18px; border: 1px solid #dfe8df; padding: 15px; background: #f7faf7; border-radius: 10px; }.legal-preview strong { color: #355442; font-size: 12px; }.legal-preview p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }.legal-links { display: flex; gap: 18px; margin-top: 9px; }.legal-links .text-button { font-size: 11px; }
.acceptance-check { display: flex; gap: 9px; align-items: flex-start; margin-top: 13px; color: #52675a; font-size: 11px; line-height: 1.45; }.acceptance-check input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--green); }.button-subscription-submit { width: 100%; margin-top: 19px; }.flow-note { margin: 11px 0 0; color: #85776c; font-size: 10px; line-height: 1.45; text-align: center; }
.acceptance-check a { color: #315f43; font-weight: 750; text-decoration: underline; text-decoration-color: #93b49e; text-underline-offset: 2px; }.acceptance-check a:hover { color: #153d28; text-decoration-color: currentColor; }
.support-card { display: flex; justify-content: space-between; gap: 25px; align-items: center; margin-top: 17px; padding: 24px 27px; }.support-card h2 { font-size: 27px; }.support-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }.support-actions .button { text-decoration: none; }.support-actions .button[aria-disabled="true"] { cursor: not-allowed; opacity: .55; pointer-events: none; }
.modal--support-options { width:min(760px, calc(100% - 32px)); }
.support-options-heading { margin-bottom:0; }
.support-options-heading > div { min-width:0; }
.support-options-heading h2 { max-width:590px; font-size:clamp(28px, 4vw, 38px); line-height:1.05; }
.support-options-heading .modal-copy { max-width:600px; margin:12px 0 0; }
.support-options-actions { justify-content:flex-start; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
@media (max-width: 1050px) { .subscription-layout { grid-template-columns: 1fr; }.subscription-hero, .support-card { align-items: flex-start; flex-direction: column; }.subscription-process { grid-template-columns: 1fr; }.subscription-process .button-subscription-hero { width: max-content; }.region-badge { flex-basis: auto; width: 100%; }.support-actions { justify-content: flex-start; } }
@media (max-width: 720px) { .value-heading { display: block; }.value-heading > p { margin-top: 10px; }.value-grid { grid-template-columns: 1fr; }.value-card { min-height: 0; }.subscription-outcome { display: grid; gap: 3px; }.subscription-process { gap: 18px; } }
@media (max-width: 580px) { .subscription-hero, .subscription-value, .subscription-offer, .subscription-flow, .subscription-process, .support-card { padding: 19px; }.subscription-hero h1 { font-size: 37px; }.subscription-process .button-subscription-hero { width: 100%; }.legal-links { flex-direction: column; gap: 3px; }.support-actions { width: 100%; }.support-actions .button { flex: 1 1 100%; }.button-subscription-cta { order: -1; width: 100%; } }
@media (max-width:580px) { .modal--support-options { width:calc(100dvw - 24px); padding:20px; }.support-options-heading h2 { font-size:29px; }.support-options-actions { display:grid; grid-template-columns:1fr; }.support-options-actions .button { width:100%; } }
.modal--support-chat { box-sizing:border-box; display:flex; width:min(720px, calc(100dvw - 24px)); height:min(760px, calc(100dvh - 24px)); max-height:calc(100dvh - 24px); flex-direction:column; overflow:hidden; }
.modal--support-chat #modal-content { display:flex; min-width:0; min-height:0; height:100%; flex:1 1 auto; flex-direction:column; }
.modal--support-chat .modal-heading { flex:0 0 auto; margin-bottom:12px; }
.modal--support-chat .support-chat-messages { flex:1 1 0; min-height:0; max-height:none; margin:0 0 12px; }
.support-chat-messages { display:grid; gap:10px; max-height:min(47dvh,370px); min-height:130px; margin:18px 0; overflow:auto; overscroll-behavior:contain; padding:5px; }
.support-chat-empty { margin:auto; color:var(--muted); font-size:13px; text-align:center; }
.support-chat-message { box-sizing:border-box; width:min(88%,500px); min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#f6f8f5; overflow-wrap:anywhere; }
.support-chat-message--client { justify-self:end; border-color:#d6e7da; background:#eaf4ec; }
.support-chat-message--operator { justify-self:start; background:#fff9f5; }
.support-chat-message small { display:block; color:var(--muted); font-size:10px; font-weight:700; }
.support-chat-message p { margin:6px 0 0; color:var(--ink); font-size:13px; line-height:1.5; white-space:normal; }
.support-chat-form { display:grid; min-width:0; gap:10px; flex:0 0 auto; }
.support-chat-form textarea { box-sizing:border-box; width:100%; min-height:96px; resize:vertical; border:1px solid var(--line); border-radius:11px; padding:12px; color:var(--ink); font:inherit; line-height:1.45; outline:0; }
.support-chat-form textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(30,108,73,.1); }
.chat-file-controls { display:flex; min-width:0; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.chat-file-input { display:none !important; }
.chat-file-button { display:inline-flex; min-height:36px; align-items:center; justify-content:center; border:1px solid #cddbd0; border-radius:9px; padding:7px 11px; color:#315f43; background:#fff; font:inherit; font-size:12px; font-weight:750; cursor:pointer; }
.chat-file-button:hover { border-color:#82aa8d; background:#f3f8f3; }
.chat-file-hint { color:var(--muted); font-size:11px; line-height:1.4; }
.chat-file-list { display:grid; gap:4px; min-height:0; color:#52625a; font-size:11px; }
.chat-file-list:not(:empty) { padding:9px 11px; border:1px solid #dce8de; border-radius:9px; background:#f6faf6; }
.chat-file-list span { display:block; font-weight:700; }.chat-file-list ul { display:grid; gap:2px; margin:3px 0 0; padding:0; list-style:none; }
.chat-attachments { display:grid; gap:7px; margin-top:9px; }
.chat-attachment { display:flex; gap:9px; align-items:center; width:100%; color:#244b35; border:1px solid #cfdfd2; border-radius:10px; padding:7px; background:rgba(255,255,255,.58); text-decoration:none; }
.chat-attachment:hover { border-color:#79a587; background:#fff; }.chat-attachment > span { min-width:0; overflow:hidden; font-size:11px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.chat-attachment > span small { margin-top:2px; overflow:hidden; color:var(--muted); font-size:10px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }.chat-attachment--image img { width:54px; height:54px; flex:0 0 54px; border-radius:6px; object-fit:cover; background:#eef3ee; }.chat-attachment--file > span:first-child { display:grid; width:28px; height:28px; flex:0 0 28px; place-items:center; border-radius:7px; color:#fff; background:#477b58; font-size:19px; }
@media (max-width:580px) { .modal--support-chat { width:calc(100dvw - 20px); height:calc(100dvh - 20px); max-height:calc(100dvh - 20px); padding:16px; border-radius:16px; }.modal--support-chat .modal-heading { gap:10px; }.modal--support-chat .modal-heading h2 { font-size:26px; line-height:1.05; }.modal--support-chat .modal-copy { font-size:12px; line-height:1.4; }.modal--support-chat .support-chat-messages { min-height:96px; margin-bottom:10px; padding:3px; }.support-chat-message { width:94%; padding:10px 11px; }.support-chat-form { gap:8px; }.support-chat-form textarea { min-height:76px; max-height:18dvh; resize:none; }.support-chat-form .button { width:100%; }.chat-file-controls { align-items:stretch; }.chat-file-button { width:100%; flex:1 1 100%; }.chat-file-hint { flex:1 1 100%; }.chat-file-list:not(:empty) { max-height:72px; overflow:auto; }.chat-attachment--image img { width:46px; height:46px; flex-basis:46px; } }
@media (max-width: 580px) { .sidebar-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow: visible; padding: 0; }.sidebar-nav button { min-width: 0; min-height: 41px; padding: 0 10px; font-size: 12px; line-height: 1.1; white-space: normal; }.sidebar-nav button > span { width: 17px; flex: 0 0 17px; font-size: 16px; }.sidebar-nav .subscription-nav { grid-column: 1 / -1; min-height: 43px; margin-bottom: 7px; }.sidebar-nav .subscription-nav__label { flex: 0 1 auto; width: auto; font-size: 12px; } }

/* The cabinet is a true narrow-screen layout, not a horizontally squeezed desktop page. */
.domain-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.qr-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.domain-display { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:12px; align-items:end; margin-top:18px; border-top:1px solid var(--line); padding-top:16px; }.domain-display > div { display:grid; width:100%; min-width:0; gap:6px; }.domain-label { color:#40594a; font-size:11px; font-weight:700; }.domain-display code { display:block; width:100%; min-width:0; max-width:100%; overflow:hidden; border:1px solid #dbe3dd; padding:10px 11px; color:#244a35; background:#f8fbf8; border-radius:8px; font-family:'DM Mono',ui-monospace,monospace; font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }.domain-display .button { min-width:max-content; }
@media (max-width: 1180px) and (min-width: 901px) { .domain-layout { grid-template-columns: 1fr; }.settings-intro { display:grid; gap:8px; }.domain-display { grid-template-columns:minmax(0, 1fr) auto; } }

.hours-range-editors { display: grid; gap: 12px; margin: 18px 0 4px; }
.hours-range-editor { display: grid; grid-template-columns: minmax(180px, 1.15fr) minmax(135px, .72fr) minmax(135px, .72fr) minmax(230px, 1fr) minmax(105px, auto) auto; gap: 12px; align-items: end; margin: 0; padding: 16px; border: 1px solid #dbe5dd; background: #f4f8f4; border-radius: 12px; }
.hours-range-editor__title { align-self: center; color: var(--ink); font-size: 13px; line-height: 1.35; }
.hours-range-editor > label:not(.toggle-field) { display: grid; gap: 6px; min-width: 0; color: #40594a; font-size: 11px; font-weight: 700; }
.hours-range-editor .admin-select__trigger { width: 100%; min-height: 38px; background: #fff; }
.hours-range-editor .time-range input { min-height: 38px; background: #fff; }
.hours-range-editor__closed { min-height: 38px; padding: 0 4px; white-space: nowrap; }
.hours-range-editor__actions { display: flex; min-height: 38px; gap: 7px; align-items: stretch; }.hours-range-editor__actions .button { min-height: 38px; }.hours-range-editor__actions .icon-button { flex: 0 0 38px; width: 38px; height: 38px; }.hours-range-editors__footer { display: flex; justify-content: flex-start; margin-top: 12px; }.hours-range-editors__footer .button { min-height: 38px; }
.time-range { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) 13px minmax(0, 1fr); }
.time-range input { min-width: 0; max-width: 100%; }
.closure-grid .toggle-field input { width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 1280px) { .hours-range-editor { grid-template-columns: 1fr 1fr 1fr; }.hours-range-editor__title { grid-column: 1 / -1; }.hours-range-editor > label:has(.time-range) { grid-column: span 2; } }
@media (max-width: 700px) { .hours-range-editor { grid-template-columns: 1fr 1fr; }.hours-range-editor__title, .hours-range-editor > label:has(.time-range) { grid-column: 1 / -1; }.hours-range-editor__actions { width: 100%; }.hours-range-editor__actions .button { flex: 1 1 auto; }.hours-range-editor__closed { justify-self: start; }.hours-range-editors__footer .button { width: 100%; } }
@media (max-width: 440px) { .hours-range-editor { grid-template-columns: 1fr; padding: 14px; }.hours-range-editor__title, .hours-range-editor > label:has(.time-range) { grid-column: auto; } }
html, body { width: 100%; max-width: 100%; overflow-x: clip; overscroll-behavior-x: none; }
@media (max-width: 580px) {
  .admin-shell, .main-area, .sidebar, .topbar, .topbar-actions, .workspace, .view { min-width: 0; max-width: 100%; }
  .sidebar { width: 100%; }

  .topbar { display: block; min-height: 0; padding: 10px 12px; }
  .topbar-actions { display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 1fr); width: 100%; gap: 8px; align-items: stretch; }
  .topbar-language-group { display: flex; grid-column: 2; grid-row: 1; width: 100%; min-width: 0; align-items: center; justify-content: stretch; justify-self: stretch; padding: 0; border: 0; }
  .interface-language { display: flex; width: 100%; min-width: 0; justify-content: stretch; }
  .interface-language-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .interface-language select { width: 100%; min-width: 0; max-width: none; }
  .interface-language .admin-select__trigger { flex: 1 1 auto; width: 100%; min-width: 0; max-width: none; min-height: 42px; }
  .topbar-actions .saved-state, .topbar-primary-actions { display: none; }
  .topbar-actions > .button { min-width: 0; min-height: 42px; padding: 8px; white-space: normal; text-align: center; line-height: 1.2; }
  .topbar-actions > .topbar-menu-link { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; justify-self: stretch; gap: 5px; padding: 8px 5px; font-size: 10px; }
  .topbar-menu-link .external-link-icon { width: 14px; height: 14px; }

  .page-heading, .menu-heading { min-width: 0; }
  .page-heading > div, .page-heading h1, .page-heading > div > p { min-width: 0; overflow-wrap: anywhere; }
  .heading-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; gap: 8px; }
  .heading-actions .button { min-width: 0; min-height: 42px; padding: 8px; white-space: normal; line-height: 1.2; }
  .heading-actions .button:last-child { grid-column: 1 / -1; }

  .editor-title-row > div:first-child { min-width: 0; }
  .editor-title-row h2 { max-width: none; }
  .quick-controls { flex-wrap: wrap; gap: 10px 18px; }
  .card-heading { display: grid; }
  .subscription-process .button-subscription-hero { white-space: normal; }
  .domain-display { grid-template-columns:1fr; align-items:stretch; }
  .domain-display .button { width:100%; }
  .admin-legal-footer { padding: 19px 15px; }
  .admin-legal-footer__inner { display: grid; gap: 12px; align-items: start; }
  .admin-legal-links { gap: 10px 14px; justify-content: flex-start; }
  [data-view-panel="hours"], [data-view-panel="hours"] .settings-card, .hours-range-editors, .hours-range-editor, .hours-range-editor > *, .hours-list, .hours-row, .hours-row > *, .special-hours-list, .special-hours-row, .special-hours-row > *, .closure-grid, .closure-grid > * { width: 100%; min-width: 0; max-width: 100%; }
  [data-view-panel="hours"] .settings-card { overflow: hidden; }
  .hours-range-editor .time-range, .hours-row .time-range, .special-hours-row .time-range { max-width: 100%; }
}

/* Menu-on controls: real selects stay in the form for data integrity, while
   every visible picker is a single, consistent component on desktop and mobile. */
.admin-select__native { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important; }
.admin-select__trigger { display: inline-flex; width: 100%; min-width: 0; min-height: 38px; gap: 9px; align-items: center; justify-content: space-between; border: 1px solid #dbe3dd; padding: 8px 10px; color: var(--ink); background: #fff; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: left; transition: border .15s ease, box-shadow .15s ease, background .15s ease; }
.admin-select__trigger:hover { border-color: #aac5b3; background: #fbfdfb; }.admin-select__trigger:focus-visible, .admin-select__trigger[aria-expanded="true"] { border-color: var(--green); outline: 0; box-shadow: 0 0 0 3px rgba(30,108,73,.1); }.admin-select__trigger:disabled { cursor: not-allowed; color: #98a39c; background: #f3f5f3; }.admin-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-select__trigger svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.interface-language .admin-select__trigger { width: 132px; min-height: 38px; font-size: 11px; }.price-input > .admin-select__trigger { flex: 0 0 92px; width: 92px; min-height: 38px; border: 0; border-left: 1px solid #dbe3dd; padding: 0 8px; color: #40594a; background: #f7f9f7; border-radius: 0; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700; }.price-input > .admin-select__trigger:hover { background: #f0f5f1; }.price-input > .admin-select__trigger:focus-visible, .price-input > .admin-select__trigger[aria-expanded="true"] { box-shadow: inset 0 0 0 2px rgba(30,108,73,.22); }
.admin-select-layer { position: fixed; z-index: 100; inset: 0; display: none; }.admin-select-layer.is-open { display: block; }.admin-select-layer__backdrop { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; }.admin-select-layer__panel { position: fixed; top: var(--admin-select-top); left: var(--admin-select-left); display: none; width: var(--admin-select-width); max-height: var(--admin-select-max-height, 430px); overflow: hidden; border: 1px solid #cfdbd2; background: #fff; border-radius: 12px; box-shadow: 0 16px 42px rgba(20,52,37,.18); }.admin-select-layer.is-upward .admin-select-layer__panel { top: auto; bottom: var(--admin-select-bottom); }.admin-select-layer.is-open .admin-select-layer__panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }.admin-select-layer__panel header { display: flex; gap: 10px; justify-content: space-between; align-items: center; min-height: 44px; border-bottom: 1px solid #e8eee9; padding: 0 10px 0 13px; color: #365447; background: #fff; }.admin-select-layer__panel header strong { font-size: 11px; font-weight: 800; }.admin-select-layer__close { display: grid; place-items: center; width: 28px; height: 28px; border: 0; padding: 0; color: #557161; background: transparent; border-radius: 7px; font-size: 22px; line-height: 1; }.admin-select-layer__close:hover { color: #173d2a; background: #eaf3ec; }.admin-select-layer__options { display: grid; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; padding: 5px; }.admin-select-layer__options > button, .admin-select-group > button { display: flex; width: 100%; min-height: 37px; gap: 12px; justify-content: space-between; align-items: center; border: 0; padding: 8px 9px; color: #334b3d; background: transparent; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 600; text-align: left; }.admin-select-layer__options > button:hover, .admin-select-layer__options > button:focus-visible, .admin-select-group > button:hover, .admin-select-group > button:focus-visible { color: #155238; outline: 0; background: #eaf4ec; }.admin-select-layer__options [aria-selected="true"] { color: #155238; background: #dff0e4; font-weight: 800; }.admin-select-layer__options button:disabled { cursor: not-allowed; opacity: .45; }.admin-select-layer__options button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }.admin-select-layer__options button i { width: 16px; height: 16px; }.admin-select-group + .admin-select-group { margin-top: 5px; padding-top: 6px; border-top: 1px solid #edf1ee; }.admin-select-group > span { display: block; padding: 6px 9px 4px; color: #718177; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-select-layer.is-interface-language .admin-select-layer__panel { grid-template-rows: minmax(0, 1fr); }.admin-select-layer.is-interface-language .admin-select-layer__panel > header { display: none; }
.admin-select-layer__panel header { background: #f8fbf8; }
@media (max-width: 760px), (hover: none) and (pointer: coarse) { body.admin-select-is-open { overflow: hidden; }.interface-language .admin-select__trigger { flex: 0 1 148px; width: auto; min-width: 0; max-width: 56%; }.admin-select-layer.is-mobile { z-index: 1000; touch-action: none; }.admin-select-layer.is-mobile .admin-select-layer__backdrop { background: rgba(16,35,26,.5); backdrop-filter: blur(2px); }.admin-select-layer.is-mobile .admin-select-layer__panel { top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: min(78dvh, 630px); max-height: min(78dvh, 630px); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 34px rgba(16,35,26,.22); }.admin-select-layer.is-mobile .admin-select-layer__panel header { min-height: 54px; padding: 0 14px 0 17px; }.admin-select-layer.is-mobile .admin-select-layer__panel header strong { font-size: 13px; }.admin-select-layer.is-mobile .admin-select-layer__options { padding: 8px; touch-action: pan-y; }.admin-select-layer.is-mobile .admin-select-layer__options > button, .admin-select-layer.is-mobile .admin-select-group > button { min-height: 48px; padding: 11px 12px; font-size: 14px; }.admin-select-layer.is-mobile .admin-select-group > span { padding: 10px 12px 6px; font-size: 10px; } }

/* On phones the right-hand language picker uses the full width of its cell;
   the generic touch-picker rule above must not clip the selected language. */
@media (max-width: 580px) {
  .topbar-language-group .admin-select__trigger { flex: 1 1 auto; width: 100%; max-width: 100%; }
}

/* Same fallback for browsers that request a desktop viewport on a touch phone. */
body.admin-select-is-open { overflow: hidden; }
.admin-select-layer.is-mobile { z-index: 1000; touch-action: none; }
.admin-select-layer.is-mobile .admin-select-layer__backdrop { background: rgba(16,35,26,.5); backdrop-filter: blur(2px); }
.admin-select-layer.is-mobile .admin-select-layer__panel { top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: min(78dvh, 630px); max-height: min(78dvh, 630px); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 34px rgba(16,35,26,.22); }
.admin-select-layer.is-mobile .admin-select-layer__panel header { min-height: 54px; padding: 0 14px 0 17px; }
.admin-select-layer.is-mobile .admin-select-layer__panel header strong { font-size: 13px; }
.admin-select-layer.is-mobile .admin-select-layer__options { padding: 8px; touch-action: pan-y; }
.admin-select-layer.is-mobile .admin-select-layer__options > button, .admin-select-layer.is-mobile .admin-select-group > button { min-height: 48px; padding: 11px 12px; font-size: 14px; }
.admin-select-layer.is-mobile .admin-select-group > span { padding: 10px 12px 6px; font-size: 10px; }

/* Logo files are prepared in the browser before upload.  Keep the source link
   available too, while making the file path clear and its result easy to verify. */
.contact-logo-field { display: grid; gap: 12px; align-content: start; min-width: 0; }
.contact-socials { display: grid; gap: 13px; padding: 17px; border: 1px solid #dfe7e1; background: #f8faf8; border-radius: 11px; }
.contact-socials__heading { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.contact-socials__heading h2 { margin: 0; color: #294936; font-family: 'DM Sans', Arial, sans-serif; font-size: 14px; line-height: 1.25; }
.contact-socials__heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; }
.contact-socials__list { display: grid; gap: 9px; }
.contact-social-row { display: grid; grid-template-columns: minmax(150px, .36fr) minmax(220px, 1fr) 36px; gap: 9px; align-items: end; padding-top: 9px; border-top: 1px solid #e0e8e2; }
.contact-social-row:first-child { padding-top: 0; border-top: 0; }
.contact-social-row > label { min-width: 0; }
.contact-social-row .admin-select__trigger { width: 100%; min-width: 0; }
.contact-social-row__url { min-width: 0; }
.contact-socials__empty { margin: 0; color: var(--muted); font-size: 11px; }
.contact-social-row > .icon-button { align-self: end; }
@media (max-width: 680px) {
  .contact-socials { padding: 14px; }
  .contact-socials__heading { align-items: stretch; flex-direction: column; }
  .contact-socials__heading .button { width: 100%; }
  .contact-social-row { grid-template-columns: 1fr 36px; }
  .contact-social-row > label:first-child { grid-column: 1 / -1; }
}
.contact-logo-upload { padding: 11px; border: 1px dashed #bdcfc1; background: #f8fbf8; border-radius: 9px; }
.contact-logo-upload input[type="file"], .item-image-upload input[type="file"] { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important; }
.logo-file-picker { display: flex; min-width: 0; gap: 9px; align-items: center; min-height: 39px; padding: 5px; border: 1px solid #dce5de; background: #fff; border-radius: 8px; }
.logo-file-picker__button { flex: 0 0 auto; min-height: 29px; padding: 5px 9px; font-size: 10px; white-space: nowrap; }
.logo-file-picker__name { min-width: 0; overflow: hidden; color: #66756c; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.logo-upload-preview { display: flex; gap: 10px; align-items: center; min-width: 0; padding: 9px 10px; border: 1px solid #dce7de; background: #fbfdfb; border-radius: 9px; color: #547060; font-size: 10px; font-weight: 600; }
.logo-upload-preview[hidden] { display: none; }
.logo-upload-preview img { width: 58px; height: 42px; flex: 0 0 auto; object-fit: contain; object-position: center; border: 1px solid #e1e8e2; background: repeating-conic-gradient(#edf2ed 0 25%, #fff 0 50%) 50% / 10px 10px; border-radius: 5px; }
.logo-upload-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Analytics: every number has a compact real trend, and each audience
   breakdown is visualised without depending on an external chart library. */
.analytics-content { gap: 18px; }
.analytics-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.analytics-metric { display: grid; grid-template-columns: minmax(0, 1fr) 184px; min-height: 136px; gap: 12px; align-items: end; overflow: hidden; padding: 18px 19px 15px; background: linear-gradient(145deg, #fff 22%, #f8fbf8); }
.analytics-metric > div { display: grid; gap: 5px; align-self: start; }
.analytics-metric span { color: #65776b; font-size: 11px; font-weight: 650; line-height: 1.25; }
.analytics-metric strong { color: #1d3025; font-family: Newsreader, Georgia, serif; font-size: 39px; font-weight: 600; letter-spacing: -.045em; line-height: .95; }
.analytics-sparkline { display: block; width: 100%; min-width: 0; align-self: end; overflow: visible; }
.analytics-sparkline-grid { fill: none; stroke: #e5eee7; stroke-dasharray: 2 3; stroke-width: 1; }
.analytics-sparkline-area { fill: url(#analytics-spark-fill); }
.analytics-sparkline-line { fill: none; stroke: #3d7955; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.analytics-panel { min-width: 0; padding: 20px; }
.analytics-panel-heading { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.analytics-panel-heading h2 { margin: 0; color: #1d3025; font-size: 25px; }
.analytics-panel-heading > span { color: #75857b; font-size: 10px; font-weight: 700; text-align: right; }
.analytics-panel--distribution { min-height: 204px; }
.analytics-distribution { display: grid; grid-template-columns: 119px minmax(0, 1fr); gap: 18px; align-items: center; }
.analytics-donut-wrap { position: relative; display: grid; place-items: center; width: 119px; height: 119px; }
.analytics-donut { width: 119px; height: 119px; overflow: visible; transform: rotate(-90deg); }
.analytics-donut-track { fill: none; stroke: #edf2ed; stroke-width: 11; }
.analytics-donut-slices circle { fill: none; stroke-width: 11; transition: stroke-dasharray .3s ease; }
.analytics-donut-total { position: absolute; display: grid; gap: 2px; place-items: center; text-align: center; }
.analytics-donut-total strong { color: #1d3025; font-family: Newsreader, Georgia, serif; font-size: 28px; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.analytics-donut-total span { color: #77867d; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.analytics-legend { display: grid; min-width: 0; gap: 7px; }
.analytics-legend-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 7px; align-items: center; min-height: 17px; color: #52675a; font-size: 10px; }
.analytics-legend-row > i { width: 8px; height: 8px; border-radius: 50%; }
.analytics-legend-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-legend-row b { color: #2b4937; font-size: 10px; }
.analytics-legend-row small { min-width: 27px; color: #85928a; font-family: 'DM Mono', ui-monospace, monospace; font-size: 9px; text-align: right; }
.analytics-empty { display: grid; min-height: 118px; margin: 0; place-items: center; border: 1px dashed #d9e5db; color: #7a8980; background: #fbfdfb; border-radius: 10px; font-size: 11px; text-align: center; }
.analytics-panel--trend { grid-column: 1 / -1; padding-bottom: 15px; }
.analytics-trend-chart { padding: 4px 1px 0; }
.analytics-trend-legend { display: flex; flex-wrap: wrap; gap: 11px 15px; margin: 0 0 9px 32px; color: #52675a; font-size: 10px; font-weight: 650; }
.analytics-trend-legend span { display: inline-flex; gap: 6px; align-items: center; }
.analytics-trend-legend i { width: 8px; height: 8px; border-radius: 50%; }
.analytics-trend-chart svg { display: block; width: 100%; min-height: 185px; overflow: visible; }
.analytics-trend-grid line { stroke: #e8efea; stroke-dasharray: 3 4; stroke-width: 1; }
.analytics-trend-grid text, .analytics-trend-dates text { fill: #829087; font-family: 'DM Mono', ui-monospace, monospace; font-size: 10px; }
.analytics-trend-area { fill: url(#analytics-trend-fill); }
.analytics-trend-line { fill: none; stroke: #b7603d; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.analytics-trend-line--views { stroke: #356c4b; }

@media (max-width: 1100px) {
  .analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .analytics-metrics, .analytics-grid { grid-template-columns: 1fr; }
  .analytics-metric { grid-template-columns: minmax(0, 1fr) minmax(118px, .82fr); min-height: 120px; padding: 16px 15px 13px; }
  .analytics-metric strong { font-size: 35px; }
  .analytics-panel { padding: 17px; }
  .analytics-panel-heading h2 { font-size: 23px; }
  .analytics-panel--trend { grid-column: auto; }
  .analytics-distribution { grid-template-columns: 104px minmax(0, 1fr); gap: 13px; }
  .analytics-donut-wrap, .analytics-donut { width: 104px; height: 104px; }
  .analytics-legend-row { grid-template-columns: 7px minmax(0, 1fr) auto; gap: 6px; }
  .analytics-legend-row small { display: none; }
  .analytics-trend-legend { margin-left: 0; }
  .analytics-trend-chart svg { min-height: 155px; }
}

.subscription-fields input[aria-invalid="true"] { border-color: #b7603d; box-shadow: 0 0 0 3px rgba(183, 96, 61, .13); }
.acceptance-check input[aria-invalid="true"] { outline: 2px solid #b7603d; outline-offset: 2px; }
.subscription-validation-message { display: block; margin-top: 2px; color: #a44f2d; font-size: 10px; font-weight: 650; line-height: 1.4; }
.acceptance-check { flex-wrap: wrap; }
.acceptance-check .subscription-validation-message { flex-basis: 100%; margin-left: 24px; }

.subscription-main-column { display: grid; min-width: 0; gap: 17px; }
.order-form { padding: 26px; overflow: hidden; border-color: #d9e5dc; background: linear-gradient(150deg, #ffffff 0%, #fbfdf9 72%, #f2f7ef 100%); }
.order-form[hidden] { display: none; }
.order-form-heading h2 { max-width: 760px; }
.order-form-heading .flow-copy { max-width: 650px; margin-top: 9px; }
.order-form-download { flex: 0 0 auto; margin-top: 2px; text-decoration: none; white-space: nowrap; }
.order-form-number { display: flex; flex-wrap: wrap; gap: 8px 13px; align-items: baseline; margin-top: 21px; border: 1px solid #d6e1d7; padding: 13px 15px; color: #456050; background: #eff6ed; border-radius: 10px; }
.order-form-number span { color: #587263; font: 700 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.order-form-number strong { color: #193a28; font: 700 15px 'DM Mono', monospace; letter-spacing: .02em; }
.order-form-details, .order-form-financials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 20px 0 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.order-form-detail { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 13px; background: rgba(255, 255, 255, .72); }
.order-form-detail dt { margin: 0 0 5px; color: #637569; font: 700 10px 'DM Mono', monospace; letter-spacing: .055em; text-transform: uppercase; }
.order-form-detail dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #203d2d; font-size: 13px; font-weight: 650; line-height: 1.45; }
.order-form-detail dd a { color: #315f43; text-decoration: underline; text-decoration-color: #a7bdaa; text-underline-offset: 3px; }
.order-form-detail--wide { grid-column: 1 / -1; }
.order-form-included { margin-top: 20px; border: 1px solid #dce7dd; padding: 16px; background: #f8fbf7; border-radius: 10px; }
.order-form-included h3 { margin: 0; color: #2d513c; font-size: 13px; }
.order-form-included ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 13px 0 0; padding: 0; list-style: none; }
.order-form-included li { position: relative; padding-left: 20px; color: #486152; font-size: 12px; line-height: 1.4; }
.order-form-included li::before { content: '✓'; position: absolute; left: 0; color: #38704e; font-weight: 800; }
.order-form-financials { margin-top: 20px; }
.order-form-financials .order-form-total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px; border-color: #8161b0; background: #604592; }
.order-form-financials .order-form-total dt, .order-form-financials .order-form-total dd { margin: 0; color: #fff; }
.order-form-financials .order-form-total dt { font-size: 11px; }
.order-form-financials .order-form-total dd { font-family: Newsreader, Georgia, serif; font-size: 29px; letter-spacing: -.03em; }
.order-form-financials small { color: #65766a; font-size: 11px; font-weight: 600; }
.order-form-acceptances { display: grid; gap: 11px; margin-top: 20px; }
.order-form-check { display: grid; grid-template-columns: 15px minmax(0, 1fr); column-gap: 9px; align-items: start; margin-top: 0; padding: 13px 14px; border: 1px solid #dce6dc; background: #fff; border-radius: 9px; }
.order-form-check input { grid-column: 1; flex: 0 0 auto; }
.order-form-check > span { grid-column: 2; min-width: 0; }
.order-form-check.has-validation-error { border-color: #b7603d; background: #fffaf8; box-shadow: 0 0 0 3px rgba(183, 96, 61, .08); }
.order-form-validation-message { grid-column: 2; display: block; margin-top: 5px; color: #a44f2d; font-size: 10px; font-weight: 650; line-height: 1.4; }
.order-form-payment-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.order-form-pay-button { flex: 1 1 220px; min-height: 47px; justify-content: center; border-width: 1px; font-weight: 750; }
.order-form-pay-button--card { color: #fff; border-color: #5b3a88; background: linear-gradient(135deg, #7d58ad, #55357f); box-shadow: 0 8px 20px rgba(82, 49, 129, .22); }
.order-form-pay-button--card:hover { border-color: #4b2e72; background: linear-gradient(135deg, #916bc2, #654394); }
.order-form-pay-button--bank { color: #543884; border-color: #af9bce; background: #f7f3fb; }
.order-form-pay-button--bank:hover { border-color: #8062ab; background: #eee7f7; }
.order-form-pay-button[data-payment-locked="true"] { cursor: not-allowed; filter: saturate(.45); opacity: .62; }
.order-form-pay-button[data-payment-locked="true"]:hover { box-shadow: none; }
.order-form-payment-panel { margin-top: 17px; border: 1px solid #d9e4da; padding: 20px; background: #fbfdf9; border-radius: 12px; box-shadow: 0 12px 28px rgba(33, 68, 45, .07); }
.order-form-payment-panel[hidden] { display: none; }
.order-form-payment-panel__heading { display: flex; align-items: center; gap: 10px; }
.order-form-payment-panel__heading h3 { margin: 0; color: #1d392a; font-size: 18px; }
.order-form-payment-marker { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 22px; line-height: 1; }
.order-form-payment-marker--card { color: #fff; background: #b6456d; font-size: 13px; }
.order-form-payment-marker--bank { color: #654590; background: #f0ebf9; font-size: 24px; }
.card-payment-stub { max-width: 460px; margin-top: 16px; border: 1px solid #d8ddeb; padding: 17px; color: #203451; background: #fff; border-radius: 11px; box-shadow: 0 5px 15px rgba(28, 50, 88, .09); }
.card-payment-stub > p { margin: 0 0 14px; color: #5c6980; font-size: 11px; line-height: 1.45; }
.card-payment-stub__field { min-width: 0; }
.card-payment-stub__field > span { display: block; margin-bottom: 5px; color: #263a58; font-size: 11px; font-weight: 700; }
.card-payment-stub__field input { display: block; width: 100%; border: 1px solid #b9c4da; padding: 10px 11px; color: #263a58; background: #fff; border-radius: 7px; font: 700 14px 'DM Mono', monospace; letter-spacing: .04em; opacity: 1; transition: border-color .16s ease, box-shadow .16s ease; }
.card-payment-stub__field input:focus { outline: 0; border-color: #587aee; box-shadow: 0 0 0 3px rgba(88, 122, 238, .15); }
.card-payment-stub__field input::placeholder { color: #7d8aa0; opacity: 1; }
.card-payment-stub__field--number input { border-color: #587aee; box-shadow: 0 0 0 2px rgba(88, 122, 238, .11); }
.card-payment-stub__field.has-validation-error input { border-color: #b7603d; box-shadow: 0 0 0 3px rgba(183, 96, 61, .12); }
.card-payment-validation-message { display: block; margin-top: 6px; color: #a44f2d; font-size: 10px; font-weight: 700; line-height: 1.35; }
.card-payment-stub__row { display: grid; grid-template-columns: 1fr 92px; gap: 14px; margin-top: 13px; }
.card-payment-stub__submit { width: 100%; margin-top: 16px; border: 0; padding: 12px; color: #fff; background: #476fea; border-radius: 7px; font-size: 15px; font-weight: 750; cursor: pointer; box-shadow: 0 7px 18px rgba(71, 111, 234, .22); transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.card-payment-stub__submit:hover { background: #315ee7; box-shadow: 0 9px 22px rgba(71, 111, 234, .3); transform: translateY(-1px); }
.card-payment-stub__submit:focus-visible { outline: 3px solid rgba(71, 111, 234, .3); outline-offset: 2px; }
.card-payment-stub__submit:disabled { cursor: wait; opacity: .7; transform: none; }
.card-payment-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 13px; }
.card-brand { display: inline-flex; align-items: center; justify-content: center; min-height: 25px; border: 1px solid #d9dfdf; padding: 4px 7px; color: #4b5d56; background: #fff; border-radius: 4px; font-weight: 800; letter-spacing: .04em; }
.card-brand--visa { color: #1a3f91; font: 800 12px Arial, sans-serif; font-style: italic; }
.card-brand--mastercard { position: relative; gap: 0; padding: 3px 5px; overflow: hidden; }
.card-brand--mastercard i { width: 14px; height: 14px; border-radius: 50%; background: #e45145; }
.card-brand--mastercard i + i { margin-left: -5px; background: #efac34; opacity: .9; }
.card-brand--mastercard b { margin-left: 4px; font: 700 7px Arial, sans-serif; letter-spacing: 0; }
.card-brand--amex { color: #1873a8; font: 800 6px Arial, sans-serif; line-height: 1.05; text-align: center; }
.order-form-payment-activation { margin: 15px 0 0; color: #476152; font-size: 12px; font-weight: 700; }
.bank-payment-summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 16px; border: 1px solid #dce6dc; padding: 14px; background: #fff; border-radius: 10px; }
.bank-payment-summary .eyebrow { margin: 0; }
.bank-payment-summary strong { display: block; margin-top: 5px; color: #244531; font: 700 14px 'DM Mono', monospace; }
.bank-payment-summary span { display: block; margin-top: 3px; color: #4d6657; font-weight: 750; }
.bank-payment-details { margin-top: 14px; border: 1px solid #dce6dc; padding: 14px; background: #fff; border-radius: 10px; }
.bank-payment-details__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bank-payment-details h4 { margin: 0; color: #2d513c; font-size: 13px; }
.bank-payment-details dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 12px 0 0; border-top: 1px solid #e4eae3; border-left: 1px solid #e4eae3; }
.bank-payment-detail { min-width: 0; padding: 10px 11px; border-right: 1px solid #e4eae3; border-bottom: 1px solid #e4eae3; }
.bank-payment-detail:last-child { grid-column: 1 / -1; }
.bank-payment-detail dt { margin: 0; color: #687b6f; font: 700 9px 'DM Mono', monospace; letter-spacing: .05em; text-transform: uppercase; }
.bank-payment-detail dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin: 6px 0 0; }
.bank-payment-detail code { min-width: 0; overflow-wrap: anywhere; color: #1f3d2c; font: 700 11px 'DM Mono', monospace; }
.order-form-copy-button { flex: 0 0 auto; border: 1px solid #cfdad0; padding: 5px 7px; color: #315f43; background: #fff; border-radius: 5px; font: 700 9px system-ui, sans-serif; cursor: pointer; }
.order-form-copy-button:hover { border-color: #719075; background: #f2f7ef; }

@media (max-width: 720px) {
  .order-form-details, .order-form-financials, .order-form-included ul { grid-template-columns: 1fr; }
  .order-form-detail--wide, .order-form-financials .order-form-total { grid-column: auto; }
  .order-form-financials .order-form-total { display: grid; gap: 5px; }
  .order-form-financials .order-form-total dd { font-size: 25px; }
}

@media (max-width: 580px) {
  .order-form { padding: 19px; }
  .order-form-heading { display: grid; gap: 14px; }
  .order-form-download { width: 100%; text-align: center; }
  .order-form-number { display: grid; }
  .order-form-detail { padding: 11px; }
  .order-form-included { padding: 14px; }
  .order-form-payment-actions { display: grid; }
  .order-form-pay-button { width: 100%; }
  .order-form-payment-panel { padding: 15px; }
  .bank-payment-summary { display: grid; }
  .bank-payment-summary .button { width: 100%; justify-content: center; }
  .bank-payment-details__heading { align-items: stretch; display: grid; }
  .bank-payment-details__heading .order-form-copy-button { width: 100%; }
  .bank-payment-details dl { grid-template-columns: 1fr; }
  .bank-payment-detail:last-child { grid-column: auto; }
}

.billing-view { padding-bottom: 42px; }
.billing-page-heading { margin-bottom: 18px; }
.billing-content { display: grid; gap: 17px; }
.billing-loading, .billing-error { margin: 0; border: 1px solid #dbe4dc; padding: 20px; color: #607267; background: #fff; border-radius: 12px; }
.billing-error { border-color: #e3c5bc; color: #97472f; background: #fff7f4; }
.billing-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.billing-card, .billing-documents-card, .billing-company-card { padding: 25px; }
.billing-card { display: flex; min-height: 280px; flex-direction: column; align-items: flex-start; }
.billing-card-heading { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 18px; }
.billing-card-heading h2, .billing-company-card h2 { margin: 5px 0 0; font-family: Newsreader, Georgia, serif; font-size: 28px; font-weight: 600; letter-spacing: -.04em; }
.billing-status { display: inline-flex; min-height: 25px; align-items: center; border: 1px solid #d7dfd8; padding: 4px 9px; color: #55685c; background: #f4f7f4; border-radius: 99px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.billing-status--active, .billing-status--paid, .billing-status--succeeded { border-color: #bed7c3; color: #23643a; background: #e9f6eb; }
.billing-status--unpaid, .billing-status--past_due, .billing-status--expired { border-color: #e6c7b6; color: #99502f; background: #fff3ea; }
.billing-status--pending, .billing-status--pending_payment { border-color: #ded1ac; color: #80621e; background: #fff9e8; }
.billing-key-values { display: grid; width: 100%; gap: 0; margin: 21px 0; }
.billing-key-values > div { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr); gap: 18px; padding: 10px 0; border-bottom: 1px solid #e5ebe6; }
.billing-key-values dt, .billing-company-summary dt { color: #697b70; font-size: 11px; font-weight: 700; }
.billing-key-values dd, .billing-company-summary dd { margin: 0; overflow-wrap: anywhere; color: #223e2e; font-size: 12px; font-weight: 750; text-align: right; }
.billing-card > .button { margin-top: auto; }
.billing-payment-method { display: flex; width: 100%; align-items: center; gap: 13px; margin: 28px 0; border: 1px solid #dbe4dc; padding: 17px; background: #f8fbf8; border-radius: 11px; }
.billing-payment-icon { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; color: #fff; background: #684a98; border-radius: 10px; font-size: 18px; }
.billing-card-icon { display: block; width: 29px; height: 21px; }
.billing-card-icon__body { fill: currentColor; }
.billing-card-icon__detail { fill: #684a98; }
.billing-card-icon__number { fill: none; stroke: #684a98; stroke-width: 1.7; stroke-linecap: round; }
.billing-payment-method strong { color: #243f30; font-size: 14px; }
.billing-documents-card h2 { margin: 5px 0 0; font-family: Newsreader, Georgia, serif; font-size: 30px; font-weight: 600; letter-spacing: -.04em; }
.billing-table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid #e0e7e1; border-radius: 11px; }
.billing-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 11px; }
.billing-table th { padding: 11px 12px; color: #697b70; background: #f4f8f4; font: 700 9px 'DM Mono', monospace; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.billing-table td { padding: 12px; border-top: 1px solid #e7ece8; color: #425a4c; vertical-align: middle; }
.billing-table td strong { color: #203f2e; font-family: 'DM Sans', Arial, sans-serif; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.billing-download { min-height: 33px; padding: 7px 10px; font-size: 10px; white-space: nowrap; }
.billing-empty { padding: 22px !important; color: #78877e; text-align: center; }
.billing-contracts { margin-top: 23px; }
.billing-contracts h3 { margin: 0; color: #294b38; font-size: 14px; }
.billing-contracts ul { display: grid; gap: 0; margin: 11px 0 0; padding: 0; border: 1px solid #e0e7e1; background: #fff; border-radius: 11px; list-style: none; }
.billing-contracts li { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 13px; border-bottom: 1px solid #e7ece8; color: #4c6155; font-size: 11px; }
.billing-contracts li:last-child { border-bottom: 0; }
.billing-contracts li strong { color: #254632; font-family: 'DM Sans', Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.billing-company-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.billing-company-card > div { min-width: 0; flex: 1; }
.billing-company-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; margin: 18px 0 0; }
.billing-company-summary > div { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid #e5ebe6; }
.billing-immutability { max-width: 760px; margin: 16px 0 0; border-left: 3px solid #7a5aa6; padding-left: 12px; color: #67776d; font-size: 10px; line-height: 1.5; }
.billing-immutability strong { color: #533b78; }
.billing-payment-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.billing-payment-option { display: flex; min-height: 92px; align-items: center; gap: 13px; border: 1px solid #dce4dd; padding: 17px; color: #284635; background: #fff; border-radius: 11px; cursor: pointer; text-align: left; }
.billing-payment-option:hover, .billing-payment-option.is-selected { border-color: #7957a5; background: #f7f2fc; box-shadow: 0 0 0 3px rgba(110, 76, 157, .1); }
.billing-payment-option span { display: grid; flex: 0 0 35px; place-items: center; width: 35px; height: 35px; color: #fff; background: #684a98; border-radius: 9px; }
.billing-company-form { margin-top: 20px; }
.billing-company-form label { display: grid; gap: 6px; color: #40594a; font-size: 11px; font-weight: 700; }
.billing-company-form input { width: 100%; border: 1px solid #dbe3dd; padding: 10px 11px; color: var(--ink); background: #fff; border-radius: 8px; outline: 0; font-size: 12px; }
.billing-company-form input:focus { border-color: #684a98; box-shadow: 0 0 0 3px rgba(104, 74, 152, .1); }
.billing-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

@media (max-width: 900px) {
  .billing-overview-grid { grid-template-columns: 1fr; }
  .billing-card { min-height: 0; }
  .billing-company-card { flex-direction: column; }
}

@media (max-width: 650px) {
  .billing-card, .billing-documents-card, .billing-company-card { padding: 19px; }
  .billing-table-wrap { overflow: visible; border: 0; }
  .billing-table thead { display: none; }
  .billing-table, .billing-table tbody, .billing-table tr, .billing-table td { display: block; width: 100%; }
  .billing-table tr { margin-bottom: 12px; border: 1px solid #e0e7e1; background: #fff; border-radius: 10px; }
  .billing-table td { display: grid; grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); gap: 10px; border-top: 1px solid #edf0ed; text-align: right; }
  .billing-table td:first-child { border-top: 0; }
  .billing-table td::before { content: attr(data-label); color: #6d7c73; font-size: 9px; font-weight: 750; text-align: left; text-transform: uppercase; }
  .billing-table td:last-child { display: block; }
  .billing-table td:last-child::before { display: none; }
  .billing-table .billing-download { width: 100%; }
  .billing-contracts li { align-items: stretch; flex-direction: column; }
  .billing-contracts .billing-download { width: 100%; }
  .billing-company-summary { grid-template-columns: 1fr; }
  .billing-payment-options { grid-template-columns: 1fr; }
  .billing-modal-actions { display: grid; grid-template-columns: 1fr; }
  .billing-modal-actions .button { width: 100%; }
}

/* This picker is a lightweight modal dialog of its own. Opening it after the
   surrounding form dialog guarantees that its options occupy the top browser
   layer instead of being painted behind that form. */
.admin-select-layer { width: auto; height: auto; max-width: none; max-height: none; margin: 0; border: 0; padding: 0; color: inherit; background: transparent; z-index: 10000; }
.admin-select-layer::backdrop { background: transparent; }
.admin-select-layer.is-mobile { z-index: 10000; }

/* Publishing stays out of the toolbar and becomes available after the user
   reaches the end of the second content screen. */
.floating-publish { position: fixed; z-index: 70; right: 24px; bottom: 24px; display: none; min-width: 150px; opacity: 0; pointer-events: none; box-shadow: 0 14px 34px rgba(18, 66, 43, .24); transform: translateY(calc(100% + 44px)); transition: opacity .2s ease, transform .2s ease, background .15s ease, color .15s ease; }
.floating-publish.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.floating-publish.is-published { border-color: #102d21; color: #c5d2cb; background: #18382a; opacity: 1; filter: saturate(.5); }
.floating-publish.is-published:disabled { cursor: default; opacity: 1; }
@media (max-width: 580px) {
  .floating-publish { right: 15px; bottom: max(15px, env(safe-area-inset-bottom)); left: 15px; display: inline-flex; width: auto; max-width: calc(100dvw - 30px); min-height: 46px; }
  .toast { z-index: 80; right: 15px; left: 15px; max-width: none; bottom: max(15px, env(safe-area-inset-bottom)); }
  body.has-floating-publish .toast { bottom: calc(max(15px, env(safe-area-inset-bottom)) + 73px); }

  /* On phones the selected dish and its editor form one continuous card.
     The editor is moved directly after the tapped row by admin.js. */
  .menu-item-list > .item-editor.is-mobile-inline {
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 8px 0 14px;
    padding: 16px;
    border-color: #cfe0d4;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(23, 47, 36, .07);
    scroll-margin-top: 12px;
  }
  .menu-item-list > .menu-row[aria-expanded="true"] {
    border-bottom-color: transparent;
    background: #f0f7f2;
    border-radius: 10px;
    box-shadow: inset 2px 0 var(--green);
  }
}

/* Cabinet controls share a restrained raised surface and a small highlight on
   the upper half, so primary, secondary and compact buttons feel consistent. */
button:not(.menu-row):not(.text-button):not(.more-button):not(.admin-select-layer__backdrop):not(.preview-site button),
a.button,
.chat-file-button {
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .48), inset 0 8px 13px -15px #fff, 0 2px 5px rgba(23, 47, 36, .13);
}
button:not(.menu-row):not(.text-button):not(.more-button):not(.admin-select-layer__backdrop):not(.preview-site button):active,
a.button:active,
.chat-file-button:active { box-shadow: inset 0 2px 4px rgba(20, 45, 32, .16), 0 1px 2px rgba(23, 47, 36, .1); transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .floating-publish { transition: none; }
}