/* ============================================================================
   Card-V — core stylesheet.  Clean & premium: soft neutrals, refined type,
   layered depth, spring motion.  Mobile-first, logical properties for RTL.
   Class names are unchanged from the previous sheet so every view keeps working.
   ========================================================================== */

:root {
    /* --- surfaces & ink (neutrals biased a hair toward the blue accent) --- */
    --bg:          #f4f6fb;
    --surface:     #ffffff;
    --surface-2:   #edf1f8;
    --surface-3:   #e2e8f3;
    --ink:         #0b1224;
    --ink-soft:    #4e5b76;
    --ink-faint:   #8591aa;
    --rule:        #e0e6f0;
    --rule-soft:   #edf1f8;

    /* --- accent: the Card-V logo's electric blue, and its blue → violet gradient --- */
    --accent:       #2a5cff;
    --accent-deep:  #1b3fbf;
    --accent-ink:   #ffffff;
    --accent-wash:  #e6edff;
    --accent-glow:  rgba(42,92,255,.28);
    --accent-2:     #6a3dff;
    --accent-grad:  linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);

    /* --- semantic --- */
    --ok:      #12805c;  --ok-bg:   #e4f4ee;
    --warn:    #9a6510;  --warn-bg: #fdf0da;
    --err:     #bd4436;  --err-bg:  #fbe9e6;

    /* --- shape --- */
    --r-sm: 8px;
    --r:    12px;
    --r-lg: 18px;
    --r-xl: 24px;
    --radius: var(--r);

    /* --- elevation (soft, layered) --- */
    --e1: 0 1px 2px rgba(16,23,32,.04), 0 1px 3px rgba(16,23,32,.06);
    --e2: 0 2px 4px rgba(16,23,32,.04), 0 8px 20px -8px rgba(16,23,32,.14);
    --e3: 0 4px 8px rgba(16,23,32,.05), 0 24px 48px -16px rgba(16,23,32,.22);
    --shadow: var(--e2);

    /* --- motion --- */
    --ease-spring: cubic-bezier(.22, 1.2, .36, 1);
    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --dur-1: 130ms;
    --dur-2: 240ms;
    --dur-3: 440ms;

    /* --- type --- */
    --font:        "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display:"Bricolage Grotesque", "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --font-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Dark palette — the Card-V logo at night: navy-black neutrals, cool white
   ink, electric blue with a blue → violet gradient and a soft blue glow.
   Matches the marketing/home page and the phone app. Applied when the OS
   prefers dark (unless the viewer forced light), OR when the viewer picked dark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg:          #060a16;
        --surface:     #0d1426;
        --surface-2:   #131c33;
        --surface-3:   #1a2542;
        --ink:         #eef2ff;
        --ink-soft:    #a3aecb;
        --ink-faint:   #6c789a;
        --rule:        #1d2944;
        --rule-soft:   #111a30;

        --accent:      #3d6dff;
        --accent-deep: #8fb0ff;
        --accent-ink:  #ffffff;
        --accent-wash: #101d45;
        --accent-glow: rgba(47,91,255,.42);
        --accent-2:    #6a3dff;

        --ok:  #5fcf97; --ok-bg:  #0f2620;
        --warn:#e3b04f; --warn-bg:#2a2112;
        --err: #ff7a6b; --err-bg: #2c1419;

        --e1: 0 1px 2px rgba(0,0,0,.5);
        --e2: 0 2px 8px rgba(0,0,0,.5), 0 16px 34px -14px rgba(0,0,0,.75);
        --e3: 0 4px 12px rgba(0,0,0,.55), 0 32px 60px -18px rgba(0,0,0,.85);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:          #060a16;
    --surface:     #0d1426;
    --surface-2:   #131c33;
    --surface-3:   #1a2542;
    --ink:         #eef2ff;
    --ink-soft:    #a3aecb;
    --ink-faint:   #6c789a;
    --rule:        #1d2944;
    --rule-soft:   #111a30;

    --accent:      #3d6dff;
    --accent-deep: #8fb0ff;
    --accent-ink:  #ffffff;
    --accent-wash: #101d45;
    --accent-glow: rgba(47,91,255,.42);
    --accent-2:    #6a3dff;

    --ok:  #5fcf97; --ok-bg:  #0f2620;
    --warn:#e3b04f; --warn-bg:#2a2112;
    --err: #ff7a6b; --err-bg: #2c1419;

    --e1: 0 1px 2px rgba(0,0,0,.5);
    --e2: 0 2px 8px rgba(0,0,0,.5), 0 16px 34px -14px rgba(0,0,0,.75);
    --e3: 0 4px 12px rgba(0,0,0,.55), 0 32px 60px -18px rgba(0,0,0,.85);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.14; }
h1 { text-wrap: balance; }

a { color: var(--accent-deep); text-decoration: none; transition: color var(--dur-1) ease; }
a:hover { color: var(--accent); text-decoration: none; }

::selection { background: var(--accent-glow); }

code {
    font-family: var(--font-mono);
    font-size: .84em;
    background: var(--surface-2);
    padding: .12em .42em;
    border-radius: 5px;
    word-break: break-word;
}

img { max-width: 100%; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1040px; margin-inline: auto; padding-inline: 20px; }
/* the header spreads wider so the full nav sits comfortably left-to-right */
.site-header .wrap { max-width: 1240px; }

/* ---- focus ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    inset-block-start: -60px;
    inset-inline-start: 12px;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 8px 14px;
    border-radius: var(--r-sm);
    transition: inset-block-start var(--dur-2) var(--ease-out);
    z-index: 100;
}
.skip-link:focus { inset-block-start: 12px; }

/* ============ motion primitives ============ */
@keyframes cv-rise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cv-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes cv-pop    { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
@keyframes cv-drop   { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* Elements the JS reveals; before it runs (or with no JS) they are fully visible. */
.reveal { }
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { animation: cv-rise var(--dur-3) var(--ease-out) forwards; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* ============ header ============ */
.site-header {
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-block-end: 1px solid var(--rule);
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    animation: cv-drop var(--dur-3) var(--ease-out);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    position: relative;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; flex: none; }
.brand:hover { color: var(--ink); }
.brand__mark { color: var(--accent); display: inline-flex; }
.brand__logo { border-radius: 6px; object-fit: contain; display: block; }
.brand__name { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: -.02em; }

/* The platform brand (components/brand-lockup, Super Admin → Branding): the
   logo at its own shape — a wide logo stays wide — at the chosen height,
   capped per header by --brand-max-h / --brand-max-w. In dark mode the dark
   picture (automatic light version, or an uploaded one) takes its place. */
.brandmark { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brandmark__img {
    display: block; width: auto; object-fit: contain; object-position: left center;
    height: min(var(--brand-h, 32px), var(--brand-max-h, 48px));
    max-width: var(--brand-max-w, 240px);
}
[dir="rtl"] .brandmark__img { object-position: right center; }
.brandmark__img--dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brandmark--dark .brandmark__img--light { display: none; }
    :root:not([data-theme="light"]) .brandmark--dark .brandmark__img--dark { display: block; }
}
:root[data-theme="dark"] .brandmark--dark .brandmark__img--light { display: none; }
:root[data-theme="dark"] .brandmark--dark .brandmark__img--dark { display: block; }
/* name only: the size slider sizes the name */
.brandmark--name .brand__name { font-size: min(calc(var(--brand-h, 32px) * .6), calc(var(--brand-max-h, 48px) * .6)); line-height: 1.1; }
.site-header .brandmark { --brand-max-h: 44px; --brand-max-w: 240px; }
.app__brand .brandmark { --brand-max-h: 44px; --brand-max-w: 172px; }
.app__topbrand .brandmark { --brand-max-h: 30px; --brand-max-w: 160px; }
@media (max-width: 720px) {
    .site-header .brandmark { --brand-max-h: 36px; --brand-max-w: 170px; }
}

/* --- primary nav: links only (drawer on small screens) --- */
.site-nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    min-width: 0;
}
.site-nav__link, .link-button {
    color: var(--ink-soft);
    font-size: .9rem;
    font-weight: 500;
    padding: 7px 11px;
    border-radius: 999px;
    white-space: nowrap;
    transition: color var(--dur-1) ease, background var(--dur-1) ease;
}
.site-nav__link:hover, .link-button:hover { color: var(--ink); background: var(--surface-2); }
.site-nav__link.is-active, .site-nav__link[aria-current] {
    color: var(--accent-deep); background: var(--accent-wash);
}
.inline-form { display: inline-flex; margin: 0; }
.link-button { background: none; border: none; font: inherit; cursor: pointer; }

/* --- right-hand tools: lang, theme, account, hamburger — always in the bar --- */
.site-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: none; }
.site-tools__login {
    padding: 8px 16px; border-radius: 999px; font-size: .9rem; font-weight: 600;
    background: var(--accent); color: var(--accent-ink);
}
.site-tools__login:hover { color: var(--accent-ink); filter: brightness(1.05); }

.lang-switch { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; flex: none; }
.lang-switch__item { padding: 5px 9px; font-size: .76rem; color: var(--ink-soft); border-inline-start: 1px solid var(--rule); }
.lang-switch__item:first-child { border-inline-start: none; }
.lang-switch__item:hover { background: var(--surface-2); }
.lang-switch__item.is-active { background: var(--accent); color: var(--accent-ink); }

/* --- theme toggle --- */
.theme-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    width: 34px; height: 34px; justify-content: center;
    padding: 0; border: 1px solid var(--rule); border-radius: 999px;
    background: none; color: var(--ink-soft); cursor: pointer; flex: none;
    transition: color var(--dur-1) ease, background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.theme-toggle:hover { color: var(--ink); background: var(--surface-2); border-color: var(--surface-3); }
.theme-toggle__ico { display: none; }
.theme-toggle__label { display: none; }
.theme-toggle[data-theme-mode="system"] .theme-toggle__ico--system,
.theme-toggle[data-theme-mode="light"]  .theme-toggle__ico--light,
.theme-toggle[data-theme-mode="dark"]   .theme-toggle__ico--dark { display: block; }

/* --- account (avatar) menu --- */
.usermenu { position: relative; flex: none; }
.usermenu__btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 6px 3px 3px; border: 1px solid var(--rule); border-radius: 999px;
    background: none; color: var(--ink-soft); cursor: pointer;
    transition: border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.usermenu__btn:hover, .usermenu.is-open .usermenu__btn { border-color: var(--surface-3); background: var(--surface-2); }
.usermenu__chev { transition: transform var(--dur-2) var(--ease-out); }
.usermenu.is-open .usermenu__chev { transform: rotate(180deg); }
.usermenu__av {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; display: block;
}
.usermenu__av--ph {
    display: grid; place-items: center;
    background: var(--accent); color: var(--accent-ink);
    font-weight: 700; font-size: .95rem; font-family: var(--font-display); text-transform: uppercase;
}
.usermenu__av--lg { width: 42px; height: 42px; }

.usermenu__pop {
    position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0;
    min-width: 244px; padding: 6px;
    background: var(--surface); border: 1px solid var(--rule); border-radius: 16px;
    box-shadow: var(--e3);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
    z-index: 50;
}
/* The insets are already logical, so they flip on their own. Flipping them a
   second time here opened the menu off the left edge of an Arabic page and gave
   every one of them a horizontal scrollbar — only the origin needs mirroring. */
.is-rtl .usermenu__pop { transform-origin: top left; }
.usermenu.is-open .usermenu__pop {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.usermenu__id {
    display: flex; align-items: center; gap: 11px;
    padding: 10px; border-radius: 12px; color: var(--ink); text-decoration: none;
}
.usermenu__id:hover { background: var(--surface-2); }
.usermenu__idtext { min-width: 0; display: flex; flex-direction: column; }
.usermenu__name { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usermenu__mail { font-size: .78rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usermenu__sep { height: 1px; background: var(--rule); margin: 6px 4px; }
.usermenu__logout { display: block; margin: 0; }
.usermenu__item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border: 0; border-radius: 10px;
    font: inherit; font-size: .9rem; font-weight: 500; text-align: start;
    color: var(--ink-soft); background: none; cursor: pointer; text-decoration: none;
    transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.usermenu__item svg { width: 17px; height: 17px; flex: none; }
.usermenu__item:hover { background: var(--surface-2); color: var(--ink); }
.usermenu__item--danger { color: var(--err); }
.usermenu__item--danger:hover { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); }

/* --- hamburger (mobile only, sits last / right) --- */
.nav-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none;
    border: 1px solid var(--rule); border-radius: 999px;
    background: none; color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle__bars { display: block; width: 17px; height: 12px; position: relative; }
.nav-toggle__bars i {
    position: absolute; inset-inline: 0; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) ease;
}
.nav-toggle__bars i:nth-child(1) { inset-block-start: 0; }
.nav-toggle__bars i:nth-child(2) { inset-block-start: 5px; }
.nav-toggle__bars i:nth-child(3) { inset-block-start: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1023px) {
    .js .nav-toggle { display: inline-flex; }
    .js .site-nav {
        position: absolute;
        z-index: 40;
        inset-block-start: calc(100% + 1px);
        inset-inline: 0;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 2px;
        margin: 0;
        padding: 10px;
        background: var(--surface);
        border-block-end: 1px solid var(--rule);
        box-shadow: var(--e3);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
    }
    .js .site-nav.is-open {
        visibility: visible; opacity: 1; transform: none;
        transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
    }
    .js .site-nav__link {
        width: 100%; text-align: start; padding: 12px 14px; border-radius: var(--r-sm); font-size: .95rem;
    }
    /* keep the account label visible next to the avatar on mobile */
    .usermenu__btn { padding-inline: 3px; }
    .usermenu__chev { display: none; }
}
@media (max-width: 400px) {
    /* the name goes beside a mark or logo; it stays when it IS the brand */
    .brandmark:not(.brandmark--name) .brand__name { display: none; }
    .lang-switch__item { padding: 5px 7px; }
}

/* ============ main / footer ============ */
.site-main { flex: 1; padding-block: 34px 64px; display: flex; flex-direction: column; gap: 24px; }
.site-main > * { animation: cv-rise var(--dur-3) var(--ease-out) backwards; }
.site-main > *:nth-child(2) { animation-delay: 50ms; }
.site-main > *:nth-child(3) { animation-delay: 100ms; }
.site-main > *:nth-child(4) { animation-delay: 150ms; }
.site-main > *:nth-child(n+5) { animation-delay: 190ms; }

.site-footer {
    border-block-start: 1px solid var(--rule);
    background: var(--surface);
    padding-block: 20px;
    font-size: .82rem;
    color: var(--ink-faint);
}
.site-footer .wrap { display: flex; gap: 8px 20px; flex-wrap: wrap; justify-content: space-between; align-items: center; }

/* ============ hero ============ */
.hero { padding-block: 20px 6px; }
.hero--compact { padding-block: 6px 0; }
.eyebrow {
    margin: 0 0 12px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--accent-deep); font-weight: 600;
}
.hero h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 6vw, 2.9rem); letter-spacing: -.03em; }
.hero__lead { margin: 0; color: var(--ink-soft); font-size: 1.1rem; max-width: 60ch; }
.hero__actions { margin-block-start: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ panels ============ */
.panel {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    box-shadow: var(--e1);
    transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) ease;
}
.panel--muted { box-shadow: none; background: var(--surface-2); border-color: transparent; }
.panel--flush { padding: 0; overflow: hidden; }
.panel--danger { border-color: color-mix(in srgb, var(--err) 45%, var(--rule)); }
.panel--danger .panel__title { color: var(--err); }
.panel__title { margin: 0 0 14px; font-size: 1.02rem; font-weight: 600; font-family: var(--font-display); }
.muted { color: var(--ink-faint); font-size: .9rem; }

.panel--flush .table th:first-child, .panel--flush .table td:first-child { padding-inline-start: 20px; }
.panel--flush .table th:last-child,  .panel--flush .table td:last-child  { padding-inline-end: 20px; }
fieldset.panel { border: 1px solid var(--rule); }
fieldset.panel[disabled] { opacity: .55; }
.panel legend.panel__title, .panel--muted legend { padding-inline: 0; }

.rtl-demo {
    margin: 0 0 6px; padding: 14px 16px; background: var(--surface-2);
    border-inline-start: 3px solid var(--accent); border-radius: var(--r-sm); font-size: 1.05rem;
}

/* ============ chips / pills / table ============ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip {
    display: inline-block; padding: 4px 11px; border-radius: 999px;
    background: var(--accent-wash); color: var(--accent-deep);
    font-size: .78rem; font-weight: 600;
}
.chip--sm { font-size: .7rem; padding: 2px 8px; }

.pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600;
    border: 1px solid transparent; line-height: 1.5;
    animation: cv-pop var(--dur-2) var(--ease-spring);
}
.pill--ok   { background: var(--ok-bg);   color: var(--ok); }
.pill--muted{ background: var(--surface-2);color: var(--ink-faint); }
.pill--warn { background: var(--warn-bg);  color: var(--warn); }

.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: 10px 12px; text-align: start; border-block-end: 1px solid var(--rule); }
.table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); font-weight: 600; }
.table .num, .table--tight .num { text-align: end; font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background var(--dur-1) ease; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-block-end: none; }
.table--tight th, .table--tight td { padding: 7px 10px; font-size: .85rem; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--font-mono); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.audit-meta code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; display: inline-block; vertical-align: bottom; }
/* A cell of buttons. It stays a table-cell: display:flex on a <td> takes it
   out of the row, so the row's line and hover stop short and the buttons
   hang outside it. The buttons sit inline instead. */
