/* The app's base design (the Groomers Club style): colour slots, then the shared pieces (fields,
   buttons, cards, lists, tabs, toast) whose class names come from Haven's styles.css, pages.css and
   dashboard.css, so grooming.css, the screen's markup and Haven's other styles (style-*.css) work
   unchanged. look.ts sets every colour slot on <html> for the chosen look; the values here are
   only what shows if it can't run. Channels (`--ink: 43 38 34`) are used as rgb(var(--ink) / alpha). */

:root {
  --text: #2b2622;
  --text-rgb: 43 38 34;
  --text-strong: #17130f;
  --muted: #6f655c;
  --faint: #7d7268; /* at least 4.5:1 on the page and cards (WCAG AA) */
  --ink: 43 38 34; /* lines, borders, hover washes */
  --hi: 255 255 255;
  --shade: 70 45 25; /* shadows and sunken wells */
  --shade-k: 0.35;
  --well-k: 0.18;
  --bg: #faf7f2;
  --line: rgb(var(--ink) / 0.2);
  --edge: rgb(var(--ink) / 0.14);
  --tile: #fffdf9;
  --tile-edge: rgb(var(--ink) / 0.1);
  --pop: #fffdf9;
  --dialog-bg: #fffdf9;
  --menu-bg: #fffdf9;
  --grid-head: #fbf7f1;
  --toast-bg: rgba(255, 253, 249, 0.97);
  --accent: #c8643b;
  --accent-deep: #a24b27;
  --accent-hi: #d9774d;
  --accent-tint: #f3b493;
  --accent-soft: #c8643b;
  --accent-pale: #a24b27;
  --accent-night: #fbe3d6;
  --accent-block: #b4572f;
  --accent-ink: #fff;
  --c1: var(--accent);
  --danger: #c0392b;
  --ok: #2f8a57;
  --warn: #b7791f;
  --bad-text: #a12d22;
  --info-text: #1d6b64;
  --soon-text: #87540f;
  --good-text: #23744a;
  --warn-text: #93560c;
  --warn-ico: #b7791f;
  --cancel-filter: none;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #f3eee8;
    --text-rgb: 243 238 232;
    --text-strong: #fff;
    --muted: #b3aaa1;
    --faint: #a39a91;
    --ink: 255 248 240;
    --shade: 0 0 0;
    --shade-k: 1;
    --well-k: 1;
    --bg: #1c1917;
    --line: rgb(var(--ink) / 0.2);
    --edge: rgb(var(--ink) / 0.14);
    --tile: #25201d;
    --tile-edge: rgb(var(--ink) / 0.09);
    --pop: #2b2521;
    --dialog-bg: #2b2521;
    --menu-bg: #2f2925;
    --grid-head: #2a2420;
    --toast-bg: rgba(43, 37, 33, 0.97);
    --accent: #e8875c;
    --accent-deep: #b4572f;
    --accent-hi: #f0a07c;
    --accent-tint: #f6b998;
    --accent-soft: #f0a07c;
    --accent-pale: #f6c4ab;
    --accent-night: #4a2a1b;
    --accent-block: #a24b27;
    --danger: #ff8a7a;
    --ok: #6fdc9c;
    --warn: #f2b866;
    --bad-text: #ffb8ad;
    --info-text: #a3f0e7;
    --soon-text: #ffd8a1;
    --good-text: #a9f2c8;
    --warn-text: #ffc27a;
    --warn-ico: #ffcf7a;
    --cancel-filter: invert(1);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
/* Layout rules like display:grid would otherwise override the hidden attribute. */
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }
body { color: var(--text); background: var(--bg) var(--bg-art, none) center / cover no-repeat fixed; font: 14px/1.5 var(--font); }
.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
.boot { margin: 40vh 0 0; text-align: center; color: var(--muted); }

h2 { margin: 0 0 22px; font-size: 24px; font-weight: 650; }
.lead { color: var(--muted); margin: -12px 0 20px; }
.hint { color: var(--faint); font-size: 12px; margin: 0; }
code { background: rgb(var(--ink) / 0.08); padding: 1px 5px; border-radius: 4px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.brand, .topbar-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 19px; font-weight: 750; letter-spacing: -0.01em; text-decoration: none; }
.brand .gc-logo { height: 40px; width: auto; display: block; }
.topbar-brand .gc-logo { height: 26px; width: auto; display: block; }
/* The bone between "groomers" and "club" takes the look's accent colour. */
.gc-logo .gc-bone { fill: var(--accent); }
/* The top bar's name stays plain in every look; the looks dress up the sign-in screen's .brand. */
.topbar-brand { flex: none; font-family: var(--font); }

