/* ============================================================================
   Aristoqle — admin console theme (brand 2.0: gold / cream / taupe / charcoal).

   Single stylesheet for the admin console. Revised against the 2026-09 handoff
   (Aktivnosti / Informacije / Breznica redesign), whose three rules govern
   every component here:

     1. Action hierarchy — one filled primary per screen, a white secondary,
        a text-only tertiary, and destructive actions as low-emphasis text
        parked at the opposite end of a footer from the safe actions.
     2. Density discipline — content and controls are capped to what they
        hold (.content-narrow 820px, .content-table 1060px, .form-input--short
        420px, .form-input--xs 88px); rows are 56px; related fields pair up.
     3. No duplicated information — card headers that repeat the H1, per-row
        type icons beside a type tag, and decorative field/heading icons are
        gone (.form-section-icon, .cell-name-icon and .form-input-icon are
        hidden here so untouched pages comply too).

   Class vocabulary is unchanged (.master-sidebar, .master-content, .form-input,
   .btn-primary-action, .data-table, .nav-tree-*, .edit-panel …) so every admin
   page picks up the look; the new patterns (.page-title-row, .count-pill,
   .type-tag, .card-region, .card-footer, .toggle-row, .dropzone, .modal-*,
   .alert-*, .drag-grip) are additive.
   ============================================================================ */

/* ── Manrope (variable, 200–800 in one file per subset) ──────────────────────
   Self-hosted: no Google Fonts CDN request per page load. latin-ext carries the
   Croatian diacritics (č ć đ š ž — all inside U+0100-02BA). */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────
   Values are the handoff's design tokens. Every text/background pair used at
   small sizes meets AA 4.5:1 — the muted ramp was darkened for that. */
:root {
    /* Brand */
    --brand-gold:       #A5893C;  /* primary button, focus border, active-toggle track, avatar, nav accent */
    --brand-gold-hover: #967C34;
    --brand-gold-ink:   #8D7332;  /* accent as TEXT on white (links, tertiary button) */
    --brand-gold-ink-2: #7A6329;  /* accent as text on tinted panels (#faf7f1) */
    --brand-gold-soft:  #C9A752;  /* secondary nav accent (deep sidebar level) */
    --brand-cream:      #E9E0CB;  /* login brand panel */
    --brand-taupe:      #6D6155;  /* sidebar */
    --brand-taupe-hover:#5F544A;
    --brand-charcoal:   #2C261E;

    /* Surfaces */
    --canvas:        #EFE9DD;     /* page background */
    --surface:       #FFFFFF;     /* cards, inputs */
    --surface-sunk:  #FAF7F1;     /* table header, card footers, dropzone, row hover */
    --surface-top:   #F5F1E8;     /* top header, preview body */
    --paper:         #F3ECDB;     /* callout / responsibility notice */
    --paper-border:  rgba(165,137,60,.4);
    --accent-wash:   #E9E1D1;     /* tertiary button hover */
    --surface-hover: #FAF7F1;     /* secondary button hover */
    --tag-bg:        #F0EADE;
    --tag-border:    #E4DBC9;
    --pill-bg:       #E6DFD0;
    --pill-border:   #DCD2BE;
    --thumb-bg:      #EFE9DD;
    --thumb-border:  #E2DACB;
    --cell-bg:       #E0D8C6;

    /* Ink */
    --ink:           #2C261E;     /* primary ink */
    --ink-2:         #6F6759;     /* body / helper / breadcrumb / back link — minimum muted tone for small text */
    --ink-3:         #7D745F;     /* uppercase micro-labels; resting delete icon */
    --ink-label:     #4A4238;     /* field labels */
    --ink-soft:      #5C5346;     /* secondary button text, tag text */
    --ink-on-tint:   #3A332A;     /* ink on light-filled active nav row / icon hover */
    --ink-icon:      #A09884;     /* placeholder-slot icon */

    /* Lines */
    --hairline:        #E6DFD0;   /* card border */
    --hairline-strong: #D8CFBD;   /* input border, dashed dropzone */
    --hairline-btn:    #D8CFBD;   /* secondary button border */
    --hairline-btn-hover: #C2B69F;
    --divider:         #ECE5D7;   /* internal card divider */
    --row-line:        #F1EBDE;   /* table row border, toggle-row divider */
    --ctrl-border:     #DDD4C2;   /* header controls; off-toggle track */
    --top-border:      #E2DACB;   /* top header border */
    --grip:            #B3A993;

    /* Sidebar (on taupe #6D6155). White alphas stay ≥ .88 so every label
       clears 4.5:1; the resting tone is achieved by weight, not by dimming. */
    --sb-item:      rgba(255,255,255,.9);
    --sb-subitem:   rgba(255,255,255,.88);
    --sb-group:     rgba(255,255,255,.72);
    --sb-hairline:  rgba(255,255,255,.14);
    --sb-fill:      rgba(255,255,255,.1);
    --sb-border:    rgba(255,255,255,.14);
    --sb-active-bg: rgba(255,255,255,.1);
    --sb-chip:      rgba(255,255,255,.16);
    --sb-unit-bg:   #EFE9DD;      /* selected unit — filled light row */
    --sb-unit-ink:  #3A332A;

    /* Functional */
    --danger:        #9C3A31;     /* destructive button text */
    --danger-strong: #A8382F;     /* destructive icon hover; required asterisk */
    --danger-tint:   #FBECEB;     /* destructive hover tint */
    --success:       #2F7A3A;
    --success-tint:  #EEF6EA;
    --success-border:#CFE5C6;

    /* Geometry */
    --radius-ctrl:  8px;          /* button / input */
    --radius-card:  10px;         /* card / dropzone */
    --radius-tag:   5px;
    --radius-icon:  6px;          /* icon button */
    --radius-small: 7px;          /* small labelled button */
    --radius-pill:  20px;
    --sidebar-w:    260px;
    --topbar-h:     54px;
    --focus-ring:   0 0 0 3px rgba(165,137,60,.16);
    --shadow-device: 0 14px 34px rgba(44,38,30,.22);
}

/* ── Compatibility aliases (migration layer) ────────────────────────────────
   Admin pages still carry inline <style> blocks that reference the two older
   token sets (--color-* from MasterThemeVer1, --brand/--ink/… from
   AdminRestyle). Re-pointing those names at the Aristoqle palette keeps every
   page coherent without per-page edits. Scaffolding, not API: delete an alias
   when its last reference is gone; do not add new ones.

   --color-orange-500 → gold-INK (text-safe) because it is used for both fills
   and text; the old "primary" (navy) roles map to taupe; --color-slate-400 →
   --ink-2 so small muted copy stays ≥ 4.5:1. */
:root {
    --color-orange-500: var(--brand-gold-ink);
    --color-orange-600: var(--brand-gold-ink);
    --color-orange-400: var(--brand-gold);
    --color-orange-300: var(--brand-gold);
    --color-orange-50:  var(--accent-wash);

    --color-slate-900: var(--ink);
    --color-slate-800: var(--ink);
    --color-slate-700: var(--ink);
    --color-slate-600: var(--ink-2);
    --color-slate-500: var(--ink-2);
    --color-slate-400: var(--ink-2);
    --color-slate-300: var(--hairline-strong);
    --color-slate-200: var(--hairline);
    --color-slate-100: var(--canvas);
    --color-slate-50:  var(--surface-sunk);

    --color-surface:                   var(--canvas);
    --color-surface-bright:            var(--surface);
    --color-surface-dim:               var(--surface-sunk);
    --color-surface-container:         var(--surface-sunk);
    --color-surface-container-low:     var(--surface-sunk);
    --color-surface-container-high:    var(--canvas);
    --color-surface-container-highest: var(--canvas);
    --color-surface-container-lowest:  var(--surface);
    --color-surface-variant:           var(--surface-sunk);
    --color-on-surface:                var(--ink);
    --color-on-surface-variant:        var(--ink-2);
    --color-outline:                   var(--hairline-strong);
    --color-outline-variant:           var(--hairline);
    --color-primary:                   var(--brand-taupe);
    --color-primary-container:         var(--brand-taupe);
    --color-on-primary:                #ffffff;
    --color-on-primary-container:      #ffffff;
    --color-primary-fixed:             var(--canvas);
    --color-primary-fixed-dim:         var(--hairline);
    --color-secondary:                 var(--brand-taupe);
    --color-secondary-container:       var(--brand-taupe);
    --color-error:                     var(--danger);
    --color-on-error:                  #ffffff;

    --brand:         var(--brand-gold-ink);
    --brand-hover:   var(--brand-gold-ink);
    --brand-soft:    var(--accent-wash);
    --brand-border:  var(--paper-border);
    --text:          var(--ink-2);
    --muted:         var(--ink-2);
    --page:          var(--canvas);
    --card:          var(--surface);
    --border:        var(--hairline);
    --border-strong: var(--hairline-strong);
    --field-bg:      var(--surface);
    --navy:          var(--brand-taupe);
    --shadow-card:   none;
}

* { box-sizing: border-box; }

body {
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    min-height: 100vh;
    display: flex;
    background: var(--canvas);
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.55;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* The old theme's gradient utility survives in markup across several pages.
   The design has no gradients — neutralise it to flat fills. */
.signature-gradient { background: var(--brand-taupe); }
.glass-panel        { background: var(--surface); backdrop-filter: none; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.master-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    height: 100vh;
    width: var(--sidebar-w, 260px);
    padding: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: var(--brand-taupe);
    color: var(--thumb-bg);
    border-right: 0;
    box-shadow: none;
}

/* Brand row is exactly as tall as the top header, so the two line up across
   the sidebar edge; the lockup is scaled to sit inside it. */
.master-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    flex: none;
    padding: 5px 12px;
    margin: 0;
}

.master-sidebar .sidebar-lockup {
    display: block;
    height: 100%;
    min-width: 0;
    text-decoration: none;
}

/* Fills the row's full height; width follows the artwork's ratio and is
   capped by the rail, with object-fit keeping the ratio when the cap wins. */
.master-sidebar .sidebar-lockup img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.master-sidebar .sidebar-search {
    padding: 0 16px;
    position: relative;
}

.master-sidebar .sidebar-search .search-icon {
    position: absolute;
    left: 27px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: rgba(255,255,255,.55);
    pointer-events: none;
}

.master-sidebar .sidebar-search input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--sb-border);
    border-radius: 6px;
    background: var(--sb-fill);
    box-shadow: none;
    outline: none;
    color: #fff;
    font: 400 13px/1 'Manrope', sans-serif;
    transition: border-color .15s;
}

.master-sidebar .sidebar-search input::placeholder { color: rgba(255,255,255,.6); }
.master-sidebar .sidebar-search input:focus        { border-color: rgba(255,255,255,.45); }

.master-sidebar nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}

/* Flat nav links (non-tree pages) */
.master-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 22px;
    border-left: 2px solid transparent;
    color: var(--sb-item);
    font: 400 13px/1.25 'Manrope', sans-serif;
    text-decoration: none;
    transition: background .12s, color .12s;
}

.master-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); transform: none; }

.master-sidebar .nav-link.active {
    background: var(--sb-active-bg);
    border-left-color: var(--brand-gold);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
    transform: none;
    border-radius: 0;
}

.master-sidebar .sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--sb-hairline);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#sidebar-resizer {
    position: fixed;
    left: var(--sidebar-w, 260px);
    top: 0;
    width: 5px;
    height: 100vh;
    z-index: 51;
    cursor: col-resize;
    background: transparent;
    transition: background .15s;
}
#sidebar-resizer:hover,
#sidebar-resizer.is-dragging { background: var(--brand-gold); }

/* ── Navigation tree ──────────────────────────────────────────────────────
   Clients are flush rows with the chevron at the right edge. Every deeper row
   is [gutter][icon][label][count]: the 14px gutter holds the chevron (branches)
   or a tick (leaves) and sits on a vertical guide dropped from the parent's
   icon centre. --tree-step is what makes that line up:
   gutter 14 + gap 3 + half icon 8 - half gutter 7 = 18. */
#nav-tree-root {
    --tree-row-h:  30px;   /* row pitch: 28px pill + 1px air either side */
    --tree-gutter: 14px;
    --tree-step:   18px;
    --tree-guide:  rgba(255,255,255,.24);
    padding: 0 8px;
}

/* The 1px air is padding, not margin, so it stays inside the node box and the
   guides run unbroken from row to row. */
.nav-tree-node { padding: 1px 0; transition: none; }
.nav-tree-node.hidden-by-search   { display: none; }
.nav-tree-children.collapsed      { display: none; }

/* Row metrics: 13px labels, 16px icons and chevrons, 28px pill. Fills are inset
   rounded pills that start at the row's own indent. Row ink travels in custom
   properties, so a state (hover, client context, selection) restyles the label
   and glyphs by setting them once on the row. */