td.row-actions { text-align: end; white-space: nowrap; vertical-align: middle; }
td.row-actions > * { vertical-align: middle; }
td.row-actions > * + * { margin-inline-start: 2px; }
.row-actions .inline-form { display: inline-flex; }
.row-actions:not(td) { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

/* A table that becomes one card per row on a narrow screen (.table--stack):
   the first cells stack on the left, a [data-cell="side"] cell (a status)
   sits top right, and the buttons get a full-width line of their own. */
@media (max-width: 760px) {
    .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .table--stack, .table--stack tbody { display: block; width: 100%; }
    .table--stack tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px;
        padding: 14px 16px; border-block-end: 1px solid var(--rule);
    }
    .table--stack tbody tr:last-child { border-block-end: 0; }
    .table.table--stack td,
    .panel--flush .table.table--stack td:first-child,
    .panel--flush .table.table--stack td:last-child { display: block; padding: 0; border: 0; min-width: 0; grid-column: 1; overflow-wrap: anywhere; }
    .table.table--stack td[data-cell="side"] { grid-column: 2; grid-row: 1; align-self: start; }
    .table.table--stack td[data-label]::before { content: attr(data-label) " · "; color: var(--ink-faint); font-size: .8rem; }
    .table.table--stack td.row-actions,
    .panel--flush .table.table--stack td.row-actions:last-child {
        grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px;
        justify-content: flex-start; white-space: normal; text-align: start; padding-top: 6px;
    }
    .table.table--stack td.row-actions > * + * { margin-inline-start: 0; }
    .table.table--stack td[colspan] { grid-column: 1 / -1; }
}