/* ---- signed out --------------------------------------------------------------------- */

.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px 16px; }
.card { width: 100%; max-width: 440px; padding: 36px 40px; border-radius: 20px; background: var(--tile); border: 1px solid var(--tile-edge); box-shadow: 0 24px 60px rgb(var(--shade) / calc(0.4 * var(--shade-k))); }
.switch { margin: 16px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.switch + .switch { margin-top: 8px; }
@media (max-width: 520px) { .card { padding: 28px 22px; } }

/* ---- fields ------------------------------------------------------------------------- */

form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 6px 2px; transition: border-color 0.2s; }
.field:focus-within { border-color: var(--accent); }
.field input, .field select, .field textarea { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; padding: 4px 0; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input.code { letter-spacing: 6px; font-variant-numeric: tabular-nums; }
.field input.code::placeholder { letter-spacing: normal; }
.field select { cursor: pointer; }
.field select option { background: var(--pop); color: var(--text); }
.field.area { align-items: flex-start; }
.field.area .ico { margin-top: 6px; }
.field textarea { resize: vertical; min-height: 64px; max-height: 260px; }
.field input:focus-visible { outline: 0; }
.field-pair, .name-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 520px) { .field-pair { grid-template-columns: 1fr; } }

.ico { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico.sm { width: 14px; height: 14px; stroke: currentColor; }
.eye { display: flex; padding: 2px; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.eye:hover .ico, .eye:focus-visible .ico { stroke: var(--text); }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.check input { margin: 2px 0 0; accent-color: var(--accent); }
.check.sm { align-items: center; gap: 6px; font-size: 12px; }
.check.sm input { margin: 0; }

/* ---- buttons ------------------------------------------------------------------------ */

button { font: inherit; color: inherit; }
.pill { margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--accent-deep); background: var(--accent); color: var(--accent-ink); font-weight: 650; cursor: pointer; box-shadow: 0 4px 14px rgb(var(--shade) / calc(0.3 * var(--shade-k))); transition: background 0.2s, border-color 0.2s, transform 0.1s; }
.pill:hover:not(:disabled) { background: var(--accent-hi); }
.pill:active:not(:disabled) { transform: translateY(1px); }
.pill:disabled { opacity: 0.55; cursor: default; }
form .pill { width: 100%; }
.pill.compact { width: auto; margin-top: 0; padding: 7px 15px; font-size: 13px; }
.pill.ghost { background: transparent; color: var(--text); border-color: rgb(var(--ink) / 0.22); box-shadow: none; }
.pill.ghost:hover:not(:disabled) { background: rgb(var(--ink) / 0.05); border-color: rgb(var(--ink) / 0.45); }
.pill.danger, .pill.compact.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); box-shadow: none; }
.pill.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 8%, transparent); border-color: var(--danger); }
.pill.danger.confirm { background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: var(--danger); }
.link { padding: 0; border: 0; background: none; color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link:hover:not(:disabled) { color: var(--accent-deep); }
.link:disabled { color: var(--faint); text-decoration: none; cursor: default; }
.icon-btn { position: relative; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 9px; background: rgb(var(--ink) / 0.06); color: var(--muted); cursor: pointer; transition: background 0.2s, color 0.2s; }
.icon-btn:hover { background: rgb(var(--ink) / 0.12); color: var(--text); }
.icon-btn.confirm { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }

/* ---- messages ----------------------------------------------------------------------- */

.error { color: var(--danger); margin: 0; font-size: 12.5px; }
.notice { color: var(--ok); margin: 0; font-size: 12.5px; }
.error:empty, .notice:empty { display: none; }
/* Only unmet password rules are listed. */
.rules { list-style: none; margin: -8px 0 0; padding: 0; font-size: 12px; color: var(--danger); display: grid; gap: 1px; }
.rules:empty { display: none; }
.rules li::before { content: "✕"; display: inline-block; width: 16px; }

.toast { position: fixed; left: 50%; bottom: 28px; translate: -50% 0; z-index: 20; margin: 0; padding: 9px 18px; border-radius: 999px; background: var(--toast-bg); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); color: var(--text); font-size: 13px; box-shadow: 0 10px 30px rgb(var(--shade) / calc(0.5 * var(--shade-k))); animation: toast-in 0.35s var(--spring); pointer-events: none; }
.toast.bad { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
@keyframes toast-in { from { opacity: 0; translate: -50% 12px; } }

/* ---- signed in: top bar and page ------------------------------------------------------ */

.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.topbar { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--tile-edge); background: var(--tile); }
.topbar-biz { min-width: 0; padding-left: 14px; border-left: 1px solid var(--tile-edge); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-who { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.app-main { flex: 1; min-height: 0; display: flex; padding: 16px 18px 18px; }
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
  .topbar-biz { order: 3; flex-basis: 100%; padding-left: 0; border-left: 0; }
  .topbar-who { display: none; }
  .topbar .pill { margin-left: auto; }
  .app { height: auto; min-height: 100vh; }
  .app-main { padding: 12px 16px 16px; }
}

.page { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding: 2px 4px 2px 2px; animation: page-in 0.45s var(--spring); }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
.page-head { display: flex; align-items: center; gap: 14px; padding: 2px 4px 0; }
.page-title { flex-shrink: 0; margin-right: auto; min-width: 0; }
.page-title h1 { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -0.01em; }
.muted-sm { margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }

.tile { position: relative; min-width: 0; padding: 18px 20px; border-radius: 20px; background: var(--tile); border: 1px solid var(--tile-edge); box-shadow: 0 8px 26px rgb(var(--shade) / calc(0.22 * var(--shade-k))); }
.tabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgb(var(--ink) / 0.06); border: 1px solid var(--tile-edge); }
.tab { padding: 5px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; transition: background 0.25s, color 0.25s; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--tile); color: var(--text); box-shadow: 0 1px 3px rgb(var(--shade) / calc(0.3 * var(--shade-k))); }