.nav-tree-toggle,
.nav-tree-leaf {
    --row-ink:    var(--sb-item);
    --row-glyph:  rgba(255,255,255,.75);
    --row-weight: 400;
    position: relative;
    z-index: 1;               /* state fills paint over the guides */
    display: flex;
    align-items: center;
    height: calc(var(--tree-row-h) - 2px);
    margin-left: -4px;        /* the pill starts a little left of the gutter */
    padding: 0 8px 0 4px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background .12s;
}

.nav-tree-leaf { --row-ink: var(--sb-subitem); }

.nav-tree-node[data-node-type="client"] > .nav-tree-toggle,
.nav-tree-node[data-node-type="client"] > .nav-tree-leaf {
    --row-weight: 500;
    margin-left: 0;
    padding-left: 9px;
}

.nav-tree-toggle:hover,
.nav-tree-leaf:hover {
    --row-glyph: var(--brand-gold-soft);
    background: rgba(255,255,255,.07);
}

/* Guides. Each nested node draws its own segment of the parent's vertical
   guide, so the last child can stop at its row centre (the elbow) however tall
   its own subtree is. On branch rows the chevron sits on the guide, so the
   guide breaks around it: ::before above, ::after below. */
.nav-tree-branch { padding-left: var(--tree-step); }
/* A client row starts 9px further in than the rows below it (padding-left 9px), so its children step
   9px + one level: the same 18px from the parent's chevron to the children's as on every other level. */
.nav-tree-node[data-node-type="client"] > .nav-tree-branch { padding-left: calc(9px + var(--tree-step)); }

.nav-tree-branch > .nav-tree-node { position: relative; }
.nav-tree-branch > .nav-tree-node::before,
.nav-tree-branch > .nav-tree-node.has-kids::after {
    content: "";
    position: absolute;
    left: 6px;
    width: 1px;
    background: var(--tree-guide);
    pointer-events: none;
}
.nav-tree-branch > .nav-tree-node::before            { top: 0; bottom: 0; }
.nav-tree-branch > .nav-tree-node:last-child::before { bottom: auto; height: calc(var(--tree-row-h) / 2 + 1px); }
.nav-tree-branch > .nav-tree-node.has-kids::before   { bottom: auto; height: calc(var(--tree-row-h) / 2 - 6px); }
.nav-tree-branch > .nav-tree-node.has-kids::after    { top: calc(var(--tree-row-h) / 2 + 6px); bottom: 0; }
.nav-tree-branch > .nav-tree-node.has-kids:last-child::after { content: none; }

.nav-tree-gutter {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tree-gutter);
    height: var(--tree-gutter);
    margin-right: 3px;
}

/* Leaf tick: from the guide to just short of the icon. */
.nav-tree-leaf > .nav-tree-gutter::before {
    content: "";
    position: absolute;
    left: 7px;
    right: -1px;
    top: 50%;
    height: 1px;
    background: var(--tree-guide);
}

/* One glyph, rotated: chevron_right closed, pointing down when open. */
.nav-tree-chevron {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--row-glyph);
    opacity: .8;
    transition: transform .2s ease;
}
/* Only the chevron opens and closes a branch; the icon and the name lead to the page. The rest of
   the row does nothing, so it shows no hand. */
.nav-tree-toggle,
.nav-tree-leaf { cursor: default; }
.nav-tree-chevron,
.nav-tree-icon,
.nav-tree-label[href] { cursor: pointer; }
.nav-tree-toggle:not(.collapsed) > .nav-tree-chevron { transform: rotate(90deg); }
.nav-tree-toggle.collapsed > .nav-tree-chevron       { transform: rotate(0deg); }
/* A client row hangs from no guide, so a client without children gets no leaf tick. */
.nav-tree-node[data-node-type="client"] > .nav-tree-leaf > .nav-tree-gutter::before { content: none; }

/* Fixed box + clip: the row does not jump while the icon font is still loading. */
.nav-tree-icon {
    flex: none;
    width: 16px;
    margin-right: 6px;
    overflow: hidden;
    font-size: 16px;
    color: var(--row-glyph);
}

.nav-tree-icon-img {
    height: 16px;
    opacity: .85;
    transition: opacity .15s;
}
.nav-tree-leaf:hover .nav-tree-icon-img,
.nav-tree-node.nav-active > .nav-tree-leaf .nav-tree-icon-img { opacity: 1; }

.nav-tree-label {
    min-width: 0;
    margin-right: 6px;
    font: 400 13px/1.25 'Manrope', sans-serif;
    font-weight: var(--row-weight);
    color: var(--row-ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-tree-label:last-child { margin-right: 0; }

/* Group heading ("KLIJENTI" + client count) above the client rows. */
.nav-tree-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 9px 8px;
    font: 600 11px/1 'Manrope', sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sb-group);
}
.nav-tree-group-label a { color: inherit; text-decoration: none; }
.nav-tree-group-label a:hover,
.nav-tree-node.nav-active > .nav-tree-group-label a { color: #fff; }

/* Count chip: small, square-cornered, sits at the row's right edge. */
.nav-tree-count {
    margin-left: auto;
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
    background: rgba(255,255,255,.2);
    color: rgba(255,255,255,.92);
    font: 500 11px/1.4 'Manrope', sans-serif;
    padding: 1px 6px;
    border-radius: 4px;
}
.nav-tree-group-label .nav-tree-count   { margin-left: 0; letter-spacing: 0; }
/* "Primjer" on the example unit the platform gave a client: the count chip's shape, in the brand gold. */
.nav-tree-example {
    background: var(--brand-gold, #B48C32); color: #fff;
    font: 700 9.5px/1.5 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
}

/* "uvod" / "igra" on the two activities of a Learning Beat: the count chip's shape, quiet. */
.nav-tree-beat {
    font: 600 9.5px/1.5 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase;
}

/* States, weakest first - later rules win at equal specificity. */
.nav-tree-node.search-match > .nav-tree-toggle,
.nav-tree-node.search-match > .nav-tree-leaf { --row-ink: var(--brand-gold-soft); --row-weight: 600; }

/* Active trail: ancestors of the selection brighten so the path reads. The
   guides carry the rest, so trail rows take no fill. */
.nav-tree-node.nav-trail > .nav-tree-toggle { --row-ink: #fff; --row-weight: 500; }

/* Selected node: gold pill, darker gold edge, dark ink. */
.nav-tree-node.nav-active > .nav-tree-leaf,
.nav-tree-node.nav-active > .nav-tree-toggle {
    --row-ink:    var(--ink);
    --row-glyph:  var(--ink-on-tint);
    --row-weight: 600;
    background: var(--brand-gold-soft);
    box-shadow: inset 3px 0 0 var(--brand-gold-ink);
}
.nav-tree-node.nav-active > .nav-tree-leaf > .nav-tree-gutter::before { content: none; }
.nav-tree-node.nav-active > .nav-tree-leaf .nav-tree-icon-img { filter: invert(.8); }

/* The client you are inside (on the trail, or selected itself) is the cream
   pill, so the block you are working in is findable at a glance. Selected
   itself, it keeps the gold edge from the rule above. */
.nav-tree-node[data-node-type="client"].nav-trail  > .nav-tree-toggle,
.nav-tree-node[data-node-type="client"].nav-active > .nav-tree-toggle {
    --row-ink:    var(--sb-unit-ink);
    --row-glyph:  var(--brand-taupe);
    --row-weight: 600;
    background: var(--sb-unit-bg);
}

.nav-tree-node.nav-active > .nav-tree-leaf .nav-tree-count,
.nav-tree-node.nav-active > .nav-tree-toggle .nav-tree-count {
    background: rgba(44,38,30,.14);
    color: var(--row-ink);
}

/* An open client is closed off with a hairline, so the next client reads as a
   new block. */
.nav-tree-node[data-node-type="client"] > .nav-tree-children:not(.collapsed) {
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--sb-hairline);
}
.nav-tree-node[data-node-type="client"]:last-child > .nav-tree-children {
    margin-bottom: 0;
    border-bottom: 0;
}

/* ── Main + topbar ──────────────────────────────────────────────────────── */
.master-main {
    margin-left: var(--sidebar-w, 260px);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* Tinted header band, one hairline. No product name — the sidebar brands. */
.master-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    height: var(--topbar-h);
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--surface-top);
    border-bottom: 1px solid var(--top-border);
    backdrop-filter: none;
    box-shadow: none;
}

.master-topbar .topbar-left  { display: flex; align-items: center; gap: 10px; min-width: 0; }
.master-topbar .topbar-right { display: flex; align-items: center; gap: 18px; flex: none; }

.master-topbar .topbar-title,
.master-topbar .topbar-divider { display: none; }

.master-topbar .breadcrumb-nav { display: flex; align-items: center; gap: 10px; min-width: 0; }

.master-topbar .breadcrumb-nav .breadcrumb-item {
    font: 400 14px/1.3 'Manrope', sans-serif;
    color: var(--ink-2);
    text-decoration: none;
    white-space: nowrap;
}
.master-topbar .breadcrumb-nav a.breadcrumb-item:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.master-topbar .breadcrumb-nav .breadcrumb-separator {
    font-size: 14px;
    color: var(--ink-2);
    opacity: .5;
}
.master-topbar .breadcrumb-nav .breadcrumb-separator.material-symbols-outlined { display: none; }

/* Current page is plain text — not a link, not gold. */
.master-topbar .breadcrumb-nav .breadcrumb-active {
    font: 500 14px/1.3 'Manrope', sans-serif;
    color: var(--ink);
    border-bottom: 0;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Page-owned left side (editors): the back link replaces the breadcrumb. */
.master-topbar .topbar-page {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.master-topbar .topbar-page .back-link { font-size: 14px; }
.master-topbar .topbar-page .back-link .material-symbols-outlined { font-size: 16px; }

.master-topbar .topbar-icons { display: flex; align-items: center; gap: 2px; }

.master-topbar .topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--radius-ctrl);
    background: none;
    color: var(--brand-taupe);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.master-topbar .topbar-icon-btn:hover  { background: var(--canvas); color: var(--ink); }
.master-topbar .topbar-icon-btn:active { transform: none; }
.master-topbar .topbar-icon-btn .material-symbols-outlined { font-size: 19px; }

/* User block: avatar (initials on gold) + name/role. The avatar is a button
   opening a small menu — sign-out lives there, not in the icon row. */
.master-topbar .topbar-user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    margin-left: 0;
    border-left: 1px solid var(--top-border);
}
.master-topbar .topbar-user-info { text-align: left; }
.master-topbar .topbar-user-name { font: 600 13.5px/1.3 'Manrope', sans-serif; color: var(--ink); margin: 0; }
.master-topbar .topbar-user-role { font: 400 11.5px/1.3 'Manrope', sans-serif; color: var(--ink-2); margin: 0; }

.master-topbar .topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 0;
    box-shadow: none;
}

.master-topbar .topbar-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand-gold);
    color: #fff;
    font: 600 13px/1 'Manrope', sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .12s;
}
.master-topbar .topbar-avatar-btn:hover { background: var(--brand-gold-hover); }

.topbar-user-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    min-width: 200px;
    padding: 6px 0;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-ctrl);
    box-shadow: 0 10px 28px rgba(44,38,30,.14);
}
.topbar-user-menu.open { display: block; }
.topbar-user-menu-head { padding: 8px 14px 10px; border-bottom: 1px solid var(--divider); margin-bottom: 4px; }
.topbar-user-menu-head .topbar-user-name { font-size: 13.5px; }
.topbar-user-menu a,
.topbar-user-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: 0;
    background: none;
    font: 400 13.5px/1.3 'Manrope', sans-serif;
    color: var(--ink);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}
.topbar-user-menu a:hover,
.topbar-user-menu button:hover { background: var(--surface-sunk); }
.topbar-user-menu .material-symbols-outlined { font-size: 18px; color: var(--ink-2); }

/* Help (?) in the header: the guided tour, "Report a problem" and the support address, in the user menu's dropdown. */
.master-topbar .topbar-help { position: relative; display: inline-flex; }
.topbar-user-menu .topbar-menu-address { border-top: 1px solid var(--divider); margin-top: 4px; padding-top: 10px; color: var(--ink-2); font-size: 12.5px; }

/* Language selector — white, hairline, 8px. Code + name. */
.lang-dropdown { position: relative; display: inline-block; }

.lang-dropdown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ctrl-border);
    border-radius: var(--radius-ctrl);
    background: var(--surface);
    box-shadow: none;
    font: 500 14px/1 'Manrope', sans-serif;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .12s;
}
.lang-dropdown-btn:hover { background: var(--surface); border-color: var(--hairline-btn-hover); }
.lang-dropdown-btn .lang-code {
    font: 600 11px/1 'Manrope', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.lang-dropdown-btn .material-symbols-outlined { font-size: 16px; color: var(--ink-2); }

.lang-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    z-index: 20;
    margin-top: 6px;
    min-width: 12rem;
    padding: 4px 0;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-ctrl);
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(44,38,30,.14);
    overflow: hidden;
}
.lang-dropdown-menu.open { display: block; }