/* impersonation bar — shown app-wide while an admin is signed in as a user */
.impersonate-bar {
    position: sticky; inset-block-start: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 16px;
    background: repeating-linear-gradient(-45deg, #7a3ea8 0 14px, #6a2f96 14px 28px);
    color: #fff; font-size: .88rem; font-weight: 600;
}
.impersonate-bar__txt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.impersonate-bar__txt svg { width: 16px; height: 16px; flex: none; }
.impersonate-bar form { margin: 0; }
.impersonate-bar__btn {
    font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
    padding: 6px 14px; border-radius: 999px;
    background: #fff; color: #6a2f96; border: 0;
    transition: transform var(--dur-1) ease, filter var(--dur-1) ease;
}
.impersonate-bar__btn:hover { filter: brightness(.96); }
.impersonate-bar__btn:active { transform: scale(.97); }
.mt { margin-top: 14px; }

/* ============ forms ============ */
.form { display: flex; flex-direction: column; gap: 16px; margin-block-start: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.field__hint, .field__error { font-size: .78rem; color: var(--ink-faint); }
.field__error { color: var(--err); }

.field input, .field select, .field textarea,
.filters input, .filters select,
.setting-row__control input, .setting-row__control textarea,
.dest-row__main select, .dest-row__main input,
.repeater__row input, .section-add select, .inline-edit input,
.tr-input, .hours-row input[type="time"], .alias-input input, .team__pin input,
.cat-addcat input, .cat-group__rename input {
    font: inherit;
    padding: 11px 13px;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
    max-width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus,
.filters input:focus, .filters select:focus,
.setting-row__control input:focus, .setting-row__control textarea:focus,
.dest-row__main select:focus, .dest-row__main input:focus,
.tr-input:focus, .alias-input input:focus, .team__pin input:focus,
.cat-addcat input:focus, .cat-group__rename input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px;
    border-radius: var(--r-sm);
    border: 1px solid var(--rule);
    background: var(--surface);
    color: var(--ink);
    font: inherit; font-weight: 600;
    cursor: pointer;
    box-shadow: var(--e1);
    transition: transform var(--dur-1) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1) ease, border-color var(--dur-1) ease, filter var(--dur-1) ease;
}
.button:hover { box-shadow: var(--e2); transform: translateY(-1px); color: var(--ink); }
.button:active { transform: translateY(1px) scale(.985); box-shadow: var(--e1); }
/* The logo's gradient; it brightens on hover (in dark, --accent-deep is a light
   text colour, so it can't be the hover background under white text). */
.button--primary { background: var(--accent) var(--accent-grad); border-color: transparent; color: var(--accent-ink); box-shadow: 0 6px 18px -8px var(--accent-glow); }
.button--primary:hover { background: var(--accent) var(--accent-grad); border-color: transparent; color: var(--accent-ink); filter: brightness(1.08); box-shadow: 0 10px 26px -8px var(--accent-glow); }
.button--block { width: 100%; }
.button--sm { padding: 7px 12px; font-size: .82rem; border-radius: 7px; }
.button--warn { background: var(--warn); border-color: var(--warn); color: #fff; }
.button--danger { background: var(--err); border-color: var(--err); color: #fff; }
.button--google { background: var(--surface); border-color: var(--rule); color: var(--ink); }
.button--phone { background: #25d366; border-color: #25d366; color: #05391b; }
.button--facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.button--instagram {
    color: #fff; border-color: transparent;
    background: linear-gradient(90deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}
.button.is-disabled, .button[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }

/* ============ auth ============ */
.auth-card {
    max-width: 420px; margin-inline: auto; width: 100%;
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--r-xl); padding: 32px 30px; box-shadow: var(--e3);
    animation: cv-pop var(--dur-3) var(--ease-spring);
}
.auth-card--wide { max-width: 560px; }
.auth-card h1 { margin: 0 0 .4rem; font-size: 1.6rem; }
.auth-card__note { margin-block-start: 18px; }
/* What kind of account is being opened: three radio cards, stacked so the
   one-line explanation under each name has room on a phone. Same idiom as
   .seg — the real radio stays in the DOM for keyboards and screen readers,
   the card around it shows the choice. */
.acct-choice { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.acct-choice legend { padding: 0; margin-block-end: 8px; }
.acct-choice__grid { display: grid; gap: 8px; }
.acct-choice__opt { position: relative; display: block; cursor: pointer; }
.acct-choice__opt input { position: absolute; opacity: 0; pointer-events: none; }
.acct-choice__body {
    display: grid; gap: 2px; padding: 11px 14px;
    border: 1px solid var(--rule); border-radius: var(--r);
    background: var(--surface);
    transition: border-color var(--dur-1) ease, background var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.acct-choice__opt:hover .acct-choice__body { border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
.acct-choice__name { font-weight: 600; color: var(--ink); }
.acct-choice__desc { font-size: .82rem; color: var(--ink-soft); }
.acct-choice__opt input:checked + .acct-choice__body {
    border-color: var(--accent); background: var(--accent-wash);
    box-shadow: 0 0 0 1px var(--accent);
}
.acct-choice__opt input:focus-visible + .acct-choice__body { outline: 2px solid var(--accent); outline-offset: 2px; }
/* "Send a new code" and "Change my details" side by side under the code box. */
.reg-verify__alt { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.reg-verify__alt .button { flex: 1 1 auto; justify-content: center; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-faint); font-size: .8rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.auth-social { display: flex; flex-direction: column; gap: 10px; margin-block-start: 20px; }
.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; min-width: 0; }
.field--check { flex-direction: row; align-items: flex-start; gap: 10px; font-size: .88rem; }
.field--check input { margin-block-start: 2px; }
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 520px) { .field-row { flex-direction: column; gap: 16px; } }

/* ============ alerts ============ */
.alert {
    padding: 13px 16px; border-radius: var(--r-sm); font-size: .9rem;
    border: 1px solid transparent; animation: cv-drop var(--dur-2) var(--ease-out);
}
.alert--ok    { background: var(--ok-bg);  color: var(--ok);  border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.alert--error { background: var(--err-bg); color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.alert--info  { background: var(--accent-wash); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.alert__list { margin: 0; padding-inline-start: 20px; }
.alert--warn  { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* ---- card editor: banner slides + the background of a row ---- */
.slide-row {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px; align-items: end; margin-top: 10px;
}
.slide-row__thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 10px; border: 1px solid var(--rule); }
@media (max-width: 620px) { .slide-row { grid-template-columns: 56px minmax(0, 1fr); } .slide-row__thumb { width: 56px; height: 44px; } }

.rowbg { margin-top: 14px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface-2); }
.rowbg__sum {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; cursor: pointer; font-weight: 600; font-size: .9rem; list-style: none;
}
.rowbg__sum::-webkit-details-marker { display: none; }
.rowbg__sum::after { content: "▾"; color: var(--ink-faint); transition: transform var(--dur-1) ease; }
.rowbg[open] .rowbg__sum::after { transform: rotate(180deg); }
.rowbg__state { font-weight: 400; font-size: .82rem; }
.rowbg__body { padding: 0 14px 14px; display: grid; gap: 12px; }
.rowbg__body input[type="color"] { width: 100%; height: 38px; padding: 2px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); }
.rowbg__body input[type="range"] { width: 100%; accent-color: var(--accent); }
.rowbg__img { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rowbg__img img { width: 96px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--rule); }
.rowbg__hint { margin: 0; font-size: .82rem; }
.rowbg__upl { margin-top: 10px; }
.rowbg__btn { display: inline-flex; cursor: pointer; }
.check--field { align-self: end; padding-bottom: 10px; }

/* ---- Super Admin → Messaging ---- */
.msg-banner { margin-bottom: 16px; }
.msg-banner strong { margin-inline-end: 4px; }
.msg-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.msg-error { word-break: break-word; font-size: .82rem; }
.msg-chans { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 0; }
.msg-chan {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    padding: 10px 0; border-top: 1px solid var(--rule-soft);
}
.msg-chan:first-child { border-top: none; }
.msg-chan__name { font-weight: 600; min-width: 90px; color: var(--ink); }
.msg-chan__state { font-size: .84rem; }
.msg-order { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 6px 0 4px; }
.msg-order__opt {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; cursor: pointer;
    border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface);
}
.msg-order__opt input { margin-top: 3px; accent-color: var(--accent); }
.msg-order__opt span { display: flex; flex-direction: column; gap: 2px; }
.msg-order__opt .muted { font-size: .84rem; }
.msg-order__opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.msg-order__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.msg-test.is-on { border-color: color-mix(in srgb, var(--warn) 55%, var(--rule)); }
.msg-test__risk {
    margin: 4px 0 14px; padding: 10px 12px; font-size: .86rem; line-height: 1.5;
    border-radius: var(--r-sm); background: var(--warn-bg); color: var(--warn);
}
.msg-test__code { max-width: 220px; }
.msg-test__code input { letter-spacing: .12em; }

/* ============ error pages ============ */
.error-page { text-align: center; padding-block: 56px; }
.error-page__code { font-family: var(--font-mono); font-size: 3rem; font-weight: 500; color: var(--accent); margin: 0; }
.error-page h1 { margin: .3rem 0 .5rem; }
.error-page .button { margin-block-start: 18px; }

/* ============ admin sub-nav ============ */
.admin-nav {
    display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--rule); margin-bottom: 4px; -webkit-overflow-scrolling: touch;
    /* Eighteen sections do not fit one line: fade the edge that still has tabs
       behind it, so the strip reads as something you can scroll. */
    mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.admin-nav.is-start { mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%); }
.admin-nav.is-end { mask-image: linear-gradient(to right, transparent 0, #000 18px); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px); }
.admin-nav.is-whole { mask-image: none; -webkit-mask-image: none; }
.admin-nav::-webkit-scrollbar { display: none; }
/* On a screen with room, every section is on the page: the strip wraps onto a
   second line instead of hiding its tail behind a sideways scroll. The classes
   are repeated so the scroll-edge fades above cannot win on specificity. */
@media (min-width: 900px) {
    .admin-nav, .admin-nav.is-start, .admin-nav.is-end {
        flex-wrap: wrap; overflow-x: visible; row-gap: 2px;
        mask-image: none; -webkit-mask-image: none;
    }
}
.admin-nav__tab {
    /* Tabs are <a> on some pages and <button> on others (in-page panels), so
       clear the browser's button chrome — otherwise buttons keep a grey fill
       and a bevelled border on all four sides. */
    appearance: none; background: none; border: 0; border-radius: 0; margin: 0;
    font: inherit; cursor: pointer; text-decoration: none;
    padding: 10px 14px; font-size: .88rem; font-weight: 500; color: var(--ink-soft);
    border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.admin-nav__tab:hover { color: var(--ink); }
.admin-nav__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.admin-nav__tab.is-active { color: var(--accent-deep); border-bottom-color: var(--accent); font-weight: 600; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 1.9rem); }
.page-head__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nfc-new { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.nfc-new select { padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters input[type="search"], .filters input:not([type]) { min-width: 200px; flex: 1 1 200px; }
.filters--wrap { row-gap: 8px; }

/* ============ tiles / stat cards ============ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile {
    display: flex; flex-direction: column; gap: 4px; padding: 18px;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
    box-shadow: var(--e1); color: var(--ink);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1) ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--e2); border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); color: var(--ink); }
.tile__name { font-weight: 600; }
.tile__count { font-family: var(--font-mono); font-size: 1.5rem; color: var(--accent-deep); font-variant-numeric: tabular-nums; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 14px 0; }
.stat {
    border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 18px; background: var(--surface);
    display: grid; gap: 3px; box-shadow: var(--e1);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.stat__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; }
.stat__value { font-size: 1.9rem; font-weight: 700; font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat__sub { font-size: .82rem; color: var(--ink-soft); }
.spark { width: 100%; height: 46px; margin-top: 8px; display: block; overflow: visible; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .85rem; color: var(--ink-soft); }
.pager__nav { display: flex; align-items: center; gap: 8px; }
.pager__page { font-family: var(--font-mono); }

.stack { display: flex; flex-direction: column; gap: 18px; }
.stack__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.grid-2, .grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============ checks / segmented / switch ============ */
.check, .inline-check { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; }
.check input, .inline-check input { margin-top: 3px; accent-color: var(--accent); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; }

.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; }
.seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opt span { display: block; padding: 6px 13px; font-size: .8rem; color: var(--ink-soft); cursor: pointer; border-inline-start: 1px solid var(--rule); transition: background var(--dur-1) ease, color var(--dur-1) ease; }
.seg__opt:first-child span { border-inline-start: none; }
.seg__opt input:checked + span { background: var(--accent); color: var(--accent-ink); }

.switch { position: relative; display: inline-block; width: 44px; height: 25px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); transition: background var(--dur-2) var(--ease-out); }
.switch span::before { content: ""; position: absolute; width: 19px; height: 19px; border-radius: 50%; background: #fff; inset-block-start: 3px; inset-inline-start: 3px; transition: inset-inline-start var(--dur-2) var(--ease-spring); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { inset-inline-start: 22px; }

.danger-row { display: flex; gap: 10px; flex-wrap: wrap; }
.danger-row form { margin: 0; }
.inline-create { display: flex; flex-direction: column; gap: 12px; }
.inline-edit { display: flex; gap: 6px; align-items: center; }
.inline-edit input { min-width: 160px; }

/* ============ permissions matrix ============ */
.perm-module { border-top: 1px solid var(--rule-soft); padding-top: 14px; margin-top: 14px; }
.perm-module:first-of-type { border-top: none; margin-top: 0; }
.perm-module__title { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); font-weight: 600; }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; flex-wrap: wrap; }
.perm-row__key { display: flex; flex-direction: column; }
.perm-row__key small { color: var(--ink-faint); font-size: .78rem; }

/* ============ 2FA ============ */
.steps { margin: 0 0 18px; padding-inline-start: 20px; color: var(--ink-soft); font-size: .9rem; }
.steps li { margin-bottom: 4px; }
.twofa-enrol { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
.twofa-qr { flex: 0 0 auto; width: 184px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 10px; box-shadow: var(--e1); }
.twofa-qr svg { display: block; width: 100%; height: auto; }
.twofa-key { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; }
.key-block { display: block; padding: 11px 13px; background: var(--surface-2); border-radius: var(--r-sm); font-size: 1rem; letter-spacing: .05em; margin-bottom: 8px; word-break: break-all; font-family: var(--font-mono); }
.recovery-codes { list-style: none; margin: 16px 0; padding: 18px; background: var(--surface-2); border-radius: var(--r); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recovery-codes code { background: none; font-size: 1rem; letter-spacing: .06em; }

/* ============ settings / branding ============ */
/* Filter + jump links above the form. */
.set-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.set-search { position: relative; flex: 1 1 260px; min-inline-size: 0; display: flex; }
.set-search__ic {
    position: absolute; inset-block-start: 50%; inset-inline-start: 12px; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--ink-faint); pointer-events: none;
}
.set-search__ic svg { width: 17px; height: 17px; display: block; }
.set-search input {
    flex: 1; min-inline-size: 0; font: inherit;
    padding-block: 11px; padding-inline: 36px 13px; /* logical, so Arabic keeps clear of the icon */
    border: 1px solid var(--rule); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.set-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.set-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.set-jump__a {
    padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rule);
    font-size: .78rem; font-weight: 600; color: var(--ink-soft); background: var(--surface);
    transition: border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.set-jump__a:hover { border-color: var(--accent); color: var(--accent-deep); }
.set-jump__a[hidden] { display: none; }

/* A settings group is a panel of rows; the heading sticks while you scroll it. */
.set-group[hidden] { display: none; }
.set-group > .panel__title { scroll-margin-block-start: 80px; }
.set-empty { padding: 28px 4px; text-align: center; color: var(--ink-faint); }

.setting-row { display: grid; grid-template-columns: 1fr; gap: 8px 28px; padding: 16px 0; border-top: 1px solid var(--rule-soft); }
.setting-row:first-of-type { border-top: none; }
.setting-row[hidden] { display: none; }
.setting-row__meta { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.setting-row__meta label { font-weight: 600; font-size: .94rem; line-height: 1.35; }
.setting-row__hint { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); max-inline-size: 62ch; }
.setting-row__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block-start: 2px; }
.setting-row__tags code { font-size: .72rem; color: var(--ink-faint); background: var(--surface-2); padding: 2px 6px; border-radius: 5px; word-break: break-all; }
.setting-row.is-locked .setting-row__control { opacity: .6; }
.setting-row__control { min-inline-size: 0; }
.setting-row__control input, .setting-row__control textarea { width: 100%; }
.setting-row__control textarea.mono { font-family: var(--font-mono); font-size: .82rem; line-height: 1.5; }
.setting-row__control--int input { max-width: 140px; }

@media (min-width: 760px) {
    .setting-row { grid-template-columns: minmax(280px, 1.25fr) minmax(200px, 1fr); align-items: start; }
    /* A switch reads better next to its label than pushed to the far edge. */
    .setting-row__control--bool { padding-block-start: 2px; }
}

/* The save button follows you down a long page. */
.set-save {
    position: sticky; inset-block-end: 12px; z-index: 20;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: var(--e2);
}
.set-save__note { font-size: .82rem; margin-inline-end: auto; }
/* Below 1024px the phone bar owns the bottom of the screen — sit above it. */
@media (max-width: 639px) { .app--bar .set-save { inset-block-end: calc(76px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .set-jump__a { transition: none; } }

.field--color .color-input { display: inline-flex; align-items: center; gap: 10px; }
.color-input input[type="color"] { width: 46px; height: 34px; padding: 0; border: 1px solid var(--rule); border-radius: 6px; background: none; cursor: pointer; }
.color-input output { font-family: var(--font-mono); font-size: .85rem; color: var(--ink-soft); }
.logo-preview { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.logo-preview img { max-width: 120px; max-height: 60px; border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 6px; background: var(--surface); }

/* Super Admin → Branding: the logo options, with the header they produce shown
   on a light and a dark page (fixed colours: it previews both, whatever theme
   the admin uses). Same caps as the real headers: 48 px high, 260 px wide. */
.blogo { display: grid; gap: 22px; }
.blogo__stage { display: grid; gap: 10px; }
.blogo__head {
    position: relative; display: flex; align-items: center; gap: 16px;
    min-height: 76px; padding: 14px 18px; border-radius: var(--r);
    border: 1px solid var(--rule); overflow: hidden;
}
.blogo__head--light { background: #ffffff; color: #0b1224; --mark: #2a5cff; }
.blogo__head--dark { background: #060a16; color: #eef2ff; border-color: #1d2944; --mark: #3d6dff; }
.blogo__lockup { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.blogo__img { display: block; width: auto; height: min(var(--brand-h, 32px), 48px); max-width: min(260px, 60%); object-fit: contain; }
.blogo__mark { color: var(--mark); display: inline-flex; }
.blogo__name { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; white-space: nowrap; }
.blogo__lockup.is-name .blogo__name { font-size: min(calc(var(--brand-h, 32px) * .6), 28.8px); line-height: 1.1; }
.blogo__nav { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.blogo__nav i { width: 42px; height: 7px; border-radius: 4px; background: currentColor; opacity: .14; }
.blogo__nav b { width: 72px; height: 28px; border-radius: 999px; background: linear-gradient(135deg, #2a5cff, #6a3dff); }
.blogo__tag {
    position: absolute; inset-block-start: 6px; inset-inline-end: 10px;
    font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .45;
}
.blogo__note { margin: 0; font-size: .82rem; }
.blogo__group { display: grid; gap: 10px; }
.blogo__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.blogo__choice { position: relative; cursor: pointer; }
.blogo__choice input { position: absolute; opacity: 0; pointer-events: none; }
.blogo__choice > span {
    display: grid; gap: 3px; height: 100%; padding: 12px 14px;
    border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface);
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease, background var(--dur-1) ease;
}
.blogo__choice b { font-weight: 600; font-size: .9rem; color: var(--ink); }
.blogo__choice small { color: var(--ink-soft); font-size: .78rem; line-height: 1.35; }
.blogo__choice:hover > span { border-color: var(--surface-3); }
.blogo__choice input:checked + span { border-color: var(--accent); background: var(--accent-wash); box-shadow: 0 0 0 3px var(--accent-glow); }
.blogo__choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.blogo__range { width: 100%; accent-color: var(--accent); }
.blogo__px { margin-inline-start: 6px; color: var(--ink-soft); font-weight: 500; font-variant-numeric: tabular-nums; }
.blogo__darkup { display: grid; gap: 8px; }
/* the light-mode and dark-mode logo, side by side */
.blogo__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.blogo__slot { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
.blogo__slot-title { margin: 0; font-size: .98rem; font-weight: 700; }
.blogo__slot-hint { margin: -6px 0 0; font-size: .82rem; }
.blogo__thumb {
    display: grid; place-items: center; min-height: 84px; padding: 14px;
    border-radius: var(--r-sm); border: 1px solid var(--rule); font-size: .82rem; text-align: center;
}
.blogo__thumb--light { background: #ffffff; color: #4e5b76; }
.blogo__thumb--dark { background: #060a16; color: #a3aecb; border-color: #1d2944; }
.blogo__thumb img { display: block; max-height: 48px; max-width: 100%; width: auto; object-fit: contain; }
.blogo__radios { display: grid; gap: 6px; }
.blogo__radio { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; }
.blogo__radio:hover { background: var(--surface-2); }
.blogo__radio input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.blogo__radio span { display: grid; gap: 1px; }
.blogo__radio b { font-weight: 600; font-size: .88rem; }
.blogo__radio small { color: var(--ink-soft); font-size: .78rem; line-height: 1.35; }
/* Super Admin → Branding: the browser icon, as a tab and as a home-screen tile */
.bfav { display: grid; gap: 14px; }
.bfav__show { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.bfav__tab {
    display: inline-flex; align-items: center; gap: 9px; min-width: 220px; max-width: 100%;
    padding: 9px 14px; border-radius: 10px 10px 0 0; background: var(--surface-2);
    border: 1px solid var(--rule); border-block-end: none; font-size: .82rem;
}
.bfav__tab img { width: 16px; height: 16px; flex: none; }
.bfav__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bfav__tab i { font-style: normal; color: var(--ink-faint); }
.bfav__big { width: 64px; height: 64px; border-radius: 14px; }
@media (max-width: 720px) {
    .blogo__choices, .blogo__pair { grid-template-columns: 1fr; }
    .blogo__nav i { display: none; }
}
.tr-input { width: 100%; }
.tr-input::placeholder { font-style: italic; }
.tr-base { color: var(--ink-soft); max-width: 380px; }

/* ============ card editor & lists ============ */
.card-list { display: grid; gap: 12px; }
.card-tile {
    display: flex; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; align-items: center;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
    padding: 16px 20px; box-shadow: var(--e1);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1) ease;
}
.card-tile__main { min-width: 0; flex: 1 1 260px; }
.card-tile:hover { transform: translateY(-1px); box-shadow: var(--e2); border-color: color-mix(in srgb, var(--accent) 30%, var(--rule)); }
.card-tile__name { margin: 0 0 6px; font-size: 1.05rem; font-family: var(--font-display); letter-spacing: -.01em; }
.card-tile__url { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-tile__url code {
    background: var(--surface-2); border: 1px solid var(--rule-soft); color: var(--ink-soft);
    padding: 2px 8px; border-radius: 6px; font-size: .8rem;
}
.card-tile__actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: none; }

.alias-input { display: flex; align-items: stretch; border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; }
.alias-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.alias-input__prefix { background: var(--surface-2); color: var(--ink-faint); padding: 10px 10px; font-size: .82rem; white-space: nowrap; align-self: center; }
.alias-input input { border: none !important; border-radius: 0; flex: 1; box-shadow: none !important; }

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tpl-opt { display: block; cursor: pointer; position: relative; }
/* stretched over the card, not left at 0×0 in a far ancestor — otherwise
   focusing the radio on click scrolls the whole page to it */
.tpl-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; }
.tpl-opt__body {
    display: block; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
    background: var(--surface); box-shadow: var(--e1);
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-2) ease, transform var(--dur-1) var(--ease-spring);
}
.tpl-opt:hover .tpl-opt__body { transform: translateY(-3px); box-shadow: var(--e2); }
.tpl-opt__cover {
    position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface-2);
    border-block-end: 1px solid var(--rule);
}
.tpl-opt__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl-opt__tick {
    position: absolute; inset-block-start: 8px; inset-inline-end: 8px;
    width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
    background: var(--accent); color: var(--accent-ink); font-size: .8rem; font-weight: 800;
    opacity: 0; transform: scale(.5); transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease-spring);
}
.tpl-opt__name { font-weight: 600; display: block; padding: 12px 14px 2px; }
.tpl-opt__meta { font-size: .78rem; color: var(--ink-faint); display: block; padding: 0 14px 12px; }
.tpl-opt input:checked + .tpl-opt__body { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow), var(--e2); }
.tpl-opt input:checked + .tpl-opt__body .tpl-opt__tick { opacity: 1; transform: scale(1); }
.tpl-opt input:focus-visible + .tpl-opt__body { outline: 2px solid var(--accent); outline-offset: 2px; }

.editor-nav { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 8px; position: sticky; top: 66px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); padding: 8px 0; z-index: 12; }
.editor-nav a { font-size: .84rem; font-weight: 500; padding: 6px 11px; border-radius: 999px; color: var(--ink-soft); background: var(--surface-2); }
.editor-nav a:hover { color: var(--ink); }

.images-row { display: flex; gap: 20px; flex-wrap: wrap; }
.image-slot { display: flex; flex-direction: column; gap: 6px; }
.thumb { max-width: 160px; max-height: 90px; border-radius: var(--r-sm); border: 1px solid var(--rule); object-fit: cover; }
.thumb--round { width: 80px; height: 80px; border-radius: 50%; }
.upload-form { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.upload-form .field { flex: 1; min-width: 200px; }

/* click-the-photo uploaders (avatar / cover / business logo) */
.img-upload-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.img-upload { margin: 0; }
.img-upload--wide { flex: 1; min-width: 240px; }
.img-upload__slot {
    position: relative; display: grid; place-items: center;
    width: 120px; min-height: 120px; padding: 10px;
    border: 1.5px dashed var(--rule); border-radius: var(--r);
    background: var(--surface-2); color: var(--ink-faint);
    cursor: pointer; overflow: hidden; text-align: center;
    transition: border-color var(--dur-1) ease, color var(--dur-1) ease, background var(--dur-1) ease;
}
.img-upload--wide .img-upload__slot { width: 100%; min-height: 132px; aspect-ratio: 3 / 1; }
.img-upload__slot--round { width: 120px; height: 120px; min-height: 0; border-radius: 50%; }
.img-upload__slot:hover { border-color: var(--accent); color: var(--ink-soft); background: var(--accent-wash); }
.img-upload__slot img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.img-upload__hint {
    position: relative; z-index: 1; font-size: .78rem; font-weight: 600; line-height: 1.3;
    padding: 4px 8px; border-radius: var(--r-sm);
}
.img-upload__slot img + .img-upload__hint {
    background: color-mix(in srgb, #000 55%, transparent); color: #fff;
    opacity: 0; transition: opacity var(--dur-1) ease;
}
.img-upload__slot:hover img + .img-upload__hint { opacity: 1; }
.img-upload__hint small { font-weight: 500; opacity: .85; }
.img-upload__slot input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* account avatar uploader (click the circle) */
.avatar-edit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.avatar-edit__form { margin: 0; }
.avatar-edit__slot {
    position: relative; display: grid; place-items: center;
    width: 96px; height: 96px; border-radius: 50%;
    border: 1.5px dashed var(--rule); background: var(--surface-2); color: var(--ink-faint);
    cursor: pointer; overflow: hidden;
    transition: border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.avatar-edit__slot:hover { border-color: var(--accent); background: var(--accent-wash); }
.avatar-edit__slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-edit__ph {
    font-family: var(--font-display); font-weight: 800; font-size: 2rem; text-transform: uppercase;
    color: var(--accent-ink); background: var(--accent);
    width: 100%; height: 100%; display: grid; place-items: center;
}
.avatar-edit__cam {
    position: absolute; z-index: 1; inset-block-end: 4px; inset-inline-end: 4px;
    width: 28px; height: 28px; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--rule); border-radius: 50%; color: var(--ink-soft);
}
.avatar-edit__cam svg { width: 15px; height: 15px; }
.avatar-edit__slot input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.avatar-edit__meta { display: flex; flex-direction: column; gap: 4px; }
.avatar-edit__name { font-weight: 700; }
.avatar-edit__meta .inline-form { margin-top: 4px; }

/* per-item photo pickers (services / products) */
.item-photos { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.item-photos__row { display: flex; align-items: center; gap: 10px; margin: 0; }
.item-photos__name { flex: 1; min-width: 0; font-size: .88rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-photos__pick { position: relative; overflow: hidden; cursor: pointer; flex: none; }
.item-photos__pick input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.repeater { display: grid; gap: 8px; margin-bottom: 10px; }
.repeater__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.repeater__row--2 { grid-template-columns: 1fr 1fr; }
.repeater__row--3 { grid-template-columns: 1fr 1fr 2fr; }
@media (max-width: 560px) { .repeater__row, .repeater__row--2, .repeater__row--3 { grid-template-columns: 1fr; } }

/* editor tabs */
.editor-tabs {
    display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 16px;
    position: sticky; top: 60px; z-index: 12;
    background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(6px);
    padding: 8px 0;
}
.editor-tabs__btn {
    font: inherit; font-size: .84rem; font-weight: 600; padding: 7px 13px; border-radius: 999px;
    color: var(--ink-soft); background: var(--surface-2); border: 1px solid transparent; cursor: pointer;
    transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.editor-tabs__btn:hover { color: var(--ink); }
.editor-tabs__btn.is-active { color: var(--accent); background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.editor-tabs__btn--link { text-decoration: none; margin-inline-start: auto; }
.editor-panel[hidden] { display: none; }
.editor-panel { animation: cv-fade var(--dur-2) ease; }
@keyframes cv-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.section-add { display: flex; gap: 8px; margin: 12px 0 18px; }
.section-card { border: 1px solid var(--rule); border-radius: var(--r); padding: 18px; margin-bottom: 12px; background: var(--surface); box-shadow: var(--e1); }
.section-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.section-card__id { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.section-card__id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-card__type {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-faint); background: var(--surface-2); padding: 2px 7px; border-radius: 999px; flex: none;
}
/* Save on the left, Delete on the right, on one row at the foot of the card.
   They are two different forms (Save reaches its own via the `form`
   attribute), so the row is what puts them together. */
.section-card__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.section-card__foot .inline-form { margin: 0; display: inline-flex; }
.section-card .inline-form { margin-top: 8px; }

.hours-grid { display: grid; gap: 6px; }
.hours-row { display: grid; grid-template-columns: 80px auto 1fr 1fr; gap: 8px; align-items: center; }
@media (max-width: 560px) { .hours-row { grid-template-columns: 1fr 1fr; } }

/* gallery editor */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-bottom: 10px; }
.gallery-grid__item { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--rule); }
.gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--rule-soft); }
.gallery-edit { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.gallery-edit img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--rule); }

/* services / portfolio item rows with media picker */
.item-list { display: grid; gap: 10px; margin-bottom: 10px; }
.item-list__row { display: grid; gap: 6px; grid-template-columns: 1.2fr .7fr 2fr auto; align-items: start; }
.item-list__row--folio { grid-template-columns: 1.2fr 2fr 1.4fr auto; }
.item-list__row .item-media-url { grid-column: 1 / -1; }
@media (max-width: 720px) { .item-list__row, .item-list__row--folio { grid-template-columns: 1fr; } }
.item-photos__thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--rule); flex: none; }

.seo-details { margin-top: 10px; }
.seo-details summary { cursor: pointer; font-weight: 600; font-size: .9rem; padding: 6px 0; }

/* ============ NFC ============ */
.nfc-qr, .qr-frame { width: 200px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 10px; box-shadow: var(--e1); }
.nfc-qr img, .nfc-qr svg { width: 100%; height: auto; display: block; }
.dest-list { display: grid; gap: 12px; margin-bottom: 10px; }
.dest-row { border: 1px solid var(--rule); border-radius: var(--r); padding: 14px; background: var(--surface); }
.dest-row__main { display: grid; grid-template-columns: minmax(140px,1fr) 2fr auto; gap: 8px; align-items: center; }
.dest-sched { margin-top: 8px; }
.dest-sched summary { cursor: pointer; font-size: .82rem; color: var(--ink-soft); }
.dest-sched__body { display: grid; gap: 8px; margin-top: 8px; }
@media (max-width: 560px) { .dest-row__main { grid-template-columns: 1fr; } }

/* ============ shared lists ============ */
.plain-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.plain-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.plain-list li:last-child { border-bottom: 0; }
.rank-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: rank; }
.rank-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 12px; background: var(--surface-2); border-radius: var(--r-sm); }
.rank-list li::before { counter-increment: rank; content: counter(rank); font-family: var(--font-mono); font-size: .78rem; color: var(--ink-faint); flex: none; width: 1.4em; }
.rank-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list li strong { font-variant-numeric: tabular-nums; }

/* ============ billing plan cards ============ */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 14px 0 22px; }
.plan-card {
    border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 22px; background: var(--surface);
    display: flex; flex-direction: column; gap: 12px; box-shadow: var(--e1);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--e3); }
.plan-card.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow), var(--e2); }
.plan-card h3 { margin: 0; font-size: 1.15rem; }
.plan-card__price { margin: 0; font-size: 1.05rem; color: var(--ink-soft); }
.plan-card__price strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); letter-spacing: -.02em; }
.plan-card__feats { margin: 0; padding-inline-start: 1.1em; display: grid; gap: 5px; font-size: .9rem; color: var(--ink-soft); flex: 1; }
.plan-card form.stack { margin-top: auto; gap: 10px; }

/* ============ admin: plan editor + cash approvals ============ */
.plan-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin: 14px 0; }
.plan-admin__card {
    border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 18px; background: var(--surface-2);
    display: flex; flex-direction: column; gap: 12px;
}
.plan-admin__card--new { border-style: dashed; }
.plan-admin__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 1.05rem; }
.plan-admin__foot { margin-top: auto; }
.plan-admin__danger { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cash-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cash-amount { width: 90px; }

/* ============ RTL nudges ============ */
.is-rtl .brand__mark svg { transform: scaleX(-1); }

@media (min-width: 640px) {
    body { font-size: 16.5px; }
    .site-main { padding-block: 48px 80px; }
}

/* ============ empty states ============ */
.empty {
    text-align: center;
    padding: 44px 24px 40px;
    background:
        radial-gradient(80% 60% at 50% 0%, var(--accent-wash) 0%, transparent 70%),
        var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--e1);
    display: grid;
    justify-items: center;
    gap: 6px;
}
.empty__art {
    width: 128px; height: 128px;
    color: var(--ink-faint);
    margin-bottom: 6px;
    animation: cv-pop 560ms var(--ease-spring) both;
}
.empty__art .es-stroke { stroke: currentColor; stroke-width: 2; }
.empty__art .es-fill   { fill: color-mix(in srgb, var(--accent) 8%, transparent); }
.empty__art .es-dash   { stroke-dasharray: 3 5; stroke-linecap: round; }
.empty__art .es-dot    { fill: var(--accent); }
.empty__art .es-accent { fill: var(--accent); }
.empty__title { margin: 4px 0 0; font-size: 1.15rem; }
.empty__text  { margin: 0; color: var(--ink-soft); max-width: 42ch; }
.empty__slot  { margin-top: 6px; }
.empty .button { margin-top: 14px; }
:root.gsap .empty__art { animation: none; }

/* ============ ambient auth background ============ */
.auth-bg {
    position: fixed; inset: 0; z-index: -1; overflow: hidden;
    background: var(--bg);
}
.auth-bg::before, .auth-bg::after {
    content: ""; position: absolute; border-radius: 50%;
    filter: blur(70px); opacity: .5;
}
.auth-bg::before {
    width: 46vmax; height: 46vmax;
    inset-block-start: -16vmax; inset-inline-start: -10vmax;
    background: radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 70%);
}
.auth-bg::after {
    width: 40vmax; height: 40vmax;
    inset-block-end: -16vmax; inset-inline-end: -8vmax;
    background: radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--accent) 70%, #7c5cff) 0%, transparent 70%);
    opacity: .38;
}
@media (prefers-reduced-motion: no-preference) {
    .auth-bg::before { animation: auth-drift 18s ease-in-out infinite alternate; }
    .auth-bg::after  { animation: auth-drift 22s ease-in-out infinite alternate-reverse; }
}
@keyframes auth-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(4vmax, 3vmax) scale(1.12); }
}