.search { display: flex; align-items: center; gap: 8px; width: min(280px, 36vw); padding: 7px 14px; border-radius: 999px; background: rgb(var(--ink) / 0.05); border: 1px solid var(--tile-edge); color: var(--muted); transition: border-color 0.2s; }
.search:focus-within { border-color: var(--accent); }
.search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; }
.search input::-webkit-search-cancel-button { filter: var(--cancel-filter) opacity(0.5); }

.empty { color: var(--muted); text-align: center; margin: 0; padding: 18px 10px; font-size: 13px; }
.empty.big { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: 1; padding: 40px 20px; }
.empty.big .ico { width: 38px; height: 38px; stroke: color-mix(in srgb, var(--accent) 75%, transparent); stroke-width: 1.4; }
.empty.big p { margin: 0; max-width: 280px; }

/* Clients: a list beside the open client. */
.page-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); gap: 16px; }
.list-tile { padding: 10px; overflow-y: auto; }
.detail-tile { display: flex; flex-direction: column; padding: 24px 28px; overflow-y: auto; }
.item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.item-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; transition: background 0.2s; }
.item-row:hover { background: rgb(var(--ink) / 0.05); }
.item-row.active { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.item-txt { min-width: 0; display: flex; flex-direction: column; }
.item-txt b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-txt small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; background: var(--accent-deep); text-transform: uppercase; }
.avatar.lg { width: 52px; height: 52px; border-radius: 16px; font-size: 22px; }
.view-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.view-title { min-width: 0; }
.view-title h2 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.view-title p { margin: 0; }
.fields { margin: 0 0 14px; display: flex; flex-direction: column; gap: 2px; }
.frow { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--tile-edge); }
.frow dt { font-size: 12px; color: var(--muted); }
.frow dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; }
.frow dd > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.notes { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: rgb(var(--text-rgb) / 0.88); }
.login-form { gap: 14px; }
.login-form h2 { margin: 0 0 4px; font-size: 20px; }
.login-form .error { margin-top: -4px; }
/* The week's name never shrinks: where it can't fit beside the buttons (wide display fonts like
   Luxe's and Paper's), the buttons wrap to the next line instead. */
