/* Modlocus Menu: panel and sign-in pages.
   Brand: Graphite, Paper, Amber. Light/dark theme. Fonts are self-hosted (wwwroot/fonts). */

/* Fonts (latin + latin-ext: needed for extended Latin characters) */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/poppins-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/poppins-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/poppins-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/poppins-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Colors and sizes.
   Brand: navy sidebar + gold accent, white cards with shadows on a bluish background.
   Light (default), dark and "system". The choice is stored in the ml_theme cookie; the server writes
   <html data-theme="...">, and with no choice the browser setting (prefers-color-scheme) applies. */
:root {
    color-scheme: light;
    /* Light theme: soft sage-grey instead of bright cream/white, so long sessions do not glare. Cards are a calm off-white. */
    --bg: #efebe1;
    --surface: #fffefb;
    --surface-2: #f6f2e8;
    --line: #ddd5c3;
    --line-2: #ebe5d6;
    --input-line: #c4bba5;
    --text: #14231d;
    --text-2: #34443a;
    --text-3: #566259;
    --accent: #f2b632;
    --accent-hover: #f7c455;
    --on-accent: #1d1600;
    --accent-text: #6b4f00;
    --accent-soft: #fbefcf;
    --accent-ring: rgba(242, 182, 50, 0.38);
    --accent-glow: rgba(242, 182, 50, 0.18);
    --amber-badge-bg: #fbefcf;
    --amber-badge-fg: #6b4f00;
    --green-fill: #1f9d5c;
    --green-fg: #1f7a4c;
    --green-soft: #e3f4ea;
    --green-line: #c3e6d0;
    --danger: #b3261e;
    --danger-fill: #c0372d;
    --danger-fill-hover: #a32d24;
    --danger-soft: #fbe9e7;
    --danger-line: #f2c7c2;
    --warn: #9a5b00;
    --warn-soft: #fdf0d9;
    /* Warm helper colors (stat strips, icon badges) */
    --c-blue: #1d5c43; --c-blue-soft: #e1eee6;
    --c-green: #1f7a4c; --c-green-soft: #e3f4ea;
    --c-violet: #7a5a00; --c-violet-soft: #fbefcf;
    --c-rose: #c2255c; --c-rose-soft: #fbe7ee;
    --c-gold: #6b4f00; --c-gold-soft: #fbefcf;
    --track-off: #c4bba5;
    --scrim: rgba(6, 14, 10, 0.55);
    --shadow-1: 0 1px 2px rgba(70, 55, 20, 0.06), 0 10px 26px -14px rgba(70, 55, 20, 0.22);
    --shadow-2: 0 14px 34px -12px rgba(20, 35, 29, 0.32), 0 2px 6px rgba(20, 35, 29, 0.06);
    --side: #123326;
    --side-2: #0f2b20;
    --side-line: rgba(255, 255, 255, 0.1);
    --side-text: #dce9df;
    --side-dim: #8fae9b;
    --side-strong: #ffffff;
    --gold: #f2c460;
    --gold-light: #f7d98f;
    --radius: 14px;
    --radius-sm: 10px;
    --sidebar-w: 264px;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-head: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-brand: "Poppins", "Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1914;
    --surface: #15251e;
    --surface-2: #1a2d25;
    --line: #284237;
    --line-2: #20372d;
    --input-line: #34554a;
    --text: #eaf2ec;
    --text-2: #bcd0c3;
    --text-3: #93ab9c;
    --accent: #f2b632;
    --accent-hover: #f7c455;
    --on-accent: #1d1600;
    --accent-text: #f2c460;
    --accent-soft: #3a3217;
    --accent-ring: rgba(242, 182, 50, 0.4);
    --accent-glow: rgba(242, 182, 50, 0.1);
    --amber-badge-bg: #3a3217;
    --amber-badge-fg: #f2c460;
    --green-fill: #2fae6a;
    --green-fg: #7fd1a1;
    --green-soft: #173326;
    --green-line: #22452f;
    --danger: #ff8b82;
    --danger-fill: #c0372d;
    --danger-fill-hover: #d4463b;
    --danger-soft: #3a1c22;
    --danger-line: #5a262c;
    --warn: #f1c27a;
    --warn-soft: #3a2c12;
    --c-blue: #8fd1a6; --c-blue-soft: #173326;
    --c-green: #7fd1a1; --c-green-soft: #173326;
    --c-violet: #f2c460; --c-violet-soft: #3a3217;
    --c-rose: #ff9ebf; --c-rose-soft: #3a1c2c;
    --c-gold: #f2c460; --c-gold-soft: #3a3217;
    --track-off: #34554a;
    --scrim: rgba(0, 0, 0, 0.65);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 26px -14px rgba(0, 0, 0, 0.67);
    --shadow-2: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
    --side: #0a1d15;
    --side-2: #0d2219;
    --side-line: rgba(255, 255, 255, 0.08);
    --side-text: #d3e2d8;
    --side-dim: #86a593;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0e1914;
    --surface: #15251e;
    --surface-2: #1a2d25;
    --line: #284237;
    --line-2: #20372d;
    --input-line: #34554a;
    --text: #eaf2ec;
    --text-2: #bcd0c3;
    --text-3: #93ab9c;
    --accent: #f2b632;
    --accent-hover: #f7c455;
    --on-accent: #1d1600;
    --accent-text: #f2c460;
    --accent-soft: #3a3217;
    --accent-ring: rgba(242, 182, 50, 0.4);
    --accent-glow: rgba(242, 182, 50, 0.1);
    --amber-badge-bg: #3a3217;
    --amber-badge-fg: #f2c460;
    --green-fill: #2fae6a;
    --green-fg: #7fd1a1;
    --green-soft: #173326;
    --green-line: #22452f;
    --danger: #ff8b82;
    --danger-fill: #c0372d;
    --danger-fill-hover: #d4463b;
    --danger-soft: #3a1c22;
    --danger-line: #5a262c;
    --warn: #f1c27a;
    --warn-soft: #3a2c12;
    --c-blue: #8fd1a6; --c-blue-soft: #173326;
    --c-green: #7fd1a1; --c-green-soft: #173326;
    --c-violet: #f2c460; --c-violet-soft: #3a3217;
    --c-rose: #ff9ebf; --c-rose-soft: #3a1c2c;
    --c-gold: #f2c460; --c-gold-soft: #3a3217;
    --track-off: #34554a;
    --scrim: rgba(0, 0, 0, 0.65);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 26px -14px rgba(0, 0, 0, 0.67);
    --shadow-2: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
    --side: #0a1d15;
    --side-2: #0d2219;
    --side-line: rgba(255, 255, 255, 0.08);
    --side-text: #d3e2d8;
    --side-dim: #86a593;
}

* { box-sizing: border-box; }
/* The "hidden" attribute always hides (classes that set display must not override it, e.g. .button[hidden]). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: proportional-nums; /* fix153: tabular digits made "12" and "13" look like "1 2" and "1 3" in Onest; tabular only where columns must line up (below) */
}

a { color: var(--accent-text); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--text); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: 1.4rem; line-height: 1.25; }
h2 { font-size: 0.98rem; letter-spacing: -0.01em; }
p { margin: 0 0 12px; }

.muted { color: var(--text-2); }
.center { text-align: center; }
.icon { width: 18px; height: 18px; flex: none; }

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.05s, border-color 0.15s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px -6px rgba(242, 182, 50, 0.8);
}
.button:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.button:active { transform: translateY(1px); }
.button.block { width: 100%; }
.button.small { padding: 5px 10px; font-size: 0.86rem; }
.button .icon { width: 16px; height: 16px; }
.button.secondary { background: var(--surface); color: var(--text); border-color: var(--input-line); box-shadow: var(--shadow-1); }
.button.secondary:hover { background: var(--surface-2); color: var(--text); }
.button.amber { background: var(--accent); color: var(--on-accent); }
.button.danger { background: var(--danger-fill); color: #fff; box-shadow: none; }
.button.danger:hover { background: var(--danger-fill-hover); color: #fff; }

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    color: var(--text-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.icon-button:hover { background: var(--surface-2); color: var(--text); border-color: var(--line); text-decoration: none; }
.icon-button.danger:hover { background: var(--danger-soft); color: var(--danger); }
.icon-button:disabled { opacity: 0.3; cursor: default; background: transparent; color: var(--text-3); }
.icon-button .icon { width: 16px; height: 16px; }

.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.inline-form { display: inline; margin: 0; }

/* Cards, badges, notices */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--shadow-1);
}
.card.narrow { max-width: 440px; margin: 0 auto; padding: 28px; box-shadow: var(--shadow-2); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--text-2);
    white-space: nowrap;
}
.badge.green { background: var(--green-soft); color: var(--green-fg); }
.badge.amber { background: var(--amber-badge-bg); color: var(--amber-badge-fg); }

.badge.indigo { background: var(--accent-soft); color: var(--accent-text); }

.alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.alert.success { background: var(--green-soft); color: var(--green-fg); border-color: var(--green-line); }
.alert.error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }

.notice {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    padding: 10px 14px;
    border-radius: 6px;
}
.dev-note {
    background: var(--accent-soft);
    border: 1px dashed var(--accent);
    padding: 10px 14px;
    border-radius: 6px;
}

/* Forms */
.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }

.hint { font-size: 0.82rem; color: var(--text-3); }
.field-error { font-size: 0.82rem; color: var(--danger); }
.form-error { color: var(--danger); margin-bottom: 12px; }
.form-error ul { margin: 0; padding-left: 18px; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="url"], input[type="search"], input:not([type]), textarea, select {
    width: 100%;
    padding: 8px 11px;
    font: inherit;
    border: 1px solid var(--input-line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:hover { border-color: var(--text-3); }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
input[readonly] { background: var(--surface-2); color: var(--text-2); }
.input-validation-error { border-color: var(--danger) !important; }

.lang-tag {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--accent-soft);
    color: var(--accent-text);
}

.check { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; cursor: pointer; }

/* Checkboxes (the one tick style everywhere): panel-colored box, amber (--accent) fill and a dark tick; follows the light and dark theme through the variables.
   A new checkbox joins by sitting inside one of these wrappers; never style a bare checkbox on its own page. See devir/SCOPE_PATTERNS.md. */
.check input[type="checkbox"],
.check-line input[type="checkbox"],
.pick-row input[type="checkbox"],
.hours-name input[type="checkbox"],
.pick-group-head input[type="checkbox"],
.pick-line input[type="checkbox"],
.bc-name input[type="checkbox"],
.bc-all input[type="checkbox"],
.aud-only input[type="checkbox"],
.bp-pick input[type="checkbox"],
.choice-row input[type="checkbox"],
.plan-feature input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    border: 1.5px solid var(--input-line);
    border-radius: 5px;
    background: var(--surface) center / 12px 12px no-repeat;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.check input[type="checkbox"]:hover,
.check-line input[type="checkbox"]:hover,
.pick-row input[type="checkbox"]:hover,
.hours-name input[type="checkbox"]:hover,
.pick-group-head input[type="checkbox"]:hover,
.pick-line input[type="checkbox"]:hover,
.bc-name input[type="checkbox"]:hover,
.bc-all input[type="checkbox"]:hover,
.aud-only input[type="checkbox"]:hover,
.bp-pick input[type="checkbox"]:hover,
.choice-row input[type="checkbox"]:hover,
.plan-feature input[type="checkbox"]:hover { border-color: var(--accent); }
.check input[type="checkbox"]:checked,
.check-line input[type="checkbox"]:checked,
.pick-row input[type="checkbox"]:checked,
.hours-name input[type="checkbox"]:checked,
.pick-group-head input[type="checkbox"]:checked,
.pick-line input[type="checkbox"]:checked,
.bc-name input[type="checkbox"]:checked,
.bc-all input[type="checkbox"]:checked,
.aud-only input[type="checkbox"]:checked,
.bp-pick input[type="checkbox"]:checked,
.choice-row input[type="checkbox"]:checked,
.plan-feature input[type="checkbox"]:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141a33' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.check input[type="checkbox"]:indeterminate,
.check-line input[type="checkbox"]:indeterminate,
.pick-row input[type="checkbox"]:indeterminate,
.hours-name input[type="checkbox"]:indeterminate,
.pick-group-head input[type="checkbox"]:indeterminate,
.pick-line input[type="checkbox"]:indeterminate,
.bc-name input[type="checkbox"]:indeterminate,
.bc-all input[type="checkbox"]:indeterminate,
.aud-only input[type="checkbox"]:indeterminate,
.bp-pick input[type="checkbox"]:indeterminate,
.choice-row input[type="checkbox"]:indeterminate,
.plan-feature input[type="checkbox"]:indeterminate { background-color: var(--accent); border-color: var(--accent); background-image: linear-gradient(#141a33, #141a33); background-size: 10px 2.5px; }
.check input[type="checkbox"]:focus-visible,
.check-line input[type="checkbox"]:focus-visible,
.pick-row input[type="checkbox"]:focus-visible,
.hours-name input[type="checkbox"]:focus-visible,
.pick-group-head input[type="checkbox"]:focus-visible,
.pick-line input[type="checkbox"]:focus-visible,
.bc-name input[type="checkbox"]:focus-visible,
.bc-all input[type="checkbox"]:focus-visible,
.aud-only input[type="checkbox"]:focus-visible,
.bp-pick input[type="checkbox"]:focus-visible,
.choice-row input[type="checkbox"]:focus-visible,
.plan-feature input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.bp-pick input[type="checkbox"], .choice-row input[type="checkbox"], .bc-name input[type="checkbox"] { margin-top: 3px; }
/* Radio buttons (the one style): round box, amber ring and dot; same colors as the ticks. */
.choice-row input[type="radio"], .check-line input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    border: 1.5px solid var(--input-line);
    border-radius: 50%;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.choice-row input[type="radio"]:hover, .check-line input[type="radio"]:hover { border-color: var(--accent); }
.choice-row input[type="radio"]:checked, .check-line input[type="radio"]:checked {
    border-color: var(--accent);
    background: radial-gradient(circle, var(--accent) 0 4.5px, var(--surface) 5.5px);
}
.choice-row input[type="radio"]:focus-visible, .check-line input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.choice-row input[type="radio"] { margin-top: 2px; }

/* Ghost button: text only, background on hover */
.button.ghost { background: transparent; color: var(--text-2); border-color: transparent; box-shadow: none; }
.button.ghost:hover { background: var(--surface-2); color: var(--text); }

/* Image field (logo, product photo, category cover): _ImageField */
.uploader { display: flex; gap: 16px; align-items: flex-start; }
.uploader-drop {
    position: relative;
    display: grid;
    place-items: center;
    /* .field label may turn the box into flex; the content should stay centered then too. */
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    flex: none;
    border: 1.5px dashed var(--input-line);
    border-radius: var(--radius);
    background: var(--surface-2);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.uploader.wide .uploader-drop { width: 236px; height: 132px; }
.uploader-drop:hover, .uploader-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.uploader-img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.uploader-img[hidden] { display: none; }
.uploader-empty { display: grid; justify-items: center; gap: 2px; padding: 10px; text-align: center; color: var(--text-3); }
.uploader-empty .icon { width: 26px; height: 26px; margin-bottom: 4px; color: var(--accent-text); }
.uploader-empty b { color: var(--text-2); font-size: 0.82rem; font-weight: 600; }
.uploader-empty small { font-size: 0.76rem; }
.uploader-empty[hidden] { display: none; }
.uploader-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 4px; }
.uploader-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.uploader-file { font-size: 0.82rem; font-weight: 600; color: var(--accent-text); overflow-wrap: anywhere; }
.uploader-file:empty { display: none; }
.uploader-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.uploader.js .uploader-remove { display: none; }
@media (max-width: 520px) {
    .uploader { flex-direction: column; }
    .uploader-drop, .uploader.wide .uploader-drop { width: 100%; height: 160px; }
}

/* File drop zone (import) */
.dropzone {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 34px 16px;
    text-align: center;
    border: 1.5px dashed var(--input-line);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-3);
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--accent-text); margin-bottom: 4px; }
.dropzone-icon .icon { width: 24px; height: 24px; }
.dropzone b { color: var(--text); font-weight: 600; }
.dropzone.has-file b { color: var(--accent-text); }

.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86rem; }

/* Toggle switch */
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track, .switch-btn .track {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--track-off);
    transition: background 0.18s;
    flex: none;
}
.switch .track::after, .switch-btn .track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.18s;
}
.switch input:checked + .track, .switch-btn[aria-pressed="true"] .track { background: var(--green-fill); }
.switch input:checked + .track::after, .switch-btn[aria-pressed="true"] .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-btn { background: none; border: 0; padding: 6px; cursor: pointer; display: inline-flex; border-radius: 999px; }

/* Sign-in / sign-up pages */
body.auth {
    position: relative;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(760px 400px at 85% -10%, var(--accent-glow), transparent 60%),
        var(--bg);
}
.auth-main { flex: 1; display: grid; align-content: center; padding: 32px 16px; }
.auth-wrap { width: 100%; max-width: 440px; margin: 0 auto; }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; color: var(--text-3); font-size: 0.82rem; padding: 18px 16px 24px; }
.auth-wrap.wide { max-width: 820px; }
.auth h1 { margin-bottom: 6px; }
.auth .card.narrow > .muted:first-of-type { margin-bottom: 20px; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.brand:hover { color: var(--text); text-decoration: none; }
.brand-text { white-space: nowrap; }
.brand-text > span { color: var(--accent-text); font-weight: 500; }
.brand-mark {
    display: inline-flex;
    flex: none;
    width: 28px;
    height: 28px;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-mark .lm { fill: var(--logo-m, var(--text)); }
.brand-mark .lb { fill: var(--logo-bar, var(--brand-block, #f2b632)); }
.sidebar .brand-mark { --logo-m: var(--side-strong); }
.sidebar .brand, .sidebar .brand:hover { color: var(--side-strong); }
.sidebar .brand-text > span { color: var(--gold); }

/* Language and theme switchers */
.theme-switch {
    display: inline-flex;
    padding: 2px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    gap: 2px;
}
.theme-switch button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.theme-switch .icon { width: 15px; height: 15px; }
/* Theme and language on sign-in pages: top right corner, the list opens downward */

.sidebar .theme-switch { background: var(--side-2); border-color: var(--side-line); }
.sidebar .theme-switch button[aria-pressed="true"] { background: rgba(242, 182, 50, 0.22); color: var(--gold-light); box-shadow: none; }
.sidebar .theme-switch button { color: var(--side-dim); }
.sidebar .theme-switch button:hover { color: #fff; }

/* Panel skeleton */
/* --foot-h: shared value so the sidebar user block and the page footer have the same height (their top lines align). */
.shell { --foot-h: 64px; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 10px 0;
    background: linear-gradient(180deg, var(--side) 0%, var(--side-2) 140%);
    color: var(--side-text);
    overflow-y: auto;
}
.sidebar .brand { padding: 0 10px; }

/* Business card: opens the business's menu in a new tab */
.tenant-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--side-line);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background 0.2s;
}
.tenant-logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; flex: none; overflow: hidden; background: rgba(242, 182, 50, 0.18); color: var(--gold-light); font-weight: 700; }
.tenant-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.tenant-text { min-width: 0; flex: 1; }
.tenant-chip .tenant-name { display: block; font-weight: 600; color: var(--side-strong); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-chip .tenant-slug { display: flex; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--side-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s; }
.tenant-chip .icon { width: 12px; height: 12px; flex: none; }
.tenant-chip:hover { border-color: rgba(242, 182, 50, 0.45); background: rgba(242, 182, 50, 0.08); color: inherit; text-decoration: none; }
.tenant-chip:hover .tenant-slug { color: var(--gold-light); }

/* Business name: a plain line under the logo at the top left (no box) */
.tenant-line { margin: 2px 10px 0; font-size: 0.8rem; font-weight: 600; color: var(--side-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-nav { display: flex; flex-direction: column; gap: 1px; }
.side-label { font-size: 0.72rem; font-weight: 500; color: var(--side-dim); padding: 14px 10px 5px; }

.side-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--side-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}
.side-link .icon { width: 16px; height: 16px; opacity: 0.9; }
.side-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; text-decoration: none; }

.side-link.disabled { color: var(--side-dim); cursor: default; }
.side-link.disabled:hover { background: transparent; color: var(--side-dim); }
.soon { margin-left: auto; font-style: normal; font-size: 0.7rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--side-dim); }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.user-menu { position: relative; display: flex; align-items: center; box-sizing: border-box; height: var(--foot-h); border-top: 1px solid var(--side-line); }

.user-trigger:hover, .user-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.06); }
.user-trigger > .icon { width: 14px; height: 14px; color: var(--side-dim); flex: none; }
.menu-pop {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 50; padding: 6px;
    background: var(--side-2); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6);
    animation: toast-in 0.15s ease-out;
}
.menu-pop[hidden] { display: none; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; font-size: 0.84rem; color: var(--side-text); }
.menu-pop .theme-switch { background: var(--side); border-color: var(--side-line); }
.menu-sep { height: 1px; background: var(--side-line); margin: 6px 0; }
.menu-pop form { display: block; }
.menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px;
    background: transparent; color: var(--side-text); font: inherit; font-size: 0.88rem; cursor: pointer; transition: background 0.15s, color 0.15s;
}
a.menu-item { text-decoration: none; }
.menu-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.menu-item .icon { width: 16px; height: 16px; }
.avatar {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
    background: var(--gold); color: #1d1600; font-weight: 700; font-size: 0.82rem;
}
.user-meta { min-width: 0; flex: 1; line-height: 1.25; }
.user-meta strong { display: block; color: var(--side-strong); font-size: 0.84rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta span { font-size: 0.74rem; color: var(--side-dim); }

.content { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

/* Top bar: page title + description on the left, the page's main buttons and the light/dark button on the right; stays fixed on scroll. */
.bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 32px;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.bar-title { flex: 1; min-width: 0; }
.bar-title h1 { font-size: 1.3rem; line-height: 1.25; }
.bar-title p { margin: 2px 0 0; color: var(--text-3); }

.bar .icon-button.framed { width: 36px; height: 36px; border-color: var(--line); background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-1); }
.bar .icon-button.framed:hover { color: var(--text); border-color: var(--input-line); }
.bar .menu-toggle { display: none; }
.mode-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .mode-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .mode-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mode-toggle .icon-sun { display: block; }
    :root:not([data-theme="light"]) .mode-toggle .icon-moon { display: none; }
}
.scrim { display: none; }

.content-inner { width: 100%; max-width: 1180px; padding: 28px 32px 56px; flex: 1 0 auto; }
/* Page width templates (set with ViewData["Width"] in the view; the layouts add the class).
   page-list (default): lists, settings and forms - one readable column.
   page-wide: dashboards, tables, split layouts with a side panel. */
.content-inner.page-list { max-width: 940px; }
.content-inner.page-wide { max-width: 1180px; }
.page-hint { display: none; }

/* Footer */
.foot-bar { display: flex; align-items: center; gap: 9px; box-sizing: border-box; height: var(--foot-h); padding: 0 32px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 0.76rem; }