/* ============================================================================
   Console shell — sidebar on desktop, slide-in + bottom nav on mobile.
   Additive: guest pages keep .site-header; authed pages use body.has-shell.
   ========================================================================== */
body.has-shell { display: block; min-height: 100svh; }

.app { --side-w: 248px; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100svh; }
:root[data-nav="mini"] .app { --side-w: 72px; }

.app__side {
    position: sticky; inset-block-start: 0; align-self: start;
    height: 100svh; display: flex; flex-direction: column;
    background: var(--surface); border-inline-end: 1px solid var(--rule); z-index: 40;
}
.app__brand { display: flex; align-items: center; gap: 8px; padding: 16px 16px 12px; min-height: 58px; }
.app__brand .brand__name { font-size: 1.08rem; }
.app__collapse {
    margin-inline-start: auto; width: 30px; height: 30px; flex: none;
    display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 8px;
    background: none; color: var(--ink-faint); cursor: pointer;
    transition: color var(--dur-1) ease, background var(--dur-1) ease;
}
.app__collapse:hover { color: var(--ink); background: var(--surface-2); }
.app__collapse svg { width: 16px; height: 16px; }
:root[data-nav="mini"] .app__collapse svg { transform: scaleX(-1); }

.app__nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.app__navlink {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    color: var(--ink-soft); font-size: .92rem; font-weight: 500; white-space: nowrap;
    transition: color var(--dur-1) ease, background var(--dur-1) ease;
}
.app__navlink:hover { color: var(--ink); background: var(--surface-2); }
.app__navlink.is-active { color: var(--accent-deep); background: var(--accent-wash); font-weight: 600; }
.app__navico { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.app__navico svg { width: 20px; height: 20px; }

.app__side-foot { padding: 12px; border-block-start: 1px solid var(--rule); }
.app__side-foot .lang-switch { width: 100%; justify-content: center; }

:root[data-nav="mini"] .app__navlabel,
:root[data-nav="mini"] .app__brand .brand__name,
:root[data-nav="mini"] .app__side-foot { display: none; }
/* a wide logo in the narrow bar: its start (the mark, usually) */
:root[data-nav="mini"] .app__brand .brandmark__img { width: 36px; max-width: 36px; object-fit: cover; }
:root[data-nav="mini"] .app__navlink { justify-content: center; padding-inline: 0; }

.app__main { display: flex; flex-direction: column; min-width: 0; }
.app__topbar {
    position: sticky; inset-block-start: 0; z-index: 25;
    display: flex; align-items: center; gap: 10px; min-height: 58px;
    padding-inline: clamp(16px, 3vw, 28px);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
    border-block-end: 1px solid var(--rule);
}
.app__burger, .app__topbrand { display: none; }
.app__topbar-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

.app__main .site-main { padding-block: clamp(20px, 3vw, 30px) 60px; }
.app__main .wrap { max-width: 1140px; }
.app__main .site-header__inner, .app__main .site-footer .wrap { max-width: 1140px; }

.app__scrim { display: none; }

@media (max-width: 1023px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .app__side {
        position: fixed; inset-block: 0; inset-inline-start: 0; width: 268px;
        transform: translateX(-100%); transition: transform var(--dur-2) var(--ease-out);
        will-change: transform; box-shadow: var(--e3); z-index: 60;
    }
    .is-rtl .app__side { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(100%); }
    .app__side.is-open, .is-rtl .app__side.is-open { transform: translateX(0); }
    .app__scrim { display: block; position: fixed; inset: 0; background: rgba(8,12,16,.46); z-index: 55; }
    .app__collapse { display: none; }
    .app__burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border: 1px solid var(--rule); border-radius: 10px;
        background: none; cursor: pointer; flex: none;
    }
    .app__burger span { display: block; width: 18px; }
    .app__burger i { display: block; height: 2px; background: var(--ink); border-radius: 2px; margin: 3.5px 0; transition: .2s; }
    .app__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
    .app__burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
    .app__burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
    .app__topbrand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
    .app__topbrand .brand__mark { color: var(--accent); }

    .app__main .site-main { padding-block: 20px 40px; }
}

/* ---- The action buttons (layouts/base.php, .app__actionbar) ---------------
   On a laptop or a desktop they float in the bottom corner, out of the way of
   the page; on a phone they become a full-width bar under the thumb. "Scan a
   card" carries the accent — it is the everyday one — and sits nearest the
   corner. */
.app__actionbar {
    position: fixed; z-index: 45;
    inset-block-end: calc(22px + env(safe-area-inset-bottom)); inset-inline-end: 22px;
    display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px;
    pointer-events: none;
}
.app__act {
    pointer-events: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; padding: 0 20px 0 16px; border-radius: 999px;
    border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
    font: inherit; font-size: .92rem; font-weight: 700; letter-spacing: -.005em; white-space: nowrap;
    box-shadow: 0 14px 30px -14px color-mix(in srgb, #0b1222 50%, transparent), var(--e2);
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.app__act:hover { transform: translateY(-2px); }
.app__act:active { transform: scale(.98); }
.app__act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app__act .app__navico, .app__act .app__navico svg { width: 22px; height: 22px; }
.app__act--primary {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
    box-shadow: 0 14px 30px -10px var(--accent-glow), var(--e2);
}
.app--bar .app__main .site-main { padding-block-end: 96px; }
/* A page with a sticky Save bar at the bottom (the card editor): float above it. */
.app:has(.editor-panel .stack__actions) .app__actionbar { inset-block-end: calc(92px + env(safe-area-inset-bottom)); }

@media (max-width: 639px) {
    .app__actionbar {
        inset-block-end: 0; inset-inline: 0;
        flex-direction: row; align-items: stretch;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        border-block-start: 1px solid var(--rule);
        pointer-events: auto;
    }
    .app:has(.editor-panel .stack__actions) .app__actionbar { inset-block-end: 0; }
    .app__act { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 0 14px; border-radius: 14px; box-shadow: none; }
    .app__act:hover { transform: none; }
    .app__act span:last-child { overflow: hidden; text-overflow: ellipsis; }
    .app__act--primary { box-shadow: 0 8px 20px -10px var(--accent-glow); }
    .app--bar .app__main .site-main { padding-block-end: 104px; }
}

/* ---- Sheets (phone bar) --------------------------------------------------
   A panel that rises from the bottom over a dimmed page. bar.js opens them. */
.sheet {
    position: fixed; inset: 0; z-index: 70;
    display: flex; align-items: flex-end; justify-content: center;
    background: color-mix(in srgb, #000 55%, transparent);
    animation: sheet-fade .18s ease;
}
.sheet[hidden] { display: none; }
.sheet__panel {
    width: 100%; max-width: 560px; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--rule); border-block-end: 0;
    border-start-start-radius: var(--r-xl); border-start-end-radius: var(--r-xl);
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    display: grid; gap: 14px; align-content: start;
    animation: sheet-rise .22s cubic-bezier(.22, .61, .36, 1);
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet__title { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.sheet__close {
    width: 40px; height: 40px; flex: none; border-radius: 12px;
    border: 1px solid var(--rule); background: none; color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.sheet__close svg { width: 20px; height: 20px; }
.sheet__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet__body .nl-list { gap: 10px; }
.sheet__foot { justify-self: center; font-size: .86rem; font-weight: 600; color: var(--accent-deep); }
body.sheet-open { overflow: hidden; }
@keyframes sheet-fade { from { opacity: 0; } }
@keyframes sheet-rise { from { transform: translateY(16px); } }
@keyframes sheet-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (min-width: 640px) {
    .sheet { align-items: center; padding: 24px; }
    .sheet__panel {
        max-height: min(88vh, 860px);
        border-block-end: 1px solid var(--rule); border-radius: var(--r-xl);
        padding-block-end: 20px;
        box-shadow: 0 40px 90px -30px color-mix(in srgb, #000 55%, transparent);
        animation: sheet-pop .22s cubic-bezier(.22, .61, .36, 1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sheet, .sheet__panel { animation: none; }
}

/* The scanner: a square camera window with a viewfinder. The result replaces
   the camera until "Scan next". */
.scan__view {
    position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 56svh;
    border-radius: var(--r-lg); overflow: hidden; background: #0b0d10;
}
.sheet--scan.has-result .scan__view { display: none; }
.scan__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan__frame {
    position: absolute; inset: 11% 17% 25%; border-radius: 18px;
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .36);
}
.scan__status {
    position: absolute; inset-inline: 12px; inset-block-end: 12px; margin: 0;
    padding: 8px 12px; border-radius: 10px; text-align: center;
    background: rgba(0, 0, 0, .62); color: #fff; font-size: .86rem; font-weight: 600;
}
.scan__status[hidden], .scan__result[hidden], .scan__tally[hidden] { display: none; }
.scan__result {
    display: grid; gap: 6px; padding: 18px 16px 16px; text-align: center;
    border-radius: var(--r-lg); border: 1px solid var(--rule);
}
.scan__result.is-ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 32%, transparent); }
.scan__result.is-bad { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.scan__tally { display: flex; align-items: baseline; justify-content: center; gap: 6px; font-variant-numeric: tabular-nums; }
.scan__tally strong { font-family: var(--font-display); font-size: 2.8rem; line-height: 1; letter-spacing: -.03em; }
.scan__tally > span { color: var(--ink-soft); font-weight: 600; }
.scan__who { margin: 0; font-weight: 700; }
.scan__prize { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.scan__prize[hidden] { display: none; }
.scan__msg { margin: 0 0 6px; font-weight: 600; }
.scan__result.is-ok .scan__msg { color: var(--ok); }
.scan__result.is-bad .scan__msg { color: var(--warn); }
.scan__manual { display: grid; gap: 6px; }
.scan__manual label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.scan__row { display: flex; gap: 8px; }
.scan__row input {
    flex: 1; min-width: 0; font: inherit; font-family: var(--font-mono);
    padding: 11px 13px; border: 1px solid var(--rule); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
}
.scan__row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Scan a card | Find a member — one sheet, two ways to reach a customer. */
.scan__modes {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
    border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--rule);
}
.scan__mode {
    font: inherit; font-size: .88rem; font-weight: 600; padding: 8px 10px; border: 0; border-radius: 7px;
    background: none; color: var(--ink-soft); cursor: pointer;
}
.scan__mode.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--e1); }
.scan__mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.find { display: none; gap: 12px; }
.sheet--scan.is-find .find { display: grid; }
.sheet--scan.is-find .scan__view, .sheet--scan.is-find .scan__manual,
.sheet--scan.has-result .find { display: none; }
.give { display: none; }
.sheet--scan.is-give .give { display: grid; gap: 12px; }
.sheet--scan.is-give .scan__view, .sheet--scan.is-give .scan__manual, .sheet--scan.is-give .find { display: none; }
.give__pick, .give__show { display: grid; gap: 10px; }
.give__pick[hidden], .give__show[hidden] { display: none; }
.give__show { text-align: center; justify-items: center; }
.give__title { margin: 0; font-weight: 700; }
.give__what { margin: 0; font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.give__qr { width: min(260px, 70vw); height: auto; aspect-ratio: 1; padding: 12px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--e1); }
.give__url { margin: 0; max-width: 100%; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.find__search { display: grid; gap: 6px; }
.find__search label, .find__check label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.find__search input { font-family: inherit; }
.find__hint { margin: 0; font-size: .8rem; color: var(--ink-faint); }
.find__msg { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.find__msg[hidden], .find__err[hidden] { display: none; }
.find__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.find__i { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); }
.find__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.find__name { font-size: 1rem; }
.find__prog { font-size: .84rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.find__gift { margin: 0; font-size: .88rem; font-weight: 600; color: var(--accent-deep); }
.find__do, .find__check { display: grid; gap: 6px; }
.find__check input { font-family: inherit; }
.find__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.scan__charge { display: grid; gap: 6px; text-align: start; margin-block: 4px 6px; }
.scan__charge[hidden] { display: none; }
.scan__charge label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.scan__charge input { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.find__acts .button { flex: 1 1 auto; }
.find__note { margin: 0; font-size: .82rem; color: var(--warn); }
.find__ok { margin: 0; font-size: .82rem; font-weight: 600; color: var(--ok); }
.find__err { margin: 0; font-size: .84rem; font-weight: 600; color: var(--warn); }

/* keep the collapse rail off on medium screens where labels still fit */
@media (min-width: 1024px) and (max-width: 1200px) {
    .app { --side-w: 216px; }
}

/* ============ dashboard: quick actions, stat tones, request list ============ */
.quick { display: flex; flex-wrap: wrap; gap: 10px; }
.quick__i {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 15px; border-radius: 999px;
    border: 1px solid var(--rule); background: var(--surface);
    color: var(--ink); font-weight: 600; font-size: .9rem;
    transition: border-color var(--dur-1) ease, background var(--dur-1) ease, transform var(--dur-1) ease;
}
.quick__i:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }
button.quick__i { font-family: inherit; cursor: pointer; }
.quick__ic {
    width: 20px; height: 20px; flex: none; display: grid; place-items: center;
    border-radius: 6px; background: var(--accent-wash); color: var(--accent-deep); font-size: .9rem;
}
.quick__badge {
    background: var(--warn-bg); color: var(--warn); font-weight: 700; font-size: .72rem;
    border-radius: 999px; padding: 1px 7px;
}

.stat--link { cursor: pointer; }
.stat--link:hover { border-color: var(--accent); }
.stat--warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--rule)); }
.stat--warn .stat__value { color: var(--warn); }
.stat--ok .stat__value { color: var(--ok); }
.stat__badge {
    display: inline-block; margin-inline-start: 6px; vertical-align: 1px;
    background: var(--warn-bg); color: var(--warn); font-weight: 700;
    border-radius: 999px; padding: 0 6px; font-size: .7rem; letter-spacing: 0;
}

.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.panel__head h2 { margin: 0; font-size: 1.02rem; }
.panel--flush .panel__head { padding-block-end: 10px; }

.kv-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.kv-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); font-size: .92rem; }
.kv-list li:last-child { border-bottom: 0; }
.kv-list span { color: var(--ink-soft); }
.kv-list strong { font-variant-numeric: tabular-nums; }

.req-list { list-style: none; margin: 0; padding: 0 18px 8px; }
.req-list__i { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-soft); }
.req-list__i:last-child { border-bottom: 0; }
.req-list__who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.req-list__av {
    width: 34px; height: 34px; flex: none; border-radius: 999px; display: grid; place-items: center;
    background: var(--accent-wash); color: var(--accent-deep); font-weight: 700; font-family: var(--font-display);
}
.req-list__who b { display: block; font-weight: 600; }
.req-list__who .muted { font-size: .82rem; }
.req-list__age { font-size: .8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: none; }

.dash-more { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); padding: 4px 16px; }
.dash-more > summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--ink-soft); font-size: .9rem; list-style: none; }
.dash-more > summary::-webkit-details-marker { display: none; }
.dash-more > summary::before { content: "▸ "; color: var(--ink-faint); }
.dash-more[open] > summary::before { content: "▾ "; }

/* skeleton loader */
.skeleton, .skel { display: block; border-radius: var(--r-sm); background:
    linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
    background-size: 200% 100%; animation: skel 1.3s ease-in-out infinite; }
@keyframes skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel, .skeleton { animation: none; } }

/* ============ tab panes (program page etc.) ============ */
.tabpane { display: none; }
.tabpane.is-on { display: flex; flex-direction: column; gap: 20px; }
html:not(.js) .tabpane { display: flex; flex-direction: column; gap: 20px; }
html:not(.js) [data-tabs] { display: none; }
.tabpane > * { animation: cv-rise var(--dur-3) var(--ease-out) backwards; }