#gm-calendar .gm-toolbar { flex-wrap: wrap; }
#gm-calendar .gm-toolbar h2 { flex: 1 0 auto; }
.gm-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 900px) {
  .page-split { grid-template-columns: minmax(0, 1fr); }
  .list-tile { max-height: 260px; }
  .page-head { flex-wrap: wrap; }
  .search { width: 100%; order: 3; }
}
/* Phones: the calendar's toolbar wraps, with the week's name on a line of its own. */
@media (max-width: 640px) {
  .pill.compact { white-space: nowrap; }
  #gm-calendar .gm-toolbar h2 { order: -1; flex: 0 0 100%; margin: 0 0 4px 2px; }
  /* The looks with big display headings shrink the week's name to fit a phone. */
  :is([data-style="paper"], [data-style="luxe"], [data-style="ethereal"]) #gm-calendar .gm-toolbar h2 { font-size: min(34px, 7.4vw); }
  #gm-tabs { width: 100%; scrollbar-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page, .toast { animation: none; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--ink) / 0.16); border-radius: 5px; }
/* In dialogs and pop-up menus the scroll bar sits inside the rounded border, clear of the corners,
   whatever the look (the looks' own thumb rules set only its colour and corners here). */
:root .gm-dialog::-webkit-scrollbar, :root .gm-menu::-webkit-scrollbar { width: 14px; }
:root .gm-dialog::-webkit-scrollbar-track { margin-block: 22px; }
:root .gm-menu::-webkit-scrollbar-track { margin-block: 10px; }
:root .gm-dialog::-webkit-scrollbar-thumb, :root .gm-menu::-webkit-scrollbar-thumb { border: 4px solid transparent; background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) {
  .gm-dialog, .gm-menu { scrollbar-width: thin; scrollbar-color: rgb(var(--ink) / 0.25) transparent; }
}
/* A dialog's close button: top right, and it stays there while the dialog scrolls. */
.dlg-x { position: sticky; top: 0; z-index: 3; display: grid; margin: -10px -12px -20px auto; }
/* Solid, so it stays readable over whatever scrolls under it, and in the text's own colour so it's
   easy to find in every look, light or dark (Paper's hairline border was nearly invisible on black). */
.dlg-x, [data-style] .dlg-x { background: color-mix(in srgb, var(--text) 9%, var(--dialog-bg, var(--bg))); color: var(--text); }
.dlg-x:hover, [data-style] .dlg-x:hover { background: color-mix(in srgb, var(--text) 16%, var(--dialog-bg, var(--bg))); color: var(--text); }
[data-style="paper"] .dlg-x, [data-style="terminal"] .dlg-x { border: 1px solid color-mix(in srgb, var(--text) 45%, transparent); }

/* Account (main.ts). */
.account-dialog h3 { margin: 6px 0 0; font-size: 14px; }
.actions.start { margin-top: 0; padding-top: 0; }
#acct-import-row { display: grid; gap: 14px; }
#acct-import-row[hidden] { display: none; }
/* Pet recall (main.ts showRecall): a notice at the top of the Grooming page, until dismissed. */
.recall-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; font-size: 13px; }
.recall-bar[hidden] { display: none; }
.recall-text { flex: 1 1 260px; margin: 0; line-height: 1.4; }
.recall-more { display: block; color: var(--muted); }
a.pill { text-decoration: none; }
.devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.devices li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--tile-edge); border-radius: 12px; }
.devices li > span { flex: 1; min-width: 0; display: grid; font-size: 13px; }
.devices small { color: var(--muted); font-size: 12px; }
.terms-note a, .legal-links a { color: var(--accent); }

/* Client sign-up page address (Account) and the sign-ups waiting for approval (main.ts). */
#acct-link-row { display: grid; gap: 12px; }
#acct-link-row[hidden] { display: none; }
.slug-domain { color: var(--muted); white-space: nowrap; }
.slug-note { margin: -6px 2px 0; font-size: 12px; color: var(--muted); }
.slug-note.ok { color: var(--ok); }
.slug-note.bad { color: var(--danger); }
.link-out a { color: var(--accent); overflow-wrap: anywhere; }
.signups-dialog { width: min(640px, calc(100vw - 32px)); }
.signup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.signup-card { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--tile-edge); border-radius: 14px; }
.signup-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.signup-head small { color: var(--muted); font-size: 12px; }
.signup-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
.signup-facts dt { color: var(--muted); }
.signup-facts dd { margin: 0; overflow-wrap: anywhere; }
.signup-vaccine { max-width: 100%; max-height: 360px; border-radius: 10px; justify-self: start; }
.field-label { color: var(--muted); font-size: 13px; white-space: nowrap; }
.warn-note { margin: 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-text); font-size: 13px; }