.lang-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font: 400 13.5px/1 'Manrope', sans-serif;
    color: var(--ink-2);
    text-decoration: none;
    transition: background .12s, color .12s;
}
.lang-dropdown-menu a:hover { background: var(--surface-sunk); color: var(--ink); }

/* ── Content ────────────────────────────────────────────────────────────── */
.master-content {
    width: 100%;
    max-width: none;
    padding: 36px 40px 60px;
}

/* Width caps — maximums, not fixed widths. A table page caps at 1060px, a
   settings form at 820px; below that everything shrinks. */
.content-narrow { max-width: 820px; }
.content-table  { max-width: 1060px; }
.page-stack     { display: flex; flex-direction: column; gap: 26px; }

/* Page title group: back link → H1 (+ pill/tag) → subtitle, 10px apart. */
.master-content .page-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 26px;
}

.master-content .page-title {
    margin: 0;
    font: 600 38px/1.1 'Manrope', sans-serif;
    letter-spacing: -.01em;
    color: var(--ink);
}
.master-content .page-title--editor { font-size: 34px; }

.page-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.page-title-row--center { align-items: center; gap: 12px; }

.count-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--pill-bg);
    font: 400 14px/1.3 'Manrope', sans-serif;
    color: var(--ink-2);
    white-space: nowrap;
}

.type-tag {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--pill-border);
    border-radius: var(--radius-tag);
    background: var(--pill-bg);
    font: 500 12.5px/1.4 'Manrope', sans-serif;
    color: var(--ink-soft);
    white-space: nowrap;
}

.master-content .page-subtitle {
    margin: 0;
    /* One sentence, not a paragraph: wide enough to stay on one line on a wide page. */
    max-width: 90ch;
    font: 400 15px/1.5 'Manrope', sans-serif;
    color: var(--ink-2);
}
.master-content .page-subtitle strong { color: var(--ink); font-weight: 600; }

/* Action row under the title group — one primary, then secondary/tertiary. */
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-actions .btn-accent-action,
.page-actions .btn-tertiary-action { margin-left: 2px; }

/* Eyebrow / section micro-label — 11.5px/600 caps. */
.eyebrow,
.section-label {
    display: block;
    font: 600 11.5px/1 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.eyebrow { color: var(--brand-gold-ink); }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 0;
    font: 400 13.5px/1 'Manrope', sans-serif;
    color: var(--ink-2);
    text-decoration: none;
    transition: color .12s;
}
.back-link:hover { color: var(--ink); }
.back-link .material-symbols-outlined { font-size: 16px; }

.accent-rule { width: 42px; height: 2px; background: var(--brand-gold); border: 0; margin: 0; }

/* ── Cards / panels ─────────────────────────────────────────────────────── */
.form-section,
.card-panel {
    background: var(--surface);
    padding: 26px 28px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    box-shadow: none;
}

/* Region cards: the padding lives on the regions, the card only clips. */
.card-regions,
.card-table { padding: 0; overflow: hidden; }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 28px;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--divider);
    font: 600 14px/1.3 'Manrope', sans-serif;
    color: var(--ink);
}

.card-region {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 26px 28px;
}
.card-region + .card-region { border-top: 1px solid var(--divider); }
.card-region--settings { gap: 14px; padding: 22px 28px; }

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 28px;
    background: var(--surface-sunk);
    border-top: 1px solid var(--divider);
}
.card-footer-left,
.card-footer-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-footer-right { margin-left: auto; }

/* Legacy in-card header — kept as a plain title row; the icon tile is gone. */
/* "How this is organised" (_HowItWorks.cshtml): three numbered steps side by side, one column on a phone. */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.how-step { display: flex; gap: 12px; align-items: flex-start; }
.how-step-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-cream); color: var(--brand-gold-ink); }
.how-step-icon .material-symbols-outlined { font-size: 22px; }
.how-step-title { margin: 0 0 4px; font: 600 14px/1.3 'Manrope', sans-serif; color: var(--ink); }
.how-step-text { margin: 0; font: 400 13px/1.5 'Manrope', sans-serif; color: var(--ink-2); }
.how-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
@media (max-width: 768px) { .how-steps { grid-template-columns: 1fr; } }

.form-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.form-section-icon { display: none; }

.form-section-title {
    margin: 0;
    font: 600 15px/1.3 'Manrope', sans-serif;
    letter-spacing: -.005em;
    color: var(--ink);
}
.form-section-subtitle { display: block; margin-top: 2px; font: 400 13px/1.4 'Manrope', sans-serif; color: var(--ink-2); }

.paper-notice {
    background: var(--paper);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-card);
    padding: 20px;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-group:last-child { margin-bottom: 0; }

.form-label {
    display: block;
    margin: 0 0 7px;
    font: 600 13.5px/1.3 'Manrope', sans-serif;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink-label);
}
.req { color: var(--danger-strong); }

.form-input {
    width: 100%;
    min-height: 42px;
    height: auto;
    padding: 9px 13px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-ctrl);
    background: var(--surface);
    box-shadow: none;
    outline: none;
    color: var(--ink);
    font: 400 15px/1.4 'Manrope', sans-serif;
    transition: border-color .12s, box-shadow .12s;
}

textarea.form-input { padding: 10px 13px; line-height: 1.55; resize: vertical; }

select.form-input {
    padding-right: 34px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f6759' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 11px center;
    cursor: pointer;
}

.form-input::placeholder { color: var(--ink-3); }

.form-input:focus {
    border-color: var(--brand-gold);
    box-shadow: var(--focus-ring);
}
.form-input:disabled,
.form-input[readonly] { background: var(--surface-sunk); color: var(--ink-2); }
/* A field that stops the save until it is filled in (an editor sets aria-invalid and focuses it). */
.form-input[aria-invalid="true"] { border-color: var(--danger-strong); background: var(--danger-tint); }

/* Width caps for controls — sized to what they hold. */
.form-input--short { max-width: 420px; }
.form-input--sm    { width: 140px; }
.form-input--xs    { width: 88px; }

.form-help {
    margin: 6px 0 0;
    font: 400 12.5px/1.45 'Manrope', sans-serif;
    color: var(--ink-2);
}

.form-input-wrapper { position: relative; }
.form-input-with-prefix { padding-left: 4.5rem; }
/* Decorative in-field icons are dropped (they decorated rather than informed). */
.form-input-with-icon   { padding-left: 13px; }
.form-input-icon        { display: none; }

.form-input-prefix {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-3);
    pointer-events: none;
}

.form-separator { height: 1px; background: var(--divider); margin: 22px 0; border: 0; }

.form-grid-2 {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 20px;
}
.form-grid-2 > .form-group { margin-bottom: 0; }

/* Inline pair ("Redovi × Stupci" + derived readout). */
.field-inline { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.field-inline .form-group { margin-bottom: 0; }
.field-times { font: 400 15px/1 'Manrope', sans-serif; color: var(--ink-2); padding-bottom: 14px; }

.grid-readout { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.grid-readout-cells { display: grid; gap: 2px; }
.grid-readout-cell { width: 9px; height: 9px; background: var(--cell-bg); border-radius: 1.5px; }
.grid-readout-text { font: 400 13.5px/1 'Manrope', sans-serif; color: var(--ink-2); white-space: nowrap; }

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--brand-gold); }

/* ── Toggle rows ────────────────────────────────────────────────────────────
   A <label> so the whole row is the hit target; title + optional description
   on the left, the switch right-aligned; hairline dividers, no boxes. */
.toggle-list { display: flex; flex-direction: column; }

.toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    margin: 0;
    cursor: pointer;
}
.toggle-list > .toggle-row:first-child { padding-top: 0; }
.toggle-list > .toggle-row:last-child  { padding-bottom: 0; }
.toggle-row + .toggle-row { border-top: 1px solid var(--row-line); }
.toggle-row--compact { max-width: 560px; }

.toggle-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-row-title { font: 500 15px/1.35 'Manrope', sans-serif; color: var(--ink); }
.toggle-row-desc  { font: 400 13px/1.45 'Manrope', sans-serif; color: var(--ink-2); }
.toggle-row .mod-switch { margin-top: 2px; }

/* Switch — 40×23, 12px track. */
.mod-switch { position: relative; display: inline-block; width: 40px; height: 23px; cursor: pointer; flex-shrink: 0; }
.mod-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mod-switch-slider { position: absolute; inset: 0; background: var(--ctrl-border); border-radius: 12px; transition: background .15s; }
.mod-switch-slider::before {
    content: "";
    position: absolute;
    left: 2.5px;
    top: 2.5px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s;
    box-shadow: none;
}
.mod-switch input:checked + .mod-switch-slider { background: var(--brand-gold); }
.mod-switch input:checked + .mod-switch-slider::before { transform: translateX(17px); }
.mod-switch input:focus-visible + .mod-switch-slider { box-shadow: var(--focus-ring); }
.mod-switch input:disabled + .mod-switch-slider { opacity: .5; cursor: not-allowed; }

/* ── Buttons ────────────────────────────────────────────────────────────────
   Tiers: primary (filled gold) › secondary (white, hairline) › tertiary /
   accent (text, gold ink) › quiet (text, muted). Destructive is quiet red;
   .btn-danger-solid is reserved for the confirm step inside a dialog. */
.btn-primary-action,
.btn-secondary-action,
.btn-accent-action,
.btn-tertiary-action,
.btn-quiet-action,
.btn-danger-action,
.btn-danger-outline,
.btn-danger-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-ctrl);
    font: 600 14.5px/1.2 'Manrope', sans-serif;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background .12s, border-color .12s, color .12s;
}
.btn-primary-action .material-symbols-outlined,
.btn-secondary-action .material-symbols-outlined,
.btn-accent-action .material-symbols-outlined,
.btn-tertiary-action .material-symbols-outlined,
.btn-quiet-action .material-symbols-outlined,
.btn-danger-action .material-symbols-outlined,
.btn-danger-outline .material-symbols-outlined,
.btn-danger-solid .material-symbols-outlined { font-size: 18px; }

.btn-primary-action { background: var(--brand-gold); border-color: var(--brand-gold); color: #fff; }
.btn-primary-action:hover  { background: var(--brand-gold-hover); border-color: var(--brand-gold-hover); }
.btn-primary-action:active { transform: none; }
.btn-primary-action.signature-gradient { background: var(--brand-gold); box-shadow: none; }
.btn-primary-action.signature-gradient:hover { background: var(--brand-gold-hover); }

.btn-secondary-action { background: var(--surface); border-color: var(--hairline-btn); color: var(--ink-soft); font-weight: 500; padding: 0 16px; }
.btn-secondary-action:hover { background: var(--surface-hover); border-color: var(--hairline-btn-hover); }

.btn-accent-action,
.btn-tertiary-action { background: transparent; border-color: transparent; color: var(--brand-gold-ink); font-weight: 500; padding: 0 14px; }
.btn-accent-action:hover,
.btn-tertiary-action:hover { background: var(--accent-wash); }

.btn-quiet-action { background: transparent; border-color: transparent; color: var(--ink-2); font-weight: 500; padding: 0 14px; }
.btn-quiet-action:hover { background: var(--thumb-bg); color: var(--ink); }

.btn-danger-action { background: transparent; border-color: transparent; color: var(--danger); font-weight: 500; font-size: 14px; padding: 0 12px; gap: 8px; }
.btn-danger-action:hover { background: var(--danger-tint); }
.btn-danger-action .material-symbols-outlined { font-size: 17px; }

.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #8A3229; border-color: #8A3229; }

/* Outlined destructive — same height/radius as its neighbours, red ink, faint red border. */
.btn-danger-outline { background: var(--surface); border-color: rgba(156,58,49,.35); color: var(--danger); font-weight: 500; padding: 0 16px; }
.btn-danger-outline:hover { background: var(--danger-tint); border-color: rgba(156,58,49,.55); }

.btn-primary-action:disabled,
.btn-secondary-action:disabled,
.btn-accent-action:disabled,
.btn-tertiary-action:disabled,
.btn-quiet-action:disabled,
.btn-danger-action:disabled,
.btn-danger-outline:disabled,
.btn-danger-solid:disabled { opacity: .5; cursor: not-allowed; }

.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; }
.btn-sm .material-symbols-outlined { font-size: 16px; }