.copy-line { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy-line__btn {
    border: 1px solid var(--rule); background: var(--surface); color: var(--ink-soft);
    border-radius: 6px; width: 24px; height: 24px; cursor: pointer; font-size: .82rem; line-height: 1;
    display: inline-grid; place-items: center; flex: none;
}
.copy-line__btn:hover { color: var(--ink); border-color: var(--accent); }

/* ============ card builder: live preview beside the editor ============ */
.editor-shell { display: block; }
.editor-preview { display: none; }
@media (min-width: 1140px) {
    .editor-shell { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
    .editor-preview { display: block; position: sticky; inset-block-start: 74px; }
    .editor-preview__head { display: flex; align-items: center; justify-content: space-between;
        font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); font-weight: 600; margin-bottom: 8px; }
    .editor-preview__frame {
        border: 1px solid var(--rule); border-radius: 26px; overflow: hidden; background: #000;
        box-shadow: var(--e2); aspect-ratio: 320 / 620; padding: 8px;
    }
    .editor-preview__frame iframe { width: 100%; height: 100%; border: 0; border-radius: 18px; background: var(--surface); display: block; }
    .editor-preview__hint { margin: 10px 2px 0; font-size: .78rem; }
}

/* ============ dashboard onboarding checklist ============ */
.onboard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.onboard__head h2 { margin: 0; font-size: 1.02rem; }
.onboard__steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.onboard__step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r); }
.onboard__step.is-done { border-color: color-mix(in srgb, var(--ok) 35%, var(--rule)); background: var(--ok-bg); }
.onboard__mark {
    width: 26px; height: 26px; flex: none; border-radius: 999px; display: grid; place-items: center;
    background: var(--surface-2); color: var(--ink-soft); font-weight: 700; font-size: .82rem;
}
.onboard__step.is-done .onboard__mark { background: var(--ok); color: #fff; }
.onboard__label { flex: 1; min-width: 0; font-weight: 500; }
.onboard__step.is-done .onboard__label { color: var(--ok); text-decoration: line-through; text-decoration-thickness: 1px; }

/* ============ template picker — categorised + searchable ============ */
.tpl-search { margin: 4px 0 6px; }
.tpl-search input {
    width: 100%; font: inherit; padding: 11px 14px; border-radius: 10px;
    border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink);
}
.tpl-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); background: var(--surface); }
.tpl-noresult { padding: 20px 2px; }
.tpl-cat { margin-top: 20px; }
.tpl-cat:first-of-type { margin-top: 12px; }
.tpl-cat__title {
    margin: 0 0 12px; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-soft); display: flex; align-items: center; gap: 8px;
}
.tpl-cat__title span {
    background: var(--surface-2); color: var(--ink-faint); border-radius: 999px;
    padding: 1px 8px; font-size: .72rem; letter-spacing: 0;
}

/* compact variant — the "change template" picker inside the editor Options panel */
.tpl-picker--compact .tpl-picker__scroll {
    max-height: 460px; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 -4px; padding: 2px 8px 2px 4px;
    border: 1px solid var(--rule); border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}
.tpl-picker--compact .tpl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tpl-picker--compact .tpl-cat:first-of-type { margin-top: 4px; }
.tpl-picker--compact .tpl-opt__name { padding: 9px 12px 2px; font-size: .92rem; }
.tpl-picker--compact .tpl-opt__meta { padding: 0 12px 10px; }

/* ================= Super-Admin template library ================= */
.tpl-lib__bar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin: 4px 0 18px; }
.tpl-lib__search {
    flex: 1 1 240px; min-width: 0; font: inherit; padding: 9px 13px; border-radius: 10px;
    border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink);
}
.tpl-lib__search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.tpl-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.tpl-lib__card {
    border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
    background: var(--surface); box-shadow: var(--e1); display: flex; flex-direction: column;
}
.tpl-lib__shot {
    position: relative; display: block; aspect-ratio: 16 / 10; text-decoration: none;
    background: var(--pv-bg, #1b1b1b);
    background-image:
        radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--pv-primary, #888) 55%, transparent), transparent 60%),
        linear-gradient(160deg, transparent 55%, color-mix(in srgb, var(--pv-accent, #888) 40%, transparent));
    border-bottom: 1px solid var(--rule);
}
.tpl-lib__shot img { width: 100%; height: 100%; object-fit: cover; }
.tpl-lib__swatch { position: absolute; inset: 0; display: flex; gap: 8px; align-items: center; justify-content: center; }
.tpl-lib__swatch span { width: 26px; height: 46px; border-radius: 7px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); }
.tpl-lib__swatch span:nth-child(1) { background: var(--pv-primary, #888); }
.tpl-lib__swatch span:nth-child(2) { background: var(--pv-text, #eee); }
.tpl-lib__swatch span:nth-child(3) { background: var(--pv-accent, #888); }
.tpl-lib__open {
    position: absolute; inset-block-end: 8px; inset-inline-end: 8px; font-size: .72rem; font-weight: 700;
    padding: 4px 8px; border-radius: 999px; background: rgba(10,12,16,.62); color: #fff;
    opacity: 0; transition: opacity .15s ease;
}
.tpl-lib__shot:hover .tpl-lib__open, .tpl-lib__shot:focus-visible .tpl-lib__open { opacity: 1; }
.tpl-lib__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.tpl-lib__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tpl-lib__meta { margin: 0; font-size: .78rem; }
.tpl-lib__meta code { font-size: .74rem; }
.tpl-lib__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.tpl-lib__status { font: inherit; font-size: .82rem; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); }
/* Edit · Duplicate · Export: icon + word, sized to share one row. */
.tpl-act { display: inline-flex; align-items: center; gap: 5px; }
.tpl-act svg { width: 15px; height: 15px; flex: none; }
/* Status on the left, the one destructive control kept apart on the right. */
.tpl-lib__foot {
    display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--rule-soft);
}
.tpl-lib__statusform { flex: 1; min-width: 0; }
.tpl-lib__statusform .tpl-lib__status { width: 100%; }
.tpl-del {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 34px; height: 32px; padding: 0;
    color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, var(--rule)); background: transparent;
}
.tpl-del svg { width: 16px; height: 16px; }
.tpl-del:hover:not(:disabled) { background: var(--err); border-color: var(--err); color: #fff; }
.tpl-del:disabled { color: var(--ink-faint); border-color: var(--rule); opacity: .6; cursor: not-allowed; }
.tpl-lib__why { margin: 6px 0 0; font-size: .74rem; color: var(--ink-faint); line-height: 1.4; }

/* Edit page: the rarer actions, each with a line saying what it does. */
.tpl-more { margin-top: 18px; }
.tpl-more__row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    padding: 12px 0; border-top: 1px solid var(--rule-soft);
}
.tpl-more__row:first-of-type { border-top: none; padding-top: 4px; }
.tpl-more__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.tpl-more__text .muted { font-size: .84rem; }
.tpl-more__row--danger strong { color: var(--err); }
.tpl-more .button--danger:disabled { background: var(--surface-2); border-color: var(--rule); color: var(--ink-faint); cursor: not-allowed; }

/* ================= plan editor ================= */
.plan-overview .feat-dots { display: flex; gap: 4px; }
.feat-dot {
    width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center;
    font-size: .66rem; font-weight: 800; letter-spacing: .02em;
}
.feat-dot--on { background: var(--accent-wash); color: var(--accent-deep); }
.feat-dot--off { background: var(--surface-2); color: var(--ink-faint); opacity: .55; }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 20px; }
.check--indent { margin-inline-start: 26px; }
.plan-editor .tpl-assign__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 14px; }
.tpl-assign__search {
    flex: 1 1 220px; font: inherit; padding: 8px 12px; border-radius: 9px;
    border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink);
}
.tpl-assign__count { font-size: .82rem; color: var(--ink-faint); }
.tpl-assign__cat { margin-top: 14px; }
.tpl-assign__cat-title { margin: 0 0 8px; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.tpl-assign__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.tpl-assign__opt {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px;
    align-items: center; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 9px; cursor: pointer;
    background: var(--surface);
}
.tpl-assign__opt:hover { border-color: var(--rule-strong, var(--accent)); }
.tpl-assign__opt input { grid-row: 1 / span 2; }
.tpl-assign__opt.is-dim { opacity: .5; }
.tpl-assign__nm { font-weight: 600; font-size: .9rem; }
.tpl-assign__meta { grid-column: 2; font-size: .72rem; color: var(--ink-faint); }

/* ================= client plan summary + locked states ================= */
.plan-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-summary__head h2 { margin: 0; font-size: 1.02rem; }
.plan-summary__feats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 0; }
.plan-summary__feat { font-size: .84rem; }
.plan-summary__feat.is-off { color: var(--ink-faint); text-decoration: line-through; }
.plan-summary__usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.plan-summary__usage > div { border: 1px solid var(--rule); border-radius: var(--r); padding: 10px 12px; }
.plan-summary__usage dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.plan-summary__usage dd { margin: 3px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.lock-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px;
    border: 1px dashed var(--rule-strong, var(--rule)); border-radius: var(--r); background: var(--surface-2); }
.wallet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }

.feature-locked { text-align: center; padding: 34px 24px; }
.feature-locked__mark { width: 44px; height: 44px; margin: 0 auto 12px; color: var(--ink-faint); }
.feature-locked__mark svg { width: 100%; height: 100%; }
.feature-locked__title { margin: 0 0 6px; font-size: 1.05rem; }
.feature-locked__body { margin: 0 0 4px; }
.feature-locked__cta { margin: 0 0 16px; font-size: .88rem; }

/* ==========================================================================
   CARD EDITOR — mobile-first refinements.
   Everything here is scoped to the editor (.editor / .editor-* /
   .section-card); no other dashboard page is affected.
   ========================================================================== */

/* --- tab strip: one scrolling row instead of stacking into three --------- */
.editor-tabs {
    flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
}
.editor-tabs::-webkit-scrollbar { display: none; }
.editor-tabs__btn { flex: none; white-space: nowrap; scroll-snap-align: start; }
/* was margin-inline-start:auto, which forced this onto a row of its own */
.editor-tabs__btn--link { margin-inline-start: 0; }

/* --- the panel's primary action stays reachable while you edit ----------- */
.editor-panel .stack__actions {
    position: sticky; inset-block-end: 0; z-index: 11;
    margin-block-start: 18px; padding-block: 12px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-block-start: 1px solid var(--rule);
}
.editor-panel .stack__actions .button { flex: 1 1 auto; justify-content: center; }
@media (min-width: 640px) {
    .editor-panel .stack__actions .button { flex: 0 0 auto; }
}
@media (max-width: 639px) {
    /* clear the phone bar so Save is never underneath it */
    .app--bar .editor-panel .stack__actions { inset-block-end: calc(72px + env(safe-area-inset-bottom)); }
}

/* --- denser fields: two columns as soon as there is room ----------------- */
@media (min-width: 480px) {
    .editor .grid-2 { grid-template-columns: 1fr 1fr; gap: 14px; }
}
.editor .field { gap: 5px; }
.editor .panel { padding: 16px; }
@media (min-width: 640px) { .editor .panel { padding: 22px; } }
.editor .panel__title { margin-bottom: 4px; }

/* --- section cards fold away, so a long list stays scannable ------------- */
.section-card__head { gap: 10px; }
.section-card__toggle {
    flex: none; width: 30px; height: 30px; border-radius: 9px; padding: 0; cursor: pointer;
    display: grid; place-items: center; order: -1;
    background: var(--surface-2); border: 1px solid transparent; color: var(--ink-soft);
    transition: color .14s ease, background .14s ease;
}
.section-card__toggle:hover { color: var(--ink); background: var(--surface); }
.section-card__toggle svg { width: 14px; height: 14px; transition: transform .18s ease; }
.section-card.is-collapsed .section-card__toggle svg { transform: rotate(-90deg); }
.is-rtl .section-card.is-collapsed .section-card__toggle svg { transform: rotate(90deg); }
.section-card.is-collapsed { padding-block: 12px; }
.section-card.is-collapsed > * > :not(.section-card__head),
.section-card.is-collapsed > *:not(:first-child) { display: none; }
/* the head is the whole row when collapsed — keep it tidy */
.section-card.is-collapsed .section-card__head { margin-bottom: 0; }

/* --- page head: compact on a phone --------------------------------------- */
@media (max-width: 639px) {
    .page-head { gap: 10px; }
    .page-head h1 { font-size: 1.35rem; line-height: 1.2; }
    .page-head code {
        display: block; max-width: 100%; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; font-size: .74rem;
    }
    .page-head__actions { width: 100%; }
    .page-head__actions .button,
    .page-head__actions .inline-form { flex: 1 1 0; }
    .page-head__actions .inline-form .button { width: 100%; }
}

/* --- touch targets + focus ------------------------------------------------ */
.editor .repeater__row input,
.editor .item-list__row input,
.editor .item-list__row select { min-height: 44px; }
.editor-tabs__btn:focus-visible,
.section-card__toggle:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .section-card__toggle svg,
    .section-card__toggle { transition: none; }
}

/* on a narrow phone the type badge costs the section name its last words */
@media (max-width: 430px) {
    .section-card__type { display: none; }
    .section-card__head .check span { font-size: .78rem; }
}

/* ---- /loyalty hub: programs grouped by the business that owns them -------
   Loyalty is its own section, but a program still belongs to a business, so
   the listing keeps that relationship visible rather than flattening it. */
.loyalty-group { margin-block-start: 26px; }
.loyalty-group__head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-block-end: 8px; margin-block-end: 12px;
    border-block-end: 1px solid var(--rule);
}
.loyalty-group__name { margin: 0; font-size: 1.02rem; font-weight: 700; }
.loyalty-group__meta { color: var(--ink-faint); font-size: .82rem; }
.loyalty-group__head .button { margin-inline-start: auto; }
.loyalty-group__empty { margin: 0 0 4px; font-size: .88rem; }
@media (max-width: 520px) {
    .loyalty-group__head .button { margin-inline-start: 0; width: 100%; }
}

/* ==========================================================================
   CARD EDITOR — visual, image-first editing
   Services, portfolio and testimonials are content cards with the photo in
   the card; gallery is a progressive square grid. All of it drives the
   existing upload endpoints — this is presentation, not a second uploader.
   ========================================================================== */

/* ---- item cards (services / products / portfolio / testimonials) ---- */
.items { display: grid; gap: 12px; margin-block: 4px 8px; }
@media (min-width: 760px) { .items { grid-template-columns: repeat(2, 1fr); } }

.item {
    display: grid; grid-template-columns: 104px 1fr; gap: 12px;
    padding: 12px; border: 1px solid var(--rule); border-radius: 14px;
    background: var(--surface);
}
@media (max-width: 400px) { .item { grid-template-columns: 84px 1fr; gap: 10px; } }

/* the photo square IS the upload control — it should read as one */
.item__shot {
    position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    aspect-ratio: 1; width: 100%; padding: 0; overflow: hidden;
    border: 1px dashed color-mix(in srgb, var(--ink-faint) 55%, transparent);
    border-radius: 11px; background: var(--surface-2, rgba(127,127,127,.06));
    color: var(--ink-faint); cursor: pointer;
    font: inherit; font-size: .64rem; font-weight: 600; line-height: 1.2;
    text-align: center;
    transition: border-color .15s ease, color .15s ease;
}
.item__shot:hover, .item__shot:focus-visible { border-color: var(--accent); color: var(--accent-deep); }
.item__shot.has-img { border-style: solid; border-color: var(--rule); }
.item__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item__shot--face { border-radius: 50%; }
.item__ph { display: block; opacity: .75; }
.item__shotlbl { padding-inline: 4px; }
/* on a filled square the label becomes a hover/focus overlay */
.item__shot.has-img .item__shotlbl {
    position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1;
    padding: 5px 4px; background: rgba(0,0,0,.62); color: #fff;
    opacity: 0; transition: opacity .15s ease;
}
.item__shot.has-img:hover .item__shotlbl,
.item__shot.has-img:focus-visible .item__shotlbl { opacity: 1; }
.item__shot--face .item__shotlbl { display: none; }

.item__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item__body input, .item__body textarea, .item__body select { width: 100%; min-width: 0; }
.item__title { font-weight: 600; }
.item__desc { resize: vertical; }
.item__more { margin-block-start: 2px; }
.item__more summary { cursor: pointer; font-size: .74rem; color: var(--ink-faint); }
.item__more > *:not(summary) { margin-block-start: 6px; }
.item--tm { grid-template-columns: 68px 1fr; }

/* ---- gallery: progressive square grid ---- */
.gal { margin-block-start: 12px; }
.gal__grid {
    display: grid; gap: 8px; margin-block-start: 6px;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.gal__cell {
    position: relative; margin: 0; aspect-ratio: 1; overflow: hidden;
    border-radius: 11px; border: 1px solid var(--rule); background: var(--surface-2, rgba(127,127,127,.06));
}
.gal__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal__cell form { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; z-index: 1; }
.gal__rm {
    display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(0,0,0,.62); color: #fff;
}
.gal__rm:hover, .gal__rm:focus-visible { background: var(--danger, #c0392b); }

.gal__add { display: contents; }
.gal__cell--add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    cursor: pointer; border-style: dashed; color: var(--ink-faint);
    font-size: .66rem; font-weight: 600; text-align: center;
    border-color: color-mix(in srgb, var(--ink-faint) 55%, transparent);
    transition: border-color .15s ease, color .15s ease;
}
.gal__cell--add:hover, .gal__cell--add:focus-within { border-color: var(--accent); color: var(--accent-deep); }
.gal__plus { font-size: 1.5rem; line-height: 1; font-weight: 400; }
.gal__addlbl { padding-inline: 6px; }

/* ---- section reordering ---- */
.section-order { margin-block: 6px 12px; }
.section-order__hint { margin: 0 0 8px; font-size: .82rem; }
.section-order.is-dirty .button { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent); }
.section-card__move { display: inline-flex; gap: 2px; margin-inline-end: 6px; }
.section-card__mv {
    display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--rule); border-radius: 8px; cursor: pointer;
    background: var(--surface); color: var(--ink-faint);
}
.section-card__mv:hover, .section-card__mv:focus-visible { color: var(--accent-deep); border-color: var(--accent); }
.section-card.is-dragging { opacity: .55; outline: 2px dashed var(--accent); }
.section-card[draggable="true"] .section-card__head { cursor: grab; }