/* ---- the website editor (site-editor.ts) ---- */
.site-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.site-editor[hidden] { display: none; }
.se-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.se-bar h1 { font-size: 1.4rem; margin: 0; }
.se-status { flex: 1; color: var(--muted); font-size: 13px; min-width: 120px; }
.se-status.bad { color: var(--bad-text); }
.se-devices { display: flex; gap: 2px; }
.se-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 14px; }
.se-panel { display: flex; flex-direction: column; min-height: 0; background: var(--tile); border: 1px solid var(--tile-edge); border-radius: 16px; overflow: hidden; }
.se-panel > .tabs { padding: 6px 10px 0; flex: none; }
.se-pane { flex: 1; overflow-y: auto; padding: 4px 14px 40px; overscroll-behavior: contain; }
.se-preview { min-width: 0; min-height: 520px; display: flex; justify-content: center; background: rgb(var(--ink) / 0.06); border-radius: 16px; padding: 10px; }
.se-frame-wrap { width: 100%; height: 100%; transition: width 0.25s; }
.se-frame-wrap[data-device="tablet"] { width: 820px; max-width: 100%; }
.se-frame-wrap[data-device="phone"] { width: 390px; max-width: 100%; }
.se-frame-wrap iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 6px 24px rgb(var(--shade) / 0.18); }
@media (max-width: 900px) {
  .se-body { grid-template-columns: 1fr; }
  .se-preview { order: -1; height: 60vh; min-height: 0; }
}
/* Phones: the preview is already phone-sized, so no size switch; it stays in view at the top while
   the forms scroll under it, so a change shows as it's made. */