/* Small labelled control (preview "Osvježi") */
.btn-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--ctrl-border);
    border-radius: var(--radius-small);
    background: var(--surface);
    font: 500 12.5px/1.3 'Manrope', sans-serif;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background .12s;
}
.btn-mini:hover { background: var(--thumb-bg); }
.btn-mini .material-symbols-outlined { font-size: 14px; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-ctrl);
    font: 500 14px/1.5 'Manrope', sans-serif;
    margin-bottom: 20px;
}
.alert .material-symbols-outlined { font-size: 18px; flex: none; margin-top: 1px; }
.alert[hidden] { display: none; }
.alert-success { background: var(--success-tint); border-color: var(--success-border); color: var(--success); }
.alert-error   { background: var(--danger-tint);  border-color: #F0C9C5; color: var(--danger); }
.alert-info    { background: var(--paper); border-color: var(--paper-border); color: var(--ink); }

/* ── Strip under the header, scrolls away: the maintenance notice (MaintenanceNotice) and a client owner's
   plan that ends soon (PlanExpiryNotice). --on is the red one: maintenance mode on, a plan that has ended. ── */
.maint-strip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 40px;
    background: var(--paper);
    border-bottom: 1px solid var(--paper-border);
    color: var(--ink);
    font: 500 13.5px/1.5 'Manrope', sans-serif;
}
.maint-strip > .material-symbols-outlined { font-size: 18px; flex: none; margin-top: 1px; color: var(--brand-gold-ink); }
.maint-strip-body { flex: 1; min-width: 0; }
.maint-strip-when { font-weight: 700; }
.maint-strip-message { display: block; margin-top: 2px; font-weight: 400; color: var(--ink-2); }
.maint-strip-close {
    flex: none; display: inline-flex; padding: 2px; border: 0; border-radius: 4px;
    background: none; color: var(--ink-2); cursor: pointer;
}
.maint-strip-close:hover { background: rgba(0,0,0,.06); }
.maint-strip-close .material-symbols-outlined { font-size: 18px; }
.maint-strip--on { background: var(--danger-tint); border-bottom-color: #F0C9C5; color: var(--danger); }
.maint-strip--on > .material-symbols-outlined { color: var(--danger); }
.maint-strip--on a { color: inherit; font-weight: 700; margin-left: 4px; }

/* ── Data table ─────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table thead tr { background: var(--surface-sunk); border-bottom: 0; }

.data-table thead th {
    padding: 12px 20px;
    font: 600 11.5px/1.4 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    color: var(--ink-3);
    border-bottom: 1px solid var(--divider);
}
.data-table thead th.col-actions { text-align: right; }
.data-table thead th.col-num     { width: 56px; }

.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: var(--surface-sunk); }

.data-table tbody td {
    height: 56px;
    padding: 8px 20px;
    font: 400 14px/1.45 'Manrope', sans-serif;
    color: var(--ink-2);
    vertical-align: middle;
    border-bottom: 1px solid var(--row-line);
}
.data-table tbody tr:last-child td { border-bottom: none; }

.data-table .cell-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Per-row type icons are gone — the VRSTA tag already encodes the type. */
.data-table .cell-name-icon { display: none; }

.data-table .cell-name-text {
    display: block;
    font: 500 15px/1.3 'Manrope', sans-serif;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.data-table a.cell-name-text:hover { text-decoration: underline; text-underline-offset: 2px; }

.data-table .cell-secondary { font-size: 14px; color: var(--ink-2); }
.data-table .cell-clamp {
    display: block;
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table .cell-link {
    font: 500 14px/1.3 'Manrope', sans-serif;
    color: var(--brand-gold-ink);
    text-decoration: none;
}
.data-table .cell-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Type tag / chip */
.data-table .cell-badge,
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--tag-border);
    border-radius: var(--radius-tag);
    background: var(--tag-bg);
    font: 500 12px/1.4 'Manrope', sans-serif;
    color: var(--ink-soft);
    white-space: nowrap;
}
.chip--ai       { background: #EEE9F7; border-color: #DDD3EE; color: #5B3E8F; }
.chip--verified { background: var(--success-tint); border-color: var(--success-border); color: var(--success); }
.chip--draft    { background: #FBF3DA; border-color: #EEDFAE; color: #7A5A12; }

/* Several tags in one cell stay on one line; the column takes the width
   they need instead of wrapping them while the text columns stretch. */
.data-table .cell-nowrap { white-space: nowrap; }
.data-table .cell-tags { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* Several chips that may run to a second line (the unit page's activity type, AI state and translation chips). */
.data-table .cell-tags--wrap { flex-wrap: wrap; white-space: normal; }

.data-table .cell-actions { text-align: right; white-space: nowrap; }
.data-table .cell-actions-inner { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }

/* Ordinal + drag grip (grip fades in on row hover). */
.data-table .cell-order {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.drag-grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 16px;
    color: var(--grip);
    cursor: grab;
    opacity: 0;
    transition: opacity .12s;
    background: none;
    border: 0;
    padding: 0;
}
.drag-grip svg { width: 12px; height: 16px; display: block; }
.data-table tbody tr:hover .drag-grip,
.data-table tbody tr:focus-within .drag-grip,
.drag-grip:focus-visible { opacity: 1; }
.data-table tbody tr.is-dragging { opacity: .45; }
.data-table tbody tr.is-dragging .drag-grip { cursor: grabbing; }
.data-table tbody tr.drop-before td { box-shadow: inset 0 2px 0 var(--brand-gold); }
.data-table tbody tr.drop-after  td { box-shadow: inset 0 -2px 0 var(--brand-gold); }

.icon-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-icon);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.icon-action-btn .material-symbols-outlined { font-size: 18px; }
.icon-action-btn:hover { background: var(--thumb-bg); color: var(--ink-on-tint); }
.icon-action-btn--danger { color: var(--ink-3); }
.icon-action-btn--danger:hover { background: var(--danger-tint); color: var(--danger-strong); }
.icon-action-btn.is-disabled { opacity: .3; cursor: default; pointer-events: none; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state { padding: 48px 24px; text-align: center; color: var(--ink-2); }
.empty-state .material-symbols-outlined { display: block; margin: 0 auto 10px; font-size: 40px; color: var(--ink-icon); }
.empty-state-title { margin: 0 0 4px; font: 600 15px/1.3 'Manrope', sans-serif; color: var(--ink); }
.empty-state-text  { margin: 0; font: 400 14px/1.5 'Manrope', sans-serif; }

/* ── Translation bar (module editors, _TranslationBar) ──────────────────────
   One line under the action bar: a chip per language (green = up to date, amber = texts out of date or not
   translated) and, when something is out of date, "Osvježi prijevode". */
.trbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 14px;
    margin-bottom: 20px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-ctrl);
    background: var(--surface);
    font: 500 13.5px/1.4 'Manrope', sans-serif;
    color: var(--ink-2);
}
.trbar[hidden], .trbar-actions[hidden], .trbar-narr[hidden] { display: none; }
.trbar > .material-symbols-outlined { font-size: 18px; color: var(--ink-3); }
.trbar-label { font-weight: 600; color: var(--ink); }
.trbar-langs { display: flex; flex-wrap: wrap; gap: 4px; }
.trbar-actions { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.trbar-narr { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.4 'Manrope', sans-serif; color: var(--ink-2); cursor: pointer; }
.modal-card .trbar-narr { margin: 0 0 4px; }
.trbar-progress { color: var(--ink); }

/* ── Notice panel (unit page: AI activities to review, translations to refresh) ──
   One cream card, a row per thing waiting: a bold count and a muted note on the left, the way to deal with it
   (a gold text link, an option before it) on the right. Rows are separated by a hairline. */
.unit-notices {
    border: 1px solid #EADFC0;
    border-radius: var(--radius-card);
    background: #FBF7EC;
    padding: 0 20px;
}
.unit-notices[hidden], .notice-row[hidden], .notice-actions[hidden], .notice-check[hidden] { display: none; }
.notice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 14px 0;
}
.notice-row + .notice-row { border-top: 1px solid #EDE3C9; }
.notice-text { margin: 0; flex: 1 1 360px; font: 400 14.5px/1.5 'Manrope', sans-serif; color: var(--ink-2); }
.notice-text strong { color: var(--ink); font-weight: 700; }
.notice-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.notice-link {
    padding: 0;
    border: 0;
    background: none;
    font: 700 14.5px/1.4 'Manrope', sans-serif;
    color: var(--brand-gold-ink-2);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.notice-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.notice-check { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.4 'Manrope', sans-serif; color: var(--ink-2); cursor: pointer; }
.notice-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-gold); }

/* A quiet action pushed to the far end of the action row (the unit page's "Pregled AI sadržaja"). */
.page-actions .page-actions-end { margin-left: auto; }

/* ── Modal (confirmation dialogs) ───────────────────────────────────────── */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(44,38,30,.45);
    backdrop-filter: blur(2px);
}
.modal-backdrop.is-open { display: flex; }

.modal-card {
    width: 100%;
    max-width: 440px;
    padding: 26px 28px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-device);
}
.modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.modal-icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--danger-tint);
    color: var(--danger-strong);
}
.modal-icon .material-symbols-outlined { font-size: 20px; }
.modal-icon--warn { background: var(--paper); color: var(--brand-gold-ink); }
.modal-title { margin: 0; font: 600 17px/1.3 'Manrope', sans-serif; color: var(--ink); }
.modal-body  { margin: 0 0 12px; font: 400 14.5px/1.55 'Manrope', sans-serif; color: var(--ink-2); }
.modal-body strong { color: var(--ink); font-weight: 600; }
.modal-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font: 500 13px/1.5 'Manrope', sans-serif;
    color: var(--danger);
}
.modal-warning .material-symbols-outlined { font-size: 16px; margin-top: 2px; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 22px; }
.modal-actions form { margin: 0; }
/* "Report a problem" in a dialog (support.js): a form, so a little wider than a confirmation. */
.modal-card.aq-support-card { max-width: 540px; max-height: calc(100vh - 40px); overflow-y: auto; }
.aq-support-msg { margin-top: 14px; }

/* ── Dropzone (image upload) ────────────────────────────────────────────────
   Empty: dashed, a 92px thumbnail slot, a title and "drag here or browse".
   With an image: solid border, the image in the slot, replace/remove actions. */
.dropzone {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 26px;
    border: 1.5px dashed var(--hairline-strong);
    border-radius: var(--radius-card);
    background: var(--surface-sunk);
    cursor: pointer;
    user-select: none;
    transition: border-color .12s, background .12s;
}
.dropzone:hover,
.dropzone.is-dragover { border-color: var(--brand-gold); }
.dropzone.has-image { border-style: solid; border-color: var(--hairline); background: var(--surface); cursor: default; }

.dropzone-thumb {
    width: 92px;
    height: 92px;
    flex: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--thumb-border);
    border-radius: var(--radius-ctrl);
    background: var(--thumb-bg);
    color: var(--ink-icon);
}
.dropzone-thumb .material-symbols-outlined { font-size: 26px; }
.dropzone-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dropzone-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.dropzone-title { font: 600 15px/1.3 'Manrope', sans-serif; color: var(--ink); }
.dropzone-hint  { font: 400 13px/1.45 'Manrope', sans-serif; color: var(--ink-2); }
.dropzone-browse { color: var(--brand-gold-ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.dropzone-actions { display: flex; align-items: center; gap: 6px; flex: none; }

.dropzone-progress {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.78);
    border-radius: inherit;
}
.dropzone-progress.uploading { display: flex; }

.spinner {
    width: 32px;
    height: 32px;
    border: 2.5px solid var(--hairline);
    border-top-color: var(--brand-gold);
    border-radius: 50%;
    animation: smk-spin .7s linear infinite;
}
@keyframes smk-spin { to { transform: rotate(360deg); } }

/* ── Stat / chart / results cards ─────────────────────────────────────── */
/* auto-fit (not auto-fill): empty tracks collapse, so four or five cards
   always stretch across the full content width. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
}

.stat-card-icon  { font-size: 22px; color: var(--ink-2); }
.stat-card-value { font: 600 30px/1.1 'Manrope', sans-serif; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-card-label {
    font: 600 11.5px/1.4 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}
/* What a figure covers when it is not everything ("signed-in players only"). */
.stat-card-note { font: 400 12.5px/1.4 'Manrope', sans-serif; color: var(--ink-3); }
/* A figure that opens its list (the dashboard's support figures). */
a.stat-card { text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
a.stat-card:hover { border-color: var(--hairline-strong); box-shadow: 0 2px 8px rgba(44,38,30,.06); }

/* What happened before a support request (SupportRequests): the reporter's errors and the client's AI runs. */
.support-context { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--divider); }
.support-context ul { margin: 2px 0 6px; padding-left: 18px; }
.support-context li { margin: 2px 0; }

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
/* Two equal columns; a card can span both (grid-column: 1 / -1). */
.chart-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .chart-grid--2 { grid-template-columns: 1fr; }
}

.chart-card,
.res-card {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
}
.res-card { margin-bottom: 16px; overflow-x: auto; }

.chart-title {
    margin-bottom: 16px;
    font: 600 11.5px/1.4 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.chart-canvas-wrap { position: relative; height: 220px; }

.stats-table { width: 100%; border-collapse: collapse; }

.stats-table th {
    padding: 12px 20px;
    text-align: left;
    font: 600 11.5px/1.4 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--divider);
}