/* ---- social platform picker ---- */
.social-row { align-items: start; }
.social-pick { position: relative; }
.social-pick__btn {
    display: flex; align-items: center; gap: 7px; width: 100%; min-height: 40px;
    padding: 7px 10px; border: 1px solid var(--rule); border-radius: 10px;
    background: var(--surface); color: var(--ink); cursor: pointer;
    font: inherit; font-size: .86rem; text-align: start;
}
.social-pick__btn:hover, .social-pick__btn:focus-visible { border-color: var(--accent); }
.social-pick__ico { display: grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--accent-deep); }
.social-pick__ico svg { width: 18px; height: 18px; }
.social-pick__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.social-menu {
    position: absolute; z-index: 30; inset-block-start: calc(100% + 5px); inset-inline-start: 0;
    width: min(300px, 78vw); padding: 10px;
    background: var(--surface); border: 1px solid var(--rule); border-radius: 13px;
    box-shadow: 0 14px 38px rgba(0,0,0,.26);
}
.social-menu__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
    max-height: 232px; overflow-y: auto;
}
.social-menu__opt {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 3px; border: 0; border-radius: 9px; cursor: pointer;
    background: none; color: var(--ink); font: inherit; font-size: .58rem; font-weight: 600;
    min-height: 58px; /* touch target */
}
.social-menu__opt:hover, .social-menu__opt:focus-visible { background: var(--surface-2, rgba(127,127,127,.1)); color: var(--accent-deep); }
.social-menu__ico { display: grid; place-items: center; width: 20px; height: 20px; }
.social-menu__ico svg { width: 20px; height: 20px; }
.social-menu__lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.social-menu__custom {
    display: flex; flex-direction: column; gap: 4px;
    margin-block-start: 9px; padding-block-start: 9px; border-block-start: 1px solid var(--rule);
    font-size: .72rem; color: var(--ink-faint);
}

@media (max-width: 560px) {
    .social-row { grid-template-columns: 1fr; }
    .social-menu { width: min(300px, 88vw); }
}
@media (prefers-reduced-motion: reduce) {
    .item__shot, .gal__cell--add, .item__shot.has-img .item__shotlbl { transition: none; }
}

/* Visually hidden but still focusable and still announced. Use this instead of
   the `hidden` attribute for a control the user must be able to reach with a
   keyboard — `hidden` removes it from the tab order entirely. */