@media (max-width: 700px) {
  .site-editor { overflow: visible; }
  .se-devices { display: none; }
  .se-bar h1 { font-size: 1.2rem; }
  .se-preview { position: sticky; top: 0; z-index: 2; height: 38dvh; padding: 6px; box-shadow: 0 10px 18px -12px rgb(var(--shade) / 0.5); background: var(--bg); }
  .se-panel { overflow: visible; }
  .site-editor .se-panel > .tabs { position: sticky; top: 38dvh; z-index: 1; padding: 8px 10px 4px; background: var(--bg); box-shadow: 0 1px 0 var(--tile-edge); }
  .se-pane { overflow: visible; padding-bottom: 24px; }
  .se-add-grid { grid-template-columns: 1fr 1fr; }
}
.se-sec { padding: 14px 0; border-bottom: 1px solid var(--tile-edge); display: grid; gap: 10px; }
.se-sec:last-child { border-bottom: 0; }
.se-sec h3 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.se-sec h4 { margin: 4px 0 2px; font-size: 13px; }
.se-row { display: grid; gap: 4px; }
.se-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.se-row input[type="text"], .se-row textarea, .se-row select, .se-link input, .se-link select, .se-addr input { width: 100%; font: inherit; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; }
.se-row textarea { resize: vertical; min-height: 60px; }
.se-row :is(input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.se-toggle { display: flex; align-items: center; gap: 8px; }
.se-toggle label { font-size: 14px; }
.se-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.se-help { color: var(--muted); font-size: 12px; margin: 0; }
.se-err { color: var(--bad-text); font-size: 12px; }
.se-err:empty { display: none; }
.se-warn { margin: 0; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn-text); font-size: 13px; }
.se-row .se-emoji { max-width: 90px; font-size: 18px; }
.se-color { display: flex; align-items: center; gap: 8px; }
.se-color input[type="color"] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.se-row .se-color .se-hex { max-width: 110px; font-family: ui-monospace, Consolas, monospace; }
.se-color.auto input[type="color"] { opacity: 0.35; }
.se-image { display: flex; align-items: center; gap: 10px; }
.se-image img, .se-noimg { width: 56px; height: 56px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); flex: none; }
.se-noimg { display: grid; place-items: center; font-size: 10px; color: var(--faint); text-align: center; }
.se-link { display: grid; gap: 6px; }
.se-addr { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.se-addr span { white-space: nowrap; }
.se-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.se-pages li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 9px; }
.se-pages li.active { background: rgb(var(--ink) / 0.07); }
.se-page-name { flex: 1; text-align: left; background: none; border: 0; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; padding: 4px; }
.se-pages small { color: var(--faint); font-size: 12px; }
.se-icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.se-icon:hover:not(:disabled) { background: rgb(var(--ink) / 0.08); color: var(--text); }
.se-icon:disabled { opacity: 0.3; cursor: default; }
.se-blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.se-block { border: 1px solid var(--tile-edge); border-radius: 12px; background: var(--bg); }
.se-block.open { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.se-block-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 10px; cursor: pointer; }
.se-emo { font-size: 20px; width: 28px; text-align: center; flex: none; }
.se-block-name { flex: 1; min-width: 0; display: grid; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.se-block-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.se-block-name b { font-size: 14px; }
.se-block-name small { color: var(--faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-block-body { display: grid; gap: 12px; padding: 4px 12px 14px; }
.se-items { display: grid; gap: 6px; }
.se-item, .se-style { border: 1px solid var(--tile-edge); border-radius: 10px; padding: 0 10px; background: var(--tile); }
.se-item[open], .se-style[open] { padding-bottom: 10px; display: grid; gap: 10px; }
.se-item summary, .se-style summary { display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 6px 0; font-size: 13.5px; font-weight: 600; list-style: none; }
.se-item summary::-webkit-details-marker, .se-style summary::-webkit-details-marker { display: none; }
.se-item summary span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.se-add summary { list-style: none; cursor: pointer; display: inline-flex; }
.se-add summary::-webkit-details-marker { display: none; }
.se-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.se-add-type { display: grid; gap: 2px; text-align: left; padding: 10px; border: 1px solid var(--tile-edge); border-radius: 12px; background: var(--bg); color: var(--text); cursor: pointer; font: inherit; }
.se-add-type:hover { border-color: var(--accent); }
.se-add-type b { font-size: 13.5px; }
.se-add-type small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.se-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.se-preset { display: grid; gap: 6px; padding: 8px; border: 2px solid var(--tile-edge); border-radius: 12px; background: var(--bg); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.se-preset.active { border-color: var(--accent); }
.se-preset b { font-size: 12.5px; }
.se-swatches { display: flex; height: 26px; border-radius: 7px; overflow: hidden; border: 1px solid var(--tile-edge); }
.se-swatches i { flex: 1; }
.se-pics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.se-pics li { position: relative; }
.se-pics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.se-pics .se-icon { position: absolute; top: 4px; right: 4px; background: var(--tile); }
.se-pics small { position: absolute; left: 4px; bottom: 4px; background: var(--tile); border-radius: 6px; padding: 1px 6px; font-size: 11px; }
.se-undo { display: flex; gap: 4px; }
.se-ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.se-ico .f { fill: currentColor; stroke: none; }
.se-emo { color: var(--accent); }
.se-emo .se-ico { vertical-align: -0.15em; }
.se-symbol { position: relative; }
.se-symbol summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); font-size: 14px; }
.se-symbol summary::-webkit-details-marker { display: none; }
.se-symbol summary .se-ico, .se-sym-emoji { font-size: 22px; color: var(--accent); }
.se-symbol[open] summary { border-color: var(--accent); }
.se-sym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; margin-top: 8px; padding: 8px; border: 1px solid var(--tile-edge); border-radius: 10px; background: var(--bg); }
.se-sym-btn { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); cursor: pointer; font-size: 22px; }
.se-sym-btn:hover, .se-sym-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.se-sym-btn.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.se-sym-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.se-templates { display: grid; gap: 8px; }
.se-template { display: grid; gap: 3px; text-align: left; padding: 10px 12px; border: 1px solid var(--tile-edge); border-radius: 12px; background: var(--bg); color: var(--text); cursor: pointer; font: inherit; }
.se-template:hover, .se-template:focus-visible { border-color: var(--accent); }
.se-template b { font-size: 14px; }
.se-template small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.se-tpl-pages { color: var(--faint); font-size: 11.5px; }
.se-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.se-check li { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 8px; padding: 8px 10px; border: 1px solid var(--tile-edge); border-radius: 10px; background: var(--bg); font-size: 13px; }
.se-check li > .se-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.se-check li.se-check-fix > .se-ico { color: var(--warn-text); }
.se-check li .pill { white-space: nowrap; }
@media (max-width: 480px) { .se-check li { grid-template-columns: auto 1fr; } .se-check li .pill { grid-column: 2; justify-self: start; } }
.se-flash { animation: se-flash 1.6s ease-out; border-radius: 10px; }
@keyframes se-flash { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); } to { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .se-flash { animation: none; outline: 2px solid var(--accent); } }
.se-versions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.se-versions li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--tile-edge); border-radius: 10px; background: var(--bg); }
.se-versions li span { display: grid; }
.se-versions li b { font-size: 13.5px; }
.se-versions li small { color: var(--faint); font-size: 12px; }
.se-pick { width: min(640px, calc(100vw - 32px)); }
.se-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; margin: 12px 0; }
.se-thumb { padding: 0; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; }
.se-thumb:hover, .se-thumb:focus-visible { border-color: var(--accent); }
.se-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.pill.danger { color: var(--bad-text); }