.stats-table td {
    padding: 12px 20px;
    font: 400 14px/1.45 'Manrope', sans-serif;
    color: var(--ink-2);
    border-bottom: 1px solid var(--row-line);
}
.stats-table tr:last-child td { border-bottom: none; }
.stats-table tbody tr:hover td { background: var(--surface-sunk); }
.stats-table td.num,
.stats-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

.badge-sessions,
.res-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius-tag);
    background: var(--brand-taupe);
    color: #fff;
    font: 600 11.5px/1.4 'Manrope', sans-serif;
}

.step-badge {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid var(--tag-border);
    border-radius: var(--radius-tag);
    background: var(--tag-bg);
    color: var(--ink-soft);
    font: 500 12px/1.4 'Manrope', sans-serif;
}

.model-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--ink-2);
}

/* ── Module editor panels ───────────────────────────────────────────────── */
.master-content .quizedit-container,
.master-content .icedit-container,
.master-content .jigedit-container,
.master-content .mazeedit-container,
.master-content .mpe-container,
.master-content .sortedit-container,
.master-content .wsedit-container,
.master-content .thedit-container,
.master-content .memedit-container,
.master-content .catedit-container,
.master-content .clzedit-container,
.master-content .hsedit-container,
.master-content .cbedit-container {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* Form left, 400px preview right; the preview is sticky. */
.master-content .quizedit-outer-grid,
.master-content .icedit-grid,
.master-content .jigedit-grid,
.master-content .mazeedit-grid,
.master-content .mpe-grid,
.master-content .sortedit-grid,
.master-content .wsedit-outer-grid,
.master-content .thedit-outer-grid,
.master-content .memedit-grid,
.master-content .catedit-grid,
.master-content .clzedit-grid,
.master-content .hsedit-grid,
.master-content .cbedit-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 400px;
    gap: 24px;
    align-items: start;
}
.master-content .quizedit-outer-grid > .edit-panel,
.master-content .icedit-grid > .edit-panel,
.master-content .jigedit-grid > .edit-panel,
.master-content .mazeedit-grid > .edit-panel,
.master-content .mpe-grid > .edit-panel,
.master-content .sortedit-grid > .edit-panel,
.master-content .wsedit-outer-grid > .edit-panel,
.master-content .thedit-outer-grid > .edit-panel,
.master-content .memedit-grid > .edit-panel,
.master-content .catedit-grid > .edit-panel,
.master-content .clzedit-grid > .edit-panel,
.master-content .hsedit-grid > .edit-panel,
.master-content .cbedit-grid > .edit-panel { height: auto; }

.master-content .quizedit-outer-grid > .edit-panel:last-child,
.master-content .icedit-grid > .edit-panel:last-child,
.master-content .jigedit-grid > .edit-panel:last-child,
.master-content .mazeedit-grid > .edit-panel:last-child,
.master-content .mpe-grid > .edit-panel:last-child,
.master-content .sortedit-grid > .edit-panel:last-child,
.master-content .wsedit-outer-grid > .edit-panel:last-child,
.master-content .thedit-outer-grid > .edit-panel:last-child,
.master-content .memedit-grid > .edit-panel:last-child,
.master-content .catedit-grid > .edit-panel:last-child,
.master-content .clzedit-grid > .edit-panel:last-child,
.master-content .hsedit-grid > .edit-panel:last-child,
.master-content .cbedit-grid > .edit-panel:last-child {
    /* Stacks under the header AND the editor action bar — both measured, both
       variable height (they wrap at narrow widths). Lowest of the three
       sticky layers. */
    position: sticky;
    top: calc(var(--topbar-measured, var(--topbar-h)) + var(--editor-bar-h, 0px) + 24px);
    max-height: calc(100vh - var(--topbar-measured, var(--topbar-h)) - var(--editor-bar-h, 0px) - 48px);
    z-index: 10;
}

@media (max-width: 1100px) {
    .master-content .quizedit-outer-grid,
    .master-content .icedit-grid,
    .master-content .jigedit-grid,
    .master-content .mazeedit-grid,
    .master-content .mpe-grid,
    .master-content .sortedit-grid,
    .master-content .wsedit-outer-grid,
    .master-content .thedit-outer-grid,
    .master-content .memedit-grid,
    .master-content .catedit-grid,
    .master-content .clzedit-grid,
    .master-content .hsedit-grid,
    .master-content .cbedit-grid {
        grid-template-columns: 1fr;
    }
    .master-content .quizedit-outer-grid > .edit-panel:last-child,
    .master-content .icedit-grid > .edit-panel:last-child,
    .master-content .jigedit-grid > .edit-panel:last-child,
    .master-content .mazeedit-grid > .edit-panel:last-child,
    .master-content .mpe-grid > .edit-panel:last-child,
    .master-content .sortedit-grid > .edit-panel:last-child,
    .master-content .wsedit-outer-grid > .edit-panel:last-child,
    .master-content .thedit-outer-grid > .edit-panel:last-child,
    .master-content .memedit-grid > .edit-panel:last-child,
    .master-content .catedit-grid > .edit-panel:last-child,
    .master-content .clzedit-grid > .edit-panel:last-child,
    .master-content .hsedit-grid > .edit-panel:last-child,
    .master-content .cbedit-grid > .edit-panel:last-child {
        position: static;
        max-height: none;
    }
}

.edit-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    box-shadow: none;
}

.edit-panel-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-shrink: 0;
    padding: 14px 18px;
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--divider);
}
.edit-panel-header--wide { padding: 14px 28px; }

.edit-panel-title {
    font: 600 14px/1.3 'Manrope', sans-serif;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
}

/* Labelled refresh (was a bare icon). */
.edit-panel-refresh {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--ctrl-border);
    border-radius: var(--radius-small);
    background: var(--surface);
    color: var(--ink-soft);
    font: 500 12.5px/1.3 'Manrope', sans-serif;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.edit-panel-refresh:hover { color: var(--ink); background: var(--thumb-bg); }
.edit-panel-refresh .material-symbols-outlined { font-size: 14px; }

.edit-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 28px; }
.edit-panel-body--flush { padding: 0; }

.edit-panel-preview { padding: 24px; background: var(--surface-top); overflow: hidden; display: flex; flex-direction: column; }
.edit-panel-preview > * { border-radius: var(--radius-card); overflow: hidden; background: transparent; }

/* Device frames across the editors. The panels are no longer stretched to the
   grid row, so the editors' own `height:100%` phone had nothing to resolve
   against — the frame is sized here instead: a 264px device, shrunk on short
   viewports so the sticky panel still fits, with the screen pinned inside the
   bezel (every editor uses the same 2.15rem / .5rem / 1.55rem bezel). */
.edit-panel-preview [class$="-preview-stage"] {
    padding: 6px 0 20px;
    min-height: 0;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.edit-panel-preview [class$="-phone"] {
    position: relative;
    flex: none;
    width: min(280px, 100%, calc((100vh - var(--topbar-measured, var(--topbar-h)) - var(--editor-bar-h, 0px) - 172px) / 2));
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 2;
    padding: 10px;
    border-radius: 40px;
    background: #14100C;
    box-shadow: var(--shadow-device);
}
/* Home indicator inside the screen. */
.edit-panel-preview [class$="-phone"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: 96px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255,255,255,.7);
    z-index: 3;
    pointer-events: none;
}
.edit-panel-preview [class$="-phone-screen"] {
    position: absolute;
    inset: 10px;
    width: auto;
    height: auto;
    border-radius: 30px;
    overflow: hidden;
}

/* The save form wraps a stack of cards (configuration · content · publication);
   each card sizes to its content. */
.editor-stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.editor-stack .edit-panel { height: auto; }

/* ── Editor action bar ──────────────────────────────────────────────────────
   One sticky strip directly under the app header: back link + title + type tag
   on the left, "unsaved" label + Delete | Cancel · Save on the right. Its top
   is the header's MEASURED height (--topbar-measured, published by the
   _EditorActionBar script from a ResizeObserver) — the header wraps at narrow
   widths, so a constant would drift. Paint order is explicit: header z 40 ›
   bar z 30 › sticky preview z 10. The negative margins let it span the full
   content width (cancelling .master-content's padding) so nothing scrolls
   past it in the gutters. */
.editor-bar {
    position: sticky;
    top: var(--topbar-measured, var(--topbar-h));
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: -36px -40px 24px;
    padding: 16px 40px 12px;
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline-strong);
    transition: box-shadow .12s;
}
.editor-bar.is-stuck {
    box-shadow: 0 10px 22px -16px rgba(44,38,30,.4);
}

/* ── Form action bar: the standard is Save ABOVE the form, never below ──────
   The editor bar's action group for a form that starts under a page title or tabs
   (the client form's tabs, a unit's Postavke, the look editor): a sticky strip under
   the header with the same .editor-bar-actions group (Delete | Cancel · Save), without
   the title block and the page-top negative margin. */
.action-bar {
    position: sticky;
    top: var(--topbar-measured, var(--topbar-h));
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 20px;
    padding: 10px 0;
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline-strong);
}

/* Actions-only variant: the title lives in the top header (TopbarTitle section). */
.editor-bar--actions { justify-content: flex-end; padding-top: 12px; padding-bottom: 12px; }

.editor-bar-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 320px;
}
.editor-bar-title .page-title-row { flex-wrap: nowrap; min-width: 0; }
.master-content .editor-bar .page-title {
    font-size: 26px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.editor-bar .type-tag { flex: none; }

.editor-bar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}
.editor-bar-actions > .btn-primary-action,
.editor-bar-actions > .btn-secondary-action,
.editor-bar-actions > .btn-danger-outline { white-space: nowrap; }
.editor-bar-dirty {
    font: 400 13.5px/1.3 'Manrope', sans-serif;
    color: var(--ink-2);
    margin-right: 4px;
    white-space: nowrap;
}
.editor-bar-divider {
    width: 1px;
    height: 24px;
    flex: none;
    margin: 0 4px;
    background: var(--hairline-strong);
}

/* Editor footer — destructive left, safe actions right. */
.editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 24px;
    padding: 16px 28px;
    background: var(--surface-sunk);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
}
.editor-footer form { margin: 0; display: inline-flex; }
.editor-footer-left,
.editor-footer-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.editor-footer-right { margin-left: auto; }