/* Stat cards (Dashboard): colored icon badge + left stripe; clicking goes to the related page. */
.stat-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat-card { --tone: var(--c-gold); --tone-soft: var(--c-gold-soft); position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-1); color: var(--text); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tone); }
.stat-card:hover { transform: translateY(-2px); border-color: var(--input-line); box-shadow: var(--shadow-2); color: var(--text); text-decoration: none; }
.stat-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; color: var(--tone); }
.stat-icon .icon { width: 20px; height: 20px; }
.stat-n { font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.stat-l { color: var(--text-3); font-size: 0.82rem; }
.tone-blue { --tone: var(--c-blue); --tone-soft: var(--c-blue-soft); }
.tone-green { --tone: var(--c-green); --tone-soft: var(--c-green-soft); }
.tone-gold { --tone: var(--c-gold); --tone-soft: var(--c-gold-soft); }
.tone-rose { --tone: var(--c-rose); --tone-soft: var(--c-rose-soft); }
.tone-muted { --tone: var(--input-line); --tone-soft: var(--surface-2); }
.card-foot.spread { justify-content: space-between; }
.foot-links { display: flex; gap: 14px; }
@media (max-width: 1100px) { .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid-2 .card p.muted { margin-bottom: 14px; }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.checklist li:first-child { border-top: 0; }
.checklist .tick {
    display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%;
    border: 1.5px solid var(--input-line); color: transparent;
}
.checklist .tick .icon { width: 11px; height: 11px; stroke-width: 3.2; }
.checklist li.done .tick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.checklist li.done .text { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--input-line); }
.checklist li.later .text { color: var(--text-2); }
.checklist .text { flex: 1; }

.progress {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 5px;
    border: 0;
    border-radius: 4px;
    background: var(--line);
    overflow: hidden;
    margin: 4px 0 10px;
}
.progress::-webkit-progress-bar { background: var(--line); border-radius: 4px; }
.progress::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
.progress::-moz-progress-bar { background: var(--accent); border-radius: 4px; }

/* Lists (categories, products): each row is its own card, dragged by the handle */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.search-box { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; max-width: 420px; padding: 0 12px; border: 1px solid var(--input-line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; }
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.search-box .icon { width: 16px; height: 16px; color: var(--text-3); }
.search-box input[type="search"], .search-box input[type="search"]:focus { flex: 1; min-width: 0; border: 0; padding: 8px 0; background: transparent; box-shadow: none; outline: none; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.seg button, .seg a { display: inline-block; text-decoration: none; padding: 5px 12px; border: 0; border-radius: 7px; background: none; color: var(--text-3); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
.seg button:hover, .seg a:hover { color: var(--text); }
.seg button.is-active, .seg a.is-active { background: var(--accent-soft); color: var(--accent-text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid var(--input-line); border-radius: 999px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.chip span { font-size: 0.74rem; color: var(--text-3); font-weight: 500; }
.chip:hover { border-color: var(--text-3); color: var(--text); }
.chip.is-active { background: var(--text); border-color: var(--text); color: var(--surface); }
.chip.is-active span { color: inherit; opacity: 0.7; }
.empty-inline { margin: 12px 0 0; padding: 22px; text-align: center; color: var(--text-3); border: 1px dashed var(--input-line); border-radius: var(--radius); }

.row { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); transition: box-shadow 0.2s, border-color 0.2s; }
.row[hidden] { display: none; }

.row.is-dragging { z-index: 5; border-color: var(--accent); box-shadow: 0 16px 36px -12px rgba(20, 35, 29, 0.45); cursor: grabbing; }
.rows.is-sorting .row:not(.is-dragging) { user-select: none; }
.rows.is-sorting { cursor: grabbing; }
.row.is-hidden .row-title, .row.is-hidden .row-thumb { opacity: 0.55; }
.row.is-soldout .row-price { text-decoration: line-through; color: var(--text-3); }

.grip .icon { width: 16px; height: 16px; }
.grip:hover, .row.is-dragging .grip { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.rows.is-filtered .grip { visibility: hidden; }
.row-thumb { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 10px; overflow: hidden; background: var(--surface-2); color: var(--text-3); }
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-thumb .icon { width: 20px; height: 20px; }
.row-main { flex: 1; min-width: 0; }

.row-title:hover { color: var(--accent-text); text-decoration: none; }
.row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 3px; font-size: 0.8rem; color: var(--text-3); }
.row-sub > span:first-child:not(.badge) { margin-right: 3px; }
.row-price { flex: none; padding: 0 6px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-actions { display: flex; align-items: center; gap: 4px; flex: none; }

.prod-group[hidden] { display: none; }

.prod-group-head h2 { font-size: 1rem; margin: 0; }

@media (max-width: 760px) {
    .row { flex-wrap: wrap; }
    .row-main { flex-basis: calc(100% - 100px); }
    .row-price { margin-left: 92px; margin-right: auto; padding: 0; }
    .hide-sm { display: none; }
}
.reorder-status { min-height: 1.4em; font-size: 0.82rem; color: var(--text-3); margin-top: 10px; }

.empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    padding: 56px 24px; border: 1px dashed var(--input-line); border-radius: var(--radius); background: var(--surface);
}
.empty .empty-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--accent-text); margin-bottom: 8px; }
.empty .empty-icon .icon { width: 22px; height: 22px; }
.empty h2 { margin-bottom: 2px; }
.empty p { color: var(--text-2); max-width: 380px; }
.empty .button { margin-top: 8px; }

.form-card { max-width: 620px; }
.form-card.wide { max-width: 760px; }
.field[hidden] { display: none; }
textarea { resize: vertical; }
.option-rows { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.option-row { display: grid; grid-template-columns: 1fr 140px auto; gap: 10px; align-items: start; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.option-row .field { margin-bottom: 0; }
.option-remove { margin-top: 26px; }
.option-trans { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
@media (max-width: 640px) {
    .option-row { grid-template-columns: 1fr auto; }
    .option-name { grid-column: 1 / -1; }
}

.form-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* Confirmation dialog */
dialog.dialog {
    border: 1px solid var(--line); padding: 24px; border-radius: 14px; max-width: min(420px, calc(100vw - 32px));
    background: var(--surface); box-shadow: var(--shadow-2); color: var(--text);
}
dialog.dialog::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
dialog.dialog h2 { margin-bottom: 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.dialog-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--danger); margin-bottom: 12px; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 20px 0; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }

/* Language picker (dropdown): stays in the same place however many languages there are */
.lang-picker { position: relative; }
.lang-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 7px;
    background: var(--surface); border: 1px solid var(--input-line); color: var(--text);
    font: inherit; font-size: 0.82rem; cursor: pointer; transition: border-color 0.15s;
}
.lang-btn:hover { border-color: var(--text-3); }
.lang-btn .icon { width: 14px; height: 14px; color: var(--text-3); transition: transform 0.15s; }
.lang-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.lang-list {
    position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 50; min-width: 176px; max-height: 240px; overflow: auto;
    padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-2);
}
.lang-list[hidden] { display: none; }
.lang-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--text-2); text-decoration: none; font-size: 0.88rem; }
.lang-opt:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.lang-opt.on { color: var(--text); font-weight: 600; }
.lang-opt .name { flex: 1; }
.lang-opt small { color: var(--text-3); font-size: 0.72rem; font-weight: 500; }
.lang-opt .icon { width: 14px; height: 14px; color: var(--accent-text); }
/* Inside the user menu: the list opens downward inside the menu */
.menu-lang { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 6px 8px; font-size: 0.84rem; color: var(--side-text); }
.menu-lang .lang-picker { display: contents; }
.menu-lang .lang-btn { background: var(--side); border-color: var(--side-line); color: #e9eaee; }
.menu-lang .lang-btn .icon { color: var(--side-dim); }
.menu-lang .lang-list { position: static; grid-column: 1 / -1; max-height: 176px; background: var(--side); border-color: var(--side-line); box-shadow: none; }
.menu-lang .lang-opt { color: var(--side-text); }
.menu-lang .lang-opt:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.menu-lang .lang-opt.on { color: #fff; }
.menu-lang .lang-opt .icon { color: var(--gold); }
.menu-lang .lang-opt small { color: var(--side-dim); }

/* Corner notifications */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--text);
    color: var(--surface);
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.88rem;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
    animation: toast-in 0.2s ease-out;
    transition: opacity 0.25s, transform 0.25s;
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-fill); flex: none; }
.toast.error::before { background: var(--danger-fill); }
.toast.leaving { opacity: 0; transform: translateY(6px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Narrow screens */
@media (max-width: 900px) {
    .shell { display: block; }
    .bar { padding: 10px 16px; gap: 10px; backdrop-filter: none; background: var(--bg); }
    .bar .menu-toggle { display: inline-grid; }
    .bar-title h1 { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bar-title p { display: none; }
    .page-hint { display: block; margin: -6px 0 16px; color: var(--text-3); font-size: 0.86rem; }
    .bar-actions .button .label-wide { display: none; }
    .foot-bar { justify-content: center; height: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 0; }
    .sidebar {
        position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(300px, 84vw);
        transform: translateX(-102%); transition: transform 0.22s ease;
    }
    .shell.nav-open .sidebar { transform: translateX(0); box-shadow: 0 0 60px rgba(0, 0, 0, 0.45); }
    .scrim { display: block; position: fixed; inset: 0; z-index: 30; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
    .shell.nav-open .scrim { opacity: 1; pointer-events: auto; }
    .content-inner { padding: 22px 16px 56px; }
    .grid-2 { grid-template-columns: 1fr; }
    input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="url"], input[type="search"], input:not([type]), textarea, select { font-size: 16px; }
    .toasts { left: 16px; right: 16px; bottom: 16px; align-items: stretch; }
}
@media (max-width: 520px) {
    .card { padding: 16px; }
    .card.narrow { padding: 22px 18px; }
    .facts { grid-template-columns: 1fr; }
    .icon-button { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* QR code and printing */
.qr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; max-width: 1000px; }
@media (max-width: 860px) { .qr-layout { grid-template-columns: 1fr; } }
.qr-preview { display: flex; flex-direction: column; align-items: center; gap: 14px; position: sticky; top: 92px; }
.qr-preview .card-title { align-self: flex-start; }
.qr-box { width: 100%; max-width: 260px; background: #fff; border-radius: var(--radius); padding: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.qr-box img, .qr-box svg { display: block; width: 100%; height: auto; }
.qr-downloads { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.field-label { font-weight: 600; font-size: 0.88rem; }
.qr-colors { display: flex; gap: 10px; }
.qr-color { position: relative; cursor: pointer; }
.qr-color input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qr-color .dot { display: block; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.qr-color input:checked + .dot { box-shadow: 0 0 0 2px var(--text); }
.qr-color input:focus-visible + .dot { outline: 2px solid var(--accent); outline-offset: 3px; }
.dot.c0 { background: #111111; } .dot.c1 { background: #b45309; } .dot.c2 { background: #1d4ed8; } .dot.c3 { background: #15803d; } .dot.c4 { background: #be123c; }

/* Product photo */
.check-line { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }

/* Badges, allergens, nutrition */
.badge.red { background: var(--danger-soft); color: var(--danger); }
.chip-btn { border: 1px solid var(--input-line); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.chip-btn:hover { background: var(--surface-2); }
.chip-btn.on { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; margin: 10px 0; }
.nutri-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 16px; }

/* Import (/import) */
.import-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.import-note { margin: 0 0 16px; }
.import-h { font-size: 1rem; margin: 0 0 10px; }
.import-help { margin: 0 0 16px; padding-left: 18px; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; }
.import-downloads { display: flex; flex-wrap: wrap; gap: 8px; }
.import-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.import-scroll { overflow-x: auto; max-height: 60vh; overflow-y: auto; border: 1px solid var(--line-2); border-radius: 8px; }
.import-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.import-table th, .import-table td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--line-2); vertical-align: top; }
.import-table thead th { position: sticky; top: 0; background: var(--surface-2); border-top: 0; font-weight: 600; }
.import-issue { font-size: 0.8rem; color: var(--text-2); margin-top: 4px; }
.import-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }

/* Card header and bottom button row (all panels) */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Appearance and settings (/settings): cards on the left, fixed live preview on the right */

.settings-main { display: grid; gap: 18px; min-width: 0; }
.settings-main > .card > .muted { margin-bottom: 14px; }
.settings-main .field-label { display: block; margin: 18px 0 8px; }
.settings-preview { position: sticky; top: 92px; display: grid; gap: 10px; }
.preview-title { margin: 0; font-weight: 600; }
.phone { width: 100%; max-width: 360px; aspect-ratio: 9 / 17.5; margin-inline: auto; padding: 9px; border-radius: 34px; background: #0c120f; box-shadow: var(--shadow-2), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; }

.settings-preview .hint { margin: 0; }
@media (max-width: 1100px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-preview { position: static; max-width: 360px; }
}

/* Theme cards: colored mini drawing + name + two-line description */

.theme-card:hover { border-color: var(--input-line); transform: translateY(-1px); }
.theme-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme-card:has(input:checked) { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-ring); }
.theme-card:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-ring); }

.theme-desc { color: var(--text-3); font-size: 0.78rem; line-height: 1.4; }
.theme-art { display: grid; gap: 4px; height: 5.4rem; padding: 8px; border-radius: 9px; background: #f1ebe0; overflow: hidden; }
.theme-art i { display: block; border-radius: 3px; background: #cdbfa6; }
.theme-art-classic { grid-template-rows: repeat(4, 1fr); }
.theme-art-classic i { height: 100%; border-radius: 2px; background: linear-gradient(90deg, #a78f66 0 16%, #d8ccb6 16% 100%); }
.theme-art-modern { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; background: #eef1f6; }
.theme-art-modern i { border-radius: 8px; background: #bfc8dd; }
.theme-art-chef { grid-template-rows: 1fr 1fr; background: #14110f; }
.theme-art-chef i { border-radius: 6px; background: linear-gradient(135deg, #3a3029, #5a4636); }
.theme-art-chef i:nth-child(n+3) { display: none; }
.theme-art-bistro { grid-template-rows: repeat(4, 1fr); background: #f6f1e6; }
.theme-art-bistro i { height: 100%; border-radius: 0; background: linear-gradient(#8f7b55, #8f7b55) left center / 34% 46% no-repeat, linear-gradient(#8f7b55, #8f7b55) right center / 12% 46% no-repeat, radial-gradient(circle, #b8a982 1px, transparent 1.7px) 0 72% / 5px 5px repeat-x; }
.theme-art-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; background: #eef0ea; }
.theme-art-grid i { border-radius: 4px; background: #c4cdbb; }
.theme-art-tiles { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; background: #f1ebe0; }
.theme-art-tiles i { border-radius: 8px; background: linear-gradient(135deg, #c9a27a, #8d6a4a); }
.theme-art-tiles i:nth-child(2) { background: linear-gradient(135deg, #b9c4a6, #7f8f6a); }
.theme-art-tiles i:nth-child(3) { background: linear-gradient(135deg, #cdb0a4, #9a6f60); }
.theme-art-tiles i:nth-child(4) { background: linear-gradient(135deg, #b3bfd0, #75849e); }
.theme-art-editorial { grid-template-columns: 1fr 38%; grid-template-rows: repeat(3, 1fr); background: #f7f4ee; }
.theme-art-editorial i { border-radius: 1px; background: #3b342b; }
.theme-art-editorial i:nth-child(1) { grid-column: 1; grid-row: 1; height: 62%; }
.theme-art-editorial i:nth-child(2) { grid-column: 1; grid-row: 2; height: 30%; background: #a89c86; }
.theme-art-editorial i:nth-child(3) { grid-column: 2; grid-row: 1 / 4; background: linear-gradient(160deg, #c9ac86, #9a7a56); }
.theme-art-editorial i:nth-child(4) { grid-column: 1; grid-row: 3; height: 30%; background: #a89c86; }
.theme-art-sans { grid-template-rows: repeat(3, 1fr); background: #f3efe9; }
.theme-art-sans i { border-radius: 8px; background: linear-gradient(#c9a27a, #c9a27a) 4px center / 22% 72% no-repeat, linear-gradient(#e6c9ae, #e6c9ae) right 5px center / 15% 40% no-repeat, #fff; }
.theme-art-sans i:nth-child(n+4) { display: none; }

/* Color palettes: round swatch + name */

.palette input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.palette:hover .swatch { transform: scale(1.06); }
.palette:has(input:checked) .swatch, .palette:has(input:focus-visible) .swatch { box-shadow: 0 0 0 3px var(--accent); }
.palette-name { font-size: 0.76rem; color: var(--text-3); }
.palette:has(input:checked) .palette-name { color: var(--text); font-weight: 600; }
.pal-vellen { background: linear-gradient(135deg, hsl(34 30% 90%) 50%, hsl(8 62% 36%) 50%); }
.pal-gece { background: linear-gradient(135deg, hsl(224 32% 90%) 50%, hsl(41 54% 36%) 50%); }
.pal-zeytin { background: linear-gradient(135deg, hsl(84 20% 90%) 50%, hsl(96 38% 36%) 50%); }
.pal-mocha { background: linear-gradient(135deg, hsl(24 24% 90%) 50%, hsl(24 56% 36%) 50%); }
.pal-okyanus { background: linear-gradient(135deg, hsl(200 30% 90%) 50%, hsl(186 64% 30%) 50%); }
.pal-gul { background: linear-gradient(135deg, hsl(346 28% 90%) 50%, hsl(340 56% 36%) 50%); }
.pal-lavanta { background: linear-gradient(135deg, hsl(268 22% 90%) 50%, hsl(272 40% 36%) 50%); }
.pal-safran { background: linear-gradient(135deg, hsl(42 36% 90%) 50%, hsl(40 94% 26%) 50%); }
.pal-grafit { background: linear-gradient(135deg, hsl(215 9% 90%) 50%, hsl(17 88% 36%) 50%); }
.pal-orman { background: linear-gradient(135deg, hsl(150 16% 90%) 50%, hsl(154 46% 30%) 50%); }

/* Segmented choice (mode: auto / light / dark) */
.seg-choice { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.seg-choice label { position: relative; cursor: pointer; }
.seg-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-choice span { display: block; padding: 7px 14px; border-radius: 9px; color: var(--text-3); font-weight: 600; font-size: 0.86rem; transition: background 0.15s, color 0.15s; }
.seg-choice label:hover span { color: var(--text); }
.seg-choice input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.seg-choice input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }
@media (max-width: 760px) { .theme-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .theme-cards { grid-template-columns: 1fr; } }

/* Product form: details on the left, fixed column on the right (photo, menu preview, Save) */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; max-width: 1100px; }
.form-main { min-width: 0; }
.form-side { position: sticky; top: 92px; display: grid; gap: 14px; }
.form-side .uploader { flex-direction: column; }
.form-side .uploader-drop { width: 100%; height: 190px; }
.side-actions { display: grid; gap: 14px; }
.side-buttons { display: flex; gap: 8px; }
.side-buttons .button { flex: 1; }

/* Menu preview: a small copy of how the product will look to the guest; updates as you type */
.live-card { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.live-label { display: block; margin-bottom: 8px; color: var(--text-3); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.live-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.live-name { font-weight: 600; overflow-wrap: anywhere; }
.live-price { color: var(--accent-text); font-weight: 700; white-space: nowrap; }
.live-desc { margin: 4px 0 0; color: var(--text-3); font-size: 0.86rem; }
.live-desc:empty { display: none; }
.live-opts { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 4px; }
.live-opts li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; }
.live-opts li span:last-child { color: var(--accent-text); font-weight: 700; white-space: nowrap; }
@media (max-width: 1000px) {
    .form-layout { grid-template-columns: 1fr; }
    .form-side { position: static; }
}

/* Allergen and ingredient choice: clickable round tags */
.chip-checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.chip-check { position: relative; cursor: pointer; }
.chip-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-check span { display: inline-block; padding: 5px 12px; border: 1px solid var(--input-line); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 0.84rem; font-weight: 600; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.chip-check:hover span { border-color: var(--accent); color: var(--text); }
.chip-check input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.chip-check input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }

/* Print (/print): options on the left (fixed), output preview on the right */
.print-layout { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 20px; align-items: start; }
.print-form { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; }
.print-form .field { margin-bottom: 14px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.print-checks { display: grid; gap: 10px; margin: 6px 0 16px; }
.print-checks .check { margin: 0; align-items: flex-start; }
.print-checks .check input { margin-top: 2px; }
.check span small { display: block; color: var(--text-3); font-size: 0.8rem; font-weight: 400; margin-top: 2px; }
.check span b { font-weight: 600; }
.print-cats { display: grid; gap: 8px; max-height: 190px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.print-cats .check { margin: 0; }
.l2-box { padding: 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.l2-box .print-checks { margin-bottom: 0; }
.print-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.print-head .card-title { margin: 0; }
.print-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.print-pages { color: var(--text-3); font-size: 0.86rem; white-space: nowrap; margin-right: 4px; }
.print-frame { display: block; width: 100%; height: 78vh; min-height: 520px; border: 1px solid var(--line); border-radius: 12px; background: #dedad3; }
@media (max-width: 1000px) {
    .print-layout { grid-template-columns: 1fr; }
    .print-form { position: static; max-height: none; }
    .print-frame { height: 70vh; }
}

/* Mobile: touch targets at least ~40px. Narrow screens only; the desktop view does not change. */
@media (max-width: 760px) {
    .button { min-height: 40px; }
    .icon-button { width: 40px; height: 40px; }
    .switch-btn { padding: 9px; }
    .chip-btn { padding: 8px 12px; }
    .seg button { padding: 9px 12px; }
    .row-title { padding: 9px 0; }
    .card-foot a { display: inline-block; padding: 9px 0; }
}

/* Legal pages and footer links */
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.legal-links a { color: var(--text-3); text-decoration: none; }
.legal-links a:hover { color: var(--text); text-decoration: underline; }
.foot-bar .legal-links { margin-left: auto; }
.legal-doc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px 32px; line-height: 1.65; }
.legal-doc h1 { margin: 0 0 4px; }
.legal-doc h2 { margin: 28px 0 8px; font-size: 1.1rem; }
.legal-doc p, .legal-doc ul, .legal-doc ol { margin: 0 0 12px; }
.legal-doc ul, .legal-doc ol { padding-left: 22px; }
.legal-doc .legal-meta { color: var(--text-3); font-size: 0.85rem; margin-bottom: 18px; }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 0.92rem; }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
    .legal-doc { padding: 20px 16px; }
    .legal-doc table { display: block; overflow-x: auto; }
    .foot-bar { flex-wrap: wrap; }
    .foot-bar .legal-links { margin-left: 0; justify-content: center; }
}

/* Settings > Sample menu card: breathing room between the status line and the hint below it. */
.sample-status { margin: 14px 0 4px; font-weight: 600; }

/* Panel home: option boxes in the setup dialog (strip and dialog styles are at the end of the file). */
.welcome-option { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.welcome-option h3 { margin: 0; font-size: 1rem; }
.welcome-option p { margin: 0; }
.welcome-option .button { align-self: flex-start; margin-top: auto; }

/* Panel home: the setup line uses the quiet .sample-note style (text + link); this block is the options dialog. */
dialog.dialog.dialog-wide { width: 100%; max-width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.dialog-icon.accent { background: var(--accent-soft); color: var(--accent-text); }
.dialog-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer; }
.dialog-close:hover { background: var(--surface-2); color: var(--text); }
.dialog-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.dialog-close svg { width: 18px; height: 18px; }
.setup-options { display: grid; gap: 12px; margin-top: 16px; }
.setup-options .check { margin-bottom: 0; }
@media (max-width: 480px) { dialog.dialog.dialog-wide { padding: 18px; } }

/* Menu language picker (Settings): language chips; the main language is fixed, the others are toggled */

.lang-chip b { font: 700 0.72rem/1 inherit; letter-spacing: 0.05em; color: var(--text-3); }
.lang-chip small { color: var(--text-3); font-weight: 500; }
.lang-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lang-chip:hover { border-color: var(--accent); }
.lang-chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }

.lang-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-ring); }

/* Legal pages: short note at the top when the document is not in the user's language */
.legal-lang-note { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: 0.88rem; }

/* Translation tabs (product and category forms). Without JS the tabs stay hidden and all languages show one below the other. */
.tr-tabs { display: none; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.tr-js .tr-tabs { display: flex; }
.tr-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--input-line); border-radius: 999px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.tr-tab:hover { border-color: var(--text-3); color: var(--text); }
.tr-tab.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.tr-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text-3); box-sizing: border-box; }
.tr-tab.is-done .tr-dot { background: var(--green-fg); border-color: var(--green-fg); }

/* Breathing room for hint texts: they should not stick right under the box or picker. */
p.hint { margin: 12px 0 14px; }
p.hint:last-child, p.hint:has(+ .card-foot) { margin-bottom: 0; }
.field .hint { margin-top: 4px; }

/* While loading, the live preview phone shows a plain skeleton resembling a menu instead of flat white (once loaded, the menu's own background covers it). */
.phone iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 26px; background:
    linear-gradient(rgba(130, 122, 108, .30), rgba(130, 122, 108, .30)) 8% 4% / 13% 5% no-repeat,
    linear-gradient(rgba(130, 122, 108, .24), rgba(130, 122, 108, .24)) 62% 4.5% / 14% 4% no-repeat,
    linear-gradient(rgba(130, 122, 108, .24), rgba(130, 122, 108, .24)) 79% 4.5% / 13% 4% no-repeat,
    linear-gradient(rgba(130, 122, 108, .32), rgba(130, 122, 108, .32)) 8% 14% / 62% 5% no-repeat,
    linear-gradient(rgba(130, 122, 108, .20), rgba(130, 122, 108, .20)) 8% 21% / 80% 2.2% no-repeat,
    linear-gradient(rgba(130, 122, 108, .20), rgba(130, 122, 108, .20)) 6% 27% / 88% 6.5% no-repeat,
    linear-gradient(rgba(150, 70, 55, .30), rgba(150, 70, 55, .30)) 6% 37% / 34% 4.6% no-repeat,
    linear-gradient(rgba(130, 122, 108, .24), rgba(130, 122, 108, .24)) 43% 37% / 26% 4.6% no-repeat,
    linear-gradient(rgba(150, 120, 80, .26), rgba(150, 120, 80, .26)) 6% 46% / 88% 21% no-repeat,
    linear-gradient(rgba(130, 122, 108, .24), rgba(130, 122, 108, .24)) 6% 72% / 19% 11% no-repeat,
    linear-gradient(rgba(130, 122, 108, .30), rgba(130, 122, 108, .30)) 30% 73% / 50% 2.6% no-repeat,
    linear-gradient(rgba(130, 122, 108, .18), rgba(130, 122, 108, .18)) 30% 78% / 36% 2% no-repeat,
    #f4efe7; }

/* The panel live preview phone matches the marketing stage phone: status area on top (clock, signal, wifi, battery), Safari address bar + home indicator at the bottom.
   Colors follow the menu's mode via .phone-screen[data-screen-mode] (panel.js). Same proportions as the stage (top 6%, bottom 9.5%). */

.phone-screen iframe { position: absolute; left: 0; top: 6%; width: 100%; height: 84.5%; border-radius: 0; }
.phone-screen .va-top, .phone-screen .va-bottom { position: absolute; left: 0; right: 0; z-index: 3; box-sizing: border-box; background: #f2f2f4; color: #111114; pointer-events: none; }
.phone-screen .va-top { top: 0; height: 6%; padding: 0 9% 0 11%; display: flex; align-items: center; justify-content: space-between; }
.phone-screen .va-time { font: 600 11px/1 -apple-system, "Segoe UI", system-ui, sans-serif; }
.phone-screen .va-icons { display: flex; align-items: center; gap: 4px; }
.phone-screen .va-ico { height: 9px; width: auto; fill: currentColor; display: block; }
.phone-screen .va-bottom { bottom: 0; height: 9.5%; padding: 2.2% 9% 0; display: flex; flex-direction: column; align-items: center; gap: 7%; }
.phone-screen .va-pill { width: 100%; height: 44%; border-radius: 999px; background: #e2e2e7; color: #3c3c43; display: flex; align-items: center; justify-content: center; gap: 5px; font: 500 11px/1 -apple-system, system-ui, sans-serif; overflow: hidden; white-space: nowrap; }
.phone-screen .va-pill svg { width: 8px; height: 9px; fill: currentColor; flex: none; }
.phone-screen .va-home { display: block; width: 34%; height: 4px; border-radius: 3px; background: #111114; opacity: .85; }
.phone-screen[data-screen-mode="dark"], .phone-screen[data-screen-mode="dark"] .va-top, .phone-screen[data-screen-mode="dark"] .va-bottom { background: #1c1c1e; color: #f2f2f7; }
.phone-screen[data-screen-mode="dark"] .va-pill { background: #2c2c2e; color: #e5e5ea; }
.phone-screen[data-screen-mode="dark"] .va-home { background: #f2f2f7; }

/* Settings page cleanup (small cards, one-line palette, small fixed preview, sidebar) */
.settings-layout { display: grid; gap: 22px; align-items: start; grid-template-columns: minmax(0, 1fr) 300px; }

.settings-preview .phone { max-width: min(300px, calc((100vh - 205px) * 0.514)); }
.theme-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.theme-card { position: relative; display: grid; align-content: start; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background-color 0.2s; padding: 7px; gap: 3px; border-radius: 11px; }
.theme-art { height: 3.4rem; padding: 5px; gap: 3px; border-radius: 7px; }
.theme-name { font-weight: 700; margin-top: 2px; font-size: 0.8rem; text-align: center; }
.palettes { display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; padding: 4px 4px 6px; }
.palette { position: relative; display: grid; justify-items: center; gap: 6px; cursor: pointer; min-width: 0; flex: none; }
.swatch { display: block; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--input-line); transition: box-shadow 0.2s, transform 0.2s; width: 28px; height: 28px; }
@media (max-width: 760px) { .theme-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px) { .theme-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .settings-layout { grid-template-columns: 1fr; } .settings-preview .phone { max-width: 300px; } }
@media (min-width: 901px) {
    .sidebar { overflow: hidden; gap: 8px; padding: 14px 10px 0; }
    .side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
    .side-label { padding: 9px 10px 3px; }
    .side-link { padding: 6px 10px; }
    .side-foot { flex: none; padding-bottom: 10px; }
}

/* Preview card: phone content scales at a 390px logical width, palette + mode side by side */
.settings-preview { top: 84px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); }
.preview-head { display: flex; align-items: center; justify-content: space-between; }
.preview-live { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--text-3); }
.preview-live i { width: 7px; height: 7px; border-radius: 50%; background: #4fbf7f; box-shadow: 0 0 0 3px rgba(79,191,127,.2); }
.settings-preview .phone { --s: .72; padding: 7px; border-radius: 30px; box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06) inset; }
.settings-preview .phone-screen iframe { width: 390px; height: calc(84.5% / var(--s)); transform: scale(var(--s)); transform-origin: 0 0; }
.settings-preview .hint { text-align: center; font-size: 0.76rem; }
.look-row { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: flex-start; }
.look-col { min-width: 0; }

.look-col-mode { flex: none; }

/* On large screens the preview is wider (as far as height allows, at most 340px) */
@media (min-width: 1101px) {
    .settings-layout { grid-template-columns: minmax(0, 1fr) 372px; }
    .settings-preview .phone { max-width: min(340px, calc((100vh - 205px) * 0.514)); }
}
.content-inner:has(.settings-layout) { max-width: 1340px; }
.look-col:first-child { flex: 1 1 400px; } .look-row .palettes { padding-bottom: 2px; overflow: visible; flex-wrap: wrap; }

/* On mobile the preview does not drop to the bottom; it is a bottom sheet opened with the "Preview" button */
.preview-fab, .preview-close { display: none; }
@media (max-width: 1100px) {
    .preview-fab { display: inline-flex; align-items: center; position: fixed; z-index: 30; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); gap: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
    .settings-preview { position: fixed; z-index: 60; inset: auto 0 0 0; max-width: none; max-height: 92vh; overflow-y: auto; border-radius: 20px 20px 0 0; transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; box-shadow: 0 -12px 40px rgba(0,0,0,.45); }
    .settings-preview.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
    .settings-preview .phone { max-width: min(300px, calc((92vh - 150px) * 0.514)); }
    .preview-close { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); cursor: pointer; }
    .preview-close:hover { background: var(--surface-2); color: var(--text); }
    .preview-close .icon { width: 18px; height: 18px; }
    .preview-head { justify-content: flex-start; gap: 10px; }
    .preview-head .preview-live { margin-left: auto; }
}

/* The address bar text scales with the phone width (so a long domain fits) */
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #f2f2f4; isolation: isolate; container-type: inline-size; }
.phone-screen .va-pill { font-size: clamp(7px, 3.3cqw, 11px); }
.phone-screen .va-pill span, .phone-screen .va-pill { min-width: 0; text-overflow: ellipsis; white-space: nowrap; }

/* Panel identity: Forest + Amber (same as the marketing site), Gloock headings + Onest text (same as the guest menu).
   Panel (body.panel) and sign-in/sign-up pages (body.auth) only. The marketing site (body.mk) keeps its own fonts. */
@font-face { font-family: "Gloock"; src: url("/fonts/gloock-regular.woff2") format("woff2"); font-display: swap; }
/* Gloock draws the U+20BA glyph badly: that one character comes from Onest (same approach as menu-tokens.css). */
@font-face { font-family: "LiraFix"; src: url("/fonts/onest-variable.woff2") format("woff2"); font-weight: 100 900; unicode-range: U+20BA; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/fonts/onest-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
body.panel, body.auth {
    --font-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-head: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "LiraFix", "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}
body.panel h1, body.auth h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
body.auth h1 { font-size: 1.9rem; line-height: 1.15; }

body.panel .icon { stroke-width: 1.6; }
/* Sidebar: small uppercase group labels, active page with a thin amber line, business name in Gloock */
.sidebar .tenant-line { font-family: var(--font-display); font-size: 1rem; font-weight: 400; color: var(--side-text); }
.side-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.63rem; font-weight: 600; }

.side-link.active { background: rgba(255, 255, 255, 0.06); color: #ffffff; box-shadow: inset 2px 0 0 var(--gold); }
.side-link.active .icon { opacity: 1; color: var(--gold); }
@media (max-width: 900px) {
    body.panel .bar-title h1 { font-size: 1.2rem; letter-spacing: 0; line-height: 1.15; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    body.auth h1 { font-size: 1.6rem; }
}

/* Dashboard "service log" (display + pre-service list + number strip + dishes) */
.db-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; margin-bottom: 26px; }
.db-show, .db-notes { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.db-show { overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.db-photos { position: relative; display: grid; gap: 3px; height: 240px; overflow: hidden; background: var(--surface-2); color: #fff; text-decoration: none; }
.db-photos:hover { text-decoration: none; color: #fff; }
.db-photos img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; display: block; }
.db-photos-2 { grid-template-columns: 1.6fr 1fr; }
.db-photos-3 { grid-template-columns: 1.6fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.db-photos-3 img:first-child { grid-row: 1 / 3; }
.db-photos-0 { background: linear-gradient(135deg, var(--side) 0%, var(--side-2) 100%); }
.db-photos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 10, 0.05) 30%, rgba(8, 12, 10, 0.74)); pointer-events: none; }
.db-photos-0::after { background: none; }
.db-live { position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; background: rgba(10, 20, 15, 0.62); color: #d8f3e2; font-weight: 600; font-size: 0.76rem; backdrop-filter: blur(6px); }
.db-live.is-paused i { background: #f2b632; box-shadow: 0 0 0 3px rgba(242, 182, 50, 0.28); }
.db-live i { width: 7px; height: 7px; border-radius: 50%; background: #5fd58f; box-shadow: 0 0 0 3px rgba(95, 213, 143, 0.25); }
.db-photo-cap { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 18px; display: grid; gap: 4px; }
.db-photo-cap b { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.05; letter-spacing: -0.01em; }
.db-photo-cap span { font-size: 0.84rem; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-show-body { padding: 18px 22px 20px; display: grid; gap: 14px; align-content: start; }
.db-eyebrow { margin: 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.db-show-body .copy-row input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.db-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.88rem; font-weight: 600; }
.db-h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); }
.db-notes { padding: 20px 22px; }
.db-notes-sub { margin: 4px 0 8px; color: var(--text-3); font-size: 0.86rem; }
.db-notes ul { list-style: none; margin: 0; padding: 0; }
.db-notes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.db-notes li:first-child { border-top: 0; }
.db-notes li > i { grid-row: 1 / 3; width: 26px; height: 26px; display: grid; place-items: center; }
.db-notes li > i .icon { width: 18px; height: 18px; stroke-width: 2; }
.db-notes li.ok > i { color: var(--green-fg); }
.db-notes li.warn > i { color: var(--warn); }
.db-notes li.tip > i { color: var(--text-3); }
.db-notes li b { font-weight: 600; font-size: 0.92rem; color: var(--text); }
.db-notes li a b { color: var(--accent-text); }
.db-notes li span { color: var(--text-3); font-size: 0.83rem; }
.db-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 30px; border-top: 2px solid var(--text); border-bottom: 1px solid var(--line); }
.db-ledger a { padding: 16px 20px 14px; border-left: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background 0.15s; }
.db-ledger a:first-child { border-left: 0; }
.db-ledger a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.db-ledger small { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.db-ledger b { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: 2.5rem; line-height: 1; }
.db-ledger sup { font-family: var(--font-body); font-size: 0.76rem; font-weight: 500; color: var(--text-3); margin-top: 0.3em; }
.db-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.db-row-head a { font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.db-dishes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.db-dish { display: grid; gap: 8px; align-content: start; color: var(--text); text-decoration: none; }
.db-dish:hover { color: var(--text); text-decoration: none; }
.db-dish img, .db-dish-empty { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; object-fit: cover; display: block; transition: transform 0.2s; }
.db-dish:hover img { transform: translateY(-2px); }
.db-dish-empty { display: grid; place-items: center; background: var(--surface-2); color: var(--text-3); }
.db-dish b { font-weight: 600; font-size: 0.88rem; line-height: 1.3; min-height: 2.6em; }
.db-dish-price { display: flex; gap: 6px; align-items: baseline; }
.db-dish-price em { flex: 1; border-bottom: 1px dotted var(--input-line); transform: translateY(-3px); }
.db-dish-price strong { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--text); }
.db-dish .badge { justify-self: start; }
@media (max-width: 1100px) {
    .db-hero { grid-template-columns: 1fr; }
    .db-dishes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .db-hero { gap: 16px; margin-bottom: 20px; }
    .db-photos { height: 190px; }
    .db-photo-cap { left: 16px; right: 16px; bottom: 14px; }
    .db-photo-cap b { font-size: 1.6rem; }
    .db-show-body, .db-notes { padding: 16px; }
    .db-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; }
    .db-ledger a { padding: 14px 14px 12px; }
    .db-ledger a:nth-child(3) { border-left: 0; }
    .db-ledger a:nth-child(n+3) { border-top: 1px solid var(--line); }
    .db-ledger b { font-size: 2.1rem; }
    /* Dishes: horizontally scrolling strip */
    .db-dishes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
    .db-dishes::-webkit-scrollbar { display: none; }
    .db-dish { flex: 0 0 62%; scroll-snap-align: start; }
}

/* Lists (Products, Categories, Option groups, Menu screens).
   Thin-lined rows instead of boxed cards; large photo; product name and price in Gloock; one status line instead of language badges.
   Dragging (panel.js "Sorting") is UNCHANGED: the dragged row gets its own background and shadow. */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.row { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 12px 10px 12px 4px; transition: background 0.15s; }
.row:hover { border-color: var(--line); background: var(--surface); }
.row.is-dragging { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.45); }
.grip { display: grid; place-items: center; width: 30px; height: 36px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--text-3); cursor: grab; touch-action: none; transition: color 0.15s, border-color 0.15s, background 0.15s; border-color: transparent; background: transparent; opacity: 0.55; }
.row:hover .grip, .grip:focus-visible { opacity: 1; }
.row-thumb { width: 56px; height: 56px; border-radius: 10px; }

.row-price { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; }
.prod-group { margin-bottom: 32px; }
.prod-group-head { display: flex; gap: 8px; margin: 0 2px 8px; align-items: baseline; }
.prod-group-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; letter-spacing: -0.01em; }
.prod-group-count { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-3); font-size: 0.74rem; font-weight: 600; background: transparent; }
.lang-state { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 500; }
.lang-state .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.lang-state.ok { color: var(--green-fg); }
.lang-state.warn { color: var(--warn); }
.row-actions .icon-button.danger { opacity: 0.6; }
.row:hover .row-actions .icon-button.danger, .row-actions .icon-button.danger:focus-visible { opacity: 1; }
@media (max-width: 760px) {
    .row { padding: 12px 4px; }
    .row-thumb { width: 46px; height: 46px; }
    .row-title { font-size: 1.02rem; }
    .row-price { margin-left: 100px; }
}

/* Sidebar "business first" + "Menu is live" at the top right.
   One identity on top: the business card (logo or initials, name, Live · place). The product logo is a small signature at the bottom.
   Groups use the business owner's wording (no uppercase); the bottom corner shows name + role + a settings gear instead of an avatar card. */

.venue-logo.has-img { background: rgba(255, 255, 255, 0.08); }
.venue-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.venue-text { min-width: 0; flex: 1; }
.venue-text b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; line-height: 1.15; color: var(--side-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue-text small { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 0.75rem; color: #9fc0ab; white-space: nowrap; overflow: hidden; }
.venue-text small span { overflow: hidden; text-overflow: ellipsis; }
.venue-text small i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #5fd58f; }

.side-nav .side-link .icon { color: #a9c4b3; }
.side-nav .side-link.active .icon { color: var(--gold); }
.side-nav .side-link:hover .icon { color: #fff; }

.user-trigger:hover { background: rgba(255, 255, 255, 0.04); }

.user-trigger .user-meta strong { color: var(--side-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-trigger:hover .user-gear, .user-trigger[aria-expanded="true"] .user-gear { background: rgba(255, 255, 255, 0.08); color: #fff; }

.product-sign:hover { color: rgba(255, 255, 255, 0.75); text-decoration: none; }

/* Top right: the menu's live status (replaces the old "View menu") */
.live-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-weight: 600; font-size: 0.84rem; text-decoration: none; white-space: nowrap; transition: border-color 0.15s; }

.live-pill span { font-weight: 400; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.78rem; }
.live-pill .icon { width: 14px; height: 14px; color: var(--text-3); }
@media (max-width: 1240px) { .live-pill span { display: none; } }
@media (max-width: 900px) { .live-pill b { display: none; } .live-pill { padding: 0 11px; gap: 6px; } }
@media (max-height: 760px) and (min-width: 901px) {
    .side-group { padding-top: 6px; }
    .side-nav .side-link { padding-top: 3px; padding-bottom: 3px; }
    .side-label { padding-top: 6px; }
}
@media (max-height: 680px) and (min-width: 901px) {
    .side-group { padding-top: 3px; }
    .side-nav .side-link { padding-top: 2px; padding-bottom: 2px; }
    .side-label { padding-top: 4px; }
}

/* Sidebar and top bar slimmed down.
   Business card without a box and smaller; menu icons are Phosphor duotone (NavIcons.cs); the product signature stands out;
   the top bar is thinner, "Menu is live" shows only status + arrow (no address). */

.venue-card:hover { color: var(--side-text); text-decoration: none; background: rgba(255, 255, 255, 0.06); }

.side-nav .side-link .nav-icon .duo { opacity: 0.18; }
.side-nav .side-link:hover .nav-icon { color: #fff; }
.side-nav .side-link.active .nav-icon { color: var(--gold); }
.side-nav .side-link.active .nav-icon .duo { opacity: 0.35; }
.user-gear .nav-icon { width: 19px; height: 19px; }
.product-sign { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; font-weight: 600; text-decoration: none; color: rgba(255, 255, 255, 0.55); font-size: 0.78rem; margin: 4px 10px 2px; }
.product-sign .brand-mark { width: 16px; height: 16px; --logo-m: #fff; opacity: 0.7; }

body.panel .bar-title h1 { font-size: 1.5rem; line-height: 1.1; }
.bar-title p { font-size: 0.84rem; margin-top: 2px; }
.bar-actions { display: flex; align-items: center; flex: none; gap: 8px; }
.bar-actions .button, .bar-actions .icon-button { height: 36px; min-height: 36px; }
.bar-actions .icon-button { width: 36px; }
.live-pill { height: 36px; padding: 0 12px; font-size: 0.8rem; gap: 7px; }
@media (max-width: 900px) {
    body.panel .bar-title h1 { font-size: 1.2rem; }
    .bar-actions .button, .bar-actions .icon-button { height: 40px; min-height: 40px; }
    .bar-actions .icon-button { width: 40px; }
    .live-pill { height: 40px; }
}

/* "Modlocus Menu" signature in the footer row and under the settings menu; the bottom of the sidebar holds only the account row */

.foot-brand:hover { color: var(--text-2); text-decoration: none; }
.foot-brand .brand-mark { width: 16px; height: 16px; --logo-m: var(--text); }
.foot-brand b { color: var(--text-2); font-weight: 600; }

.pop-brand .brand-mark { width: 14px; height: 14px; --logo-m: var(--side-dim); }

/* Sidebar slim: single Settings item at the bottom of the nav */

/* Settings item with hint, topbar slimmer on phones */
.side-nav .side-settings { margin-top: 0; align-items: center; }
.side-nav .side-settings span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.side-nav .side-settings small { font-size: 0.72rem; font-weight: 400; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-gear .icon { width: 18px; height: 18px; }
@media (max-width: 760px) { .bar .mode-toggle { display: none; } }

/* Account block sits flush with the bottom so its top line aligns with the page footer line */
.side-foot { gap: 0; padding-bottom: 0; }

/* Only .user-menu draws the line above the account block (the trigger had its own, giving a double line) */

/* Forms (product/category, settings, QR, print, import, password) */
.card-title { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: -0.005em; line-height: 1.2; margin-bottom: 6px; }
.card-title .icon { width: 19px; height: 19px; color: var(--accent-text); }
.card .muted, .card .hint { line-height: 1.5; }
.form-section { margin: 26px 0 8px; padding-top: 22px; border-top: 1px solid var(--line); }
.form-section h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: -0.005em; margin-bottom: 4px; }
.field label { font-weight: 600; display: flex; align-items: center; gap: 8px; font-size: 0.84rem; letter-spacing: 0.01em; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="url"], input[type="search"], input:not([type]), textarea, select { padding: 10px 12px; border-radius: 10px; background: var(--surface); }
:root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: rgba(0, 0, 0, 0.18); }
.card-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.row-title { display: block; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em; line-height: 1.25; font-size: 1rem; }

/* settings quick jump */

.settings-jump::-webkit-scrollbar { display: none; }
.settings-jump a { flex: none; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 0.84rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.settings-jump a:hover { border-color: var(--input-line); color: var(--text); text-decoration: none; }
.settings-main > section[id] { scroll-margin-top: 90px; }
@media (max-width: 760px) { .card-title { font-size: 1.25rem; } .card-foot { justify-content: stretch; } .card-foot .button { flex: 1; justify-content: center; } }

/* Login/register split layout */
body.auth.auth-split { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); min-height: 100vh; background: var(--bg); }
.auth-art { position: sticky; top: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 40px 56px 0; background: #123326; color: #f3efe4; overflow: hidden; }
:root[data-theme="dark"] .auth-art { background: #0f2b20; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-art { background: #0f2b20; } }
.auth-art-body h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 22px; color: #fff8e8; max-width: 14ch; }
.auth-art-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 34ch; }
.auth-art-body li { position: relative; padding-left: 22px; font-size: 0.98rem; line-height: 1.45; color: rgba(243, 239, 228, 0.82); }
.auth-art-body li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: #f2b632; }
.auth-art-photo { display: block; width: min(100%, 520px); height: auto; max-height: 38vh; object-fit: cover; object-position: top; border-radius: 18px 18px 0 0; align-self: center; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35); }
.auth-pane { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.auth-split .auth-main { padding: 24px 28px 32px; }
.auth-split .auth-wrap { max-width: 400px; }
.auth-split .card.narrow { background: transparent; border: 0; box-shadow: none; padding: 0; max-width: none; }
.auth-split h1 { font-size: 2rem; margin-bottom: 6px; }
.auth-split .card.narrow > .muted:first-of-type { margin-bottom: 22px; font-size: 0.95rem; line-height: 1.5; }
.auth-split .field { margin-bottom: 16px; gap: 6px; }
.auth-split input[type="text"], .auth-split input[type="email"], .auth-split input[type="password"], .auth-split input:not([type]) { min-height: 44px; padding: 10px 14px; }
.auth-split .button.block { min-height: 46px; font-size: 0.95rem; margin-top: 6px; }
.auth-split .check { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; }
.auth-split .center { margin-top: 22px; }
.auth-group { margin: 26px 0 14px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.auth-group:first-of-type { margin-top: 0; }
.pw { position: relative; display: block; }

.pw-toggle:hover { background: var(--surface-2); color: var(--text); }
.field-warn { font-size: 0.82rem; color: var(--accent-text); font-weight: 600; }

@media (max-width: 900px) {
    body.auth.auth-split { grid-template-columns: 1fr; }
    .auth-art { position: static; height: auto; padding: 14px 20px; flex-direction: row; align-items: center; }
    .auth-art-body, .auth-art-photo { display: none; }
    .auth-pane { min-height: 0; }
    .auth-split .auth-main { padding: 18px 20px 28px; }
    .auth-split h1 { font-size: 1.9rem; }
}

/* Eye icon for password toggle; left art panel adapts to window height */
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; width: 40px; padding: 0; display: inline-grid; place-items: center; }
.pw-toggle svg { display: block; }
.pw-toggle .i-eye-off { display: none; }
.pw.is-shown .pw-toggle .i-eye { display: none; }
.pw.is-shown .pw-toggle .i-eye-off { display: block; }
.pw input { padding-right: 96px !important; padding-right: 52px !important; }

@media (max-height: 460px) { .auth-art-body ul { display: none; } }

/* Quiet theme toggle + flat language picker on auth/marketing */
.theme-toggle { width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; transition: background 0.15s, color 0.15s; }
.theme-toggle:hover { background: var(--surface-2); color: var(--text); }
.theme-toggle .icon { width: 19px; height: 19px; }

/* Photo lives in a clipped box that takes the remaining height (never overflows) */

/* Photo is a complete rounded card with breathing room at the bottom */

.auth-art-photo img { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: center 35%; }
@media (max-height: 520px) { .auth-art-photo { display: none; } }

/* Compact spacing on shorter windows (login and register stay consistent) */
@media (max-height: 800px) and (min-width: 901px) {
    .auth-split .auth-main { padding-top: 8px; padding-bottom: 16px; }
    .auth-split h1 { font-size: 2rem; margin-bottom: 4px; }
    .auth-split .card.narrow > .muted:first-of-type { margin-bottom: 18px; }
    .auth-split .field { margin-bottom: 14px; gap: 6px; }
    .auth-split input[type="text"], .auth-split input[type="email"], .auth-split input[type="password"], .auth-split input:not([type]) { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
    .auth-group { margin: 16px 0 10px; }
    .auth-split .button.block { min-height: 46px; margin-top: 4px; }
    .auth-split .check { margin: 2px 0 14px; }
    .auth-split .center { margin-top: 16px; }
    .auth-split .auth-foot { padding-top: 6px; padding-bottom: 14px; }
}

/* Left panel width fixed to viewport width so a scrollbar on the form side never shifts it */
@media (min-width: 901px) {
    body.auth.auth-split { grid-template-columns: 45vw minmax(0, 1fr); }
}

/* Logo wordmark (Bricolage Grotesque, vector): _BrandLockup.cshtml; size --lockup-h, colors --logo-m / --logo-bar / --logo-menu */
.brand-lockup { display: block; height: var(--lockup-h, 18px); width: auto; flex: none; }
.brand-lockup .lk-m, .brand-lockup .lk-t { fill: var(--logo-m, var(--text)); }
.brand-lockup .lk-b { fill: var(--logo-bar, var(--brand-block, #f2b632)); }
.brand-lockup .lk-x { fill: var(--logo-menu, var(--accent-text)); }
.mk-head .brand { --lockup-h: var(--lockup-head); --logo-m: #fff; --logo-menu: #f2b632; }
.mk-foot .brand { --lockup-h: var(--lockup-head); --logo-m: #f3ead3; --logo-menu: #f2b632; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 0.82rem; text-decoration: none; --lockup-h: var(--lockup-foot); --logo-m: var(--text-2); --logo-menu: var(--text-2); }

/* Dropdown readable in the dark theme; thinner "Menu is live" pill; the logo in the account menu only on mobile (the desktop footer already has it) */
select option, select optgroup { background-color: var(--surface); color: var(--text); }
:root[data-theme="dark"] select { background-color: #111e18; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) select { background-color: #111e18; } }
.live-pill { font-weight: 500; color: var(--text-2); border-color: var(--line); background: transparent; }
.live-pill i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #3fbf78; box-shadow: 0 0 0 2px rgba(63, 191, 120, 0.16); }
.live-pill:hover { border-color: var(--input-line); text-decoration: none; color: var(--text); }
.live-pill .icon { color: var(--text-3); }
.pop-brand { align-items: center; gap: 7px; padding: 6px 10px 2px; font-size: 0.74rem; font-weight: 600; color: var(--side-dim); --lockup-h: 12px; --logo-m: var(--side-dim); --logo-menu: var(--side-dim); display: none; }
@media (max-width: 900px) { .pop-brand { display: flex; } }

/* Error page (404 / 403 / 500) */

/* Plan, billing, lock badge, trial/read-only strip */
.lock-chip { margin-left: auto; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent-text); background: var(--accent-soft); }
.button .lock-chip { margin-left: 6px; }

.plan-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.9rem; }
.plan-banner > span { flex: 1; min-width: 0; }
.plan-banner a { font-weight: 600; color: inherit; text-decoration: underline; white-space: nowrap; }
.plan-banner.is-warn { background: var(--warn-soft); color: var(--warn); }
.plan-banner.is-ended { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }

.upgrade-card { display: flex; align-items: center; gap: 16px; padding: 22px; }
.upgrade-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--accent-text); flex: none; }
.upgrade-text { flex: 1; min-width: 0; }
.upgrade-text p { margin: 4px 0 0; }
@media (max-width: 600px) { .upgrade-card { flex-direction: column; align-items: flex-start; } }

.plan-current-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; font-size: 1.1rem; }
.plan-status { padding: 2px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 500; background: var(--accent-soft); color: var(--accent-text); }
.plan-status-expired { background: var(--danger-soft); color: var(--danger); }
.plan-status-pastdue { background: var(--warn-soft); color: var(--warn); }
.plan-status-active { background: var(--surface-2, var(--accent-soft)); color: var(--text-2); }

.plans-form { margin-top: 18px; }
.plan-interval { margin-bottom: 14px; }
.plan-interval small { color: var(--text-3); font-weight: 400; }

.offer-card.is-current { outline: 2px solid var(--accent); }
.offer-card h3 { margin: 0; }
.offer-price { margin: 4px 0 0; font-size: 1.6rem; }
.offer-price small { font-size: 0.85rem; color: var(--text-3); }
.offer-price-year { margin: 0 0 8px; }
.plan-feats { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 8px; flex: 1; }
.plan-feats li { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.plan-feats li.is-off { color: var(--text-3); }
.plan-feats .icon { width: 16px; height: 16px; flex: none; }
.plan-note { margin-top: 16px; }

/* Pill in the top bar when the menu is paused: yellow warning tone, links to Settings > Menu status */
.live-pill.is-paused { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.live-pill.is-paused i { background: var(--warn); box-shadow: 0 0 0 2px rgba(154, 91, 0, 0.18); }

/* Billing: yearly toggle + digit spacing */
.offer-price, .offer-price-year, .offer-price b { font-family: var(--font-body, inherit); font-weight: 700; letter-spacing: 0; word-spacing: 0; font-variant-numeric: proportional-nums; font-feature-settings: "tnum" 0; }
.plans-form .p-year { display: none; }
.plans-form:has(input[value="yearly"]:checked) .p-month { display: none; }
.plans-form:has(input[value="yearly"]:checked) .p-year { display: inline; }
.offer-price small, .offer-price-year { font-weight: 400; }
.plan-until { margin: 6px 0 0; font-size: 0.9rem; color: var(--text-2, var(--text-3)); }

/* Console (super admin panel) */
body.console { background: var(--bg); color: var(--text); min-height: 100vh; }
.console-main { display: grid; gap: 20px; align-content: start; }
.console-narrow { width: 100%; max-width: 420px; margin: 0 auto; }
.console-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.console-stat { display: grid; gap: 8px; padding: 16px 18px; color: var(--text); text-decoration: none; }
.console-stat span { color: var(--text-3); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.console-stat b { font-size: 1.9rem; line-height: 1; font-weight: 700; }
.console-stat.is-alert b { color: #ee7a7a; }
a.console-stat:hover { border-color: var(--input-line); }
.console-search { display: flex; gap: 10px; }
.console-search input { flex: 1; }
.console-table-wrap { overflow-x: auto; padding: 0; }
.console-table { width: 100%; border-collapse: collapse; }
.console-table th, .console-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.console-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); font-weight: 600; }

.console-badge.is-bad { background: rgba(220, 70, 70, 0.16); color: #ee7a7a; }
.console-badge.is-warn { background: var(--warn-soft, rgba(230, 170, 60, 0.16)); color: var(--warn, #e6aa3c); }
.console-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.console-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 14px; }
.console-dl dt { color: var(--text-3); }
.console-dl dd { margin: 0; }

.console-actions { display: grid; gap: 8px; }
.console-inline { display: flex; gap: 8px; }
.console-inline input { min-width: 0; flex: 1; }
.console-flash { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.console-flash.is-bad { background: rgba(220, 70, 70, 0.16); color: #ee7a7a; }
.console-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.console-log b { font-weight: 600; }
.small { font-size: 0.82rem; }

/* Support view (impersonation) banner */

/* Login / register art column: more air and a clear hierarchy (brand, headline, points, photo). */
.auth-art { padding-top: clamp(20px, 5vh, 40px); padding-bottom: clamp(20px, 5vh, 44px); gap: 0; padding: clamp(28px, 6vh, 56px) 56px clamp(24px, 5vh, 48px); }
.auth-art-body { margin-bottom: clamp(20px, 5vh, 48px); }
.auth-art-body h2 { font-size: clamp(1.7rem, min(2.8vw, 4.8vh), 2.6rem); max-width: 18ch; margin-bottom: clamp(14px, 3vh, 26px); }
.auth-art-body ul { gap: clamp(8px, 1.8vh, 14px); max-width: 50ch; }
.auth-art-photo { object-position: center top; align-self: center; overflow: hidden; object-fit: initial; border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); max-width: 520px; flex: 1 1 0; min-height: 140px; max-height: 46vh; width: min(100%, 520px); }
@media (max-height: 560px) { .auth-art-photo { display: none; } }

/* Status and error pages (_StatusLayout) */
body.status { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
.status-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.status-brand { --lockup-h: var(--lockup-head); display: inline-flex; color: var(--text); }
.status-tools { display: flex; align-items: center; gap: 8px; }
.status-main { flex: 1; display: grid; place-items: center; padding: 48px 20px; }
.status-card { position: relative; width: 100%; max-width: 520px; text-align: center; isolation: isolate; }
.status-card::before {
    content: attr(data-code); position: absolute; inset: -0.35em 0 auto; z-index: -1; text-align: center; pointer-events: none; user-select: none;
    font-family: var(--font-display, "Gloock", serif); font-size: clamp(5rem, 20vw, 8rem); line-height: 1; letter-spacing: -0.03em;
    color: var(--accent-text); opacity: 0.07;
}
.status-chip { display: inline-block; margin: 0 0 14px; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-3); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; }
.status-card h1 { margin: 0 0 10px; font-size: clamp(1.5rem, 4.5vw, 2rem); line-height: 1.2; }
.status-text { margin: 0 auto; max-width: 42ch; color: var(--text-2, var(--text)); line-height: 1.6; }
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.status-ref { display: grid; gap: 4px; justify-items: center; margin: 26px 0 0; color: var(--text-3); font-size: 0.82rem; }
.status-ref code { padding: 3px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 0.9rem; letter-spacing: 0.08em; }
.status-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; padding: 18px 16px 24px; color: var(--text-3); font-size: 0.82rem; }

/* TV variant of the status page (menu board URL): same look as the 503 page, a little larger, calm and centered.
   Content stays inside a 5% safe area (TVs may crop the edges); body text is at least ~26px on 1080p; nothing to click
   (a QR code hands off to the phone). A static screen can mark OLED panels, so the content drifts a few pixels very slowly. */
body.status-tv { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; cursor: none;
    background: radial-gradient(70vw 55vh at 50% -18%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), var(--bg); }
.status-tv .status-bar { padding: 5vh 5vw 0; border-bottom: 0; }
.status-tv .status-brand { --lockup-h: clamp(16px, 1.25vw, 26px); }
.status-tv .status-main { padding: 0 5vw 14vh; }
.status-tv .status-card { max-width: min(900px, 70vw); animation: status-tv-drift 240s ease-in-out infinite alternate; }
.status-tv .status-card::before { font-size: clamp(7rem, 15vw, 17rem); inset: -0.3em 0 auto; opacity: 0.045; }
.status-tv .status-chip { margin-bottom: clamp(14px, 1.4vw, 26px); padding: .25em .9em; font-size: clamp(.8rem, .9vw, 1.15rem); }
.status-tv .status-card h1 { margin-bottom: clamp(10px, 1vw, 20px); font-size: clamp(2rem, 3.1vw, 4rem); line-height: 1.08; letter-spacing: -0.02em; }
.status-tv .status-text { max-width: 44ch; text-wrap: balance; font-size: clamp(1rem, 1.47vw, 1.9rem); line-height: 1.5; }
.status-tv-bar { position: fixed; left: 5vw; right: 5vw; bottom: 5vh; display: flex; align-items: center; justify-content: space-between; gap: 3vw;
    padding-top: clamp(14px, 2vh, 28px); border-top: 1px solid var(--line); }
.status-tv-help { display: flex; align-items: center; gap: clamp(12px, 1vw, 20px); }
.status-tv-help strong { display: block; color: var(--text); font-size: clamp(.9rem, 1.05vw, 1.4rem); font-weight: 600; line-height: 1.25; }
.status-tv-help small { display: block; margin-top: .25em; color: var(--text-3); font-size: clamp(.8rem, .9vw, 1.15rem); }
.status-tv-qr { display: block; flex: none; width: clamp(56px, 4.3vw, 96px); aspect-ratio: 1; padding: clamp(5px, .38vw, 8px); border-radius: clamp(6px, .5vw, 10px); background: #f7f5ef; box-shadow: 0 0 0 1px var(--line); }
.status-tv-qr svg { display: block; width: 100%; height: 100%; }
.status-tv-retry { margin: 0; max-width: 34ch; color: var(--text-3); font-size: clamp(.8rem, .9vw, 1.15rem); line-height: 1.45; text-align: right; text-wrap: balance; }
@keyframes status-tv-drift { 0% { transform: translate(-6px, -4px); } 100% { transform: translate(6px, 4px); } }
@media (prefers-reduced-motion: reduce) { .status-tv .status-card { animation: none; } }
@media (max-width: 760px) { .status-tv-bar { flex-direction: column; align-items: flex-start; } .status-tv-retry { text-align: left; } }

/* Console sidebar: uses the panel skeleton, with the product signature on top instead of the business card */

/* Dropdown (select): the same arrow everywhere instead of the browser's own; fixes the notch glitch on the right */
select {
    appearance: none; -webkit-appearance: none;
    padding-right: 40px !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 14px 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6d61' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    cursor: pointer;
}
:root[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393ab9c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393ab9c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } }

/* Settings cards: narrow, tidy form; the button is not full width */
.console-settings { max-width: 760px; }
.console-form { display: grid; gap: 18px; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.console-form .field { margin: 0; }
.console-form .field select, .console-form .field input { max-width: 420px; }
.console-form .button { justify-self: start; min-width: 120px; }

/* Console: list, badge and search layout */
.console-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--surface-2, rgba(128,128,128,.14)); color: var(--text-2, var(--text)); }
.console-badge.is-active { background: rgba(60, 170, 110, 0.16); color: #4fc183; }
.console-badge.is-trialing { background: var(--accent-soft); color: var(--accent-text); }
.console-badge.is-pastdue, .console-badge.is-canceled, .console-badge.is-expired { background: rgba(220, 70, 70, 0.16); color: #ee7a7a; }
.console-tag { display: inline-block; padding: 2px 9px; border-radius: 8px; border: 1px solid var(--line); font-size: 0.8rem; font-weight: 600; color: var(--text-2, var(--text)); }
.console-panel { padding: 0; max-width: 860px; }
.console-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; }
.console-panel-head h2 { margin: 0; font-size: 1rem; }
.console-panel-head a { font-size: 0.88rem; }
.console-list { list-style: none; margin: 0; padding: 0; }
.console-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 92px; align-items: center; gap: 14px; padding: 11px 20px; border-top: 1px solid var(--line); }
.console-list li a { display: grid; text-decoration: none; min-width: 0; }
.console-list li a b { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-list li small { color: var(--text-3); }
.console-list time { color: var(--text-3); font-size: 0.85rem; text-align: right; }
.console-count { margin: -6px 0 0; color: var(--text-3); font-size: 0.85rem; }
.console-table tbody tr:hover { background: var(--accent-soft); }
.console-table td a { font-weight: 600; text-decoration: none; }
.console-table td a:hover { text-decoration: underline; }
.console-table td { font-size: 0.92rem; }
.console-search input { height: 44px; }
.console-search .button { height: 44px; padding-inline: 22px; }
@media (max-width: 640px) { .console-list li { grid-template-columns: minmax(0, 1fr) auto; } .console-list li time, .console-list li .console-tag { display: none; } }

/* Console components: row list, tabs, people list, form layout (no tables, same layout on phones) */
.console-back { color: var(--text-3); text-decoration: none; font-size: 0.88rem; width: max-content; }
.console-back:hover { color: var(--text); }
.console-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; }

.console-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 0; }
.console-filters a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2, var(--text)); text-decoration: none; font-size: 0.88rem; font-weight: 600; }
.console-filters a em { font-style: normal; font-size: 0.78rem; color: var(--text-3); }
.console-filters a:hover { border-color: var(--input-line); }
.console-filters a.is-active { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.console-filters a.is-active em { color: inherit; }

.console-panel-wide { max-width: none; }
.console-empty { margin: 0; padding: 28px 20px; color: var(--text-3); text-align: center; }
.console-note { margin: 0; padding: 12px 20px 16px; color: var(--text-3); font-size: 0.84rem; }
.card:not(.console-panel) > .console-note { padding: 0; margin-top: 14px; }

.console-rows { list-style: none; margin: 0; padding: 0; }
.console-rows li + li { border-top: 1px solid var(--line); }
.console-row { display: grid; grid-template-columns: 34px minmax(0, 1.4fr) minmax(0, 1.2fr) auto 92px; align-items: center; gap: 16px; min-height: 64px; padding: 12px 20px; color: var(--text); text-decoration: none; }
.console-row:hover { background: var(--accent-soft); }
.console-row-main { display: grid; min-width: 0; }
.console-row-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-row-main small, .console-row-owner { color: var(--text-3); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-row-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
.console-row time { color: var(--text-3); font-size: 0.85rem; text-align: right; }
@media (max-width: 860px) {
    .console-row { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 6px; }
    .console-row-owner { grid-column: 2; grid-row: 2; }
    .console-row-status { grid-column: 3; grid-row: 1; }
    .console-row time { grid-column: 3; grid-row: 2; }
}

/* Business header */
.console-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }

.console-hero-text h2 { margin: 0; font-size: 1.35rem; }

.console-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.console-hero-action { margin: 0; }
.console-hero-action .button.danger.ghost { background: transparent; color: #ee7a7a; border: 1px solid rgba(220, 70, 70, 0.4); box-shadow: none; }

/* Tabs (server side, no JavaScript) */
.console-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.console-tabs::-webkit-scrollbar { display: none; }
.console-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; color: var(--text-3); text-decoration: none; font-weight: 600; font-size: 0.92rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.console-tabs a em { font-style: normal; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.75rem; }
.console-tabs a:hover { color: var(--text); }
.console-tabs a.is-active { color: var(--text); border-bottom-color: var(--accent, #f2b632); }

/* People list and action menu */
.console-people { list-style: none; margin: 0; padding: 0; }
.console-people > li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line); }
.console-people > li.is-simple { grid-template-columns: minmax(0, 1fr) auto; }
.console-person { display: grid; min-width: 0; }
.console-person b { font-weight: 600; }
.console-person small { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.console-person small.is-bad { color: #ee7a7a; }
.console-person-meta { display: grid; justify-items: end; gap: 4px; }
.console-person-meta small { color: var(--text-3); font-size: 0.8rem; }
.console-more { position: relative; }
.console-more summary { list-style: none; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; }
.console-more summary::-webkit-details-marker { display: none; }
.console-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(340px, 86vw); display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-2, 0 12px 32px rgba(0,0,0,.28)); }
.console-menu-row { display: flex; align-items: center; gap: 8px; margin: 0; }
.console-menu-row label { font-weight: 600; font-size: 0.85rem; min-width: 36px; }
.console-menu-row select, .console-menu-row input[type="text"] { flex: 1; min-width: 0; }
.console-menu-row.is-stack { flex-direction: column; align-items: stretch; }
.console-menu-row.is-danger { padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
    .console-people > li { grid-template-columns: 34px minmax(0, 1fr) auto; }
    .console-person-meta { grid-column: 2 / 4; grid-row: 2; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
}

/* Activity feed */
.console-feed { list-style: none; margin: 0; padding: 0; }
.console-feed li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 11px 20px; border-top: 1px solid var(--line); font-size: 0.92rem; }
.console-feed time { color: var(--text-3); font-size: 0.84rem; }
.console-feed small { display: block; color: var(--text-3); }
@media (max-width: 560px) { .console-feed li { grid-template-columns: 1fr; gap: 2px; } }

/* Form layout: field label on top, hint below, fields in two columns, buttons aligned left */
.console-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.field-hint { color: var(--text-3); font-size: 0.82rem; }
.console-form .field input, .console-form .field select { max-width: none; }
.console-form .console-fields .field select, .console-form .console-fields .field input { max-width: none; }
.console-form .field input[type="date"], .console-form .field input[type="number"] { max-width: 260px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]), select, textarea { min-height: 44px; }
.console-menu input, .console-menu select { min-height: 40px; }

/* Compact business header card: a single thin strip */
.console-hero { padding: 10px 16px; gap: 12px; border-radius: 14px; }
.console-avatar.is-lg { width: 40px; height: 40px; border-radius: 12px; font-size: 1.05rem; }
.console-hero-text { flex: 1; display: grid; min-width: 180px; gap: 2px; }
.console-hero-text h2 { font-size: 1.05rem; line-height: 1.3; }
.console-hero-text p { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-3); align-items: center; font-size: 0.85rem; }
.console-hero .console-badge, .console-hero .console-tag { font-size: 0.74rem; padding: 1px 8px; }
.console-panel, .console-settings { max-width: 860px; }

/* Status/error page: the language list opens downward; the button is frameless and flat like on the sign-in page */
.status-tools .lang-list { bottom: auto; top: calc(100% + 8px); }
.status-tools .lang-btn { height: 36px; padding: 0 10px; border: 0; background: transparent; color: var(--text-2); font-size: 0.88rem; font-weight: 600; box-shadow: none; }
.status-tools .lang-btn:hover { background: var(--surface-2); color: var(--text); }

/* Console sign-in: logo in the same family as the menu (16px) and the card vertically centered */

/* Logo: blocks are amber #F2B632 on dark backgrounds, dark amber #9A6006 on light ones (contrast >= 3:1); always amber on dark surfaces. */
:root[data-theme="light"] { --brand-block: #9a6006; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --brand-block: #9a6006; } }
.sidebar, .side-brand, .pop-brand, .mk-head .brand, .mk-foot .brand, .brand-mark.on-dark { --logo-bar: #f2b632; }

/* Support: the "?" menu in the top bar, tickets, conversation */
.help-menu { position: relative; }
.help-toggle { position: relative; }
.help-dot { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.help-pop {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(330px, calc(100vw - 32px)); padding: 6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2, 0 18px 40px -12px rgba(0, 0, 0, 0.55));
    animation: toast-in 0.15s ease-out;
}
.help-pop[hidden] { display: none; }
.help-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 0.92rem; }
.help-item .icon { width: 18px; height: 18px; flex: none; color: var(--text-3); }
.help-item span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.help-item small { color: var(--text-3); font-size: 0.8rem; line-height: 1.35; }
a.help-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.help-item.is-primary .icon { color: var(--accent-text); }
.help-item.is-soon { opacity: 0.55; cursor: default; }
.help-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.help-count { font-style: normal; font-size: 0.76rem; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #14161a; display: grid; place-items: center; }
.help-tag { font-style: normal; font-size: 0.72rem; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--text-3); }

.support-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.support-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.support-row:hover { border-color: var(--input-line); text-decoration: none; color: var(--text); }
.support-row.is-unread { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.support-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.support-row-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-row-main small { color: var(--text-3); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-row-meta { display: flex; align-items: center; gap: 12px; flex: none; font-size: 0.84rem; color: var(--text-3); }
.support-cat { color: var(--text-2); font-size: 0.82rem; }
.support-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: var(--surface-2); color: var(--text-2); }
.support-status.is-open { background: rgba(90, 140, 230, 0.16); color: #7fa8ee; }
.support-status.is-answered { background: var(--accent-soft); color: var(--accent-text); }
.support-status.is-waiting { background: rgba(60, 170, 110, 0.16); color: #4fc183; }
.support-status.is-closed { background: var(--surface-2); color: var(--text-3); }
.support-note { margin-top: 14px; color: var(--text-3); font-size: 0.86rem; }


.support-thread-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 0.86rem; color: var(--text-3); flex-wrap: wrap; }
.support-thread { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.support-msg { padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.support-msg.is-staff { background: var(--accent-soft); border-color: transparent; }
.support-msg-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 0.84rem; color: var(--text-3); }
.support-msg-head b { color: var(--text); font-weight: 600; }
.support-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.support-reply .support-close { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

@media (max-width: 720px) {
    .support-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .support-row-meta { flex-wrap: wrap; }
}

/* Console inbox */
.console-inbox-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.console-inbox-row:first-child { border-top: 0; }
a.console-inbox-row:hover { background: var(--surface-2); text-decoration: none; }
.console-inbox-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.console-inbox-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-inbox-main small { color: var(--text-3); }
.console-inbox-meta { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 0.84rem; }
.console-visitor { padding: 16px 20px; border-top: 1px solid var(--line); }
.console-visitor:first-child { border-top: 0; }
.console-visitor.is-handled { opacity: 0.55; }
.console-visitor header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.console-visitor p { margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.console-visitor-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) { .console-inbox-row { grid-template-columns: minmax(0, 1fr); } }

/* Shared skeleton: panel, console and ops use the same frame */
:root { --lockup-head: 16px; --lockup-foot: 12px; --bar-h: 60px; }
.shell { --foot-h: 48px; }

/* The top bar has the same height in every product (a two-line title on narrow screens fits too) */

/* User box: round avatar with initials on the left */
.user-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: rgba(242, 182, 50, 0.2); color: var(--gold-light); font-size: 0.76rem; font-weight: 600; }
.user-trigger { font: inherit; transition: background 0.15s; width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 0; background: transparent; color: var(--side-text); text-align: left; cursor: pointer; padding: 9px 10px; border-top: 0; height: 100%; padding-block: 0; gap: 9px; padding-top: 0; padding-bottom: 0; }
.user-trigger .user-meta { display: grid; min-width: 0; flex: 1; }
.user-trigger .user-meta strong { font-size: 0.82rem; }
.user-trigger .user-meta span { color: var(--side-dim); font-size: 0.72rem; }
.user-gear { display: grid; place-items: center; flex: none; border-radius: 8px; color: #a9c4b3; transition: background 0.15s, color 0.15s; width: 28px; height: 28px; }
.foot-bar { font-size: 0.74rem; }

/* Console and Ops label: a small pill next to the logo (not dropping to a second line); same style as the label in the sign-in bar */
.side-brand { display: flex; padding: 4px 10px 6px; color: var(--side-strong); text-decoration: none; --lockup-h: var(--lockup-head); --logo-m: var(--side-strong); flex-direction: row; align-items: center; gap: 9px; }
.side-brand em { font-style: normal; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-light, var(--gold)); padding: 1px 7px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; font-size: 0.6rem; line-height: 1.5; opacity: 1; }

/* Menu status on the sidebar business card: green dot = Live, yellow dot = Paused (the top button is only the "View menu" action) */
.venue-text small.is-paused i { background: #f2b632; }

/* Settings tabs: wrap to a new row instead of scrolling, none is cut off on small screens */
.settings-jump { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; flex-wrap: wrap; overflow: visible; }

/* Sign-in, sign-up, console and ops sign-in: logo bar on top, card in the middle, footer below */
.auth-bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; min-height: 56px; padding: 0 28px; border-bottom: 1px solid var(--line); }
.auth-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; --lockup-h: var(--lockup-head); --logo-m: var(--text); --logo-menu: var(--accent-text); }
.auth-logo:hover { color: var(--text); text-decoration: none; }
.auth-logo em { font-style: normal; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--accent-text); }
.auth-tools { display: flex; align-items: center; gap: 4px; }
.auth-tools .lang-list { bottom: auto; top: calc(100% + 6px); }
.auth-tools .lang-btn { height: 36px; padding: 0 10px; border: 0; background: transparent; color: var(--text-2); font-size: 0.88rem; font-weight: 600; box-shadow: none; }
.auth-tools .lang-btn:hover { background: var(--surface-2); color: var(--text); border: 0; }
@media (min-width: 901px) {
    /* Two-column sign-in: the bar floats over both columns; the logo is light on the left (green) column */
    body.auth-split .auth-bar { position: absolute; inset: 0 0 auto 0; border-bottom: 0; background: transparent; padding: 0 28px 0 56px; }
    body.auth-split .auth-logo { color: #f3efe4; --logo-m: #f3efe4; --logo-bar: #f2b632; --logo-menu: #f2b632; }
    body.auth-split .auth-art { padding-top: calc(56px + clamp(16px, 6vh, 64px)); }
}
@media (max-width: 900px) {
    body.auth-split .auth-art { display: none; }
    /* On narrow screens the bar stays as tall as its content; the remaining space goes to the card's row (the bar does not grow). */
    body.auth.auth-split { grid-template-rows: auto 1fr; }
    .auth-bar { padding: 0 20px; }
}

/* Slightly smaller sidebar: row 32 to 30 px, text 14.4 to 13.6 px, icon 19 to 18 px, tighter group headings, business card 56 to 50 px */
.side-link { border-radius: 0 8px 8px 0; font-size: 0.85rem; }
.side-nav .side-link .nav-icon { color: #9fbcaa; width: 18px; height: 18px; }
.side-group { font-weight: 500; color: var(--side-dim); padding: 13px 10px 4px; font-size: 0.72rem; }
.venue-card { display: flex; align-items: center; gap: 11px; margin: 0 2px 4px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); color: var(--side-text); text-decoration: none; transition: background 0.15s; background: transparent; border-color: transparent; margin-bottom: 8px; padding: 5px 8px; }
.venue-logo { display: grid; place-items: center; flex: none; overflow: hidden; background: #f6f1e7; color: #123326; font-family: var(--font-display); font-size: 1.05rem; width: 34px; height: 34px; border-radius: 9px; }
.venue-text b { font-size: 1.08rem; }
.venue-text small { margin-top: 1px; font-size: 0.72rem; }

/* Footer standard: the app footer is .foot-bar (48 px, .74rem); the one-line footer of sign-in/status pages
   uses the same text size and is thin. The marketing site (.mk-foot) keeps its own wide footer. */
.auth-foot, .status-foot { font-size: 0.74rem; gap: 4px 16px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
.auth-split .auth-foot { padding: 12px 28px calc(14px + env(safe-area-inset-bottom)); }
@media (max-height: 700px) { .auth-split .auth-foot { padding-top: 6px; padding-bottom: 10px; } }

/* On touch screens targets are >= 40-44 px (desktop stays slim). */
@media (pointer: coarse), (max-width: 760px) {
    .side-link { min-height: 44px; }
    .icon-button, .user-gear { min-width: 40px; min-height: 40px; }
    .chip { min-height: 40px; }
}

/* Top bar breathing room: if the content does not fit in 60 px it should not stick to the top; one-line subtitle (full text in title). */
.bar { box-sizing: border-box; min-height: var(--bar-h); padding-top: 5px; padding-bottom: 5px; }
.bar-title p { line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menu languages: small, equal tiles; code badge + language name + on/off mark. */
.lang-chips { flex-wrap: wrap; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0 8px; }
.lang-chip { position: relative; display: inline-flex; align-items: center; border: 1px solid var(--line); color: var(--text-2); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; gap: 9px; padding: 6px 10px 6px 7px; border-radius: 10px; font-size: 0.86rem; font-weight: 500; background: transparent; justify-content: flex-start; min-height: 38px; }
.lang-chip > span { display: inline-flex; align-items: center; gap: 9px; }
.lang-chip b { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 5px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); font-size: 0.68rem; color: var(--text-3); }
.lang-chip small { margin-left: auto; padding-left: 6px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.lang-chip:not(.is-main)::after { content: ""; flex: none; margin-left: auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--input-line); box-sizing: border-box; display: inline-grid; place-items: center; font-size: 0.7rem; line-height: 1; color: transparent; }
.lang-chip:has(input:checked)::after { content: "\2713"; background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 800; }
.lang-chip:has(input:checked) { background: var(--accent-soft); }
.lang-chip:has(input:checked) b { background: transparent; border-color: var(--accent); color: var(--accent-text); }
.lang-chip.is-main { cursor: default; background: var(--surface-2); border-style: dashed; }
.lang-chip.is-main b { background: var(--surface); }

/* Settings simplified: status strip, sectioned form, collapsible translations, setting rows. */
.status-strip { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); }
.status-strip b { font-weight: 600; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fd58f; box-shadow: 0 0 0 3px rgba(95, 213, 143, 0.22); flex: none; }
.status-strip.is-paused .status-dot { background: #f2b632; box-shadow: 0 0 0 3px rgba(242, 182, 50, 0.28); }
.status-pill { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }

.status-strip form { margin-left: auto; }
.form-heading { margin: 22px 0 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.form-heading:first-of-type { margin-top: 6px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
.pair .uploader { flex-direction: column; }
.form-hint { margin: -4px 0 14px; }
.disclose { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); margin-bottom: 8px; }
.disclose summary { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; font-size: 0.88rem; color: var(--text-2); }
.disclose summary::-webkit-details-marker { display: none; }
.disclose-title { flex: 1; }
.disclose-title b { color: var(--text); font-weight: 600; }
.disclose-codes em { font-style: normal; font-size: 0.68rem; font-weight: 700; color: var(--text-3); border: 1px solid var(--line); border-radius: 6px; padding: 2px 5px; margin-left: 3px; }
.disclose summary .icon { width: 16px; height: 16px; transition: transform 0.15s; }
.disclose[open] summary .icon { transform: rotate(180deg); }
.disclose-body { padding: 4px 12px 2px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding-top: 12px; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 250px) auto; gap: 8px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.setting-rows > form:first-child .setting-row { border-top: 0; padding-top: 4px; }
.setting-text label { display: block; font-weight: 600; font-size: 0.95rem; }
.setting-text .hint { display: block; margin-top: 2px; line-height: 1.4; }
.setting-control select { width: 100%; }
.sample-line { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sample-line-text { flex: 1 1 260px; }
.sample-line .sample-status { margin: 0; }
.sample-line .hint { margin: 2px 0 0; }
#sample:has(.sample-line) { padding-top: 14px; padding-bottom: 14px; }
#sample:has(.sample-line) .card-title { display: none; }
@media (max-width: 760px) {
    .pair, .disclose-body { grid-template-columns: 1fr; }
    .setting-row { grid-template-columns: 1fr auto; }
    .setting-text { grid-column: 1 / -1; }
}

/* One-line status strip: short text, full text in title. */
.status-strip .status-text { margin: 0; color: var(--text-3); font-size: 0.84rem; line-height: 1.4; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .status-strip .status-text { flex: 1 1 100%; white-space: normal; order: 5; } .status-strip form { margin-left: auto; } }

/* Console > Plans */
.plans-intro { margin: 0 0 14px; max-width: 70ch; }
.plans-list { display: grid; gap: 14px; }
.plan-card.is-off { opacity: .8; }
.plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 4px; }
.plan-head .card-title { margin: 0; }
.plan-meta { color: var(--text-3); font-size: .78rem; }
.plan-meta code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.plan-head .status-pill { margin-left: auto; }
.plan-form { display: grid; gap: 16px; }
.plan-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 90px; gap: 12px; }
.plan-grid .field { margin: 0; }
.plan-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.plan-feature { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: .86rem; }
.plan-feature small { display: block; color: var(--text-3); font-size: .72rem; }
.plan-feature.is-number { justify-content: space-between; }
.plan-feature.is-number input { width: 76px; flex: none; }
.plan-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.plan-new > summary { list-style: none; display: inline-flex; cursor: pointer; }
.plan-new > summary::-webkit-details-marker { display: none; }
.plan-new[open] > summary { margin-bottom: 12px; }
@media (max-width: 760px) { .plan-grid { grid-template-columns: 1fr 1fr; } .plan-grid .field:first-child { grid-column: 1 / -1; } }

/* Console > Plans: collapsed row cards, grouped features */
.plans-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.plans-bar p { margin: 0; max-width: 70ch; }
.plans-bar .button { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.plans-bar .button svg { width: 16px; height: 16px; }
.plan-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.plan-card[open] { border-color: var(--input-line); }
.plan-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 12px 16px; cursor: pointer; list-style: none; min-height: 52px; }
.plan-sum::-webkit-details-marker { display: none; }
.plan-name { font: 400 1.1rem/1.2 Gloock, serif; }
.plan-key { background: var(--surface-2); color: var(--text-3); padding: 1px 7px; border-radius: 6px; font-size: .74rem; }
.plan-price { font-size: .86rem; }
.plan-price small { color: var(--text-3); }
.plan-count { color: var(--text-3); font-size: .8rem; }
.plan-sum .status-pill { margin-left: auto; }
.plan-chev { display: inline-flex; color: var(--text-3); transition: transform .15s; }
.plan-chev svg { width: 18px; height: 18px; }
.plan-card[open] .plan-chev { transform: rotate(180deg); }
.plan-card .plan-form { padding: 4px 16px 16px; border-top: 1px solid var(--line); margin-top: 0; padding-top: 16px; }
.plan-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.plan-group legend { padding: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.plan-group .plan-features { border-top: 0; padding-top: 0; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.plan-buttons { display: flex; gap: 10px; }
@media (max-width: 760px) { .plans-bar { flex-direction: column; } .plan-sum .status-pill { margin-left: 0; } .plan-chev { margin-left: auto; } }

/* Business switcher: only visible to users who belong to more than one business */
/* Business switcher: arrow to the right of the business card, the same dropdown as the user menu (.menu-pop) */
.biz-menu { position: relative; margin-bottom: 8px; }
.biz-menu .venue-card { margin-bottom: 0; padding-right: 36px; }
.biz-trigger { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--side-dim); cursor: pointer; transition: background 0.15s, color 0.15s; }
.biz-trigger:hover, .biz-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); color: #fff; }
.biz-trigger .icon { width: 14px; height: 14px; }
.biz-pop { top: calc(100% + 4px); bottom: auto; }
.biz-pop .biz-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.biz-pop .menu-item small { margin-left: auto; color: var(--side-dim); font-size: 0.72rem; }

/* Team page: same row layout as the product list (.rows/.row); extra styles only for role descriptions and short notes */
.list-note { margin: 12px 2px 0; font-size: 0.85rem; color: var(--text-3); }
.form-card .danger-zone { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Branch box: under the business card, a closed box showing only the selected branch; when opened, only the other accessible branches */
.branch-menu { position: relative; margin: -2px 2px 10px; }
.branch-box { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px; background: transparent; color: var(--side-text); font: inherit; font-size: 0.84rem; cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; }
.branch-box:hover, .branch-box[aria-expanded="true"] { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.branch-box .icon { width: 14px; height: 14px; flex: none; color: var(--side-dim); }
.branch-box .branch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-pop { top: calc(100% + 4px); bottom: auto; }
.branch-pop .biz-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.branch-pop .menu-item small { margin-left: auto; color: var(--side-dim); font-size: 0.72rem; }

/* Branch setup: step indicator and product list (calm, the panel's row style) */
.setup-steps { display: flex; gap: 22px; list-style: none; margin: 0 0 18px; padding: 0; flex-wrap: wrap; }
.setup-steps li { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 0.88rem; }
.setup-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--input-line); font-size: 0.78rem; font-weight: 600; }
.setup-steps li.is-current { color: var(--text); font-weight: 600; }
.setup-steps li.is-current .setup-dot { background: var(--text); border-color: var(--text); color: var(--surface); }
.setup-steps li.is-done .setup-dot { border-color: var(--accent); color: var(--accent); }
.setup-group { margin-top: 14px; }
.setup-group-title { padding-left: 0; }
.setup-list { list-style: none; margin: 0; padding: 0; }
.setup-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.setup-item:first-child { border-top: 0; }
.setup-item .check-line { flex: 1; min-width: 0; margin: 0; }
.setup-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-base { color: var(--text-3); font-size: 0.84rem; white-space: nowrap; }
.setup-price { width: 110px; text-align: right; }
@media (max-width: 560px) { .setup-item { flex-wrap: wrap; } .setup-price { width: 100%; text-align: left; } }

/* Scope badge (multi-branch business): whether the page is branch-specific or affects all branches. Calm: lightly tinted background, thin border. */
.scope-pill { display: inline-flex; align-items: center; gap: .35rem; margin-left: .75rem; padding: .12rem .6rem .12rem .5rem; vertical-align: middle; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-2); font-family: var(--font-body); font-size: .74rem; font-weight: 500; letter-spacing: 0; line-height: 1.35; cursor: help; }
.scope-pill svg { width: .9em; height: .9em; flex: none; color: var(--accent); }
.scope-pill.is-shared svg { color: var(--text-3); }
@media (max-width: 720px) { .scope-pill { display: none; } }
.branch-tag { flex: none; padding: 0 .4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.10); color: var(--side-dim); font-size: .68rem; font-weight: 600; }
.branch-pop .menu-item.is-current { background: rgba(255, 255, 255, 0.07); }
.branch-pop .menu-item.is-current .biz-name { font-weight: 700; }

.all-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 .5rem; color: var(--text-2); font-size: .95rem; }
.all-summary b { color: var(--text); font-size: 1.15rem; font-weight: 700; margin-right: .2rem; }

/* "All branches" product table: rows are products, columns are branches; each cell toggles sale with one click. */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.matrix { width: 100%; border-collapse: collapse; font-size: .92rem; }
.matrix th, .matrix td { padding: .45rem .8rem; border-bottom: 1px solid var(--line-2); text-align: center; vertical-align: middle; }
.matrix thead th { position: sticky; top: 0; background: var(--surface, var(--bg)); font-weight: 600; font-size: .82rem; color: var(--text-2); }
.matrix .mx-name, .matrix th[scope="row"], .matrix .mx-category th { text-align: left; font-weight: 500; }
.matrix .mx-name small, .matrix .mx-category small, .matrix .mx-branch small { margin-left: .4rem; color: var(--text-3); font-size: .7rem; font-weight: 500; }
.matrix .mx-category th { padding-top: .8rem; font-family: var(--font-head); font-weight: 700; color: var(--text); }
.matrix .mx-category td, .matrix .mx-category th { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.matrix tr.is-hidden th { color: var(--text-3); }
.matrix form { display: inline; margin: 0; }
.mx-cell { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem; border: 0; background: transparent; cursor: pointer; border-radius: 8px; }
.mx-cell:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mx-dot { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--text-3); box-sizing: border-box; vertical-align: middle; }
.mx-dot.is-sold { background: #2f9e62; border-color: #2f9e62; }
.mx-dot.is-soldout { background: var(--accent); border-color: var(--accent); }
.mx-tag { color: var(--text-3); font-size: .8rem; font-style: normal; }
.matrix-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .2rem 0 .8rem; color: var(--text-2); font-size: .85rem; }
.matrix-legend span { display: inline-flex; align-items: center; gap: .4rem; }

/* In a multi-branch business the branch box sits at the start of the "Branch" section in the sidebar. For a person assigned to one branch it does not open (fixed). */
.side-nav .branch-menu { margin: 2px 6px 6px; }
.branch-box.is-static { cursor: default; }
.branch-box.is-static:hover { background: transparent; border-color: rgba(255, 255, 255, 0.10); }

/* "Sold in" in the menu list (branches where the product is sold). Calm: like a row subtitle; accent color when not in all branches. */
.sold-in { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-2); font-size: .8rem; white-space: nowrap; }
.sold-in svg { width: 12px; height: 12px; flex: none; color: var(--text-3); }
.sold-in.is-partial, .sold-in.is-partial svg { color: var(--accent); }
.sold-in-filter { display: inline-flex; align-items: center; gap: .55rem; color: var(--text-2); font-size: .9rem; }
.sold-in-filter select { width: auto; min-width: 11rem; }
.mini-tag { display: inline-block; margin-left: .45rem; padding: 0 .45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text-3); font-size: .7rem; font-weight: 600; line-height: 1.6; }

/* Branch price on the stock page. Calm: a small thin-bordered box in the row; a small "Save" appears next to it on change. A dropdown for products with sizes. */
.branch-price { display: inline-flex; align-items: center; gap: .45rem; position: relative; font-family: var(--font-body); }
.price-edit { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.branch-price input[type=number] { width: 5.4rem !important; height: 32px !important; min-height: 0 !important; padding: 0 .55rem !important; border: 1px solid var(--line) !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; text-align: right; font-family: var(--font-body) !important; font-size: .92rem !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; color: var(--text); -moz-appearance: textfield; }
.branch-price input[type=number]::-webkit-outer-spin-button, .branch-price input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.branch-price input[type=number]:focus { border-color: var(--accent) !important; outline: none; }
.branch-price input::placeholder { color: var(--text-3); font-weight: 500; }
.price-save { height: 32px; padding: 0 .75rem; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 8px; background: transparent; color: var(--accent); font: 600 .82rem var(--font-body); cursor: pointer; }
.price-save:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.price-save[hidden] { display: none; }
.price-own { color: var(--accent); font-weight: 700; cursor: help; }
.price-opts { position: relative; }
.price-opts > summary { display: inline-flex; align-items: center; gap: .35rem; list-style: none; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.price-opts > summary::-webkit-details-marker { display: none; }
.price-opts > summary:hover, .price-opts[open] > summary { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.price-opts > summary svg { width: 14px; height: 14px; color: var(--text-3); transition: transform .15s; }
.price-opts[open] > summary svg { transform: rotate(180deg); }
.price-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 290px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 34px rgba(0, 0, 0, .3); font: 400 .88rem var(--font-body); white-space: normal; }
.price-pop-title { margin: 0 0 6px; font: 600 .86rem var(--font-body); color: var(--text-2); }
.price-line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .6rem; padding: 6px 0; border-top: 1px solid var(--line-2); color: var(--text); }
.price-line span { font-weight: 500; }
.price-line small { color: var(--text-3); font-variant-numeric: tabular-nums; }
.price-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-top: 10px; border-top: 1px solid var(--line-2); }
.price-pop-foot .hint { margin: 0; font-size: .78rem; line-height: 1.35; }
.price-lock { margin-left: .5rem; vertical-align: middle; text-decoration: none; }
/* Branch-specific price: price in the accent color, with the shared price line below it (no icon). */
.branch-price.has-base { flex-wrap: wrap; justify-content: flex-end; row-gap: 5px; }
.price-base { flex-basis: 100%; text-align: right; color: var(--text-3); font: 500 .74rem var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.mx-tag { display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.price-edit.is-own input[type=number] { color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; }
.price-opts.is-own > summary { color: var(--accent); }
/* The branch's own order note (in the category header, subtle). */
.order-own { display: inline-flex; align-items: center; margin-left: .6rem; color: var(--text-2); font: 500 .82rem var(--font-body); }
.order-reset { margin-left: auto; }
.order-reset button { padding: 0; border: 0; background: none; color: var(--accent); font: 600 .82rem var(--font-body); cursor: pointer; }
.order-reset button:hover { text-decoration: underline; }
/* A row returned to via #r-… / #c-… after saving should not hide under the sticky top header. */
.rows > .row[id], .prod-group[id] { scroll-margin-top: 140px; }

/* Bulk price page */
.bp-card { max-width: 720px; margin-bottom: 20px; }
.bp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.bp-amount { display: flex; align-items: center; gap: 10px; }
.bp-amount input { width: 7rem; }
.bp-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.bp-list { list-style: none; margin: 14px 0 6px; padding: 0; }
.bp-list li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.bp-list li:first-child { border-top: 0; }
.bp-name { flex: 1; min-width: 0; font-weight: 600; }
.bp-name small { color: var(--text-3); font-weight: 500; }
.bp-old { color: var(--text-3); text-decoration: line-through; }
.bp-arrow { color: var(--text-3); }
.bp-new { min-width: 4.5rem; text-align: right; font-weight: 700; color: var(--accent-text); }
.bp-apply { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.bp-apply .hint { margin: 0; }
@media (max-width: 620px) { .bp-row { grid-template-columns: 1fr; } .bp-apply { flex-direction: column; align-items: stretch; } }
.delete-branches { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: 0.88rem; line-height: 1.4; }

/* Bulk price: row ticks and the "unchanged" state */
.bp-note { max-width: 720px; margin: 4px 2px 20px; }
.bp-list li { align-items: flex-start; }
.bp-pick { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.bp-pick input { margin-top: 3px; }
.bp-prices { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bp-line { display: flex; align-items: baseline; gap: 8px; }
.bp-line small { color: var(--text-3); margin-right: 4px; }
.bp-keep { display: none; color: var(--text-3); font-size: .85rem; }
.bp-list li.is-skipped .bp-name { color: var(--text-3); }
.bp-list li.is-skipped .bp-line { display: none; }
.bp-list li.is-skipped .bp-keep { display: inline; }
.bp-apply .button:disabled { opacity: .5; cursor: not-allowed; }

/* Account-level pages (All businesses, People and access, Plan and billing) */
.stat-strip { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 4px 0 18px; color: var(--text-2); font-size: .95rem; }
.stat-strip b { font-family: var(--font-display, inherit); font-size: 1.5rem; font-weight: 700; color: var(--text); margin-right: 4px; font-variant-numeric: tabular-nums; }
.stat-strip .stat-warn b { color: var(--danger); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-2); }
.live-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--green-fg, #4caf78); }
.live-dot.is-paused i { background: var(--amber-badge-fg, #e0a32e); }
.people-count { margin: 0 0 12px; }
.people-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; }
.people-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .95rem; }
.people-table th, .people-table td { padding: 14px 16px; text-align: left; border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.people-table thead th { border-top: 0; color: var(--text-3); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.people-table tbody th { font-weight: 600; }
.people-name { display: block; }
.people-mail { display: block; color: var(--text-3); font-weight: 500; font-size: .82rem; }
.role-chip { font: inherit; font-size: .82rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); cursor: pointer; }
.role-chip:hover { border-color: var(--accent); color: var(--text); }
.role-chip.role-owner { border-color: var(--amber-badge-fg, #e0a32e); color: var(--amber-badge-fg, #e0a32e); }
.role-chip.role-groupmanager { border-color: var(--green-fg, #4caf78); color: var(--green-fg, #4caf78); }
.plan-action { text-align: right; }
@media (max-width: 620px) { .stat-strip { gap: 4px 18px; } .people-table th, .people-table td { padding: 12px; } }
.people-table tbody th, .people-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface, var(--bg)); }

/* People list (instead of a table; no horizontal scroll however many businesses) */
.people-list { list-style: none; margin: 0 0 14px; padding: 0; border: 1px solid var(--line); border-radius: 14px; }
.person { display: flex; gap: 28px; padding: 18px 20px; border-top: 1px solid var(--line); }
.person:first-child { border-top: 0; }
.person-id { flex: 0 0 210px; min-width: 0; }
.person-roles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.role-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.role-line .role-chip { cursor: default; }
.biz-pill { font: inherit; font-size: .88rem; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.biz-pill:hover { border-color: var(--accent); }
.biz-pill small { color: var(--text-3); }
.role-more { flex: 1 1 100%; }
.role-more summary { cursor: pointer; color: var(--text-2); font-size: .9rem; list-style: none; display: inline-block; padding: 4px 0; }
.role-more summary::after { content: " ▾"; }
.role-more[open] summary::after { content: " ▴"; }
.role-more-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; max-height: 220px; overflow-y: auto; }
@media (max-width: 720px) { .person { flex-direction: column; gap: 10px; } .person-id { flex-basis: auto; } }

/* Branch groups and the "Apply to branches" picker */
.pick { margin: 6px 0 4px; }
.pick-list { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 340px; overflow: auto; }
.pick-list li + li { border-top: 1px solid var(--line); }
.pick-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.pick-row:hover { background: var(--surface-2); }
.pick-row input { width: 18px; height: 18px; margin: 0; flex: none; }
.pick-name { font-weight: 600; }
.group-rename { display: flex; gap: 8px; align-items: center; }
.group-rename input { max-width: 260px; }
.group-new { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.group-new input { max-width: 280px; }
.group-move { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.group-move select { max-width: 240px; }

.group-card + .group-card { margin-top: 16px; }

/* Opening hours */
.hours-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.hours-days { list-style: none; margin: 14px 0 0; padding: 0; }
.hours-day { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); }
.hours-day:first-child { border-top: 0; }
.hours-name { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; padding-top: 8px; }
.hours-name input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.hours-periods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hours-period { display: flex; align-items: center; gap: 8px; }
.hours-period[hidden], .hours-periods [hidden] { display: none; }
.hours-period input[type="time"] { width: 122px; }
.hours-periods .link-button { color: var(--accent-text); font-size: 0.86rem; font-weight: 600; }
.hours-closed { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.hours-periods [data-add-period] { margin-left: auto; }
.hours-closed[hidden] { display: none; }
.hours-closed .link-button { color: var(--accent-text); font-size: 0.86rem; font-weight: 600; }
.hours-day.is-closed .hours-name { color: var(--text-3); }
.hours-tools { margin-top: 12px; }
.hours-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.hours-options input[type="date"] { max-width: 190px; }
.card-sub { font-size: 1rem; margin: 22px 0 6px; }
.special-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 18px; }
.special-fields, .special-hours, .close-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.special-fields .check { margin: 0; }
.special-fields input[type="text"], .close-form input[type="text"] { min-width: 240px; }
.special-hours[hidden] { display: none; }
@media (max-width: 640px) {
  .hours-day { grid-template-columns: 1fr; gap: 6px; }
  .hours-name { padding-top: 0; }
}

/* Time inputs look the same as other fields (the browser default stayed gray). */
input[type="time"] {
    padding: 10px 12px;
    font: inherit;
    border: 1px solid var(--input-line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    color-scheme: light dark;
    transition: border-color 0.15s, box-shadow 0.15s;
}
:root[data-theme="dark"] input[type="time"] { background: rgba(0, 0, 0, 0.18); color-scheme: dark; }
:root[data-theme="light"] input[type="time"] { color-scheme: light; }
input[type="time"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.hours-period input[type="time"] { width: 132px; font-variant-numeric: tabular-nums; }

/* Row heading in serif; the badges inside keep the panel's normal font. */
.row-title .badge { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; margin-left: 8px; vertical-align: middle; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.86rem; }

/* All-branches hours page: branch list (picker) on the left, tabbed action card on the right. */
.hours-split { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 16px; align-items: start; }
.hours-split > .card { margin: 0; }
.hours-actions .seg-choice { margin-bottom: 14px; }
.pick-state { flex-basis: 100%; margin-left: 30px; display: flex; align-items: center; gap: 8px; }
.pick-state small { font-size: 0.78rem; }
.hours-branches .pick-row { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 980px) { .hours-split { grid-template-columns: 1fr; } }

/* Row headings on the hours pages (special day, scheduled change): panel font, soft weight. */
.row-title.plain { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; }
.row-title.plain + .muted, .row-title.plain ~ .muted { font-size: 0.86rem; }

/* Branch hours page: weekly hours on the left, special days and "close today" on the right. */
.hours-single { grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr); }
.hours-main, .hours-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.hours-main > .card, .hours-side > .card { margin: 0; }
@media (max-width: 980px) { .hours-single { grid-template-columns: 1fr; } }
.hours-single .hours-period input[type="time"] { width: 118px; }
.hours-single .hours-periods { gap: 6px 10px; }
@media (min-width: 641px) { .hours-single .hours-day { grid-template-columns: 124px 1fr; } }
@media (max-width: 640px) { .hours-single .hours-day { grid-template-columns: 1fr; } .hours-period input[type="time"], .hours-single .hours-period input[type="time"] { width: 112px; } }

/* Branch groups: groups on the left, moving branches on the right. */
.groups-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.groups-split > .card { margin: 0; }
@media (max-width: 980px) { .groups-split { grid-template-columns: 1fr; } }

/* Shared "show more" counter and history rows */
.show-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 16px 4px 0; }
.show-more-count, .show-more-note { font-size: 0.84rem; color: var(--text-3); }
.activity-time { font-size: 0.8rem; color: var(--text-3); white-space: nowrap; }
.activity-changes { color: var(--text-2); }
@media (max-width: 640px) {
    .row-main .row-sub.activity-changes { overflow-wrap: anywhere; }
}

/* Sidebar: groups by task + a single identity card (business / scope) */
.biz-menu .venue-card { width: 100%; padding-right: 8px; font: inherit; text-align: left; cursor: pointer; }
button.venue-card { background: transparent; border: 1px solid transparent; }
button.venue-card:hover, button.venue-card[aria-expanded="true"] { background: rgba(255, 255, 255, 0.06); }
.venue-text { min-width: 0; flex: 1; }
.venue-text b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue-scope { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d9e6dd; font-size: 0.78rem; }
.venue-scope em { font-style: normal; color: var(--side-dim); font-size: 0.72rem; margin-left: 5px; }
.venue-scope.is-all { color: var(--side-dim); }
.venue-chevron { display: grid; place-items: center; flex: none; width: 22px; color: var(--side-dim); }
.venue-chevron .icon { width: 14px; height: 14px; }
.biz-pop { left: 2px; right: 2px; max-height: min(70vh, 460px); overflow-y: auto; }
.pop-label { padding: 8px 10px 4px; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--side-dim); }
.biz-pop .menu-item { width: 100%; }
.biz-pop .menu-item.is-current { background: rgba(255, 255, 255, 0.07); }
.biz-pop .menu-item.is-current .biz-name { font-weight: 600; }
.pop-check { display: grid; place-items: center; margin-left: 6px; color: var(--gold); }
.pop-check .icon { width: 14px; height: 14px; }
.biz-pop .menu-item small + .pop-check { margin-left: 6px; }
.menu-item.pop-quiet { color: var(--side-dim); font-size: 0.8rem; }
.biz-pop button.menu-item > .icon:last-child { margin-left: auto; width: 14px; height: 14px; }

.side-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; border-radius: 8px; user-select: none; }
.side-fold > summary::-webkit-details-marker { display: none; }
.side-fold > summary:hover { color: #fff; }
.side-fold > summary .icon { width: 13px; height: 13px; transition: transform 0.15s; }
.side-fold[open] > summary .icon { transform: rotate(180deg); }
.side-fold { display: flex; flex-direction: column; gap: 1px; }

.live-pill .live-word { font-style: normal; color: #3fbf78; font-weight: 600; }
.live-pill .live-word::after { content: "\00B7"; margin: 0 6px; color: var(--text-3); font-weight: 400; }

/* "All branches" Today: branch cards (same family as Today) */
.db-hero-all { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: start; }
.br-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.br-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.br-cover { position: relative; display: grid; gap: 2px; height: 132px; overflow: hidden; background: var(--surface-2); color: #fff; text-decoration: none; }
.br-cover:hover { text-decoration: none; color: #fff; }
.br-cover img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; display: block; }
.br-cover-2 { grid-template-columns: 1.6fr 1fr; }
.br-cover-3 { grid-template-columns: 1.6fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.br-cover-3 img:first-child { grid-row: 1 / 3; }
.br-cover-0 { background: linear-gradient(135deg, var(--side) 0%, var(--side-2) 100%); }
.br-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 10, 0.05) 30%, rgba(8, 12, 10, 0.72)); pointer-events: none; }
.br-pill { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 999px; background: rgba(10, 20, 15, 0.62); color: #d8f3e2; font-weight: 600; font-size: 0.72rem; backdrop-filter: blur(6px); }
.br-pill i { width: 7px; height: 7px; border-radius: 50%; background: #5fd58f; }
.br-pill.is-closed i, .br-pill.is-paused i { background: #f2b632; }
.br-tag { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #1b1405; font-weight: 700; font-size: 0.68rem; }
.br-name { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 10px; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.br-open { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: 0.86rem; }
.br-open b { font-weight: 600; color: var(--text-2); }
.br-open.is-open b { color: var(--green-fg); }
.br-open.is-closed b { color: var(--warn); }
.br-open span { color: var(--text-3); font-size: 0.8rem; }
.br-meta { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 0; font-size: 0.8rem; color: var(--text-3); }
.br-meta span { white-space: nowrap; }
.br-meta span:first-child { white-space: normal; overflow-wrap: anywhere; }
.br-meta .is-warn { color: var(--warn); }
.br-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
.br-links a { font-weight: 600; font-size: 0.86rem; }
.br-links a:hover { text-decoration: underline; }
@media (max-width: 1100px) { .db-hero-all { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .br-grid { grid-template-columns: 1fr; } }

/* Branch choice in the "All branches" scope (Stock, QR, printed menu, TV) */
.pick-h { margin: 6px 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; }
.pick-sub { margin: 0 0 12px; color: var(--text-3); font-size: 0.86rem; }
.pick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.pick-count { font-style: normal; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 0.74rem; }
.pick-actions + .list-note { margin-bottom: 22px; }

/* Products: info note at the top while a branch is selected on the card */

/* Product library: branch menu */
/* When adding a branch: "How should its menu start?" */
.menu-start { margin: 18px 0 6px; padding: 0; border: 0; }
.menu-start legend { padding: 0; font-weight: 600; font-size: 0.95rem; }
.menu-start > .hint { display: block; margin: 4px 0 12px; }
/* Menu start: one sentence for the chosen start, with links to the other starts. */
.start-line { margin: 8px 0 4px; color: var(--text-2); font-size: 0.9rem; line-height: 1.55; }
.start-line[hidden] { display: none; }
.start-line p { margin: 0; }
.start-line b { color: var(--text); }
/* Boxed segmented bar made of buttons (same look as the radio version above); form choices use SHORT labels. Underline tabs stay for list filters (All / Visible / Hidden). */
.seg-choice > button { display: block; padding: 7px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text-3); font: inherit; font-weight: 600; font-size: 0.86rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
.seg-choice > button:hover { color: var(--text); }
.seg-choice > button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.seg-choice > button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.menu-start .seg-choice { margin-top: 8px; }
.start-line .branch-filter { margin-top: 8px; }
.menu-start > .hint:last-child { margin: 10px 0 0; font-size: 0.8rem; }
/* Tick list (one line per record, plain rows): the kind sits right as a soft label; long lists scroll inside. */
.check-list { margin: 0; }
.check-list.is-long { max-height: 240px; overflow-y: auto; padding-right: 6px; }
.check-list-row { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 2px; cursor: pointer; font-size: 0.9rem; font-weight: 400; }
.check-list-row + .check-list-row { border-top: 1px solid var(--line); }
.check-list-row[hidden] { display: none; }
.check-list-name { flex: 1; min-width: 0; font-weight: 400; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-list-meta { padding: 1px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-3); font-size: 0.74rem; white-space: nowrap; }
.check-tools { display: flex; gap: 8px; margin: 0 0 8px; font-size: 0.84rem; color: var(--text-3); }
.check-tools .link-button { color: var(--accent-text); font-weight: 600; }
.zone-device { display: block; margin-top: 6px; text-align: left; color: var(--accent-text); font-size: 0.84rem; font-weight: 600; }
.zone-device[hidden] { display: none; }

/* Strip above Stock & prices */
.menu-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.menu-strip-text { flex: 1 1 260px; margin: 0; font-size: 0.88rem; color: var(--text-2); }
.menu-strip-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-strip-actions .icon { width: 14px; height: 14px; }
.danger-text { color: var(--danger, #c2563d); }
.dialog-points { margin: 4px 0 16px; padding-left: 18px; color: var(--text-3); line-height: 1.6; font-size: 0.88rem; }

/* Add to / remove from library */
.pick-toolbar { margin-bottom: 14px; }
.pick-group { margin-bottom: 18px; }
.pick-group-head { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-family: var(--font-display); font-size: 1.2rem; cursor: pointer; }
.pick-group-head small { font-family: var(--font-body, inherit); font-size: 0.78rem; color: var(--text-3); }
.pick-group-head input, .pick-line input { width: 18px; height: 18px; flex: none; }
.pick-group .pick-row { padding: 0; }
.pick-line { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 4px; cursor: pointer; }
.pick-line .row-main { display: flex; flex-direction: column; min-width: 0; }
.pick-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); }
.pick-bar-count { flex: 1 1 120px; color: var(--text-2); font-size: 0.88rem; }

/* Info line in the product library while the "Show products sold at" filter is on */

/* Product edit: "At this branch" card */
/* Product edit, branch view: this branch's price in the form's price place, with a small scope tag; sizes side by side. */
.scope-tag { margin-left: 6px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-3); font-size: 0.7rem; font-weight: 600; vertical-align: 1px; }
.price-here-sizes { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.price-here-size { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 0.88rem; }
.price-here-size input { width: 110px; }
.price-here .link-button { margin-left: 4px; }
.side-actions .switch + .switch { margin-top: 10px; }
.side-actions [hidden] { display: none; }


/* Library: location summary button + small card (does not push the list; positioned by JS, never off screen). */
.sold-in-btn { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
.sold-in-btn:hover, .sold-in-btn[aria-expanded="true"] { color: var(--gold); text-decoration-color: currentColor; }
.sold-in:has(.sold-in-btn) { max-width: 100%; }
.sold-pop { position: fixed; z-index: 60; display: flex; flex-direction: column; width: min(320px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 34px rgb(0 0 0 / .35); white-space: normal; color: var(--text); font-size: .86rem; }
.sold-pop[hidden] { display: none; }
.sold-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
.sold-pop-head strong { font-weight: 600; }
.sold-pop-list { display: flex; flex-direction: column; padding: 4px; }
.sold-pop-list[hidden], .sold-pop-row[hidden], .sold-pop-sub[hidden] { display: none; }
/* One scrolling area for every list in the pop-up (about 8 rows), so 60 branches never grow the page. */
.sold-pop-scroll { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.sold-pop .sold-pop-search { flex: none; max-width: none; margin: 6px 14px 2px; }
.sold-pop-sub { display: block; padding: 8px 14px 2px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.sold-pop-row.is-plain { color: var(--text-2); }
.sold-pop-row.is-plain:hover { background: none; }
.sold-pop-none { display: block; padding: 10px 14px; color: var(--text-3); font-size: .82rem; }
.sold-pop-none[hidden] { display: none; }
.sold-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.sold-pop-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sold-pop-row:hover, .sold-pop-row:focus-visible { background: var(--surface-2, rgb(255 255 255 / .05)); }
.sold-pop-go { flex: none; color: var(--text-3); font-size: .8rem; }
.sold-pop-row:hover .sold-pop-go, .sold-pop-row:focus-visible .sold-pop-go { color: var(--gold); }
.sold-pop-foot { padding: 9px 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .8rem; }
.sold-pop svg { width: 16px; height: 16px; color: var(--text-2); }
.sold-in:has(.sold-in-btn) { min-width: 0; }

/* Product lists: calm, aligned price column. Price in the panel font, numbers in equal widths; the product name is in the panel font too.
   On the stock page every price has the same format (text + ⌄) and one right edge; "Sold out" is round and fixed width. */
[data-sortable] .row-title, [data-filter-rows] .row-title { font-family: var(--font-body); font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.row-price { font-family: var(--font-body); font-weight: 600; font-size: .95rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.branch-price, .branch-price.has-base { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; flex-wrap: nowrap; gap: 3px; width: 200px; }
.branch-price .price-opts > summary { padding: 5px 6px 5px 10px; margin-right: -6px; color: var(--text); font-weight: 600; }
.price-base { flex-basis: auto; font-size: .75rem; }
.price-base b { color: var(--accent); font-weight: 600; }
.branch-price .price-pop input.price-single[type=number] { width: 100% !important; height: 40px !important; margin: 4px 0 8px; text-align: left !important; font-size: 1rem !important; }
.price-pop-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--text-3); font-size: .78rem; }
.price-pop-meta .link-button { color: var(--accent); font-weight: 600; font-size: .78rem; }
.price-pop-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
label.price-pop-title { display: block; }
.row-actions { gap: 12px; }
.row-actions .chip-btn { min-width: 86px; text-align: center; }
@media (max-width: 760px) {
    .branch-price, .branch-price.has-base { width: auto; align-items: flex-start; }
    .branch-price .price-opts > summary { margin: 0 0 0 -10px; }
    .price-base { text-align: left; }
    .price-pop { right: auto; left: -10px; width: min(290px, calc(100vw - 32px)); }
    .row-actions { gap: 8px; margin-left: auto; }
    .row-actions .chip-btn { min-width: 76px; padding: 6px 10px; }
    .price-base-more { display: none; }
    /* On phones price + Sold out + toggle are one row: starts at the image edge, controls on the right. */
    .branch-price, .branch-price.has-base { margin-left: 42px !important; margin-right: 0; flex: 1 1 auto; min-width: 0; }
}

/* Library: label for a product sold out at a branch; a row whose price is shown as plain text (no edit permission). */
.sold-tag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--danger-line); background: var(--danger-soft); color: var(--danger); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.sold-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.branch-price .price-text { padding: 5px 0; font-weight: 600; }
.price-pop[action$="menu-price"] .price-line { grid-template-columns: 1fr auto; }

/* Top bar on phones: page name + live dot + the page's main action + "⋯". The other buttons are in a bottom sheet list. */
.bar-more, .bar-live, .chip-select { display: none; }
.bar-sheet[hidden], .bar-sheet-dim[hidden] { display: none !important; }
.bar-sheet-dim { position: fixed; inset: 0; z-index: 90; background: rgb(0 0 0 / .45); }
.bar-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; max-height: 80vh; overflow-y: auto; padding: 6px 8px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; background: var(--surface); box-shadow: 0 -14px 34px rgb(0 0 0 / .4); }
.bar-sheet-grab { width: 40px; height: 4px; margin: 6px auto 8px; border-radius: 2px; background: var(--line); }
.bar-sheet-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 0; border-radius: 10px; background: none; color: var(--text); font: 500 .98rem var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.bar-sheet-item:hover, .bar-sheet-item:focus-visible { background: var(--surface-2); text-decoration: none; }
.bar-sheet-item .icon { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.bar-sheet-item small { margin-left: auto; color: var(--text-3); font-size: .78rem; }
.bar-sheet-item .dot { width: 8px; height: 8px; margin: 0 5px; border-radius: 50%; background: #3fbf78; flex: none; }
.bar-sheet-item .dot.is-paused { background: var(--warn); }
.bar-sheet-sep { height: 1px; margin: 6px 10px; background: var(--line); }
@media (max-width: 760px) {
    .bar-actions > :not(.bar-keep):not(.bar-more) { display: none !important; }
    .bar-more:not([hidden]) { display: inline-grid; }
    .bar-actions .bar-keep .label-wide { display: none; }
    .bar-live { display: inline-block; width: 8px; height: 8px; margin: 0 2px 0 8px; vertical-align: middle; border-radius: 50%; background: #3fbf78; box-shadow: 0 0 0 3px rgb(63 191 120 / .18); }
    .bar-live.is-paused { background: var(--warn); box-shadow: 0 0 0 3px rgb(154 91 0 / .2); }
    /* List filter: a single select box instead of category chips; search and status buttons side by side. */
    .toolbar .chips[data-filter-cat] { display: none; }
    .chip-select { display: block; flex: 1 1 100%; }
    .toolbar .search-box { flex: 1 1 0; min-width: 0; max-width: none; }
    .toolbar .seg button { padding-left: 9px; padding-right: 9px; }
    /* With a category box: category + status buttons on one row, search full width below. */
    .toolbar:has(.chip-select) .chip-select { flex: 1 1 0; min-width: 0; order: 0; }
    .toolbar:has(.chip-select) .seg { order: 1; }
    .toolbar:has(.chip-select) .search-box { flex: 1 1 100%; order: 2; }
}

/* In the branch menu a shared product that cannot be deleted keeps an empty trash slot; columns line up on every row. */
.row-actions .icon-slot { display: inline-block; width: 32px; height: 32px; flex: none; }
@media (max-width: 760px) { .row-actions .icon-slot { width: 40px; height: 40px; } }

/* Branch menu: shared product / branch-only product mark. */
.owner-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: .78rem; font-weight: 500; white-space: nowrap; }
.owner-tag .icon { width: 12px; height: 12px; }
.owner-tag.is-local { color: var(--accent); }
/* "Manage menu": bulk actions for the branch menu, a single button + small list to the right of the search row. */
.menu-manage { position: relative; margin-left: auto; }
.menu-manage > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.menu-manage > summary::-webkit-details-marker { display: none; }
.menu-manage > summary .icon:last-child { width: 14px; height: 14px; color: var(--text-3); }
.menu-manage-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(320px, calc(100vw - 32px)); padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 14px 34px rgb(0 0 0 / .3); }
.menu-manage-pop form { margin: 0; }
.menu-manage-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.menu-manage-item:hover, .menu-manage-item:focus-visible { background: var(--surface-2); text-decoration: none; }
.menu-manage-item .icon { width: 17px; height: 17px; margin-top: 2px; color: var(--text-3); flex: none; }
.menu-manage-item b { display: block; font-weight: 600; font-size: .9rem; }
.menu-manage-item small { display: block; margin-top: 2px; color: var(--text-3); font-size: .78rem; }
.menu-manage-item.is-danger b, .menu-manage-item.is-danger .icon { color: var(--danger); }
@media (max-width: 760px) {
    /* Row 1: category box + status; row 2: search + "Manage menu" (icon only). */
    .toolbar:has(.menu-manage) .search-box { flex: 1 1 calc(100% - 90px); order: 2; }
    .menu-manage { order: 3; margin-left: 0; flex: none; }
    .menu-manage > summary { height: 42px; padding: 0 12px; }
    .menu-manage > summary .label-wide { display: none; }
    /* Little room in the row: tap the product name to edit; the pencil and empty placeholder are hidden (the trash stays). */
    [data-sortable] .row-actions a.icon-button[href*="/products/edit/"], [data-sortable] .row-actions .icon-slot { display: none; }
}

/* Plan label (bottom left) and the thin band in the last days of the trial. */
.plan-banner.is-slim { padding-top: 7px; padding-bottom: 7px; font-weight: 600; }
.plan-banner.is-slim .icon { display: none; }

/* Branch picker / day boxes: the panel's shared checkbox look (instead of the raw browser box) */
.hours-branches .pick-row { padding: 12px 14px; align-items: center; }
.hours-branches .pick-state { margin-left: 30px; }

/* Descenders (g/y/p) in headings must not be clipped: clipped headings (ellipsis / line clamp) get a line height that leaves room for them */
body.panel .bar-title h1 { padding-bottom: 0.08em; }
@media (max-width: 900px) {
    body.panel .bar-title h1 { line-height: 1.3; }
}

/* Top bar simplified + trial row.
   Trial / plan status: the first row of the account section; no box, light text. The separator sits ABOVE it so it does not look like a menu item. */

/* Theme row in the account menu: shows "Light theme" in the dark theme and "Dark theme" in the light one (the icon follows the same logic). */
.menu-item.mode-toggle { width: 100%; }
.menu-item .theme-to-light { display: none; }
:root[data-theme="dark"] .menu-item .theme-to-light { display: inline; }
:root[data-theme="dark"] .menu-item .theme-to-dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .menu-item .theme-to-light { display: inline; }
    :root:not([data-theme="light"]) .menu-item .theme-to-dark { display: none; }
}
.menu-item .menu-count { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #141a33; font-size: .72rem; font-weight: 700; text-align: center; }
.user-dot { position: absolute; top: 14px; left: 40px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--side-bg, var(--surface)); pointer-events: none; }

/* Top bar (desktop too): live menu · "⋯" · main action. Secondary buttons are in the "⋯" list (panel.js data-bar-more). */
.bar-actions > .bar-more { order: 5; }
.bar-actions > .bar-keep { order: 6; }
@media (min-width: 761px) {
    .bar-actions > :not(.bar-keep):not(.bar-more):not(.live-pill) { display: none !important; }
    .bar-more:not([hidden]) { display: inline-grid; }
    .bar-sheet-dim { background: transparent; }
    .bar-sheet { left: auto; right: 24px; bottom: auto; top: 66px; width: 300px; max-height: 70vh; padding: 6px; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgb(0 0 0 / .3); }
    .bar-sheet-grab { display: none; }
    .bar-sheet-item { padding: 10px 12px; font-size: .92rem; }
}
.bar-sheet-item .note { display: block; margin-top: 2px; color: var(--text-3); font-size: .76rem; font-weight: 400; }
.bar-sheet-item > span { display: flex; flex-direction: column; }

/* Categories (branch view): order note and a locked toggle on categories hidden everywhere. */
/* One quiet note style for every page note (list-note, sample-note, order-note): grey text, no box. */
.order-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 2px 14px; padding: 0; color: var(--text-2); font-size: .85rem; }
.order-note .link-button { margin-left: auto; color: var(--accent); font-weight: 600; font-size: .84rem; }
.switch-btn.is-locked { opacity: .45; cursor: not-allowed; }
/* Category edit: the shared/branch-only note has the same width as the form card, above the card. */
/* Shared record note (_SharedNote): small count pill, one sentence, names folded from 4; read-only adds "Edit for all branches". */
.shared-note { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 0.86rem; color: var(--text-2); line-height: 1.5; }
.shared-pill { flex: none; padding: 1px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); font-size: 0.74rem; font-weight: 600; white-space: nowrap; line-height: 1.7; }
.shared-note.is-readonly .shared-pill { border-color: var(--accent); color: var(--accent); }
.shared-text { flex: 1; min-width: 0; }
.shared-text p { margin: 0; }
.shared-names { color: var(--text-3); }
.shared-text p .shared-names::before { content: " · "; }
.shared-more { display: block; margin-top: 2px; font-size: .8rem; }
.shared-note { box-sizing: border-box; }
/* Above a narrow form card the note takes the card's width, so the two line up. */
.shared-note:has(+ .form-card) { max-width: 620px; }
.shared-note:has(+ .form-card.wide) { max-width: 760px; }
.shared-edit { flex: none; align-self: center; }
@media (max-width: 640px) { .shared-note { flex-wrap: wrap; } .shared-edit { width: 100%; justify-content: center; } }
.form-scope-hint { margin: 0 0 14px; }
/* Disabled shared form (branch view): stays readable, nothing reacts. */
.form-fieldset { display: contents; }
.form-fieldset:disabled input:not([type=checkbox]):not([type=radio]):not([type=file]), .form-fieldset:disabled textarea, .form-fieldset:disabled select { opacity: .75; }
.form-fieldset:disabled .chip-check, .form-fieldset:disabled .check-line { opacity: .7; }
.form-fieldset:disabled .button, .form-fieldset:disabled .link-button, .form-fieldset:disabled .icon-button { opacity: .45; pointer-events: none; }
.form-fieldset:disabled .uploader-drop { pointer-events: none; }

/* Trial status: subtle text next to the role in the account row (no separate row or box) */
.user-meta .user-plan { font-style: normal; color: var(--side-dim); white-space: nowrap; }
.user-meta .user-plan i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px; border-radius: 50%; background: var(--gold); }
.user-meta .user-plan.is-soon { color: var(--gold); font-weight: 600; }
.user-meta .user-plan.is-warn, .user-meta .user-plan.is-ended { color: var(--danger); font-weight: 600; }
.user-meta .user-plan.is-warn i, .user-meta .user-plan.is-ended i { background: var(--danger); }
.user-trigger .user-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Options & extras: one card per group; name, scope label and group toggle in the header; extras (rows) below */
.opt-groups { display: grid; gap: 16px; }
.opt-group { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.opt-group-head { border-radius: 14px 14px 0 0; }
.opt-items .row:last-child { border-radius: 0 0 14px 14px; }
.opt-items .price-opts { position: relative; z-index: 5; }
.opt-group[hidden] { display: none; }
.opt-group-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.opt-group-main { flex: 1; min-width: 0; }
.opt-group-title { display: block; color: var(--text); font-weight: 600; font-size: 1rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.opt-group-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.opt-group-head .row-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; color: var(--text-3); font-size: .8rem; }
.opt-group.is-off .opt-group-title, .opt-group.is-off .opt-items { opacity: .55; }
.opt-items { border-top: 0; }
.opt-items .row { padding: 11px 16px; flex-wrap: wrap; row-gap: 4px; }
.opt-items .row:last-child { border-bottom: 0; }
.opt-items .row-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.opt-items .row-title { font-weight: 500; }
.opt-items .row.is-hidden .row-title, .opt-items .row.is-hidden .opt-amount { color: var(--text-3); }
.opt-items .row.is-soldout .row-title { text-decoration: line-through; text-decoration-color: var(--text-3); }
.opt-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.opt-price .price-base { flex-basis: auto; }
.opt-flags { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; }
.opt-flag { color: var(--text-3); font-size: .78rem; }
.opt-flag.is-warn { color: var(--gold); font-weight: 500; }
@media (max-width: 640px) {
    .opt-group-head { padding: 12px 14px; align-items: flex-start; }
    .opt-items .row { padding: 10px 14px; }
    .opt-items .row-main { flex-basis: 100%; }
    .opt-items .row-price { margin-left: 0; margin-right: auto; align-items: flex-start; padding: 0; }
}

/* "Also at …" when it is a link: the same calm label, underlined on hover (switches to that branch) */
a.owner-tag.owner-link { text-decoration: underline dotted; text-underline-offset: 3px; color: var(--text-3); }
a.owner-tag.owner-link:hover { color: var(--text); text-decoration-style: solid; }
.sold-in.owner-pop { color: var(--text-3); }

/* Settings > When a branch is closed: two options (A / B), the selected one has a gold border */
.closed-style-form { display: grid; gap: 10px; margin-top: 12px; }
.choice-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.choice-row:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.choice-row.is-selected, .choice-row:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.choice-row input { margin-top: 3px; flex: none; }
.choice-row b { display: block; font-weight: 500; color: var(--text); }
.choice-row b { font-size: .9rem; }
.choice-row small { display: block; margin-top: 1px; color: var(--text-3); font-size: .8rem; line-height: 1.4; }

.check .check-hint { display: block; margin-top: 2px; color: var(--text-3); font-size: .84rem; font-weight: 400; }

/* Calm filter bar (all lists), card header, announcements.
   Filter: borderless thin search (underline), underlined tabs, branch choice that looks like text. On phones the row wraps, no horizontal scroll.
   Card headings use the body font (instead of heavy serif), the panel's calm style. */
.toolbar { gap: 6px 22px; margin-bottom: 14px; }
.search-box { flex: 1 1 220px; max-width: 340px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.search-box:focus-within { border-color: var(--accent); box-shadow: none; }
.search-box input[type="search"], .search-box input[type="search"]:focus { padding: 8px 0; font-size: 0.92rem; }
.seg { gap: 16px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.seg button, .seg a { padding: 8px 0 6px; border-radius: 0; border-bottom: 2px solid transparent; color: var(--text-3); font-weight: 500; }
.seg button:hover, .seg a:hover { color: var(--text); }
.seg button.is-active, .seg a.is-active { background: transparent; color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.seg button span { margin-left: 2px; color: var(--text-3); font-size: 0.8rem; font-weight: 500; }
.filter-select { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 0.86rem; white-space: nowrap; }
.filter-select select { width: auto; max-width: 220px; padding: 6px 26px 6px 4px !important; border: 0; background-color: transparent !important; color: var(--text); font-weight: 600; font-size: 0.88rem; background-position: right 4px center !important; }
.filter-select select:focus { box-shadow: none; outline: 2px solid var(--accent-ring); }
/* Business-page branch filter: the shared branch pop-up behind a filter-style button (no plain select for branches). */
.branch-filter .sold-in { position: relative; display: inline-flex; align-items: center; gap: 2px; color: var(--text); }
.branch-filter .sold-in-btn { max-width: 220px; padding: 6px 0 6px 4px; font-weight: 600; font-size: 0.88rem; color: var(--text); text-decoration: none; white-space: nowrap; }
.branch-filter .sold-in > svg { width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }
/* Filter-mode branch picker: a thin underline shows it is clickable (same family as the underlined list filters). */
.branch-filter:not(.is-field) .sold-in-btn { padding: 2px 0 1px 0; border-bottom: 1px solid var(--text-3); border-radius: 0; transition: border-color 0.15s; }
.branch-filter:not(.is-field) .sold-in-btn:hover, .branch-filter:not(.is-field) .sold-in-btn[aria-expanded="true"] { color: var(--text); border-bottom-color: var(--accent); }
/* Field mode (a branch choice inside a form, e.g. "Branch to copy"): looks like the other fields. */
.branch-filter.is-field { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; white-space: normal; }
.branch-filter.is-field > span:first-child { color: var(--text-3); font-size: 0.82rem; font-weight: 500; }
.branch-filter.is-field .sold-in { display: flex; justify-content: space-between; width: 100%; max-width: 340px; padding: 0 12px; border: 1px solid var(--input-line); border-radius: 10px; background: var(--surface); transition: border-color 0.15s; }
.branch-filter.is-field .sold-in:hover { border-color: var(--accent); }
.branch-filter.is-field .sold-in-btn { flex: 1; max-width: none; padding: 10px 0; text-align: left; font-weight: 500; font-size: 0.92rem; }
button.sold-pop-row { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.sold-pop-row.is-current { color: var(--gold); font-weight: 600; }
.sold-pop-row.is-current .sold-pop-go { color: var(--gold); }
@media (max-width: 640px) {
    .search-box { flex-basis: 100%; max-width: none; }
    .toolbar { gap: 4px 18px; }
}

.card-title { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; }

.ann-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: stretch; max-width: 1100px; }
.ann-cols > .card { margin: 0; }
.ann-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); gap: 0 12px; }
.ann-dates input { min-width: 0; max-width: 100%; }
.ann-count { color: var(--text-3); }
.ann-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ann-preview { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ann-preview-label { display: block; margin-bottom: 6px; color: var(--text-3); font-size: 0.78rem; font-weight: 600; }
.ann-preview-band { display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.88rem; font-weight: 600; }
.ann-preview-band > .icon { flex: none; width: 15px; height: 15px; }
.ann-preview-band > [data-ann-preview] { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-preview-x { margin-left: auto; flex: none; opacity: 0.6; font-size: 1.1rem; line-height: 1; }
.ann-rows .row-title.plain { white-space: normal; }
.row.is-dim .row-title { color: var(--text-3); }
.order-note.is-warn { color: var(--warn); }
@media (max-width: 900px) { .ann-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .ann-dates { grid-template-columns: minmax(0, 1fr); } }

/* All businesses: the card says which level you are on; group announcements. */
.venue-logo.is-grid { background: rgba(255, 255, 255, 0.08); color: var(--gold); }
.venue-logo.is-grid .icon { width: 17px; height: 17px; }
.menu-item.pop-overview .pop-grid { display: grid; place-items: center; flex: none; color: var(--gold); }
.menu-item.pop-overview .pop-grid .icon { width: 15px; height: 15px; }
.side-back { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 6px 10px; color: var(--side-dim); font-size: 0.82rem; text-decoration: none; border-radius: 8px; }
.side-back:hover { color: inherit; background: rgba(255, 255, 255, 0.05); }
.side-back .icon { width: 14px; height: 14px; flex: none; }
.side-back span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-tag.is-group { color: var(--warn); font-weight: 600; }
.row-actions .icon-slot.is-lock { display: inline-grid; place-items: center; color: var(--text-3); }
.row-actions .icon-slot.is-lock .icon { width: 15px; height: 15px; }
.row-text-btn { background: none; border: 0; padding: 6px 4px; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--text-2); cursor: pointer; text-decoration: none; white-space: nowrap; }
.row-text-btn:hover { color: var(--text); }
.is-warn-text { color: var(--warn); }
.undo-bar { display: flex; align-items: center; gap: 14px; max-width: 1100px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.88rem; }
.undo-bar .link-button { margin-left: auto; color: var(--accent-text); font-weight: 600; }
.bc-pick-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 6px; }
.bc-pick-head .search-box { flex: 1 1 200px; }
.bc-all { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; white-space: nowrap; cursor: pointer; }
.bc-list { list-style: none; margin: 0; padding: 0; }
.bc-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.bc-name { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.bc-name input { margin-top: 3px; flex: none; }
.bc-name b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.bc-warn { display: block; margin-top: 2px; color: var(--warn); font-size: 0.8rem; line-height: 1.35; }
.bc-one { flex: none; color: var(--text-3); font-size: 0.8rem; }
.bc-branches { position: relative; flex: none; }
.bc-branches .chip-btn { display: inline-flex; align-items: center; gap: 4px; }
.bc-branches .chip-btn .icon { width: 12px; height: 12px; }
.bc-detail { max-width: 1100px; }
.bc-detail-text { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; }
.bc-detail-actions { margin-top: 14px; }
.content-inner > .danger-zone { max-width: 1100px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 520px) {
    .bc-row { flex-wrap: wrap; }
    .bc-branches, .bc-one { margin-left: 26px; }
}
.menu-item.pop-overview .pop-two { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.biz-pop .menu-item.pop-overview .pop-two small { margin-left: 0; }
.ann-preview .hint { display: block; }
.ann-preview + .field { margin-top: 18px; }
.bc-list { max-height: min(52vh, 460px); overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .bc-list { max-height: none; overflow: visible; } }
/* Same slim scrollbar as the side menu, not the thick system bar with arrows; rows keep a gap from it. */
.bc-list { padding-right: 10px; }
/* Chromium draws arrow buttons once scrollbar-width is set, so the standard properties are only for browsers without the webkit hooks (Firefox). */
@supports not selector(::-webkit-scrollbar) { .bc-list { scrollbar-width: thin; scrollbar-color: var(--input-line) transparent; } }
.bc-list::-webkit-scrollbar { width: 6px; }
.bc-list::-webkit-scrollbar-track { background: transparent; }
.bc-list::-webkit-scrollbar-thumb { background: var(--input-line); border-radius: 999px; }
.bc-list::-webkit-scrollbar-button { display: none; height: 0; }
.bc-pick .button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media (max-width: 900px) { .bc-list { padding-right: 0; } }
/* One right-hand column for every business row: the branch picker fills it, a single-branch business shows a quiet "1 branch" starting at the same edge. */
.bc-list { padding-right: 14px; }
.bc-branches, .bc-one { flex: none; width: 150px; }
.bc-branches > summary { display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 4px 10px 4px 11px; }
.bc-one { box-sizing: border-box; padding: 4px 11px; border: 1px solid transparent; color: var(--text-3); font-size: 0.78rem; font-weight: 500; }
@media (max-width: 520px) { .bc-branches, .bc-one { width: auto; } .bc-branches > summary { display: inline-flex; width: auto; } }

/* Customer billing: its own grid and card names; the Console plan form keeps .plan-grid / .plan-card / .plan-price. One column on phones. */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.offer-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 520px) { .offer-grid { grid-template-columns: minmax(0, 1fr); } }
/* Activity: a long name wraps instead of widening the page on phones. */
@media (max-width: 760px) { .rows .row-title.plain { white-space: normal; overflow-wrap: anywhere; } }

/* Quiet "sample menu" note (Today and All branches): one grey line with a text link, no box, no icon. */
.sample-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 2px 14px; font-size: .85rem; color: var(--text-2); }
.sample-note .button { padding: 0; border: 0; background: none; box-shadow: none; min-height: 0; font-size: inherit; font-weight: 500; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.sample-note .button:hover { color: var(--text); background: none; }
.sample-note strong { margin-right: 6px; color: var(--text-2); font-weight: 600; }
/* The empty-menu line is a call to action, so its link uses the same amber as the other links on Today. */
.sample-note.setup-note .button { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.sample-note.setup-note .button::after { content: " \2192"; }
.sample-note.setup-note .button:hover { color: var(--accent-text); text-decoration: underline; }
/* Small "Sample" tag on list rows loaded with the sample menu. */
.sample-tag { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; font-weight: 500; color: var(--text-3); white-space: nowrap; }

/* "Sample" tag as a button with a small "Keep this item" box; "Keep all" is a text link like "Remove sample menu". */
.sample-note .sample-keep { display: inline; margin: 0; }
.sample-pop { position: relative; display: inline-block; }
.sample-pop > summary { list-style: none; cursor: pointer; gap: 4px; }
.sample-pop > summary::-webkit-details-marker { display: none; }
.sample-tag.is-button:hover, .sample-pop[open] > summary { color: var(--text); border-color: var(--text-3); }
.sample-pop-box { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: grid; gap: 6px; width: 250px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,.35)); font-size: .85rem; }
.sample-pop-box .button { justify-self: start; padding: 5px 14px; font-size: .85rem; }

/* Console two-step verification */
.twofa-qr { width: 200px; height: 200px; padding: 8px; background: #fff; border-radius: 8px; margin: 12px 0; }
.twofa-qr svg { width: 100%; height: 100%; display: block; }
.recovery-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; max-width: 360px; margin: 12px 0 20px; }
.recovery-codes code { font-size: 1.05rem; letter-spacing: .04em; }
.inline-code-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 320px; }
.inline-code-form .field { width: 100%; margin: 0; }

/* Console signed-in devices */
.sess-list { list-style: none; padding: 0; margin: 12px 0 16px; display: flex; flex-direction: column; }
.sess-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line, rgba(255,255,255,.08)); }
.sess-row:first-child { border-top: 0; }
.sess-main { min-width: 0; overflow-wrap: anywhere; }
.sess-main .console-badge { margin-left: 8px; }

.auth-back { margin-top: 20px; }

.console-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Pager (Console and Ops lists): slim, numbers + Previous/Next, "26-50 of 134" on the left */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 4px 2px; }
.pager-info { margin: 0; color: var(--text-3); font-size: 0.85rem; }
.pager-solo { padding: 12px 4px 0; }
.pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pager-num, .pager-step { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid transparent; color: var(--text-2, var(--text)); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.pager-step { border-color: var(--line); background: var(--surface); }
.pager a.pager-num:hover, .pager a.pager-step:hover { border-color: var(--accent); color: var(--text); }
.pager-num.is-current { background: var(--accent); color: var(--accent-ink, #1c1a10); }
.pager-step.is-off { opacity: .4; }
.pager-gap { padding: 0 4px; color: var(--text-3); }
@media (max-width: 560px) { .pager { justify-content: center; } .pager-info { width: 100%; text-align: center; } }
/* Inside a console list card the rows run edge to edge, so the pager gets its own side padding */
.console-panel .pager { padding: 14px 20px; border-top: 1px solid var(--line); }
.console-panel .pager-solo { padding: 14px 20px; border-top: 1px solid var(--line); }

/* Console look: list cards use the full width like the stat cards; names stay in the text color (accent on hover); stat cards get a small icon */
.console-panel.console-panel-wide { max-width: none; }
.console-list li a:hover b { color: var(--accent-text); }
.console-stat { position: relative; }
.console-stat-icon { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; color: var(--accent-text); }
.console-stat-icon svg { width: 16px; height: 16px; }
.console-stat.is-alert .console-stat-icon { background: color-mix(in srgb, #ee7a7a 16%, transparent); color: #ee7a7a; }

/* Panel sessions page: people below the signed-in manager, with their open devices underneath. */
.sess-page { display: flex; flex-direction: column; gap: 16px; }
.sess-page .card .sess-list:last-child { margin-bottom: 0; }
.sess-person { align-items: flex-start; }
.sess-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sess-filter { margin-bottom: 14px; }
.sess-sub { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.sess-sub li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--muted, #8a948f); }
@media (max-width: 640px) { .sess-person { flex-direction: column; } .sess-actions { justify-content: flex-start; } }

/* Campaign form: offer row, tree selector, weekly hours */
.cs-offer { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 0 12px; }
.cs-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
.cs-hours { display: flex; align-items: center; gap: 8px; }
.cs-hours input { width: auto; }
[data-cs-form][data-effect="BadgeOnly"] [data-cs-value],
[data-cs-form][data-effect="BadgeOnly"] [data-cs-priced] { display: none; }
.cs-whole { margin-bottom: 10px; font-weight: 600; }
.cs-search { margin-bottom: 8px; }
.cs-cat { border-top: 1px solid var(--line); }
.cs-cat:first-of-type { border-top: 0; }
.cs-cat-head { display: flex; align-items: center; gap: 4px; padding: 6px 0; }
.cs-cat-head .check { font-weight: 600; }
.cs-open { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border: 0; background: none; color: var(--text-3); cursor: pointer; border-radius: 6px; }
.cs-open:hover { background: var(--surface-2); }
.cs-open .icon { width: 14px; height: 14px; transition: transform 0.15s; }
.cs-open[aria-expanded="true"] .icon { transform: rotate(180deg); }
.cs-count { margin-left: auto; color: var(--text-3); font-size: 0.8rem; white-space: nowrap; }
.cs-prods { list-style: none; margin: 0 0 6px 30px; padding: 0; }
.cs-prods li { padding: 3px 0; }
.cs-summary { margin: 12px 0 0; padding: 9px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.84rem; }
.cs-summary:empty { display: none; }
@media (max-width: 520px) { .cs-offer, .cs-tr { grid-template-columns: minmax(0, 1fr); } }
.cs-tree .check { margin-bottom: 0; }

/* Group campaigns (All businesses › Campaigns) */
.cb-list { max-height: none; overflow: visible; }
.cb-row { flex-wrap: wrap; }
.cb-products { flex: 1 0 100%; margin-left: 28px; min-width: 0; }
.cb-prod-details > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; max-width: 100%; }
.cb-prod-details > summary::-webkit-details-marker { display: none; }
.cb-prod-details > summary .icon { width: 12px; height: 12px; flex: none; }
.cb-picked { min-width: 0; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 0.8rem; }
.cb-prod-body { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.cb-tools { margin-top: 10px; display: grid; gap: 6px; justify-items: start; }
.cb-warn, .cb-empty { margin: 6px 0 0; color: var(--warn); font-size: 0.82rem; }
.cb-currency { margin: 10px 0 14px; }
.cb-detail { margin-top: 8px; }
.cb-detail > summary { cursor: pointer; color: var(--text-3); font-size: 0.82rem; }
.cb-biz { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.cb-biz li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.86rem; }
@media (max-width: 900px) { .cb-products { margin-left: 0; } }
/* Group form polish: room before the businesses card, and no doubled line under the search box. */
.ann-form .cb-pick { max-width: 1100px; margin-top: 32px; }
/* Business pickers (group announcements and campaigns): the search underline is the divider above the first business row. */
.bc-pick .bc-pick-head { margin-bottom: 0; }
.bc-pick .bc-list > .bc-row:first-child { border-top: 0; }
.cb-pick .bc-list { border-bottom: 0; }
.bc-pick .bc-pick-head + .bc-list { margin-top: 4px; }
/* A list straight after a search bar: the search underline is the divider, so the list drops its own top line (no doubled lines). */
.toolbar:has(.search-box) ~ .rows { border-top: 0; }
/* Same for a framed note (order note, branch note) right above a list: the frame already separates them. */
.order-note ~ .rows { border-top: 0; }
/* A framed block right under the search underline gets a little more room so the two edges do not read as a double line. */
.toolbar:has(.search-box) ~ .order-note, .toolbar:has(.search-box) ~ .opt-groups { margin-top: 22px; }
/* Branch menu setup: the global text-input width squeezed the product name to nothing; keep the price box a fixed width. */
.setup-item input.setup-price[type="text"] { flex: none; width: 110px; }
.setup-item .setup-base { flex: none; }
@media (max-width: 560px) { .setup-item input.setup-price[type="text"] { width: 100%; } }

/* Branch groups page: the branch picker rows keep their own padding (the stock screen's zero padding applies only inside its groups), ticked rows are tinted, and the "move to" line gets its own divider. */
.pick-row:has(input:checked) { background: var(--accent-soft); }
.pick-list li + li .pick-row, .pick-list .pick-row { border-radius: 0; }
.pick + .group-move, .group-card form > .group-move { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.group-move { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; }
.group-move label { grid-column: 1 / -1; font-weight: 600; }
.group-move select { max-width: none; }
.pick-list + .hint { margin-top: 10px; }
.group-new input { flex: 1 1 auto; }
@media (max-width: 560px) { .group-new { flex-wrap: wrap; } .group-new input { max-width: none; flex-basis: 100%; } .group-rename { flex-wrap: wrap; } .group-rename input { max-width: none; flex-basis: 100%; } }
/* Branch groups list: the row's actions line up with the name box (not with the middle of name + "n branches"). */
.group-card .row { align-items: flex-start; }
.group-card .row-actions { align-self: flex-start; display: flex; align-items: center; min-height: 46px; }
.group-card .group-rename { min-height: 46px; }

/* Shared "which branches" field (_BranchAudience): chips, one result sentence, and a search window from 9 branches */
.audience p.hint.aud-result { margin: 2px 0 4px; line-height: 1.5; }
.aud-result.is-error { color: var(--danger); }
.audience p.hint.aud-extra { margin: 0 0 4px; line-height: 1.5; color: var(--text-3); }
.aud-use-all { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.aud-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--input-line); border-radius: 999px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.aud-chip em { font-style: normal; font-size: 0.74rem; font-weight: 500; color: var(--text-3); }
.aud-chip:hover { border-color: var(--accent); color: var(--text); }
.aud-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.aud-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.aud-chip.aud-add { border-style: dashed; }
.aud-chip svg { width: 14px; height: 14px; }
dialog.aud-dialog { padding: 20px; }
.aud-search { max-width: none; margin: 12px 0 8px; }
.aud-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; margin-bottom: 6px; font-size: 0.86rem; }
.aud-tools .link-button, .aud-section header .link-button, .aud-foot .link-button { color: var(--accent-text); font-weight: 600; font-size: 0.84rem; }
.aud-only { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text-2); cursor: pointer; }
.aud-list { max-height: min(50vh, 400px); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.aud-section header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 0.84rem; }
.aud-section + .aud-section header { border-top: 1px solid var(--line); }
.aud-row + .aud-row { border-top: 1px solid var(--line); }
.aud-list > p { margin: 0; padding: 14px; }
.aud-foot { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.aud-foot .muted { margin-right: auto; font-size: 0.86rem; }
@media (max-width: 480px) { .aud-tools { flex-wrap: wrap; } }
.aud-picked { display: contents; }
.aud-picked-chip { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.aud-picked-chip em { font-size: 0.95rem; line-height: 1; color: inherit; opacity: 0.7; }
.aud-picked-chip:hover em { opacity: 1; }
.bc-branches.is-empty .chip-btn { border-color: var(--danger); color: var(--danger); }

/* Segmented choice with one note per option (Settings closed style, option group, team role): panel.js "Choice notes". */
.choice-field .seg-choice { align-items: center; }
.choice-note { display: none; margin: 8px 0 0; color: var(--text-2); font-size: 0.86rem; line-height: 1.45; }
.choice-note.is-on { display: block; }
/* A fixed value shown where a choice would be (team role with one option, the branch of a branch invitation). */
/* A value the person cannot change (one possible role, a fixed branch): looks like a quiet, filled read-only field so it is not mistaken for a second label. */
.static-value { margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(127, 127, 127, 0.08); font-weight: 500; color: var(--text); }
.saved-note { display: inline-flex; align-items: center; gap: 4px; margin: 0 8px 0 6px; color: var(--success, #3fb27f); font-size: 0.8rem; font-weight: 600; }
.saved-note[hidden] { display: none; }
.saved-note svg { width: 14px; height: 14px; }
.form-section .switch { margin-top: 12px; }
[data-role-branches][hidden] { display: none; }
/* Browser autofill keeps the field colours (Chrome otherwise paints it light blue). */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
    caret-color: var(--text);
    transition: background-color 9999s;
}

/* Status pages: the big faded code is enough; the small code chip only shows where there is no big code. */
.status-card[data-code] .status-chip { display: none; }
/* Tick list: names calmer; an unticked row fades so the ticked ones stand out. */
.check-list-name { color: var(--text-2); font-size: 0.88rem; }
.check-list-row:has(input:checked) .check-list-name { color: var(--text); }
.check-list-row:not(:has(input:checked)) { opacity: 0.6; }
/* Small list notes stay readable. */
.list-note { color: var(--text-2); }
.field .seg-choice { align-self: flex-start; width: fit-content; max-width: 100%; }


/* List identity (devir/UI_AUDIT K8): a bare icon or round avatar on the left, a coloured status/role pill, and a second quiet line for "where and when". */
.row-icon { display: grid; place-items: center; flex: none; width: 28px; color: var(--accent-text); }
.row-icon svg { width: 20px; height: 20px; }
.row.is-hidden .row-icon { color: var(--text-3); }
.row-where { display: flex; flex-wrap: wrap; gap: 0 5px; margin-top: 2px; font-size: 0.8rem; color: var(--text-3); }
.ann-rows .badge, .team-rows .badge { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); }
.ann-rows .badge.green, .team-rows .badge.green { border-color: var(--green-line); }
.ann-rows .badge.amber, .team-rows .badge.amber, .ann-rows .badge.indigo, .team-rows .badge.indigo { border-color: transparent; }
.ann-rows .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.row-thumb.avatar { width: 40px; height: 40px; border-radius: 50%; font-weight: 700; font-size: 0.95rem; }
.row-thumb.avatar.is-owner { background: var(--accent-soft); color: var(--accent-text); }
.row-thumb.avatar.is-manager { background: var(--green-soft); color: var(--green-fg); }
.row-thumb.avatar.is-staff { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }
.row-thumb.avatar.is-invited { background: transparent; color: var(--text-3); border: 1px dashed var(--input-line); }
.row-thumb.avatar .icon, .row-thumb.avatar svg { width: 18px; height: 18px; }

/* Activity (K8): day headings, a small action icon and the same pill/second-line pattern as the other lists. */
.activity-rows .badge { border-radius: 999px; border: 1px solid var(--line); }
.activity-rows .badge.green { border-color: var(--green-line); }
.activity-rows .badge.amber { border-color: transparent; background: var(--accent-soft); color: var(--accent-text); }
.activity-rows .badge.red { border-color: var(--danger-line); }
.day-head { list-style: none; margin: 18px 4px 4px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.day-head:first-child { margin-top: 4px; }
.activity-rows .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; font-size: 0.76rem; }
.activity-rows .badge svg { width: 13px; height: 13px; stroke-width: 2.4; }
.row-thumb.avatar.is-actor { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.activity-time { font-variant-numeric: tabular-nums; color: var(--text-3); font-size: 0.84rem; }

/* Grouped activity line: the "N changes" link opens a popup listing every edit (time and what changed). */
.activity-rows .link-button { color: var(--accent-text); font-weight: 600; font-size: 0.8rem; }
.event-list { list-style: none; margin: 14px 0 0; padding: 0; }
.event-list li { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.9rem; }
.event-list li:first-child { border-top: 0; }
.event-list time { flex: none; width: 4.4rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.event-list span { min-width: 0; overflow-wrap: anywhere; }

/* Activity: record name (quiet link) with its kind beside it, popup open-link and summary chips */
.activity-rows .row-title.plain{font-weight:500;font-size:.95rem}
.activity-rows .row-title.plain a{color:inherit;text-decoration:none}
.activity-rows .row-title.plain a:hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.row-kind{margin-left:8px;font-size:.76rem;font-weight:400;color:var(--text-3)}
.dialog .dialog-open-link{margin-left:8px;color:var(--accent-text);font-weight:600;font-size:.8rem;text-decoration:none}
.dialog .dialog-open-link svg{width:13px;height:13px;vertical-align:-2px}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.chip-row .badge{font-size:.76rem}

/* Activity filters: person, kind of event and days, in the same thin-underline family as the branch picker. */
.activity-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: -4px 0 14px; }
.activity-filters .filter-select select,
.activity-filters .filter-select input[type="date"] { width: auto; max-width: 200px; padding: 2px 22px 1px 0 !important; border: 0; border-bottom: 1px solid var(--text-3); border-radius: 0; background-color: transparent !important; color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 600; box-shadow: none; transition: border-color 0.15s; }
.activity-filters .filter-select input[type="date"] { padding-right: 0 !important; }
.activity-filters .filter-select select:hover, .activity-filters .filter-select input[type="date"]:hover, .activity-filters .filter-select select:focus, .activity-filters .filter-select input[type="date"]:focus { border-bottom-color: var(--accent); outline: none; }
.activity-filters .filter-select { gap: 8px; }
.activity-filters .link-button { color: var(--accent-text); font-weight: 600; font-size: 0.82rem; }
.toolbar .activity-filters { flex: 1 1 100%; }
.activity-filters .quick-days { display: inline-flex; gap: 14px; margin-left: 2px; }
.activity-filters .quick-days .link-button { color: var(--text-3); font-weight: 500; }
.activity-filters .quick-days .link-button:hover { color: var(--accent-text); }
.activity-filters .quick-days { flex: 1 1 100%; margin-top: -2px; }
.activity-filters .quick-days .clear-link { color: var(--accent-text); font-weight: 600; margin-left: 8px; }

/* Console list filters: search with two days, then chips (see devir/LIST_FILTER_PATTERNS.md). */
.console-search { flex-wrap: wrap; align-items: center; }
.console-day { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 0.86rem; white-space: nowrap; }
.console-day input[type="date"] { width: auto; height: 44px; }
.console-main .console-filters + .console-filters, .console-main .console-search + .console-filters { margin-top: 10px; }
.console-main .console-filters + .console-panel { margin-top: 14px; }
.console-panel > .console-search, .console-panel > .console-filters { margin-left: 18px; margin-right: 18px; }
.console-panel > .console-filters:last-of-type { margin-bottom: 14px; }

.console-record-link { display: inline; margin: 0; }
.console-record-link button { all: unset; cursor: pointer; color: var(--text); border-bottom: 1px dotted var(--text-3); }
.console-record-link button:hover, .console-record-link button:focus-visible { color: var(--accent, var(--text)); border-bottom-style: solid; }

/* Support (impersonation) banner: calm surface, amber edge; red edge in edit mode. */
.support-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 9px 12px 9px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 0.9rem; }
.support-banner.is-edit { border-left-color: var(--danger); }
.support-tag { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.support-banner.is-edit .support-tag { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.support-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.support-text small { color: var(--text-3); }
.support-text span small { margin-left: 6px; }
.support-banner form { margin: 0; flex: none; }
@media (max-width: 560px) { .support-banner { flex-wrap: wrap; } .support-banner form { margin-left: auto; } .support-text { flex-basis: 100%; order: 3; } }

/* Console search rows on narrow screens: the text box keeps its own full line, the day pickers and button wrap below it. */
.console-search input[type="search"] { flex: 1 1 260px; min-width: 0; }
.console-day input[type="date"] { flex: none; }
@media (max-width: 560px) {
    .console-search .console-day { flex: 1 1 100%; }
    .console-search .console-day span { flex: none; width: 44px; }
    .console-search .console-day input[type="date"] { flex: 1; min-width: 0; width: 100%; }
    .console-search .button { flex: 1 1 100%; }
}

/* Console list panels: air between the filter rows and the list below (the last filter row is the one followed by the list, whatever follows the list). */
.console-panel > .console-filters:has(+ .console-feed), .console-panel > .console-filters:has(+ .console-empty) { margin-bottom: 18px; }
.console-panel > .console-panel-head + .console-search { margin-top: 6px; }
.console-panel > .console-search + .console-filters { margin-top: 14px; }
.console-panel > .console-filters + .console-filters { margin-top: 10px; }

/* Activity page: air between the filters, the time-zone note and the first day, and a full-width search on phones. */
.activity-filters { margin-bottom: 18px; }
.activity-rows .day-head:first-child { margin-top: 14px; }
@media (max-width: 560px) {
    .toolbar:has(.activity-filters) .search-box { flex: 1 1 100%; }
}
.toolbar:has(.activity-filters) { row-gap: 12px; }

/* fix142: "Returns at 05:00" / "Stays sold out until you restore it" tags on sold-out product rows */
.return-tag { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--text-3); white-space: nowrap; }
.return-tag[hidden] { display: none; }
.return-tag.is-kept { color: var(--danger); font-weight: 600; }
.row:not(.is-soldout) .return-tag { display: none; }

/* A2.1 Sizes a branch offers: a tick per size on the branch price card and the product page */
.price-line.has-offer { grid-template-columns: auto 1fr auto auto; }
.price-here-size.is-off span, .price-line.is-off span, .price-line.is-off small { color: var(--text-3); text-decoration: line-through; }
.price-here-size:has(.size-offer:not(:checked)), .price-line:has(.size-offer:not(:checked)) { opacity: .6; }
.size-offer { width: 16px; height: 16px; margin: 0; accent-color: var(--accent, #f2b632); cursor: pointer; flex: none; }
.size-offer:disabled { cursor: not-allowed; }

/* A2.1b Sizes this branch offers (product page): one aligned row per size: tick, name, price */
.price-here-sizes { display: grid; gap: 0; max-width: 440px; }
.price-here-size { display: grid; grid-template-columns: 22px minmax(0, 1fr) 130px; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-2); color: var(--text); font-size: .95rem; }
.price-here-size:first-child { border-top: 0; }
.price-here-size > span { font-weight: 500; text-align: left; }
.price-here-size input[type="text"] { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }

/* A2.1c Product page sizes: stronger selectors (the generic field/label rules were winning) */
.field.price-here .price-here-sizes { display: grid; gap: 0; max-width: 460px; }
.field.price-here label.price-here-size { display: grid; grid-template-columns: 20px minmax(0, 1fr) 140px; align-items: center; gap: 14px; padding: 10px 2px; margin: 0; border-top: 1px solid var(--line-2); font-size: .95rem; font-weight: 500; color: var(--text); }
.field.price-here label.price-here-size:first-child { border-top: 0; }
.field.price-here label.price-here-size > span { width: auto; text-align: left; }
.field.price-here label.price-here-size input.size-offer { width: 18px; height: 18px; padding: 0; margin: 0; }
.field.price-here label.price-here-size input[type="text"] { width: 100%; height: 40px; text-align: right; font-variant-numeric: tabular-nums; }

/* fix146 Price section: one layout for every case (single branch, only here, all branches, shared product at a branch) */
.price-section .price-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.price-section .price-head h2 { margin: 0; }
.price-chip { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--text-3); }
.price-chip.is-scope { font-weight: 500; letter-spacing: 0; font-size: .8rem; color: var(--text-2); }
.price-section .seg-choice.is-locked { opacity: .55; pointer-events: none; }
.price-section .price-one { max-width: 260px; margin: 14px 0 0; }
.price-section input.num { text-align: right; font-variant-numeric: tabular-nums; }
.size-table { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.size-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 40px; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line-2); margin: 0; color: var(--text); }
.size-table > .size-row:first-child, #option-rows > .size-row:first-child { border-top: 0; }
.size-table .is-head + #option-rows > .size-row:first-child { border-top: 1px solid var(--line-2); }
.size-row.is-head { padding: 8px 14px; background: var(--surface-2); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.size-row .num { text-align: right; }
.size-row input[type="text"] { width: 100%; height: 40px; margin: 0; }
.size-row .size-error { grid-column: 1 / -1; margin: 0; }
.size-table.is-shared .size-row { grid-template-columns: 76px minmax(0, 1fr) 150px; cursor: default; }
.size-offer-cell { display: flex; justify-content: center; }
.size-row input.size-offer { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--accent, #f2b632); cursor: pointer; }
.size-name.is-locked { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.size-name.is-locked svg { width: 14px; height: 14px; color: var(--text-3); flex: none; }
.own-tag { color: var(--accent, #f2b632); font-size: .74rem; font-weight: 600; }
.size-table.is-shared .size-row:has(.size-offer:not(:checked)) .size-name, .size-table.is-shared .size-row:has(.size-offer:not(:checked)) input.num { opacity: .45; }
.price-section .size-add { margin-top: 12px; }
.price-foot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: .86rem; color: var(--text-3); }
.price-foot b { color: var(--text); font-weight: 600; }
.price-note { margin: 8px 0 0; font-size: .82rem; color: var(--text-3); }
.tr-sizes { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.tr-sizes-head { margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; }
.tr-sizes-head b { font-size: .95rem; color: var(--text); }
.tr-sizes-head span { font-size: .84rem; color: var(--text-3); }
.tr-size-row { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 0; margin: 0; border-top: 1px solid var(--line-2); font-weight: 500; color: var(--text-2); }
.tr-size-row:first-child { border-top: 0; }
.tr-size-row input { width: 100%; height: 40px; margin: 0; }
@media (max-width: 560px) {
  .size-row { grid-template-columns: minmax(0, 1fr) 110px 36px; gap: 8px; padding: 8px 10px; }
  .size-table.is-shared .size-row { grid-template-columns: 44px minmax(0, 1fr) 110px; }
  .tr-size-row { grid-template-columns: 1fr; gap: 6px; }
}

/* fix146b: "Use the all-branches price here" reads as an action */
[data-price-section] .link-button[data-price-use-all]{color:var(--accent,#f2b53a);text-decoration:underline;text-underline-offset:3px;font-weight:600}
[data-price-section] .link-button[data-price-use-all]:hover{filter:brightness(1.15)}

/* fix147 (UI_AUDIT K3): icons are bare, no coloured box anywhere (dialogs, console stat alert) */
.dialog-icon.accent { background: none; }
.console-stat.is-alert .console-stat-icon { background: none; }

/* fix147 (K15): Add branch, campaigns for every branch = one line, list opens on "Change" */
.disclose.every-branch .link-button { color: var(--accent); font-weight: 600; font-size: .84rem; }
.disclose.every-branch[open] .link-button { visibility: hidden; }
.every-branch-body { padding: 12px 12px 4px; border-top: 1px solid var(--line); }
.disclose.every-branch .disclose-title { display: flex; flex-direction: column; gap: 2px; }
.disclose.every-branch [data-check-count] { font-size: .82rem; color: var(--text-3); }

/* fix148: panel date / time pickers (datetime-picker.js). The real input stays in the form, hidden. */
.dt { position: relative; display: flex; gap: 8px; align-items: stretch; width: 100%; }
.dt[hidden] { display: none; }
.dt-source { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; padding: 0 !important; border: 0 !important; margin: 0 !important; left: 0; bottom: 0; }
.dt-part { position: relative; }
.dt-date { flex: 1 1 auto; min-width: 0; }
.dt-time { flex: 0 0 112px; }
.dt-date > svg, .dt-time > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-3); pointer-events: none; }
.dt-date .dt-input { padding-left: 40px; width: 100%; cursor: pointer; }
.dt-time .dt-input { width: 100%; text-align: center; cursor: pointer; }
.dt-time:first-child .dt-input { padding-left: 38px; text-align: left; }
.dt-time:first-child { flex: 0 0 132px; }
.dt.is-open .dt-input:focus { border-color: var(--accent); }
.dt-pop { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.38); }
.dt-pop.is-up { top: auto; bottom: calc(100% + 6px); }
.dt-cal { width: 306px; }
.dt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dt-head b { font-size: .95rem; text-transform: capitalize; }
.dt-navs { display: flex; gap: 4px; }
.dt-nav { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--text-2); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.dt-nav:hover { border-color: var(--accent); color: var(--text); }
.dt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dt-grid i { font-style: normal; font-size: .72rem; color: var(--text-3); padding: 4px 0; text-transform: capitalize; }
.dt-day { height: 36px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text); font-size: .9rem; cursor: pointer; padding: 0; }
.dt-day:hover { background: var(--surface-2); }
.dt-day.is-other { color: var(--text-3); opacity: .5; }
.dt-day.is-today { border-color: var(--accent); }
.dt-day.is-selected { background: var(--accent); color: #241a00; font-weight: 700; opacity: 1; }
.dt-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.dt-chip { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-2); padding: 3px 12px; font-size: .8rem; cursor: pointer; }
.dt-chip:hover { border-color: var(--accent); color: var(--text); }
.dt-times { width: 132px; max-height: 240px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 1px; right: auto; left: auto; }
.dt-time .dt-times { left: 0; }
.dt-slot { border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: center; padding: 7px 8px; font-size: .9rem; cursor: pointer; }
.dt-slot:hover { background: var(--surface-2); }
.dt-slot.is-selected { background: var(--accent); color: #241a00; font-weight: 700; }
.dt-slot-clear { color: var(--text-3); font-size: .82rem; }
@media (max-width: 520px) { .dt-cal { width: min(306px, calc(100vw - 56px)); } }
/* fix148b: filter-row date fields follow the underlined filter style (same as Person / Event) */
.activity-filters .filter-select .dt { width: auto; }
.activity-filters .filter-select .dt-date { flex: 0 0 150px; }
.activity-filters .filter-select .dt-date .dt-input { height: auto; padding: 2px 0 1px 24px !important; border: 0; border-bottom: 1px solid var(--text-3); border-radius: 0; background: transparent !important; color: var(--text); font-weight: 600; font-size: .9rem; box-shadow: none; }
.activity-filters .filter-select .dt-date .dt-input:focus { border-bottom-color: var(--accent); }
.activity-filters .filter-select .dt-date > svg { width: 15px; height: 15px; left: 2px; }

/* fix149: Settings sold-out reset = segmented choice; the time sits in the note of "On a schedule" */
.soldout-when.is-on { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.soldout-when .dt { width: auto; }
.soldout-when .dt-time { flex: 0 0 128px; }
/* QR page: both cards the same height, smaller code */
.qr-layout { align-items: stretch; }
.qr-preview { position: static; justify-content: center; }
.qr-box { max-width: 220px; }
/* Activity filter date: the underline hugs the text (was far below) */
.activity-filters .filter-select .dt, .activity-filters .filter-select .dt-part { align-self: center; height: auto; }
.activity-filters .filter-select .dt-date .dt-input { min-height: 0; line-height: 1.5; }
.activity-filters .filter-select .dt-date .dt-input { height: 26px !important; min-height: 0 !important; }
.activity-filters .filter-select .dt-date > svg { top: 50%; }
.qr-preview { justify-content: flex-start; }
.qr-preview .qr-box { margin-top: auto; }
.qr-preview .qr-downloads { margin-bottom: auto; }

/* fix149b: the sold-out time reads as part of the sentence: bold time with an underline, like the filter values */
.soldout-when.is-on { display: block; font-size: .95rem; color: var(--text-2); }
.soldout-when .dt { display: inline-flex; width: auto; vertical-align: baseline; margin-left: 4px; }
.soldout-when .dt-time, .soldout-when .dt-time:first-child { flex: 0 0 62px; }
.soldout-when .dt-time > svg { display: none; }
.soldout-when .dt-time .dt-input, .soldout-when .dt-time:first-child .dt-input { height: 26px !important; min-height: 0 !important; padding: 0 !important; text-align: center; border: 0; border-bottom: 1px solid var(--text-3); border-radius: 0; background: transparent !important; color: var(--text); font-weight: 700; font-size: 1rem; box-shadow: none; }
.soldout-when .dt-time .dt-input:focus { border-bottom-color: var(--accent); outline: none; }

/* fix150 (rule 11): value inside a sentence = bold white value with a yellow underline. Boxed fields everywhere else. */
.soldout-when .dt-time .dt-input, .soldout-when .dt-time:first-child .dt-input { border-bottom: 2px solid var(--accent) !important; }
.soldout-when .dt-time .dt-input:focus { border-bottom-color: var(--accent); }
.activity-filters .filter-select .dt-date .dt-input { border-bottom: 2px solid var(--accent) !important; }
.activity-filters .filter-select .dt-date .dt-input:focus { border-bottom-color: var(--accent); }
/* fix150b: filter rows (Person / Event / From / To) share one grey underline; yellow only while typing in a field */
.activity-filters .filter-select .dt-date .dt-input { border-bottom: 1px solid var(--text-3) !important; }
.activity-filters .filter-select .dt-date .dt-input:focus { border-bottom-color: var(--accent) !important; }

/* fix151 (K9, K10): one section-heading style in forms (same as card titles); two-column forms keep each card at its own height */
.form-section h2 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; margin-bottom: 4px; }
.ann-cols { align-items: start; }

/* fix152 (K7): one branch card for any number of branches: same size, rows always aligned, six at most */
.br-main { min-width: 0; }
.br-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-items: stretch; }
.br-grid.is-compact .br-card { display: flex; flex-direction: column; }
.br-grid.is-compact .br-cover { height: 96px; }
.br-grid.is-compact .br-cover img { width: 100%; height: 100%; object-fit: cover; }
.br-grid.is-compact .br-name { font-size: 1.15rem; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-grid.is-compact .br-body { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.br-grid.is-compact .br-open, .br-grid.is-compact .br-meta { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; }
.br-grid.is-compact .br-open span { color: var(--text-3); font-weight: 400; }
.br-grid.is-compact .br-meta { color: var(--text-3); min-height: 1.3em; }
.br-grid.is-compact .br-meta span + span::before { content: " · "; }
.br-grid.is-compact .br-links { margin-top: auto; padding-top: 8px; gap: 4px 10px; flex-wrap: nowrap; }
.br-grid.is-compact .br-links a { font-size: .82rem; white-space: nowrap; }
.br-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; color: var(--text-2); font-size: .9rem; }
.br-sum > b { color: var(--text); margin-right: 4px; }
.br-chip { border: 1px solid var(--line); border-radius: 999px; padding: 2px 11px; font-size: .82rem; color: var(--text-2); }
.br-chip.is-open { color: #6fd29a; border-color: rgba(111, 210, 154, .4); }
.br-chip.is-paused { color: #e0a23a; border-color: rgba(224, 162, 58, .4); }
.br-find { position: relative; margin-left: auto; min-width: 190px; }
.br-find input { width: 100%; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important; min-height: 30px !important; height: 30px; padding: 2px 4px; color: var(--text); }
.br-find input:focus { border-bottom-color: var(--accent) !important; outline: none; }
.br-find ul { position: absolute; right: 0; top: 34px; z-index: 20; list-style: none; margin: 0; padding: 6px; min-width: 240px; max-height: 300px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.br-find li a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.br-find li a:hover, .br-find li a:focus { background: var(--surface-2); }
.br-foot { margin: 12px 2px 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; color: var(--text-3); font-size: .88rem; }
.br-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.br-foot a:hover { text-decoration: underline; }
.br-grid.is-compact .br-meta { display: block; }
.br-grid.is-compact .br-meta span { display: inline; white-space: nowrap; }
.br-grid.is-compact .br-meta span:first-child { white-space: nowrap; overflow-wrap: normal; }
.br-find input:focus { box-shadow: none !important; outline: none !important; }

/* fix152e: quieter card: only the links are yellow; warnings = dim text + small amber dot; "no hours yet" is not bold */
.br-grid.is-compact .br-meta .is-warn { color: var(--text-2); }
.br-grid.is-compact .br-meta .is-warn::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #e0a23a; margin-right: 6px; vertical-align: 1px; }
.br-grid.is-compact .br-open.is-off b { font-weight: 400; color: var(--text-3); }

/* fix152f: card = badge only for rare serious cases; one status line; links under a thin rule */
.br-grid.is-compact .br-meta { display: none; }
.br-grid.is-compact .br-open { display: block; }
.br-grid.is-compact .br-open b { font-weight: 600; }
.br-grid.is-compact .br-open.is-off b { font-weight: 400; color: var(--text-3); }
.br-grid.is-compact .br-open span { color: var(--text-3); font-weight: 400; }
.br-grid.is-compact .br-open span::before { content: " · "; }
.br-grid.is-compact .br-open .br-flag::before { content: "· "; }
.br-grid.is-compact .br-open .br-flag::after { content: none; }
.br-grid.is-compact .br-open .br-flag { color: var(--text-2); }
.br-grid.is-compact .br-open .br-flag { background: none; }
.br-grid.is-compact .br-links { border-top: 1px solid var(--line); padding-top: 8px; margin-top: auto; }
.br-badge { position: absolute; z-index: 2; right: 10px; top: 10px; background: rgba(224, 162, 58, .94); color: #2a1c00; border-radius: 999px; padding: 2px 10px; font-size: .72rem; font-weight: 700; }

/* fix152g: quieter badge: dark translucent pill, thin amber text */
.br-badge { background: rgba(14, 22, 18, .72); color: #f0c565; border: 1px solid rgba(224, 162, 58, .45); font-weight: 600; backdrop-filter: blur(2px); }

/* fix152h: a little air between the status line and the rule above the links */
.br-grid.is-compact .br-open { padding-bottom: 8px; }
.br-grid.is-compact .br-links { padding-top: 9px; }

/* fix152i: badge = no pill, just a small amber dot + dim text on the photo */
.br-badge { background: none; border: 0; backdrop-filter: none; padding: 2px 4px; color: rgba(255, 255, 255, .85); font-weight: 500; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.br-badge::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #f0b43c; margin-right: 6px; vertical-align: 1px; }

/* fix152j: badge = same quiet dark pill as "Live", white text, small amber dot (readable on any photo) */
.br-badge { background: rgba(30, 38, 32, .66); border: 0; padding: 3px 10px; border-radius: 999px; color: #fff; font-weight: 600; text-shadow: none; }

/* fix153: tabular digits only where numbers line up in columns */
.row-price, .dt input, .dt-slot, .dt-cal, .console-table td, .console-table th, table td.num, .num, [data-tabular], input[type="time"], input[type="number"] { font-variant-numeric: tabular-nums; }

/* fix154 (K13): one "selected" look for every chip: amber soft fill + amber border + amber text (filter chips were solid white) */
.chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.chip.is-active span { color: inherit; opacity: 0.75; }
.chip:hover { border-color: var(--accent); }

/* fix155: a few short checkboxes (Badges: Sold out / New / Featured) sit next to each other; long lists (screen categories) keep the grid */
.check-grid.is-inline { display: flex; flex-wrap: wrap; gap: 10px 28px; }

/* fix156: "+ Add hours" sits next to the times (the closed-day row keeps "Set hours" on the right, as before) */
.hours-periods [data-add-period] { margin-left: 4px; }

/* fix157: Business page tabs (Business info / Menu rules) and the billing details card on Plan & billing. */
.settings-tabs { justify-self: start; }
.billing-details { max-width: 720px; margin-top: 22px; }

/* fix158: logo block (two small preview tiles) and one chevron on the business card and the account card. */
.logo-layout { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.logo-pair { display: flex; gap: 14px; }
.logo-variant { flex-direction: column; align-items: stretch; gap: 8px; width: 132px; }
.logo-tile { position: relative; display: grid; place-items: center; height: 96px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.logo-tile.is-light { background: #f6f1e7; }
.logo-tile.is-dark { background: #0c1511; border-color: #2a3b31; }
.logo-tile:hover, .logo-tile.is-over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.logo-tile .uploader-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; background: transparent; }
.logo-tile .uploader-empty { position: relative; gap: 0; padding: 0; }
.logo-tile .uploader-empty .icon { width: 22px; height: 22px; margin-bottom: 4px; }
.logo-tile .uploader-empty small { font-size: 0.74rem; font-weight: 600; }
.logo-tile.is-light .uploader-empty, .logo-tile.is-light .uploader-empty .icon { color: #6b6455; }
.logo-tile.is-dark .uploader-empty { color: #a9c4b3; }
.logo-foot { display: grid; gap: 2px; }
.logo-name { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.logo-actions { display: inline-flex; gap: 12px; }
.link-button { padding: 0; border: 0; background: none; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--accent-text); cursor: pointer; }
.link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-button[hidden] { display: none; }
.logo-hint { flex: 1; min-width: 200px; max-width: 360px; }
.venue-chevron .icon, .user-gear .icon { width: 16px; height: 16px; transition: transform 0.18s; }
/* The arrow points to where the menu opens: the business menu opens downward, the account menu (bottom of the sidebar) upward. */
button.venue-card[aria-expanded="true"] .venue-chevron .icon { transform: rotate(180deg); }
.user-gear .icon { transform: rotate(180deg); }
.user-trigger[aria-expanded="true"] .user-gear .icon { transform: rotate(0deg); }
.user-gear { background: none; }

/* fix159: logo tool - one logo, dark-menu choice, name toggle, and a "how guests see it" preview. */
.logo-main { display: flex; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; }
.logo-side { flex: 1; min-width: 200px; max-width: 380px; display: grid; gap: 8px; align-content: start; }
.logo-note { margin: 0; font-size: 0.84rem; line-height: 1.4; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }
.logo-note[hidden] { display: none; }
.logo-note.is-ok { background: var(--green-soft); color: var(--green-fg); }
.logo-note.is-warn { background: var(--accent-soft); color: var(--accent-text); }
.logo-clean { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); display: grid; gap: 10px; max-width: 420px; }
.logo-clean[hidden] { display: none; }
.logo-clean-text { margin: 0; font-size: 0.88rem; }
.logo-clean-pair { display: flex; gap: 12px; }
.logo-clean-pair figure { margin: 0; display: grid; gap: 4px; justify-items: center; font-size: 0.74rem; color: var(--text-3); }
.logo-clean-pair canvas { width: 120px; height: 80px; border-radius: 10px; border: 1px solid #2a3b31; }
.logo-clean-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.logo-dark { margin-top: 14px; display: grid; gap: 8px; }
.logo-sub { font-size: 0.8rem; font-weight: 700; color: var(--text-2); }
.logo-modes { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.logo-version { margin-top: 2px; }
.logo-version[hidden] { display: none; }
.logo-name-toggle { margin-top: 14px; }
.logo-preview { margin-top: 14px; display: grid; gap: 8px; }
.logo-preview[hidden] { display: none; }
.logo-strips { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; max-width: 480px; }
.logo-strip { border-radius: 12px; padding: 8px 12px 10px; border: 1px solid var(--line); display: grid; gap: 6px; }
.logo-strip small { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
.logo-strip.is-light { background: #f6f1e7; color: #2b2619; }
.logo-strip.is-dark { background: #0c1511; color: #eaf2ec; border-color: #2a3b31; }
.logo-strip-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 36px; } /* fix170: logo above the name, like the real menu header */
.logo-strip-row img { height: 32px; width: auto; max-width: 120px; object-fit: contain; }
.logo-strip-row img[hidden], .logo-strip-row b[hidden] { display: none; }
.logo-strip-row img.is-badge { background: #f4f1ea; padding: 3px 7px; border-radius: 8px; box-sizing: content-box; }
.logo-strip-row b { font-size: 1.05rem; }

/* fix160: empty logo tile is a neutral dashed drop box (not a cream block), with icon and label truly centred. */
.logo-tile .uploader-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; margin: 0; text-align: center; }
.logo-tile .uploader-empty .icon { margin: 0; flex: none; }
.logo-tile:has(.uploader-empty:not([hidden])) { background: var(--surface-2); border: 1.5px dashed var(--input-line); }
.logo-tile:has(.uploader-empty:not([hidden])) .uploader-empty, .logo-tile:has(.uploader-empty:not([hidden])) .uploader-empty .icon { color: var(--text-3); }
.logo-tile:has(.uploader-empty:not([hidden])):hover { border-color: var(--accent); background: var(--accent-soft); }

/* fix161: the two Business tabs sit in panel boxes; each panel keeps the same 18px rhythm between its cards. */
.settings-main > [data-tab-panel] { display: grid; gap: 18px; min-width: 0; align-content: start; }
.settings-main > [data-tab-panel][hidden] { display: none; }
.settings-main > [data-tab-panel] > .card > .muted { margin-bottom: 14px; }
.settings-main [data-tab-panel] > section[id] { scroll-margin-top: 90px; }

/* fix162: like Stripe/Shopify branding pages, the logo shows as a picture with Change / Remove; the file name is not shown. */
.logo-tool .uploader-file { display: none; }

/* fix163: small "?" help next to the Logo label, and the logo guide page. */
.field-label .logo-guide { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.logo-guide summary { list-style: none; padding: 0; gap: 0; cursor: pointer; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--input-line); color: var(--text-3); font-size: 0.74rem; font-weight: 700; user-select: none; }
.logo-guide summary::-webkit-details-marker { display: none; }
.logo-guide summary:hover, .logo-guide[open] summary { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.logo-guide-box { position: absolute; z-index: 30; top: 28px; left: 0; width: min(320px, 80vw); padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); font-weight: 400; font-size: 0.86rem; line-height: 1.45; color: var(--text-2); }
.logo-guide-box ul { margin: 8px 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.logo-guide-box a { font-weight: 600; color: var(--accent-text); }
.guide-list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.guide-dl { margin: 8px 0 0; display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px 20px; }
.guide-dl dt { font-weight: 600; color: var(--text); }
.guide-dl dd { margin: 0; color: var(--text-2); }
@media (max-width: 640px) { .guide-dl { grid-template-columns: 1fr; gap: 2px; } .guide-dl dd { margin-bottom: 10px; } }

/* fix164: business links list (Instagram, WhatsApp, website...) with an icon type picker */
.social-links { margin-top: .25rem; }
.social-list { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .5rem; }
.social-row { display: grid; grid-template-columns: minmax(9rem, 11.5rem) 1fr auto; gap: .5rem; align-items: center; }
.social-row .social-value { width: 100%; min-width: 0; margin: 0; }
.social-picker { position: relative; }
.social-picker-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .62rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, var(--surface)); color: var(--text); font: inherit; cursor: pointer; }
.social-picker-btn:hover, .social-picker-btn[aria-expanded="true"] { border-color: var(--accent, currentColor); }
.social-picker-current, .social-picker-opt { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.social-icon { width: 1.1rem; height: 1.1rem; flex: none; }
.social-chevron { width: .9rem; height: .9rem; opacity: .6; flex: none; }
.social-picker-menu { position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); min-width: 100%; margin: 0; padding: .3rem; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.social-picker-menu[hidden] { display: none; }
.social-picker-opt { display: flex; padding: .5rem .6rem; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.social-picker-opt:hover { background: var(--hover, rgba(127, 127, 127, .14)); }
.social-picker-opt[aria-selected="true"] { background: var(--hover, rgba(127, 127, 127, .14)); font-weight: 600; }
.social-picker-opt.is-used { opacity: .35; cursor: not-allowed; }
.social-remove { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-2, inherit); opacity: .65; cursor: pointer; }
.social-remove:hover, .social-remove:focus-visible { opacity: 1; color: #e5645a; background: rgba(229, 100, 90, .12); }
.social-remove .icon { width: 1.1rem; height: 1.1rem; }
.social-add { display: inline-flex; align-items: center; gap: .4rem; }
.social-add .icon { width: 1rem; height: 1rem; }
@media (max-width: 520px) { .social-row { grid-template-columns: 1fr auto; } .social-row .social-picker { grid-column: 1 / -1; } }

/* fix166: branch brand card */
.branch-brand { margin-top: 1rem; }
.branch-brand .own-panel { margin-top: .75rem; display: grid; gap: .75rem; }
.branch-brand .own-panel[hidden] { display: none; }
.brand-links-preview { display: inline-flex; gap: .5rem; flex-wrap: wrap; }
.brand-link-chip { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 50%; }

/* fix169: branch logo card */
.branch-logo .branch-logo-same { display: block; max-height: 3.2rem; max-width: 12rem; object-fit: contain; border-radius: 8px; }
/* fix170: read-only preview of what a branch inherits from the business */
.inherit-box { margin-top: .6rem; display: grid; gap: .45rem; justify-items: start; padding: .8rem 1rem; border: 1px dashed var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface, transparent) 60%, transparent); }
.inherit-box[hidden] { display: none; }
.inherit-tag { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.inherit-value { color: var(--text); }
.inherit-empty { color: var(--text-2); font-style: italic; }
.inherit-logo { display: grid; gap: .45rem; justify-items: start; }
.inherit-logo b { font-size: 1.05rem; }
.inherit-edit { font-size: .84rem; }
.branch-logo .own-panel { margin-top: .8rem; }

/* Where do changes on this page apply? One quiet line (same family as .sample-note): grey text, bold lead, underlined link. No box, no icon. */
.scope-note { margin: 0 2px 16px; font-size: .86rem; color: var(--text-2); }
.scope-note p { margin: 0; }
.scope-note b { margin-right: 6px; color: var(--text); font-weight: 600; }
.scope-note a { margin-left: 8px; color: var(--accent-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.scope-note a:hover { color: var(--accent-text); text-decoration-thickness: 2px; }
/* Brand and logo of one branch: folded away unless this branch has its own. */
/* One box, not boxes in boxes: the fold is the card; its sections are plain content split by a hairline. Same width as the Business page. */
.form-card.branch-wide, .branch-brand-fold { max-width: 875px; }
.branch-brand-fold { margin-top: 16px; background: var(--surface); border-radius: var(--radius, 14px); }
.branch-brand-fold > summary { padding: 16px 18px; font-size: .95rem; }
.branch-brand-fold .disclose-title small { margin-left: 8px; color: var(--text-3); font-size: 0.8rem; }
.branch-brand-fold .disclose-stack { padding: 0 18px 6px; border-top: 1px solid var(--line); }
.branch-brand-fold .disclose-stack > .card { margin: 0; padding: 18px 0; max-width: none; border: 0; border-radius: 0; background: none; box-shadow: none; }
.branch-brand-fold .disclose-stack > .card + .card { border-top: 1px solid var(--line); }
.branch-brand-fold .disclose-stack > .card:first-child .card-title { display: none; }
.branch-brand-fold .card-title .icon { display: none; }
.branch-brand-fold .card-title { font-size: 1rem; }

/* Menu address of a branch: host in grey, the branch part in bold; same look for a fixed address and for the one being made. */
.address-box { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; min-height: 44px; padding: 8px 14px; border: 1px solid var(--input-line, var(--line)); border-radius: 10px; background: var(--surface-2); font-size: .95rem; color: var(--text-2); overflow-wrap: anywhere; }
.address-box[hidden] { display: none; }
.address-box .address-path b { color: var(--text); font-weight: 600; }
.address-box b.is-empty { color: var(--text-3); font-weight: 400; }
.address-box.is-editing { padding-block: 4px; }
.address-box input[type="text"], :root[data-theme="dark"] .address-box input[type="text"] { flex: 1; min-width: 8rem; margin: 0; padding: 6px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text); font: inherit; font-weight: 600; outline: none; }
.address-box:focus-within { border-color: var(--accent); }
.address-edit { margin-left: auto; padding-left: 12px; color: var(--accent-text); font-size: .86rem; font-weight: 600; white-space: nowrap; }
.address-edit:hover { text-decoration: underline; text-underline-offset: 3px; }


/* Panel surfaces: every list page uses the same white card on the page background (light and dark).
   Direct children of the page content only, so lists nested inside other cards are not boxed twice. */
.content-inner > ul.rows,
.content-inner > .prod-group,
.content-inner > .toolbar,
.content-inner > form.toolbar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}
.content-inner > ul.rows { padding: 4px 20px; border-top: 1px solid var(--line); }
.content-inner > .prod-group { padding: 8px 20px 4px; margin-bottom: 18px; }
.content-inner > .toolbar, .content-inner > form.toolbar { padding: 12px 18px; margin-bottom: 18px; }
.content-inner > .toolbar .search-box, .content-inner > form.toolbar .search-box { border-bottom: 0; }
.content-inner > .prod-group .rows { border-top: 0; }
.content-inner > .prod-group-head, .content-inner > .prod-group > .prod-group-head { margin: 0 2px 4px; padding: 8px 0 10px; border-bottom: 1px solid var(--line-2); }
.content-inner .rows > .row:last-child { border-bottom: 0; }
.content-inner .rows > .row:hover { background: var(--surface-2); border-color: var(--line); }
.content-inner > .toolbar ~ ul.rows { margin-top: 0; }
.chip { background: var(--surface-2); border-color: transparent; }
.chip.is-active { border-color: var(--accent); }

/* A list card with nothing visible (filter matched no row) disappears instead of leaving an empty bar. */
.content-inner > ul.rows:not(:has(> .row:not([hidden]))) { display: none; }
/* Tabs-only filter bar (All / Visible / Hidden): plain tabs on the page, not a card. */
.content-inner > .toolbar:not(:has(.search-box)):not(:has(.chips)):not(:has(.activity-filters)) {
    background: none; border: 0; box-shadow: none; padding: 0 2px; margin-bottom: 14px;
}
/* Search-only bar: slim card. */
.content-inner > .toolbar:has(.search-box):not(:has(.chips)):not(:has(.seg)):not(:has(.activity-filters)) { padding-top: 4px; padding-bottom: 4px; }

/* Sign-in: "Keep me signed in" on the left, "Forgot your password?" on the right. */
.check-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.check-row .check { margin-bottom: 0; }
.check-row a { font-size: 0.88rem; }