.vis-hidden {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* the label carries the focus ring on the input's behalf */
.gal__cell--add:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- item add / remove ------------------------------------------------- */
.item { position: relative; }
.item__rm {
    position: absolute; inset-block-start: 6px; inset-inline-end: 6px; z-index: 2;
    display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
    border: 1px solid var(--rule); border-radius: 50%; cursor: pointer;
    background: var(--surface); color: var(--ink-faint);
    opacity: 0; transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
/* stays reachable by keyboard and always visible on touch, where there is no hover */
.item:hover .item__rm, .item:focus-within .item__rm, .item__rm:focus-visible { opacity: 1; }
@media (hover: none) { .item__rm { opacity: 1; } }
.item__rm:hover, .item__rm:focus-visible { color: var(--danger, #c0392b); border-color: currentColor; }

.items__bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-block: 4px 10px;
}
.items__hint { font-size: .78rem; }

/* a just-added item has no server-side index yet, so its photo square waits */
.item__shot.is-pending {
    cursor: not-allowed; opacity: .6;
    border-style: dashed; border-color: var(--rule);
}
.item__shot.is-pending:hover { border-color: var(--rule); color: var(--ink-faint); }

/* the media disclosure reads as a real choice, not a stray placeholder */
.item__more summary { padding-block: 2px; }
.item-media-url { display: flex; flex-direction: column; gap: 4px; }
.item-media-url[hidden] { display: none; }

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

/* ---- card tile: the profile photo --------------------------------------
   A list of cards is much easier to scan with the face on it. Falls back to
   the first letter when no photo has been uploaded, so the tile keeps its
   shape either way. */
.card-tile__face {
    flex: none; display: grid; place-items: center; overflow: hidden;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--surface-2, rgba(127,127,127,.1));
    border: 1px solid var(--rule);
}
.card-tile__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-tile__initial {
    font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
    color: var(--ink-faint);
}
/* the actions wrap on their own row on a phone rather than squeezing */
.card-tile__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card-tile__actions .inline-form { display: inline-flex; margin: 0; }
@media (max-width: 560px) {
    .card-tile { gap: 12px; }
    .card-tile__face { width: 44px; height: 44px; }
    .card-tile__actions { width: 100%; }
    .card-tile__actions .button { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   CARD LIST — two views, one dataset
   Both layouts render server-side; the switch only toggles which is hidden,
   so it is instant and works on the data already on the page.
   ========================================================================== */
.viewsw { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-2, rgba(127,127,127,.12)); }
.viewsw__btn {
    display: grid; place-items: center; width: 36px; height: 32px; padding: 0;
    border: 0; border-radius: 8px; cursor: pointer;
    background: none; color: var(--ink-faint);
}
.viewsw__btn.is-on { background: var(--surface); color: var(--accent-deep); box-shadow: var(--e1); }
.viewsw__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.page-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- copy-link ---- */
.copybtn {
    display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0;
    border: 1px solid var(--rule); border-radius: 7px; cursor: pointer;
    background: var(--surface); color: var(--ink-faint); vertical-align: middle;
}
.copybtn:hover, .copybtn:focus-visible { color: var(--accent-deep); border-color: var(--accent); }
.copybtn.is-copied { color: var(--ok, #2e7d52); border-color: currentColor; }
.card-tile__meta { margin: 0; font-size: .82rem; }

/* ---- grid view ---- */
.card-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.gcard {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
    box-shadow: var(--e1);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1) ease;
}
.gcard:hover { transform: translateY(-1px); box-shadow: var(--e2); border-color: color-mix(in srgb, var(--accent) 30%, var(--rule)); }
.gcard__shot {
    position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--surface-2, rgba(127,127,127,.1));
}
.gcard__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard__ph {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; color: var(--ink-faint);
}
.gcard__status { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; }
.gcard__body {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 12px 14px 6px;
}
.gcard__name {
    margin: 0; font-size: .96rem; font-family: var(--font-display); letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.gcard__date { flex: none; font-size: .76rem; color: var(--ink-faint); }
.gcard__acts { padding: 4px 10px 12px; }

/* ---- compact icon actions (grid) ---- */
.cact { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.cact .inline-form { display: inline-flex; margin: 0; }
.cact__btn {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--rule); border-radius: 50%; cursor: pointer;
    background: var(--surface); color: var(--ink-faint);
    transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.cact__btn:hover, .cact__btn:focus-visible { color: var(--accent-deep); border-color: var(--accent); }
.cact__btn--danger:hover, .cact__btn--danger:focus-visible { color: var(--danger, #c0392b); border-color: currentColor; }
.cact__btn.is-copied { color: var(--ok, #2e7d52); border-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
    .gcard, .cact__btn { transition: none; }
}

/* ==========================================================================
   APPEARANCE — colours, buttons, type, with a live preview
   ========================================================================== */
.appr { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .appr { grid-template-columns: 1fr 240px; } }
.appr__controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---- colour rows: swatch + typed hex, kept in sync ---- */
.swatches { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.swatch { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.swatch__label { font-size: .78rem; font-weight: 600; color: var(--ink-faint); }
.swatch__pair {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--rule); border-radius: 10px; padding: 4px 6px 4px 4px;
    background: var(--surface);
}
.swatch__pair:focus-within { border-color: var(--accent); }
.swatch__dot {
    flex: none; width: 34px; height: 30px; padding: 0; cursor: pointer;
    border: 0; border-radius: 7px; background: none;
}
.swatch__dot::-webkit-color-swatch-wrapper { padding: 0; }
.swatch__dot::-webkit-color-swatch { border: 1px solid var(--rule); border-radius: 7px; }
.swatch__dot::-moz-color-swatch { border: 1px solid var(--rule); border-radius: 7px; }
.swatch__hex {
    flex: 1 1 auto; min-width: 0; width: 100%;
    border: 0; background: none; padding: 4px 2px;
    font-size: .84rem; text-transform: lowercase;
}
.swatch__hex:focus { outline: none; }
.swatch__hex:invalid { color: var(--danger, #c0392b); }

/* ---- button style chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 7px 12px 7px 8px; border: 1px solid var(--rule); border-radius: 10px;
    background: var(--surface); font-size: .82rem; font-weight: 600;
    min-height: 42px; /* touch target */
}
.chip.is-on, .chip:focus-within { border-color: var(--accent); color: var(--accent-deep); }
.chip__demo { width: 26px; height: 15px; flex: none; background: currentColor; }
.chip__demo--solid   { border-radius: 4px; }
.chip__demo--outline { background: none; border: 2px solid currentColor; border-radius: 4px; }
.chip__demo--pill    { border-radius: 999px; }
.chip__demo--soft    { border-radius: 7px; opacity: .45; }

.field__out { float: inline-end; font-variant-numeric: tabular-nums; color: var(--ink-faint); font-weight: 600; }
.appr__adv summary { cursor: pointer; font-size: .84rem; color: var(--ink-faint); padding-block: 4px; }
.appr__adv > *:not(summary) { margin-block-start: 8px; }
.stack__actions--split { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---- live preview: a miniature of the card, driven by the inputs ---- */
.appr__preview { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.pvw {
    --p-primary: #07899a; --p-bg: #fff; --p-bg2: #f3f6f8;
    --p-text: #14202b; --p-btntext: #fff; --p-social: #07899a;
    --p-radius: 8px; --p-scale: 1;
    position: relative; overflow: hidden;
    border: 1px solid var(--rule); border-radius: 14px;
    background: var(--p-bg); color: var(--p-text);
    padding: 0 14px 16px; text-align: center;
    font-size: calc(.82rem * var(--p-scale));
}
.pvw__cover { height: 54px; margin-inline: -14px; background: var(--p-bg2); }
.pvw__face {
    width: 48px; height: 48px; margin: -26px auto 8px; border-radius: 50%;
    background: var(--p-primary); border: 2px solid var(--p-bg);
}
.pvw__name { font-weight: 700; font-size: calc(.95rem * var(--p-scale)); }
.pvw__role { font-size: calc(.72rem * var(--p-scale)); opacity: .7; margin-block-start: 2px; }
.pvw__btn {
    margin-block-start: 10px; padding: 8px 10px; border-radius: var(--p-radius);
    background: var(--p-primary); color: var(--p-btntext);
    font-weight: 700; font-size: calc(.76rem * var(--p-scale));
}
.pvw--outline .pvw__btn { background: none; border: 2px solid var(--p-primary); color: var(--p-primary); }
.pvw--soft .pvw__btn { background: color-mix(in srgb, var(--p-primary) 18%, transparent); color: var(--p-primary); }
.pvw__icons { display: flex; justify-content: center; gap: 6px; margin-block-start: 10px; }
.pvw__icons i { width: 22px; height: 22px; border-radius: 50%; background: var(--p-social); opacity: .85; }

/* ============ staff approvals (owner /staff and the staff sign-in link) ============ */
.staff-alert { background: var(--warn-bg); color: var(--warn); border-radius: var(--r-sm);
    padding: 12px 14px; margin: 0 0 16px; display: grid; gap: 2px; text-align: start; }
.staff-alert strong { font-size: .95rem; }
.staff-alert span { font-size: .85rem; opacity: .9; }
.staff-board { text-align: start; }
.staff-board__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.staff-board__head h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.staff-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .8rem; font-weight: 700; }
.staff-live { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .5; transition: opacity .3s, color .3s; }
.staff-live.is-on { opacity: 1; color: var(--ok); }
.staff-empty { color: var(--ink-soft); padding: 24px 4px; margin: 0; }
.staff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.staff-req { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 14px 16px;
    display: grid; gap: 12px; background: var(--surface); transition: opacity .25s, transform .25s; }
.staff-req.is-suspicious { border-color: color-mix(in srgb, var(--err, #c0392b) 55%, var(--rule)); background: var(--err-bg, #fdeeeb); }
.staff-req.is-done { opacity: 0; transform: translateX(12px); }
.staff-req__who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.staff-req__who > div { min-width: 0; }
.staff-req__avatar { width: 40px; height: 40px; border-radius: 999px; flex: none; display: grid; place-items: center;
    background: var(--accent); color: var(--accent-ink); font-weight: 700; font-family: var(--font-display); }
.staff-req__name { margin: 0; font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.staff-req__sub { margin: 2px 0 0; font-size: .82rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.staff-req__sub code { font-size: .95em; }
.staff-req__facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.staff-req__facts > div { display: grid; }
.staff-req__facts dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.staff-req__facts dd { margin: 0; font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; }
.staff-req__act { display: flex; gap: 8px; flex-wrap: wrap; }
.staff-req__act form { margin: 0; }
.staff-req__err { margin: 0; color: var(--err, #c0392b); font-size: .82rem; font-weight: 600; }
.staff-recent { margin-top: 22px; text-align: start; }
.staff-recent summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.staff-recent ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: .85rem; }
.staff-recent li { padding: 6px 0; border-top: 1px solid var(--rule); }
.kv { display: grid; gap: 0; border: 1px solid var(--rule); border-radius: var(--r-sm); margin: 0 0 14px; }
.kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: .9rem; }
.kv > div + div { border-top: 1px solid var(--rule); }
.kv dt { color: var(--ink-soft); margin: 0; }
.kv dd { margin: 0; font-weight: 600; }
.data-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.data-table th, .data-table td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.section-title { margin: 22px 0 10px; font-size: 1rem; }

/* staff sign-in link: a phone-first working screen inside the gate frame */
.gate:has(.sp) { max-width: 560px; }
.sp { text-align: start; display: grid; gap: 16px; margin-top: 44px; }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sp-head__biz { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-head__logo { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex: none; }
.sp-head__name { margin: 0; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.sp-head__who { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.sp-head form { margin: 0; }
.sp-login { display: grid; gap: 14px; text-align: start; }
.sp-login .field input { font-size: 1.05rem; }
.sp-login__pin { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.sp-login__note { margin: 0; font-size: .82rem; color: var(--ink-soft); text-align: center; }
.sp-error { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--err-bg, #fdeeeb); color: var(--err, #c0392b); font-size: .88rem; font-weight: 600; }
.sp-eyebrow { margin: 0 0 4px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* loyalty program → Team tab */
.team { display: grid; gap: 0; }
.team > h2 { margin-bottom: 4px; }
.team__block { padding: 18px 0; border-top: 1px solid var(--rule-soft, var(--rule)); display: grid; gap: 10px; justify-items: start; }
.team__block:first-of-type { border-top: 0; padding-top: 8px; }
.team__block > .form { width: 100%; }
.team__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team__head h3 { margin: 0; font-size: 1rem; }
.team__lead { margin: 0; max-width: 68ch; }
.team__note { margin: 0; font-size: .82rem; }
.team__link { margin: 0; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface-2, transparent);
    max-width: 100%; font-size: .84rem; }
.team__link span { overflow-wrap: anywhere; }
.team__people { list-style: none; margin: 6px 0 0; padding: 0; width: 100%; display: grid; }
.team__person { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
    padding: 12px 0; border-top: 1px solid var(--rule-soft, var(--rule)); }
.team__who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.team__who strong { overflow-wrap: anywhere; }
.team__used { font-size: .8rem; }
.team__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team__pin { display: flex; gap: 6px; margin: 0; }
.team__pin input { width: 9.5em; padding: 6px 10px; font-size: .86rem; min-height: 0; }

/* ============ orders board (owner /orders + staff link) ============ */
.ob { text-align: start; }
.ob__head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 4px 0 12px; }
.ob__head h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.ob__filters { display: flex; gap: 6px; flex-wrap: wrap; }
.ob__chip { font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--rule); background: var(--surface); color: var(--ink-soft); }
.ob__chip span { font-variant-numeric: tabular-nums; opacity: .8; }
.ob__chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ob__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .ob__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oc { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); padding: 14px 16px; display: grid; gap: 8px; align-content: start;
    border-inline-start: 4px solid var(--rule); }
.oc--new { border-inline-start-color: var(--accent); }
.oc--accepted { border-inline-start-color: var(--warn, #b7791f); }
.oc--ready { border-inline-start-color: var(--ok, #2f855a); }
.oc__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oc__no { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1; }
.oc__type { font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2, var(--rule)); }
.oc__type--table { background: var(--accent-wash); color: var(--accent-deep); }
.oc__status { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.oc--new .oc__status { color: var(--accent-deep); }
.oc__age { margin-inline-start: auto; font-size: .8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.oc__from, .oc__who, .oc__addr, .oc__note { margin: 0; font-size: .88rem; overflow-wrap: anywhere; }
.oc__from { color: var(--ink-soft); font-size: .8rem; }
.oc__addr { color: var(--ink-soft); }
.oc__note { background: var(--warn-bg, var(--surface-2)); padding: 6px 8px; border-radius: 8px; }
.oc__lines { list-style: none; margin: 0; padding: 8px 0; display: grid; gap: 4px; border-block: 1px dashed var(--rule); }
.oc__lines li { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.oc__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.oc__pay { font-size: .8rem; color: var(--ink-soft); }
.oc__act { display: flex; gap: 8px; flex-wrap: wrap; }
.oc__act .button--primary { flex: 1 1 auto; }
.ob__cancel { color: var(--err, #c0392b); }

/* ============ menu / store editor ============ */
.cat-eyebrow { margin: 0 0 2px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.cat-face { display: grid; place-items: center; font-size: 1.5rem; background: var(--accent-wash); }
.cat-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.cat-bar h2 { margin: 0; }
.cat-addcat { display: flex; gap: 6px; margin: 0; }
.cat-addcat input { min-width: 0; width: 14em; }
.cat-new { margin: 0 0 16px; }
.cat-new > summary { list-style: none; display: inline-flex; cursor: pointer; }
.cat-new > summary::-webkit-details-marker { display: none; }
.cat-new[open] > summary { margin-bottom: 12px; }
.cat-hint { margin: 0 0 12px; }
.cat-group { border-top: 1px solid var(--rule); padding: 14px 0 6px; }
.cat-group__head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cat-group__name { margin: 0; font-size: 1rem; }
.cat-group__rename { display: flex; gap: 6px; margin: 0; flex: 1 1 16em; min-width: 0; }
.cat-group__rename input { font-weight: 700; min-width: 0; flex: 1; }
.cat-group__tools { display: flex; gap: 6px; }
.cat-group__empty { margin: 0 0 8px; font-size: .88rem; }
.cat-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cat-item { border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); }
.cat-item.is-off { opacity: .72; }
.cat-item__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.cat-item__img { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex: none; background: var(--surface-2, var(--rule)); }
.cat-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-item__main { min-width: 0; flex: 1; }
.cat-item__name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.cat-item__meta { margin: 2px 0 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .86rem; font-variant-numeric: tabular-nums; }
.cat-item__edit { border-top: 1px solid var(--rule); }
.cat-item__edit > summary { cursor: pointer; padding: 8px 12px; font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.cat-item__edit[open] > summary { color: var(--ink); }
.cat-item__edit .cat-form { padding: 0 12px 12px; }
.cat-form__grid { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.cat-form__photo { display: flex; align-items: flex-end; gap: 12px; }
.cat-form__photo img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.cat-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.cat-actions form { margin: 0; }
.cat-actions__end { display: flex; gap: 8px; margin-inline-start: auto; }
.cat-danger { color: var(--err, #c0392b); }
.cat-fs { border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 12px 14px 14px; margin: 6px 0 0; display: grid; gap: 8px; }
.cat-fs legend { padding: 0 6px; font-weight: 700; }
.cat-fs__hint { margin: 0; font-size: .86rem; }
.cat-indent { margin-inline-start: 26px; }
.cat-warn { margin: 0; font-size: .84rem; color: var(--warn, #b7791f); }
.inline-check.is-locked { opacity: .7; }
.cat-tables { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.cat-table { display: grid; justify-items: center; gap: 6px; padding: 12px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: #fff; color: #111; break-inside: avoid; }
.cat-table img { width: 140px; height: 140px; }
.cat-table__url { font-size: .76rem; color: #555; }
.cat-share { display: grid; justify-items: start; gap: 12px; }
.cat-share__qr { background: #fff; padding: 10px; border-radius: 12px; }
@media print {
    .app__side, .app__topbar, .app__actionbar, .page-head, .admin-nav, .site-footer, .tabpane:not([data-pane="tables"]), .cat-bar button, .flash { display: none !important; }
    .tabpane[data-pane="tables"] { display: block !important; }
    .cat-tables { grid-template-columns: repeat(3, 1fr); }
}

/* ============ NFC links (quick destination switcher) ============ */
.nl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.nl-card { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); padding: 14px 16px; display: grid; gap: 10px; }
.nl-card__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nl-card__face { width: 44px; height: 44px; border-radius: 999px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--accent-wash); font-weight: 700; }
.nl-card__face img { width: 100%; height: 100%; object-fit: cover; }
.nl-card__name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.nl-card__now { margin: 2px 0 0; font-size: .84rem; color: var(--ink-soft); }
.nl-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-opt { font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; padding: 9px 14px; border-radius: 999px;
    border: 1px solid var(--rule); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.nl-opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.nl-opt:disabled { opacity: .45; cursor: not-allowed; }
.nl-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nl-extra { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-extra input, .nl-extra select { flex: 1 1 14em; min-width: 0; font: inherit; padding: 9px 12px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.nl-msg { margin: 0; font-size: .84rem; font-weight: 600; }
.nl-msg.is-ok { color: var(--ok); }
.nl-msg.is-bad { color: var(--err, #c0392b); }
.nl-tap { font-size: .8rem; color: var(--ink-soft); overflow-wrap: anywhere; }

.sp-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

/* count badge on a nav item (e.g. new orders) */
.app__navlink { position: relative; }
.app__navbadge { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.app__navico { position: relative; }
.app__navbadge--dot { position: absolute; top: -6px; inset-inline-end: -10px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .62rem; margin: 0; }
:root[data-nav="mini"] .app__navlink .app__navbadge { position: absolute; top: 4px; inset-inline-end: 6px; min-width: 16px; height: 16px; font-size: .62rem; }

/* staff link: check a prize code */
.sp-prize { display: grid; gap: 10px; text-align: start; }
.sp-prize__title { margin: 0; font-size: 1.05rem; }
.sp-prize__form { display: flex; gap: 8px; }
.sp-prize__form input { flex: 1; min-width: 0; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }

/* ---- Store editor: extra photos, sizes & colours, shop design ---- */
.cat-photos__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cat-photos__list li { display: grid; gap: 6px; justify-items: center; }
.cat-photos__list img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.cat-variants__opts { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.cat-vtable-wrap { overflow-x: auto; }
.cat-vtable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cat-vtable th, .cat-vtable td { padding: 6px 5px; text-align: start; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.cat-vtable thead th { font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.cat-vtable tbody th { font-weight: 600; white-space: nowrap; }
.cat-vtable input:not([type="checkbox"]) { width: 100%; min-width: 4.2rem; padding: 7px 8px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
.cat-vtable input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.cat-design__banner { width: 100%; max-width: 560px; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--r); background: var(--surface-2); }

/* ---- Menu editor: template picker (small drawings of each design) ---- */
.tpl-picks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 4px; }
.tpl-pick { display: grid; gap: 6px; align-content: start; }
.tpl-pick__label { position: relative; display: block; cursor: pointer; }
.tpl-pick__label input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tpl-pick__card { display: grid; gap: 6px; height: 100%; padding: 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease; }
.tpl-pick__card .muted { font-size: .84rem; }
.tpl-pick__label:hover .tpl-pick__card { border-color: var(--ink-faint); }
.tpl-pick__label input:checked + .tpl-pick__card { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.tpl-pick__label input:focus-visible + .tpl-pick__card { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-pick__preview { justify-self: start; font-size: .84rem; }
.tpl-mini { display: grid; gap: 6px; height: 96px; padding: 10px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.tpl-mini i { position: relative; display: block; border-radius: 4px; }
.tpl-mini--classic i { background: var(--surface); border: 1px solid var(--rule); }
.tpl-mini--classic i::after { content: ""; position: absolute; inset-block: 2px; inset-inline-end: 2px; width: 12px; border-radius: 2px; background: var(--accent-wash); }
.tpl-mini--bistro { background: var(--surface); border: 1px solid var(--rule); padding-inline: 18px; align-content: space-evenly; }
.tpl-mini--bistro i { height: 0; border-bottom: 2px dotted var(--ink-faint); border-radius: 0; }
.tpl-mini--bistro i::before { content: ""; position: absolute; inset-inline-start: 0; bottom: -3px; width: 34%; height: 6px; border-radius: 3px; background: var(--ink-soft); }
.tpl-mini--gallery { grid-template-columns: 1fr 1fr; }
.tpl-mini--gallery i { background: linear-gradient(to bottom, var(--accent-wash) 0 68%, var(--surface) 68%); border: 1px solid var(--rule); }
.tpl-mini--bold { background: #0c0c0e; }
.tpl-mini--bold i { background: #212127; }
.tpl-mini--bold i::before { content: ""; position: absolute; inset-block: 3px; inset-inline-start: 3px; width: 10px; border-radius: 3px; background: #3a3a42; }
.tpl-mini--bold i::after { content: ""; position: absolute; top: 50%; inset-inline-end: 6px; width: 18px; height: 6px; margin-top: -3px; border-radius: 99px; background: var(--accent); }
/* Editor forms on phones: fieldsets and file pickers must not push the page wider than the screen. */
.cat-fs { min-inline-size: 0; min-width: 0; }
.cat-form, .cat-form > *, .cat-item, .cat-item__edit { min-width: 0; }
.cat-form__photo { flex-wrap: wrap; }
.cat-form__photo .field { flex: 1 1 12rem; min-width: 0; }
.cat-form input[type="file"], .cat-design input[type="file"] { max-width: 100%; }

/* ---- Games (owner): check a code, new game buttons, prize editor ---- */
.table-scroll { overflow-x: auto; }
.gm-check__form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.gm-check__form input, .gm-check__form select { padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; }
.gm-check__form input:focus, .gm-check__form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.gm-check__code { flex: 1 1 11rem; min-width: 0; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.gm-result { display: grid; gap: 4px; justify-items: start; margin-top: 14px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--surface-2); }
.gm-result p { margin: 0; }
.gm-result--ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.gm-result__code { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500; letter-spacing: .08em; }
.gm-result__label { font-weight: 700; }
.gm-result form { margin-top: 8px; }
.gm-new { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 18px; }
.gm-new__lbl { flex-basis: 100%; font-size: .86rem; }
.gm-type {
    flex: 1 1 150px; display: grid; gap: 2px; justify-items: start; text-align: start; padding: 12px 14px; cursor: pointer;
    border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit;
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.gm-type:hover { border-color: var(--accent); box-shadow: 0 6px 18px -10px var(--accent-glow); }
.gm-type:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gm-type__ic { font-size: 1.4rem; line-height: 1; }
.gm-type__name { font-weight: 700; }
.gm-type__hint { font-size: .8rem; color: var(--ink-soft); }
.gm-prizes { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 12px; }
.gm-prize { padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); min-width: 0; }
.gm-prize__form { display: grid; gap: 10px; min-width: 0; }
.gm-prize__swatch { width: 18px; height: 18px; border-radius: 99px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--rule); }
.gm-prize__grid { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.gm-prize__grid .field { min-width: 0; }
.gm-prize__grid input[type="color"] { width: 56px; height: 38px; padding: 2px; }
.gm-prize__stats { margin: 0; font-size: .84rem; }
.gm-prize__stats:empty { display: none; }
.gm-add { margin-top: 6px; }
.gm-foot { margin: 14px 0 0; font-size: .84rem; }
/* Staff link on phones: long lines and the code form wrap inside the card. */
.sp, .sp-prize { grid-template-columns: minmax(0, 1fr); }
.sp-prize__form .button { flex: none; }

/* ---- Games editor: product prize (pick from Menu / Store, or own photo) ---- */
.gm-product { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); min-width: 0; }
.gm-product[hidden] { display: none; }
.gm-product select { width: 100%; min-width: 0; }
.gm-product .field { min-width: 0; }
.gm-product__photo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.gm-product__photo .field { flex: 1 1 12rem; min-width: 0; }
.gm-product__photo input[type="file"] { max-width: 100%; }
.gm-product__img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--surface); }
.gm-result__img { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; }

/* ---- Loyalty: messages to wallet cards ---- */
.wm__form { display: grid; gap: 12px; }
.wm__form textarea { width: 100%; }
.wm__count { justify-self: end; font-variant-numeric: tabular-nums; }
.wm__notes { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: .86rem; color: var(--ink-soft); }
.wm__who { margin-top: 0; }
.wm__who .rowbg__body { gap: 8px; max-height: 260px; overflow: auto; }
.wm__find { width: 100%; padding: 7px 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: inherit; font: inherit; }
.wm__h { margin: 22px 0 8px; font-size: 1rem; }
.wm__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wm__item { padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); }
.wm__body { margin: 0 0 4px; overflow-wrap: anywhere; }
.wm__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .84rem; }

/* ---- Loyalty: wallet card design + approximate preview ---- */
.wd__plan { margin: 4px 0 14px; }
.wd__grid { display: grid; gap: 22px; }
@media (min-width: 860px) { .wd__grid { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); align-items: start; } .wd__side { position: sticky; top: 16px; } }
.wd__side { display: grid; gap: 8px; min-width: 0; }
.wd__card {
    --wd-bg: #1c1c1e;
    display: grid; gap: 0; overflow: hidden; border-radius: 18px; background: var(--wd-bg); color: #fff;
    box-shadow: 0 18px 40px -22px rgba(0,0,0,.55); font-family: -apple-system, "SF Pro Text", var(--font); transition: background .2s ease;
}
.wd__card.is-light { color: #111; }
.wd__card[style*="--wd-fg"] { color: var(--wd-fg); }
.wd__big { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; text-wrap: balance; }
/* The stamps as the pass draws them on its strip. */
.wd__strip--stamps { align-content: center; justify-items: center; }
.wd__strip:not([style*="background-image"]) {
    background-image: radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / .16), transparent 55%), linear-gradient(90deg, rgb(255 255 255 / .08), rgb(0 0 0 / .18));
}
.wd__discs { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 7px; width: 100%; max-width: 290px; }
.wd__discs i {
    aspect-ratio: 1; border-radius: 999px; border: 2px solid color-mix(in srgb, currentColor 55%, transparent);
    display: grid; place-items: center; font-style: normal; font-size: .72rem;
}
.wd__discs i.on {
    border: 0; background: var(--wd-fg, #fff) center / 62% no-repeat; color: var(--wd-bg);
    box-shadow: 0 2px 6px rgb(0 0 0 / .25);
}
.wd__card.is-light .wd__discs i.on { background-color: var(--wd-fg, #111); }
.wd__strip--gift_item { min-height: 128px; }
.wd__strip { position: relative; overflow: hidden; }
.wd__strip > * { position: relative; z-index: 1; }
/* Discount: an Apple coupon — perforated top edge, sale stripes, a large %. */
.wd__card--discount {
    -webkit-mask: radial-gradient(circle at 7px 0, transparent 5px, #000 5.5px) 0 0 / 14px 100% repeat-x;
            mask: radial-gradient(circle at 7px 0, transparent 5px, #000 5.5px) 0 0 / 14px 100% repeat-x;
}
.wd__strip--discount:not([style*="background-image"]) {
    background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .09) 0 14px, transparent 14px 36px), linear-gradient(90deg, rgb(255 255 255 / .08), rgb(0 0 0 / .18));
}
.wd__strip--discount::after {
    content: "%"; position: absolute; right: 14px; bottom: -18px; z-index: 0;
    font-size: 6.4rem; font-weight: 800; line-height: 1; opacity: .18; transform: rotate(-8deg);
}
/* Gift cards: a satin ribbon and a bow down the right. */
.wd__strip--gift_money::before, .wd__strip--gift_item::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: 18%; width: 16px; z-index: 1;
    background: linear-gradient(90deg, #c9a24a 0 12%, #f1d592 12% 38%, #fff4d2 38% 62%, #f1d592 62% 88%, #c9a24a 88%); box-shadow: 3px 0 6px rgb(0 0 0 / .25);
}
.wd__strip--gift_money::after, .wd__strip--gift_item::after {
    content: ""; position: absolute; top: 12px; right: calc(18% - 29px); width: 74px; height: 54px; z-index: 2;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 72'%3E%3Cpath d='M50 30 L28 70 L37 63 L41 72 Z' fill='%23c9a24a'/%3E%3Cpath d='M50 30 L72 70 L63 63 L59 72 Z' fill='%23c9a24a'/%3E%3Cellipse cx='29' cy='21' rx='23' ry='13' transform='rotate(-24 29 21)' fill='%23f1d592'/%3E%3Cellipse cx='71' cy='21' rx='23' ry='13' transform='rotate(24 71 21)' fill='%23f1d592'/%3E%3Cellipse cx='31' cy='21' rx='12' ry='5' transform='rotate(-24 31 21)' fill='%23c9a24a'/%3E%3Cellipse cx='69' cy='21' rx='12' ry='5' transform='rotate(24 69 21)' fill='%23c9a24a'/%3E%3Ccircle cx='50' cy='29' r='8.5' fill='%23c9a24a'/%3E%3Ccircle cx='50' cy='29' r='6' fill='%23f1d592'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Points: a bar towards the reward. */
.wd__bar { display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, currentColor 30%, transparent); margin-top: 8px; overflow: hidden; }
.wd__bar i { display: block; height: 100%; border-radius: inherit; background: currentColor; }.wd__sec { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.wd__back { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface-2); font-size: .85rem; }
.wd__back p { margin: 0; display: grid; }
.wd__back small { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); font-weight: 600; }
.wd__back-h { font-weight: 700; }
.wd__link { color: var(--accent-deep); overflow-wrap: anywhere; }
.wd__links { display: grid; gap: 8px; }
.wd__link-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; }
.wd__link-row input { min-width: 0; }.wd__top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; min-width: 0; }
.wd__logo { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; flex: none; }
.wd__name { flex: 1; min-width: 0; font-weight: 600; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd__hdr { display: grid; text-align: end; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.wd__card small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.wd__strip { display: grid; gap: 2px; min-height: 96px; align-content: end; padding: 12px 16px; background-size: cover; background-position: center; }
.wd__strip[style*="background-image"] { text-shadow: 0 1px 6px rgba(0,0,0,.55); color: #fff; }
.wd__stars { font-size: 1.15rem; letter-spacing: .08em; overflow-wrap: anywhere; }
.wd__sec { padding: 10px 16px; font-size: .9rem; }
.wd__qr {
    width: 96px; height: 96px; margin: 6px auto 16px; border-radius: 8px; background-color: #fff;
    background-image: linear-gradient(90deg, #111 50%, transparent 50%), linear-gradient(#111 50%, transparent 50%);
    background-size: 16px 16px; background-blend-mode: difference; border: 8px solid #fff;
}
.wd__card.is-free .wd__logo { display: none; }
.wd__card.is-free .wd__strip { background-image: none !important; text-shadow: none; color: inherit; }
.wd__form { display: grid; gap: 14px; min-width: 0; }
.wd__dot { display: inline-block; width: 14px; height: 14px; margin-inline-start: 6px; border-radius: 99px; vertical-align: -2px; box-shadow: 0 0 0 1px var(--rule); }
.wd__form input[type="color"] { width: 44px; height: 30px; padding: 0 2px; margin-inline-start: 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); }
.wd__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: 26px; }
.wd__preset { position: relative; cursor: pointer; }
.wd__preset input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wd__preset span:not(.vis-hidden) { display: block; width: 30px; height: 30px; border-radius: 99px; box-shadow: 0 0 0 1px var(--rule); }
.wd__preset input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.wd__preset input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.wd__img { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; min-width: 0; }
.wd__img .field { flex: 1 1 14rem; min-width: 0; }
.wd__img input[type="file"] { max-width: 100%; }
.wd__thumb img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.wd__thumb--strip img { width: 120px; height: 40px; }
.wd__thumb--logo img { object-fit: contain; }
/* Poster layout (iOS 27): the whole card is one picture with three lines over it. */
.wd__card.is-poster {
    position: relative; isolation: isolate; aspect-ratio: 358 / 448;
    grid-template-rows: auto 1fr auto; -webkit-mask: none; mask: none;
}
.wd__card.is-poster::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(rgb(0 0 0 / .32), transparent 26%, transparent 52%, rgb(0 0 0 / .5));
}
.wd__card.is-poster.is-light::after { background: linear-gradient(rgb(255 255 255 / .35), transparent 26%, transparent 52%, rgb(255 255 255 / .5)); }
.wd__card.is-poster .wd__strip { position: absolute; inset: 0; z-index: -1; min-height: 0; padding: 0 16px 76px; align-content: end; }
.wd__card.is-poster .wd__strip--stamps { align-content: center; padding: 70px 26px 120px; }
.wd__card.is-poster .wd__strip--discount::after { right: 18px; bottom: auto; top: 30%; font-size: 9rem; }
.wd__card.is-poster .wd__strip--gift_money::before, .wd__card.is-poster .wd__strip--gift_item::before { right: 22%; }
.wd__card.is-poster .wd__strip--gift_money::after, .wd__card.is-poster .wd__strip--gift_item::after { top: 30%; right: calc(22% - 29px); }
.wd__card.is-poster .wd__sec { grid-row: 3; padding-bottom: 16px; }
.wd__card.is-poster .wd__qr { display: none; }
/* The buttons Wallet puts under the card (iOS 27), side by side. */
.wd__acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.wd__act {
    display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 11px 10px;
    border-radius: 14px; background: var(--surface-2); border: 1px solid var(--rule);
    font: 600 .86rem/1.2 -apple-system, "SF Pro Text", var(--font); color: var(--ink);
}
.wd__act svg { flex: none; }
/* Classic or poster: two small sketches to choose from. */
.wd__layouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wd__lay { position: relative; display: grid; gap: 4px; align-content: start; padding: 12px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; }
.wd__lay input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wd__lay:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wd__lay:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.wd__lay-name { font-weight: 600; }
.wd__lay-art { display: block; height: 86px; position: relative; margin-bottom: 4px; }
.wd__lay-art i {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 8px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent-deep));
    box-shadow: 0 8px 18px -10px rgb(0 0 0 / .5);
}
.wd__lay-art--classic i { width: 100px; height: 68px; }
.wd__lay-art--classic i::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 22px; background: rgb(255 255 255 / .22); }
.wd__lay-art--poster i { width: 64px; height: 80px; }
.wd__lay-art--poster i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 40% at 50% 42%, rgb(255 255 255 / .35), transparent), linear-gradient(transparent 55%, rgb(0 0 0 / .35)); }
.wd__lay-art--poster i::after { content: ""; position: absolute; left: 8px; right: 20px; bottom: 9px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .85); }

/* ---------- Super Admin → Home page ---------- */
/* The public landing page, section by section. Each section is a details
   panel so the screen opens short and the person picks the part they want. */
.hp-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hp-brand__main { flex: 1 1 260px; }
.hp-brand__main .panel__title { margin: 0 0 2px; }
.hp-brand__show { display: flex; align-items: center; gap: 10px; }
.hp-brand__logo { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: var(--surface-2); }

.hp-sec { padding: 0; }
.hp-sec[hidden] { display: none; }
.hp-sec__sum {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; cursor: pointer; list-style: none;
}
.hp-sec__sum::-webkit-details-marker { display: none; }
.hp-sec__sum::after { content: "▾"; color: var(--ink-faint); transition: transform var(--dur-1) ease; }
.hp-sec[open] .hp-sec__sum::after { transform: rotate(180deg); }
.hp-sec__name { font-weight: 600; }
.hp-sec__count { font-size: .82rem; white-space: nowrap; }
.hp-sec__body { padding: 0 16px 18px; display: grid; gap: 14px; }
.hp-sec__what { margin: 0; font-size: .86rem; max-inline-size: 70ch; }
.hp-f[hidden] { display: none; }
.hp-f__edited { margin-inline-start: 6px; vertical-align: middle; }
.hp-f__base { color: var(--ink-faint); overflow-wrap: anywhere; }

.hp-pics__h { margin: 6px 0 0; font-size: .95rem; }
.hp-pics { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.hp-pic { margin: 0; display: grid; gap: 8px; align-content: start; }
.hp-pic img {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface-2);
}
.hp-pic figcaption { display: grid; gap: 2px; font-size: .86rem; }
.hp-pic__form { display: grid; gap: 8px; }
.hp-pic__form input[type="file"] { font-size: .82rem; }
.hp-pic__acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Services: what this tenant has, and could have ---------- */
.svc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 22px; }
.svc { display: grid; gap: 8px; align-content: start; }
.svc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.svc__name { margin: 0; font-size: 1rem; }
.svc__name a { text-decoration: none; color: inherit; }
.svc__name a:hover { text-decoration: underline; }
.svc__desc { margin: 0; font-size: .86rem; }
.svc__plan { margin: 0; font-weight: 600; }
.svc__use { margin: 0; font-variant-numeric: tabular-nums; font-size: .9rem; }
.svc__form { display: grid; gap: 8px; margin-top: 4px; }

/* ---- Phone number with its country (components/phone-input.php) ----------
   The number is first in the markup (so a wrapping <label> focuses it); the
   country is drawn before it. A native <select>, invisible, covers the short
   "🇲🇦 +212" label so the phone's own picker opens on tap. */
.phone-input { display: flex; gap: 8px; direction: ltr; width: 100%; }
.phone-input > input { flex: 1 1 auto; min-width: 0; }
.phone-input .phone-input__cc {
    order: -1; flex: none; position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 30px 0 12px; min-height: 44px;
    border: 1px solid var(--rule); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.phone-input .phone-input__cc::after {
    content: ""; position: absolute; inset-inline-end: 12px; top: 50%;
    width: 7px; height: 7px; margin-top: -5px;
    border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
    transform: rotate(45deg); pointer-events: none;
}
.phone-input .phone-input__cc select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 16px; padding: 0; border: 0;
}
.phone-input .phone-input__cc:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.gate__form .phone-input .phone-input__cc { border-radius: var(--r); background: var(--surface-2); }

/* ---- Admin → Plans: a service's plans side by side (admin/plans/index) ---- */
.plan-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 4px 18px; }
.plan-jump__chip {
    padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px;
    font-size: .84rem; font-weight: 600; color: var(--ink-soft); background: var(--surface);
}
.plan-jump__chip:hover, .plan-jump__chip:focus-visible { color: var(--accent-deep); border-color: var(--accent); }
.plan-svc { scroll-margin-top: 16px; }
.plan-matrix { width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.plan-matrix th, .plan-matrix td { padding: 9px 12px; border-block-end: 1px solid var(--rule-soft); text-align: start; vertical-align: middle; }
.plan-matrix thead th { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; border-block-end: 1px solid var(--rule); }
.plan-matrix__sub { display: block; font-family: var(--font-body, inherit); font-size: .74rem; font-weight: 500; color: var(--ink-faint); }
.plan-matrix tbody th[scope="row"] { width: 30%; font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.plan-matrix input[type="text"], .plan-matrix input[type="number"], .plan-matrix select {
    width: 100%; max-width: 170px; font: inherit; font-size: .9rem; padding: 8px 10px;
    border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
}
.plan-matrix input:focus, .plan-matrix select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.plan-matrix__price { display: flex; gap: 6px; max-width: 170px; }
.plan-matrix__price input[type="number"] { min-width: 0; }
.plan-matrix__price input[type="text"] { width: 58px; flex: none; text-transform: uppercase; }
.plan-matrix__group th {
    padding-block: 14px 8px; background: var(--surface-2); color: var(--ink);
    font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.plan-matrix__group th span { margin-inline-start: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
.plan-matrix__quiet th, .plan-matrix__quiet td { opacity: .72; }
.plan-matrix__foot th, .plan-matrix__foot td { border-block-end: 0; font-size: .84rem; }

/* ---- Loyalty history (loyalty/history.php) ---- */
.hist-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-block: 4px 6px; }
.hist-bar .admin-nav { margin: 0; border: 0; }
.hist-bar__who select { font: inherit; padding: 9px 12px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); min-width: 200px; }
.panel--flush .hist-title { padding: 18px 20px 4px; margin: 0; }
.table tbody tr.is-picked { background: var(--accent-wash); }
.hist-del { box-shadow: none; color: var(--ink-soft); }
.hist-del:hover { color: var(--err); border-color: var(--err); }
.hist-clear { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.hist-clear .panel__title { margin: 0 0 4px; }
.hist-clear p { margin: 0; max-width: 60ch; }
.team-act { color: var(--ink-soft); font-size: .88rem; font-weight: 600; white-space: nowrap; }
.team-act:hover { color: var(--accent-deep); }

/* ---- The kind of loyalty card, picked by its look (loyalty/program_edit.php) ---- */
.ktiles-wrap { border: 0; padding: 0; margin: 0; min-width: 0; }
.ktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 6px; }
.ktile {
    position: relative; display: grid; align-content: start; gap: 3px; padding: 8px 8px 12px;
    border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); cursor: pointer;
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease, transform var(--dur-1) ease;
}
.ktile:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); transform: translateY(-1px); }
.ktile.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.ktile:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ktile.is-on::after {
    content: "✓"; position: absolute; top: -8px; inset-inline-end: -8px; width: 22px; height: 22px;
    border-radius: 999px; background: var(--accent); color: var(--accent-ink);
    display: grid; place-items: center; font-size: .75rem; font-weight: 800;
}
.ktile__art {
    position: relative; display: grid; align-content: start; gap: 9px; aspect-ratio: 1.45; padding: 9px 10px;
    border-radius: 10px; overflow: hidden; color: #fff;
    background:
        radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / .22), transparent 55%),
        linear-gradient(145deg, var(--k-brand), color-mix(in srgb, var(--k-brand) 52%, #000));
}
/* A coupon's notches on the discount and money cards. */
/* A discount card is a coupon: a perforated top edge and "sale" stripes. */
.ktile__art--discount {
    background-image:
        repeating-linear-gradient(135deg, rgb(255 255 255 / .1) 0 7px, transparent 7px 17px),
        linear-gradient(145deg, var(--k-brand), color-mix(in srgb, var(--k-brand) 52%, #000));
    -webkit-mask: radial-gradient(circle at 5px 0, transparent 3.5px, #000 4px) 0 0 / 10px 100% repeat-x;
            mask: radial-gradient(circle at 5px 0, transparent 3.5px, #000 4px) 0 0 / 10px 100% repeat-x;
}
/* A gift card wears a ribbon and a bow. */
.ktile__art--gift_money::before, .ktile__art--gift_item::before {
    content: ""; position: absolute; top: 27%; bottom: 0; right: 16%; width: 9px;
    background: linear-gradient(90deg, #c9a24a 0 12%, #f1d592 12% 38%, #fff4d2 38% 62%, #f1d592 62% 88%, #c9a24a 88%); box-shadow: 2px 0 4px rgb(0 0 0 / .25);
}
.ktile__art--gift_money::after, .ktile__art--gift_item::after {
    content: ""; position: absolute; top: 30%; right: calc(16% - 17px); width: 44px; height: 32px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 72'%3E%3Cpath d='M50 30 L28 70 L37 63 L41 72 Z' fill='%23c9a24a'/%3E%3Cpath d='M50 30 L72 70 L63 63 L59 72 Z' fill='%23c9a24a'/%3E%3Cellipse cx='29' cy='21' rx='23' ry='13' transform='rotate(-24 29 21)' fill='%23f1d592'/%3E%3Cellipse cx='71' cy='21' rx='23' ry='13' transform='rotate(24 71 21)' fill='%23f1d592'/%3E%3Cellipse cx='31' cy='21' rx='12' ry='5' transform='rotate(-24 31 21)' fill='%23c9a24a'/%3E%3Cellipse cx='69' cy='21' rx='12' ry='5' transform='rotate(24 69 21)' fill='%23c9a24a'/%3E%3Ccircle cx='50' cy='29' r='8.5' fill='%23c9a24a'/%3E%3Ccircle cx='50' cy='29' r='6' fill='%23f1d592'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ktile__art--gift_money .ktile__qr, .ktile__art--gift_item .ktile__qr { display: none; }
.ktile__art--gift_item { background: linear-gradient(160deg, color-mix(in srgb, var(--k-brand) 20%, #fff), #fff); color: #1b1d21; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-brand) 25%, transparent); }
.ktile__bar { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; opacity: .92; }
.ktile__bar i { flex: none; width: 12px; height: 12px; border-radius: 4px; background: currentColor; opacity: .85; }
.ktile__bar b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ktile__stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; max-width: 104px; }
.ktile__stamps i { aspect-ratio: 1; border-radius: 999px; border: 1.5px dashed rgb(255 255 255 / .6); }
.ktile__stamps i.on { border: 0; background: #fff; }
.ktile__num { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ktile__num small { font-size: .62rem; font-weight: 600; letter-spacing: 0; opacity: .85; }
.ktile__photo { height: 42px; border-radius: 6px; background: color-mix(in srgb, var(--k-brand) 18%, #fff) center / cover no-repeat; display: grid; place-items: center; font-size: 1.3rem; }
.ktile__qr {
    position: absolute; inset-inline-end: 9px; inset-block-end: 9px; width: 18px; height: 18px; border-radius: 3px;
    background: repeating-conic-gradient(currentColor 0 25%, transparent 0 50%) 0 0 / 6px 6px; opacity: .8;
}
.ktile__name { font-weight: 700; font-size: .92rem; margin-top: 5px; }
.ktile__hint { font-size: .78rem; color: var(--ink-soft); line-height: 1.35; }
.kval { display: flex; gap: 8px; }
.kval input { flex: 1; min-width: 0; }
.kval select { flex: none; width: auto; }
.kphoto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kphoto__img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rule); }
.wd__link-row input {
    font: inherit; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
}
.wd__link-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
/* Whose card this is (cards/edit.php) */
.card-owner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.card-owner__label { font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.card-owner select { font: inherit; padding: 7px 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); max-width: 100%; }

/* ---------- Telegram Mini App ---------- */
/* The Mini App is the website itself; these are only its opening screen
   (/tg) and the "link this Telegram?" page (/tg/link). */
.tg-entry { text-align: center; }
.tg-entry .auth-social, .tg-entry__code, .tg-entry__note { text-align: start; }
.tg-entry__spin {
    display: block; width: 34px; height: 34px; margin: 4px auto 16px; border-radius: 50%;
    border: 3px solid var(--rule); border-top-color: var(--accent); animation: tg-spin .8s linear infinite;
}
.tg-entry__spin[hidden] { display: none; }
@keyframes tg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tg-entry__spin { animation-duration: 2.4s; } }
.tg-entry__note { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r); background: var(--accent-wash); color: var(--ink); font-size: .9rem; }
.tg-entry__code { margin-top: 18px; font-size: .9rem; }
.tg-entry__code summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; }
.tg-entry__code ol { margin: 10px 0 12px; padding-inline-start: 1.2rem; display: grid; gap: 4px; }
.tg-link__pair { display: grid; gap: 8px; margin: 16px 0 0; }
.tg-link__pair div { padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface-2); }
.tg-link__pair dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; }
.tg-link__pair dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
/* In Telegram the phone bar's scanner is Telegram's own: no camera in the page,
   one button that opens it again. */
.sheet--scan.is-native .scan__video, .sheet--scan.is-native .scan__frame { display: none; }
.sheet--scan.is-native .scan__view { min-height: 0; aspect-ratio: auto; display: grid; gap: 12px; justify-items: center; padding: 22px 16px; background: var(--surface-2); }
.sheet--scan.is-native .scan__status { position: static; padding: 0; background: none; color: var(--ink-soft); font-weight: 500; }
.scan__native { display: none; }
.sheet--scan.is-native .scan__native { display: inline-flex; gap: 8px; align-items: center; }
.sheet--scan.is-native.has-result .scan__view { display: none; }

/* ---------- A business's loyalty cards and games on its menu and store (catalog/_promos) ---------- */
.cv-promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; margin: 18px 0 6px; }
.cv-promos:empty { display: none; }
.cv-promo {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0;
    border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
    background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--rule));
    transition: border-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.cv-promo:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--ink); }
.cv-promo__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.cv-promo__text { display: grid; gap: 1px; min-width: 0; }
.cv-promo__label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); }
.cv-promo__name { font-weight: 700; overflow-wrap: anywhere; }
.cv-promo__blurb { font-size: .84rem; color: var(--ink-soft); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .cv-promo { transition: none; } .cv-promo:hover { transform: none; } }
.promo-preview { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.promo-preview li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---- Admin → Users sections, and partner allowances (admin/users, admin/allowance, admin/partners) ---- */
.user-sections { margin-block: 10px 12px; }
.user-sections__n {
    display: inline-block; min-width: 1.6em; margin-inline-start: 6px; padding: 1px 7px;
    border-radius: 999px; background: var(--surface-2); color: var(--ink-faint);
    font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center;
}
.admin-nav__tab.is-active .user-sections__n { background: var(--accent-wash); color: var(--accent-deep); }
.admin-nav__badge {
    display: inline-block; min-width: 1.5em; margin-inline-start: 4px; padding: 0 6px;
    border-radius: 999px; background: var(--warn); color: #fff;
    font-size: .72rem; font-weight: 700; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums;
}
.panel--flush .pa-title { padding: 18px 20px 0; margin-bottom: 6px; }
.pa-foot { padding: 0 20px 16px; margin: 6px 0 0; font-size: .86rem; }
.pa-table { font-variant-numeric: tabular-nums; }
.pa-table tbody th[scope="row"], .pa-table tfoot th[scope="row"] {
    font-size: .88rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink);
}
.pa-table .num { text-align: end; }
.pa-table__group th {
    padding-block: 12px 6px; background: var(--surface-2); color: var(--ink);
    font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.pa-num {
    width: 100%; max-width: 130px; font: inherit; font-size: .9rem; padding: 7px 10px;
    border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
}
.pa-num:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.pa-num:disabled { opacity: .7; }
.pa-none { color: var(--ink-faint); }
.pa-money { font-size: 1.35rem; }
.pa-ask { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.pa-ask__field input { max-width: 160px; }