/* ── Module meta row + settings ("Objava i vidljivost") ──────────────────── */
.master-content .module-meta-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 20px;
    align-items: start;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--divider);
}
.master-content .quizedit-meta .module-meta-row { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
/* Alone in its own "Name and description" panel: nothing below it to divide from. */
.master-content .module-meta-row:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
@media (max-width: 560px) {
    .master-content .module-meta-row,
    .form-grid-2 { grid-template-columns: 1fr; }
}

/* Settings block: a micro-label heading, then plain toggle rows with
   hairline dividers, capped at 560px so label and switch stay in one glance. */
.master-content .mod-settings { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--divider); }
/* Inside a region card the region already carries the divider and padding. */
.card-region > .mod-settings { margin-top: 0; padding-top: 0; border-top: 0; }
.master-content .mod-set-title {
    margin: 0 0 6px;
    font: 600 11.5px/1 'Manrope', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.master-content .mod-set-card  { padding: 0; border: 0; border-radius: 0; background: transparent; max-width: 560px; }
.master-content .mod-set-row   {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    min-height: 0;
    margin: 0;
    cursor: default;
}
label.mod-set-row { cursor: pointer; }
.master-content .mod-set-row + .mod-set-row,
.master-content .mod-set-row.has-divider { border-top: 1px solid var(--row-line); }
.master-content .mod-grouped .mod-set-card + .mod-set-card { margin-top: 0; border-top: 1px solid var(--row-line); }
.master-content .mod-set-label { font: 500 15px/1.35 'Manrope', sans-serif; color: var(--ink); }
.master-content .mod-set-row select.form-input,
.master-content .mod-set-row input.form-input { width: auto; min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.master-content .mod-set-points-input { width: 84px; text-align: right; }

/* ── Phone chrome for module-editor previews ──────────────────────────────
   The status bar is drawn INSIDE the screen, over the game's own background
   (the player layout reserves 48 design-px under it in preview mode — see
   body.wa-preview in MasterWebAppLayout). Its height follows the screen width
   via aspect-ratio so it always matches that reserved strip after scaling. */
.smk-phone-topbar {
    position: absolute; top: 10px; left: 10px; right: 10px;
    aspect-ratio: 390 / 48; height: auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px; z-index: 3; pointer-events: none;
    color: #fff; font: 600 11.5px/1 'Manrope', sans-serif; letter-spacing: .02em;
}
.smk-phone-icons { display: flex; align-items: center; gap: 3px; }
.smk-phone-icons .material-symbols-outlined { font-size: 14px; line-height: 1; }
.smk-phone-island { display: none; }
[class*="-phone-screen"] > iframe { transform-origin: top left; }

/* ── Image field of the module editors (_ImageField) ───────────────────────
   One picture of an activity, the same in every editor, its actions always in sight. lg: the picture
   with a bar of actions under it, whose labels give way to icons when the field is narrow (a container
   query on the bar). sm: a small tile that fills the box the editor's own tile class gives it; a click
   opens a floating menu, a corner badge says so. */
.imgf { position: relative; min-width: 0; }
.imgf--lg { display: flex; flex-direction: column; gap: 8px; }
.imgf-frame {
    position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
    border: 1.5px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface-sunk);
}
.imgf--lg .imgf-frame { min-height: var(--imgf-min-h, 120px); }
.imgf.is-empty .imgf-frame { border-style: dashed; border-color: var(--hairline-strong); cursor: pointer; }
.imgf.is-empty .imgf-frame:hover, .imgf.is-dragover .imgf-frame { border-color: var(--brand-gold); background: #FBF8F1; }
.imgf.is-error .imgf-frame { border-color: var(--danger); }
.imgf-img { display: block; width: 100%; max-height: var(--imgf-max-h, 220px); object-fit: contain; }
/* An editor's own view of the picture (data-imgf-stage) replaces the field's copy, below the busy veil. */
.imgf.has-stage .imgf-img { display: none; }
.imgf-frame > [data-imgf-stage] { position: relative; z-index: 0; }
.imgf-empty {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; text-align: center;
    color: var(--ink-2); font: 500 12.5px/1.35 'Manrope', sans-serif; pointer-events: none;
}
.imgf-empty .material-symbols-outlined { font-size: 28px; color: var(--ink-icon); }
.imgf-bar { display: flex; flex-wrap: wrap; gap: 6px; container-type: inline-size; }
.imgf-act {
    display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px;
    border: 1px solid var(--hairline-btn); border-radius: var(--radius-small); background: var(--surface);
    color: var(--ink-soft); font: 600 12.5px/1 'Manrope', sans-serif; white-space: nowrap; cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}
.imgf-act:hover { border-color: var(--hairline-btn-hover); background: var(--surface-hover); color: var(--ink); }
.imgf-act:focus-visible { outline: none; border-color: var(--brand-gold); box-shadow: var(--focus-ring); }
.imgf-act .material-symbols-outlined { font-size: 17px; }
.imgf-act[data-act="remove"] { color: var(--danger); }
.imgf-act[data-act="remove"]:hover { background: var(--danger-tint); }
.imgf-act[hidden] { display: none; }
@container (max-width: 300px) {
    .imgf-act { padding: 0 8px; }
    .imgf-act .imgf-label { display: none; }
}
/* With "New AI image" in the bar the labels need more room, so they give way sooner (no second row). */
@container (max-width: 480px) {
    .imgf-bar:has(> .imgf-act[data-act="ai"]:not([hidden])) .imgf-act { padding: 0 8px; }
    .imgf-bar:has(> .imgf-act[data-act="ai"]:not([hidden])) .imgf-label { display: none; }
}
.imgf-error { margin: 0; font: 500 12px/1.4 'Manrope', sans-serif; color: var(--danger); }
.imgf-error[hidden] { display: none; }
.imgf-busy { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; background: rgba(255,255,255,.72); }
.imgf.is-busy .imgf-busy { display: flex; }
.imgf-spinner { width: 22px; height: 22px; border: 2px solid var(--hairline); border-top-color: var(--brand-gold); border-radius: 50%; animation: imgf-spin .7s linear infinite; }
@keyframes imgf-spin { to { transform: rotate(360deg); } }
.imgf--sm { display: block; }
.imgf--sm .imgf-frame { position: absolute; inset: 0; border-radius: inherit; cursor: pointer; }
.imgf--sm .imgf-img { height: 100%; max-height: none; object-fit: cover; }
.imgf--sm .imgf-empty { padding: 0; }
.imgf--sm .imgf-empty .material-symbols-outlined { font-size: 20px; }
.imgf--sm .imgf-frame:hover { border-color: var(--brand-gold); }
.imgf--sm .imgf-frame:focus-visible { outline: none; border-color: var(--brand-gold); box-shadow: var(--focus-ring); }
.imgf--sm .imgf-spinner { width: 16px; height: 16px; }
.imgf-badge {
    position: absolute; right: 3px; bottom: 3px; z-index: 1; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.25); pointer-events: none;
}
.imgf-badge .material-symbols-outlined { font-size: 13px; }
.imgf--sm.is-empty .imgf-badge { display: none; }
.imgf-menu {
    position: fixed; z-index: 1200; min-width: 190px; padding: 4px; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-ctrl);
    box-shadow: 0 12px 32px rgba(44,38,30,.18);
}
.imgf-menu button {
    display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-radius: 6px; background: none;
    color: var(--ink); font: 500 13.5px/1.2 'Manrope', sans-serif; text-align: left; white-space: nowrap; cursor: pointer;
}
.imgf-menu button:hover, .imgf-menu button:focus-visible { background: var(--surface-sunk); outline: none; }
.imgf-menu button .material-symbols-outlined { font-size: 18px; color: var(--ink-2); }
.imgf-menu button.is-danger, .imgf-menu button.is-danger .material-symbols-outlined { color: var(--danger); }

/* ── Step wizard (AI Graditelj modula) ──────────────────────────────────── */
/* One row of numbered circles joined by lines (design 2026-10-23): a done step is a gold circle with a
   tick and a gold line after it, the current one a dark circle with its name in bold, the rest outlined.
   Wraps on a narrow screen. */
.wizard-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 8px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    padding: 16px 20px;
    margin-bottom: 22px;
}

.wizard-step-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    border-radius: var(--radius-ctrl);
}
/* Visited steps become buttons (the wizard JS toggles .clickable); the rest stay indicators. */
.wizard-step-wrap.clickable { cursor: pointer; }
.wizard-step-wrap.clickable:hover .wizard-step-label { text-decoration: underline; }
.wizard-step-wrap.clickable:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.wizard-step-line { flex: 1 1 24px; min-width: 24px; height: 2px; background: var(--hairline); }
.wizard-step-wrap.done + .wizard-step-line { background: var(--brand-gold-ink); }

.wizard-step-dot {
    flex: none;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border: 1.5px solid var(--ink-3);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 600 13px/1 'Manrope', sans-serif;
    color: var(--ink-2);
}
.wizard-step-dot .wizard-step-tick { display: none; font-size: 16px; font-weight: 700; }
.wizard-step-wrap.active .wizard-step-dot { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.wizard-step-wrap.done .wizard-step-dot { background: var(--brand-gold-ink); border-color: var(--brand-gold-ink); color: #fff; }
.wizard-step-wrap.done .wizard-step-num { display: none; }
.wizard-step-wrap.done .wizard-step-dot .wizard-step-tick { display: block; }

.wizard-step-label {
    font: 500 14px/1.3 'Manrope', sans-serif;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wizard-step-wrap.active .wizard-step-label { font-weight: 700; color: var(--ink); }

.wizard-panel { display: none; }
.wizard-panel.active { display: block; }

.wizard-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1024px) {
    .wizard-grid { grid-template-columns: 1fr; }
}

/* Heading of one wizard step: title + one-line instruction, above the step's card. */
.wizard-step-head { margin-bottom: 20px; }
.wizard-step-head h2 {
    margin: 0 0 4px;
    font: 600 18px/1.3 'Manrope', sans-serif;
    letter-spacing: -.005em;
    color: var(--ink);
}
.wizard-step-head p { margin: 0; max-width: 78ch; font: 400 14px/1.5 'Manrope', sans-serif; color: var(--ink-2); }

.wizard-lede h2 {
    margin: 0 0 12px;
    font: 600 22px/1.25 'Manrope', sans-serif;
    letter-spacing: -.01em;
    color: var(--ink);
}
.wizard-lede p {
    margin: 0;
    max-width: 68ch;   /* the card spans the wizard width; the prose keeps a readable measure */
    font: 400 14.5px/1.6 'Manrope', sans-serif;
    color: var(--ink-2);
}

.wizard-numbered { display: flex; flex-direction: column; gap: 16px; }
.wizard-numbered-row { display: flex; gap: 14px; align-items: flex-start; }
.wizard-num {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-icon);
    font: 600 11px/1 'Manrope', sans-serif;
    color: var(--ink);
}
.wizard-num-title { font: 600 14px/1.3 'Manrope', sans-serif; color: var(--ink); margin: 0 0 5px; }
.wizard-num-desc  { font: 400 13px/1.5 'Manrope', sans-serif; color: var(--ink-2); margin: 0; max-width: 68ch; }

.wizard-ack {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font: 500 13px/1.5 'Manrope', sans-serif;
    color: var(--ink);
    cursor: pointer;
}
.wizard-ack input { width: 15px; height: 15px; margin: 2px 0 0; flex-shrink: 0; }

.wizard-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--divider);
}

/* ── Login screen ──────────────────────────────────────────────────────────
   The _AccountLayout shell: sign-in (AdminLogin, UserLogin) and the other account pages. Cream brand panel left,
   taupe form panel right. */
.login-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    width: 100%;
    flex: 1;
    min-height: 100vh;
}

.login-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 48px 52px;
    background: var(--brand-cream);
    color: var(--ink);
}

.login-brand > * { position: relative; z-index: 1; }

.login-lockup { display: block; width: min(400px, 62%); }
.login-lockup img { display: block; width: 100%; height: auto; }

.login-watermark {
    position: absolute;
    z-index: 0;
    left: -46px;
    bottom: -72px;
    width: 400px;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.login-pitch {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-left: clamp(0px, 42%, 360px);
    max-width: 380px;
}

.login-title {
    margin: 0;
    font: 500 40px/1.15 'Manrope', sans-serif;
    letter-spacing: -.01em;
    color: var(--ink);
    text-wrap: pretty;
}

.login-lead {
    margin: 0;
    font: 400 15px/1.55 'Manrope', sans-serif;
    color: #5C5447;   /* --ink-2 on the cream card is 4.25:1; this is 5.7:1 */
    text-wrap: pretty;
}

.login-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px 60px;
    background: var(--brand-taupe);
    color: #fff;
}

.login-form-col {
    width: 100%;
    max-width: 384px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.login-mark { display: block; width: 66px; height: auto; margin-bottom: 2px; }

.login-heading { display: flex; flex-direction: column; gap: 10px; }
.login-heading h1 {
    margin: 0;
    font: 500 24px/1.2 'Manrope', sans-serif;
    letter-spacing: -.01em;
    color: #fff;
}
.login-heading p {
    margin: 0;
    font: 400 13.5px/1.5 'Manrope', sans-serif;
    color: rgba(255,255,255,.9);
}

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-field { display: flex; flex-direction: column; gap: 7px; }

.login-label {
    font: 500 12.5px/1 'Manrope', sans-serif;
    color: #fff;
}

.login-input {
    height: 44px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-ctrl);
    background: #fff;
    font: 400 15px/1 'Manrope', sans-serif;
    color: var(--ink);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.login-input::placeholder { color: var(--ink-3); }
.login-input:focus { border-color: var(--brand-gold); box-shadow: var(--focus-ring); }
/* A longer answer in the sign-in shell (the public quote request): the box grows with its rows. */
textarea.login-input { height: auto; padding: 10px 14px; line-height: 1.5; resize: vertical; }

.login-btn {
    height: 46px;
    margin-top: 6px;
    border: none;
    border-radius: var(--radius-ctrl);
    background: var(--brand-gold-ink);   /* the deeper gold: white type on it meets AA 4.5:1 (public pages) */
    color: #fff;
    font: 600 14.5px/1 'Manrope', sans-serif;
    cursor: pointer;
    transition: background .15s;
}
.login-btn:hover { background: var(--brand-gold-ink-2); }
/* The same button as a link (the error page's "Report this problem"). */
a.login-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }

.login-card :focus-visible { outline-color: #fff; }

.login-note {
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.2);
    font: 400 13px/1.55 'Manrope', sans-serif;
    color: rgba(255,255,255,.85);
}
.login-note a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.login-note a:hover { color: var(--brand-cream); }

/* The language of the sign-in pages (_LoginLanguagePicker): quiet, under the note. */
.login-lang { display: flex; align-items: center; gap: 8px; font: 400 13px/1.4 'Manrope', sans-serif; color: rgba(255,255,255,.85); }
.login-lang label { display: inline-flex; align-items: center; gap: 4px; }
.login-lang .material-symbols-outlined { font-size: 16px; }
.login-lang select {
    font: inherit; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.35);
    border-radius: 6px; padding: 4px 8px; cursor: pointer;
}
.login-lang select option { color: #2b2724; }

.login-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(156,58,49,.35);
    border-radius: var(--radius-ctrl);
    background: var(--danger-tint);
    font: 500 13px/1.5 'Manrope', sans-serif;
    color: var(--danger);
}
.login-error .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }

.login-banner {
    padding: 14px 16px;
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-card);
    background: var(--brand-cream);
}
.login-banner-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 6px;
    font: 600 11px/1 'Manrope', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-gold-ink);
}
.login-banner-title .material-symbols-outlined { font-size: 15px; }
.login-banner p { margin: 0; font: 400 13px/1.55 'Manrope', sans-serif; color: var(--ink-2); }

/* Sign-up: the same card with a longer form (UserRegister). */
.login-card--signup { align-items: flex-start; padding: 28px 48px 36px; }
.login-card--signup .login-form-col { max-width: 440px; gap: 16px; }
.login-card--signup .login-form { gap: 10px; }
.login-card--signup .login-heading { gap: 8px; }
/* The public demo (/demo): one short form, centred like the sign-in, the mark above a larger heading with a fuller
   description under it, a wider column and taller controls, so the one thing to do (paste an address) carries
   the card. The waiting steps and the finished games use the same column. */
.login-card--demo .login-form-col { max-width: 560px; gap: 34px; }
.login-card--demo .login-form-col > .login-mark { width: 44px; margin: 0 0 -14px; }
.login-card--demo .login-heading { gap: 14px; }
.login-card--demo .login-heading h1 { font-size: 30px; line-height: 1.2; text-wrap: balance; }
.login-card--demo .login-heading p { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.92); text-wrap: pretty; }
.login-card--demo .login-form { gap: 12px; }
.login-card--demo .login-field { gap: 9px; }
.login-card--demo .login-label { font-size: 13.5px; font-weight: 600; }
.login-card--demo .login-input { height: 56px; padding: 0 18px; font-size: 16.5px; }
.login-card--demo .login-help { font-size: 12.5px; }
.login-card--demo .login-btn { height: 56px; margin-top: 10px; font-size: 16px; }
.login-card--demo .login-note { margin-top: 2px; padding-top: 22px; font-size: 13.5px; }
/* The example address to try, a button that reads as a link (it fills the field). */
.demo-example { padding: 0; border: 0; background: none; font: inherit; color: #fff; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; overflow-wrap: anywhere; }
/* Above the demo's form: the games this browser already made, still there (a whole row to click). */
.demo-earlier { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-card); background: rgba(255,255,255,.1); color: #fff; text-decoration: none; font: 500 14px/1.4 'Manrope', sans-serif; }
.demo-earlier:hover { background: rgba(255,255,255,.16); }
.demo-earlier .material-symbols-outlined { flex: 0 0 auto; font-size: 22px; }
.demo-earlier-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.demo-earlier-open { flex: 0 0 auto; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* The demo's games: white rows with the type's illustration; the one playing in the phone is outlined. */
.demo-games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.demo-game { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 2px solid transparent; border-radius: var(--radius-ctrl); background: #fff; color: var(--ink); text-decoration: none; font: 500 14px/1.3 'Manrope', sans-serif; transition: border-color .15s ease, box-shadow .15s ease; }
.demo-game img, .demo-game > .material-symbols-outlined { flex: 0 0 auto; }
.demo-game img { object-fit: contain; }
.demo-game-name { min-width: 0; overflow-wrap: anywhere; }
.demo-game:hover { box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.demo-game.is-playing { border-color: var(--brand-gold); box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
/* The demo has the sign-up's narrow brand panel (login-wrapper--wide on its wrapper, always). From its first game
   on (demo-playing), a phone comes in beside the list and plays the unit as a path, and a QR under the list opens
   it on the visitor's own phone. The phone's top bezel is tall enough for the status bar (_PhonePreviewChrome),
   which here would otherwise cover the page. Neither on narrow screens, where the visitor is on a phone already. */
.demo-playing .login-card--demo { flex-wrap: wrap; gap: 44px; padding: 40px clamp(24px, 3.6vw, 60px); }
.demo-playing .login-card--demo .login-form-col { flex: 1 1 320px; max-width: 440px; gap: 26px; }
.demo-stage { flex: 0 0 auto; display: flex; justify-content: center; animation: demo-phone-in .55s ease both; }
.demo-stage[hidden] { display: none; }
@keyframes demo-phone-in { from { opacity: 0; transform: translateX(56px); } }
.demo-phone {
    position: relative; height: 640px; max-height: calc(100vh - 80px); aspect-ratio: 9 / 19;
    background: #0b0b0f; border-radius: 2.3rem; padding: 2.9rem .5rem 1.55rem;
    box-shadow: 0 18px 48px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.06);
}
.demo-phone::after {
    content: ""; position: absolute; left: 50%; bottom: .62rem; transform: translateX(-50%);
    width: 32%; height: 4px; border-radius: 9999px; background: rgba(255,255,255,.55); pointer-events: none;
}
.demo-phone-screen { position: relative; width: 100%; height: 100%; border-radius: 1.85rem; overflow: hidden; background: #fff; }
.demo-phone-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.demo-qr { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-card); background: rgba(255,255,255,.1); }
.demo-qr[hidden] { display: none; }
.demo-qr-code { flex: 0 0 auto; padding: 8px; border-radius: 10px; background: #fff; line-height: 0; }
.demo-qr-code img, .demo-qr-code canvas { width: 116px; height: 116px; }
.demo-qr-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.demo-qr-title { display: flex; align-items: center; gap: 6px; margin: 0; font: 700 15px/1.3 'Manrope', sans-serif; color: #fff; }
.demo-qr-title .material-symbols-outlined { font-size: 20px; }
@media (max-width: 900px) { .demo-stage, .demo-qr { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .demo-stage { animation: none; } }
.login-heading-row { display: flex; align-items: center; gap: 16px; }
.login-heading-row .login-mark { width: 44px; margin: 0; flex-shrink: 0; }
.login-help { margin: 0; font: 400 12px/1.45 'Manrope', sans-serif; color: rgba(255,255,255,.8); }
.login-check { display: flex; align-items: flex-start; gap: 10px; font: 400 13px/1.5 'Manrope', sans-serif; color: #fff; }
.login-check input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--brand-gold); }
.login-check a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.login-btn:disabled { opacity: .6; cursor: progress; }
.login-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.login-group { margin: 10px 0 4px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); font: 600 11px/1 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.login-group:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.login-group-body { display: flex; flex-direction: column; gap: 12px; padding-left: 14px; border-left: 2px solid rgba(255,255,255,.25); }
/* Request a quote without an account (QuoteRequest): a long form in two columns. The brand panel narrows to
   give the card the room; the sign-in link stands beside the heading and the send button under the columns. */
.login-wrapper--wide { grid-template-columns: minmax(0, 29fr) minmax(0, 71fr); }
.login-wrapper--wide .login-pitch { margin-left: 0; }
.login-card--wide { align-items: flex-start; padding: 40px clamp(24px, 4.8vw, 76px) 48px; }
.login-card--wide .login-form-col { max-width: 1040px; gap: 26px; }
.login-card--wide .login-form-col > .login-mark { display: none; }
.login-card--wide .login-form { gap: 24px; }
.qr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 32px; flex-wrap: wrap; }
.qr-head .login-heading { max-width: 620px; }
.qr-head .login-heading h1 { font-size: 28px; }
.qr-head .login-note { margin: 0; padding-top: 8px; border-top: 0; }
.qr-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; }
.qr-col { display: flex; flex-direction: column; }
.qr-col .login-group { margin: 0 0 14px; padding-top: 0; border-top: 0; }
.qr-col .login-group-body { flex: 1; gap: 14px; padding-left: 18px; border-left-width: 1px; }
/* The last answer fills the column down to the end of the other one. */
.qr-col .qr-needs { flex: 1; }
.qr-col .qr-needs textarea { flex: 1; min-height: 120px; }
.qr-submit { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); }
.qr-submit-note { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.qr-submit .login-btn { margin-top: 0; min-width: 240px; padding: 0 32px; }
@media (max-width: 1180px) { .qr-columns { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .qr-submit .login-btn { width: 100%; } }
/* A short help text that opens to the full one ("Details"), without script; in the sign-in shell and the back office. */
.qr-more summary { list-style: none; cursor: pointer; }
.qr-more summary::-webkit-details-marker { display: none; }
.qr-more-link { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.qr-more[open] .qr-more-link { display: none; }
.qr-more p { margin: 6px 0 0; }
/* Sign-up (UserRegister): the quote request's narrower brand panel, one column in the middle of the card, the
   sign-in link in the card's corner, a line above the terms. */
.login-card--register { position: relative; padding: 96px clamp(24px, 4.8vw, 76px) 56px; }
.login-card--register .login-form-col { max-width: 540px; gap: 22px; }
.login-card--register .login-form-col > .login-mark { display: none; }
.login-card--register .login-heading h1 { font-size: 28px; }
.login-card--register .login-form { gap: 12px; }
.login-card--register .login-group { margin: 16px 0 2px; padding-top: 0; border-top: 0; }
.login-card--register .login-group:first-of-type { margin-top: 0; }
.login-card--register .login-group-body { gap: 14px; padding-left: 18px; border-left-width: 1px; }
.login-corner-note { position: absolute; top: 30px; right: clamp(24px, 4.8vw, 60px); margin: 0; padding: 0; border: 0; }
.login-terms { margin-top: 14px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); }
/* Two fields side by side (first name and surname; in the quote request country and VAT number). */
.login-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
/* A label with a short hint at the other end of its row (the password's minimum length). */
.login-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.login-label-row .login-help { text-align: right; }
/* "Show" inside the password box. */
.login-input-wrap { position: relative; display: flex; flex-direction: column; }
.login-input-wrap .login-input { padding-right: 88px; }
.login-reveal {
    position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
    height: 30px; padding: 0 10px; border: 0; border-radius: 6px;
    background: var(--brand-cream); color: #5C5447;   /* 4.5:1 or more on the cream */
    font: 500 12.5px/1 'Manrope', sans-serif; cursor: pointer;
}
.login-reveal:hover { color: var(--ink); }
.login-reveal:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 1px; }
@media (max-width: 900px) {
    .login-card--register .login-form-col { gap: 18px; }
    .login-corner-note { position: static; align-self: flex-end; }
}
@media (max-width: 520px) { .login-pair { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 900px) {
    .login-wrapper { grid-template-columns: 1fr; min-height: 100dvh; }
    .login-brand { padding: 28px 24px 36px; gap: 28px; }
    .login-lockup { width: min(320px, 80%); }
    .login-watermark { display: none; }
    .login-pitch { margin-left: 0; max-width: none; }
    .login-title { font-size: 28px; }
    .login-card { padding: 32px 24px 56px; }
}

/* ── Accessibility ──────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}
.form-input:focus-visible { outline: none; }
.master-sidebar :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .master-topbar { padding: 0 24px; }
    .master-topbar .topbar-user-info { display: none; }
    .maint-strip   { padding: 10px 24px; }
}

@media (max-width: 768px) {
    .master-sidebar  { display: none; }
    #sidebar-resizer { display: none; }
    .master-main     { margin-left: 0; }
    .master-topbar   { padding: 0 16px; gap: 12px; }
    .master-topbar .topbar-icons { display: none; }
    .master-content  { padding: 20px 16px 40px; }
    .maint-strip     { padding: 10px 16px; }
    .master-content .page-title { font-size: 28px; }
    .editor-bar { margin: -20px -16px 20px; padding: 12px 16px 10px; }
    .master-content .editor-bar .page-title { font-size: 22px; }
    .card-region, .form-section, .card-panel { padding: 20px; }
    .card-header, .card-footer, .editor-footer { padding: 14px 20px; }
    .edit-panel-body { padding: 20px; }
}

/* ── Plan usage meters and the system dashboard (group D) ─────────────── */
.usage-list { display: flex; flex-direction: column; gap: 16px; }
.usage-row  { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr minmax(90px, auto); gap: 16px; align-items: center; }
.usage-row-label { font: 500 14px/1.4 'Manrope', sans-serif; color: var(--ink); }
.usage-row-value { font: 600 14px/1.4 'Manrope', sans-serif; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-bar      { height: 8px; border-radius: 99px; background: var(--surface-sunk); border: 1px solid var(--hairline); overflow: hidden; }
.usage-bar-fill { height: 100%; background: var(--brand-gold); }
.usage-row--warn .usage-bar-fill { background: #C89A2A; }
.usage-row--full .usage-bar-fill { background: var(--danger); }
.usage-row--full .usage-row-value { color: var(--danger); }
.usage-bar--none { background: repeating-linear-gradient(90deg, var(--surface-sunk) 0 6px, transparent 6px 12px); }
@media (max-width: 768px) { .usage-row { grid-template-columns: 1fr auto; } .usage-bar { grid-column: 1 / -1; } }

.dash-periods { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }

/* Funnel (Funnel.cshtml): one row per step, a bar relative to the widest step. */
.funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr 70px 56px; align-items: center; gap: 12px; }
.funnel-label { font: 500 14px/1.3 'Manrope', sans-serif; color: var(--ink); }
.funnel-bar { height: 14px; border-radius: 7px; background: var(--surface-sunk); overflow: hidden; }
.funnel-bar > span { display: block; height: 100%; background: var(--brand-gold); border-radius: 7px; }
.funnel-count { text-align: right; font: 600 14px/1 'Manrope', sans-serif; font-variant-numeric: tabular-nums; }
.funnel-pct { text-align: right; font: 400 13px/1 'Manrope', sans-serif; color: var(--ink-2); }
@media (max-width: 640px) { .funnel-row { grid-template-columns: 1fr 60px 48px; } .funnel-bar { display: none; } }
.dash-period  { padding: 6px 12px; border: 1px solid var(--hairline); border-radius: 99px; font: 500 13px/1.3 'Manrope', sans-serif; color: var(--ink-2); text-decoration: none; background: var(--surface); }
.dash-period.is-active { border-color: var(--brand-gold); color: var(--ink); font-weight: 600; }
.dash-delta          { font: 600 12px/1.3 'Manrope', sans-serif; color: var(--ink-3); }
.dash-delta--up      { color: var(--success); }
.dash-delta--down    { color: var(--danger); }
.dash-actions        { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.dash-action         { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius-card); border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); text-decoration: none; }
.dash-action .material-symbols-outlined { font-size: 20px; }
.dash-action--red    { background: var(--danger-tint); border-color: #F0C9C5; color: var(--danger); }
.dash-action--yellow { background: #FBF3DA; border-color: #EEDFAE; color: #7A5A12; }
.dash-action--green  { background: var(--success-tint); border-color: var(--success-border); color: var(--success); }
.dash-trend          { width: 100%; height: 120px; display: block; }
.dash-trend-line     { fill: none; stroke: var(--brand-gold); stroke-width: 2; }
.dash-trend-area     { fill: rgba(165, 137, 60, .12); stroke: none; }
.dash-trend-axis     { stroke: var(--hairline); stroke-width: 1; }
.dash-periods { align-items: center; }
.dash-custom  { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: 8px; padding: 4px 8px; border: 1px solid transparent; border-radius: 12px; }
.dash-custom.is-active { border-color: var(--brand-gold); }
.dash-custom label { display: flex; gap: 6px; align-items: center; font: 500 13px/1.3 'Manrope', sans-serif; color: var(--ink-2); }
.dash-custom .form-input { width: auto; height: 34px; padding: 0 8px; }
.dash-custom .btn-secondary-action { height: 34px; }

/* "System administration" group above the clients, and the new-client action on the clients heading. */
.nav-tree-node[data-node-type="root_system"] { margin-bottom: 18px; }
.nav-tree-group-add {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    color: rgba(255,255,255,.8);
}
.nav-tree-group-add:hover { background: rgba(255,255,255,.14); color: #fff; }
.nav-tree-group-add .material-symbols-outlined { font-size: 18px; letter-spacing: 0; }

/* Page tabs (shared): a row of tabs over panels; the open tab can come from ?tab= after a save. */
.page-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 26px; overflow-x: auto; }
.page-tab {
    padding: 10px 14px; font: 500 14px/1.3 'Manrope', sans-serif; white-space: nowrap; cursor: pointer;
    background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-2);
    transition: color .12s, border-color .12s;
}
.page-tab:hover { color: var(--ink); }
.page-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand-gold); }
a.page-tab { text-decoration: none; }
.page-tab[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand-gold); }
.page-tab-panel[hidden] { display: none; }

/* ── Book to QR illustration (_BookToQr.cshtml) ───────────────────────────
   One line runs along one path: out of the book, across, then row by row over the QR area. Head and
   tail each move at a constant speed, chosen so that both finish together: the head writes the last
   module (3352.5 units) as the tail leaves the book and the bridge (2647.5 units). Inside the QR area
   the line is clipped away and each code row is uncovered behind the head, so the line becomes the
   code. The resting styles are the final frame; the animations live under .b2q-play.
   Timing: 0.3s hold, 3.2s travel, then the pulse. */
.b2q         { display: block; width: 100%; height: auto; }
.b2q-page    { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.b2q-edge    { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.b2q-spine   { stroke: var(--hairline-strong); stroke-width: 3; }
.b2q-body    { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.b2q-screen  { fill: var(--surface); stroke: var(--hairline-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.b2q-slot    { stroke: var(--hairline-strong); stroke-width: 3; stroke-linecap: round; }
.b2q-code    { fill: var(--ink); }
/* Line thickness = one QR module. Square caps and mitre joins keep it blocky. */
.b2q-line, .b2q-head { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: square; stroke-linejoin: miter; }
.b2q-line    { stroke-dasharray: 3120px 10000px; stroke-dashoffset: -2647.5px; opacity: 0; } /* spent: hidden, or its clipped edge leaves a hairline round the code */
.b2q-head    { stroke-dasharray: .01px 10000px; stroke-dashoffset: -5767.5px; }
/* Screen-coloured covers, one per code row, shrink towards the end the head is heading for. */
.b2q-cover   { fill: var(--surface); transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); }
.b2q-cover:nth-child(even) { transform-origin: 0 50%; }
.b2q-pulse   { fill: var(--brand-gold); opacity: 0; }

.b2q-play .b2q-line  { animation: b2q-line 3.2s linear .3s both; }
.b2q-play .b2q-head  { animation: b2q-head 3.2s linear .3s both; }
.b2q-play .b2q-row   { animation: b2q-row .001s both; animation-delay: calc(.52s + var(--r) * .119s); }
.b2q-play .b2q-cover { animation: b2q-cover .119s linear both; animation-delay: calc(.52s + var(--r) * .119s); }
.b2q-play .b2q-pulse { animation: b2q-pulse .6s ease-in-out 3.6s both; }
.b2q-wait *          { animation-play-state: paused !important; }

@keyframes b2q-line  { from { stroke-dasharray: 2415px 10000px; stroke-dashoffset: 0; opacity: 1; } 99.9% { stroke-dasharray: 3120px 10000px; stroke-dashoffset: -2647.5px; opacity: 1; } to { opacity: 0; } }
@keyframes b2q-head  { from { stroke-dashoffset: -2415px; }  to { stroke-dashoffset: -5767.5px; } }
@keyframes b2q-row   { from { opacity: 0; } }
@keyframes b2q-cover { from { transform: scaleX(1); }        to { transform: scaleX(0); } }
@keyframes b2q-pulse { 0%, 100% { opacity: 0; } 30% { opacity: 1; } }

/* The global rule above only shortens durations; the delays would still hold the first frame. */
@media (prefers-reduced-motion: reduce) {
    .b2q * { animation: none !important; }
}

/* Loader variant (BookToQrModel.Loader): one 4.6s cycle, repeated, CSS only.
   0.2s empty → 1.3s the head writes the book → 1.8s the text leaves the book and becomes the code
   (same speed, 1862 units/s) → pulse → hold → the code fades → again. Every piece uses the same
   duration, so they stay in step; the rows' covers only move while the code is faded out. */
.b2q-loader .b2q-line  { animation: b2q-loader-line 4.6s linear infinite; }
.b2q-loader .b2q-head  { animation: b2q-loader-head 4.6s linear infinite; }
.b2q-loader .b2q-code  { animation: b2q-loader-code 4.6s linear infinite; }
.b2q-loader .b2q-row   { animation: b2q-loader-row 4.6s linear infinite both; animation-delay: calc(var(--r) * .0671s); }
.b2q-loader .b2q-cover { animation: b2q-loader-cover 4.6s linear infinite both; animation-delay: calc(var(--r) * .0671s); }
.b2q-loader .b2q-pulse { animation: b2q-loader-pulse 4.6s ease-in-out infinite; }

@keyframes b2q-loader-line {
    0%, 4.35%     { stroke-dasharray: 0px 10000px;    stroke-dashoffset: 0; opacity: 1; }
    32.61%        { stroke-dasharray: 2415px 10000px; stroke-dashoffset: 0; }
    71.7%         { stroke-dasharray: 3120px 10000px; stroke-dashoffset: -2647.5px; opacity: 1; }
    71.74%, 100%  { opacity: 0; }
}
@keyframes b2q-loader-head {
    0%, 4.35%     { stroke-dashoffset: 0; opacity: 1; }
    32.61%        { stroke-dashoffset: -2415px; }
    71.74%        { stroke-dashoffset: -5767.5px; }
    89.13%        { stroke-dashoffset: -5767.5px; opacity: 1; }
    95.65%, 100%  { stroke-dashoffset: -5767.5px; opacity: 0; }
}
@keyframes b2q-loader-code  { 0%, 35% { opacity: 0; } 35.1%, 89.13% { opacity: 1; } 95.65%, 100% { opacity: 0; } }
/* Row 0's timeline; row r runs r x .0671s later. */
@keyframes b2q-loader-row   { 0%, 35.29% { opacity: 0; } 35.3%, 96.9% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes b2q-loader-cover { 0%, 35.29% { transform: scaleX(1); } 36.75%, 96.9% { transform: scaleX(0); } 97%, 100% { transform: scaleX(1); } }
@keyframes b2q-loader-pulse { 0%, 73.91% { opacity: 0; } 77.17% { opacity: 1; } 84.78%, 100% { opacity: 0; } }

/* Reduced motion: the finished code, with only the corner squares breathing so it still reads as busy. */
@keyframes b2q-loader-breathe { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
    .b2q-loader .b2q-pulse { animation: b2q-loader-breathe 2s ease-in-out infinite !important; }
}

/* ── Guided tour of the tree (tree-tour.js): one balloon beside a sidebar node ── */
.aq-tour {
    position: fixed;
    z-index: 60;
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 16px 18px 14px;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--hairline-strong), 0 18px 40px -16px rgba(44, 38, 30, .45);
    font: 400 14px/1.55 'Manrope', sans-serif;
    color: var(--ink);
}
.aq-tour[hidden] { display: none; }
.aq-tour-arrow {
    position: absolute;
    left: -7px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background: var(--surface);
    box-shadow: -1px 1px 0 var(--hairline-strong);
    transform: rotate(45deg);
}
.aq-tour--below .aq-tour-arrow { top: -7px; margin-top: 0; margin-left: -7px; box-shadow: -1px -1px 0 var(--hairline-strong); }
.aq-tour-text b { font-weight: 700; }
.aq-tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.aq-tour-skip { margin-right: auto; padding: 0; border: 0; background: none; font: 500 13px/1 'Manrope', sans-serif; color: var(--ink-2); cursor: pointer; text-decoration: underline; }
.aq-tour-count { font: 500 12px/1 'Manrope', sans-serif; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.aq-tour-foot .btn-secondary-action,
.aq-tour-foot .btn-primary-action { padding-top: 7px; padding-bottom: 7px; }
.aq-tour-foot [hidden] { display: none; }
/* The node the balloon speaks about. */
.aq-tour-target { outline: 2px solid var(--brand-gold); outline-offset: 2px; border-radius: 8px; }
/* The balloon's picture (a few steps): language-free drawings, not screenshots. */
.aq-tour-pic { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 84px; margin: 0 0 12px; padding: 10px; background: var(--surface-sunk); border-radius: 10px; }
.aq-tour-pic[hidden] { display: none; }
.aq-tour-pic img { width: 44px; height: 44px; object-fit: contain; }
.aq-pic-icon { font-size: 44px; color: var(--ink); }
.aq-pic-arrow { font-size: 24px; color: var(--brand-gold); }
.aq-pic-phone { display: flex; flex-direction: column; gap: 3px; width: 40px; height: 72px; padding: 4px; box-sizing: border-box; box-shadow: 0 0 0 2px #2A241C; }
.aq-pic-head { display: block; height: 7px; margin-bottom: 4px; }
.aq-pic-ans { display: block; height: 8px; }

/* ── AI evaluation (SystemAdmin/AiEval): an AI build's activities as readable lines ─────────────────
   One card per activity (_EvalModule); the blind comparison puts two builds side by side, activity
   by activity, in a two-column grid that falls to one column on a narrow screen. */
.eval-modules { display: grid; gap: 12px; }
.eval-module {
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
}
.eval-module-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 8px; }
.eval-line { margin: 2px 0; font: 400 14px/1.45 'Manrope', sans-serif; color: var(--ink); }
.eval-line .material-symbols-outlined { font-size: 16px; vertical-align: -3px; }
.eval-line--head { margin-top: 8px; font-weight: 600; }
.eval-line--right { padding-left: 14px; color: var(--success); font-weight: 600; }
.eval-line--wrong { padding-left: 34px; color: var(--ink-2); }
.eval-line--item { padding-left: 14px; }
.eval-line mark { padding: 0 3px; border-radius: 3px; background: #FBF3DA; color: inherit; }
.eval-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
@media (max-width: 900px) { .eval-compare { grid-template-columns: minmax(0, 1fr); } }