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

   Single stylesheet for the admin console. Replaces MasterThemeVer1.css +
   AdminRestyle.css, which stacked two unrelated token sets and fought each
   other on specificity.

   Palette and logo come from wwwroot/images/brand/brand20/ (palette.png,
   ARISTOQLE_LOGO_SLOGAN.png, loginscreen.jpg). The structure — hairlines and
   solid fills, no shadows, no gradients, 3px radius on controls and 0 on
   cards — carries over from the first Aristoqle design (_designs/AristoqleBlue).

   Class vocabulary is deliberately unchanged from the old theme
   (.master-sidebar, .master-content, .form-input, .btn-primary-action,
   .data-table, .nav-tree-*, .edit-panel …) so all 34 admin pages pick up the
   new look without per-page edits. Only the values changed.
   ============================================================================ */

/* ── 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 ─────────────────────────────────────────────────────────────────
   One set. Names describe role, not colour, so a future sub-brand changes
   values here and nothing else. */
:root {
    /* Brand — the four swatches in brand20/palette.png */
    --brand-gold:       #B48C32;  /* accent, FILLS ONLY: primary buttons, active markers, rules, icon accents */
    --brand-gold-hover: #A07C2B;
    --brand-gold-ink:   #8A6A22;  /* accent as TEXT — links, eyebrows, breadcrumb tail (5.0:1 on white) */
    --brand-cream:      #E9E0CB;  /* login brand panel, paper callouts */
    --brand-taupe:      #77695E;  /* sidebar, dark panels, mark strokes, solid cards */
    --brand-taupe-hover:#685B51;
    --brand-charcoal:   #333333;  /* ink, wordmark */

    /* Surfaces — cream tints, so white cards still read as cards */
    --canvas:        #F4EFE5;
    --surface:       #FFFFFF;
    --surface-sunk:  #F8F5EE;     /* table header rows */
    --paper:         #F3ECDB;     /* callout / responsibility notice */
    --paper-border:  rgba(180,140,50,.4);
    --accent-wash:   #F7F1E2;     /* accent-outline button hover */
    --surface-hover: #FBF9F4;     /* secondary button hover */

    /* Ink */
    --ink:           #333333;
    --ink-2:         rgba(51,51,51,.76);   /* body copy, descriptions (~6:1) */
    --ink-3:         rgba(51,51,51,.5);    /* breadcrumb separators, placeholders */
    --ink-label:     rgba(51,51,51,.85);   /* field labels */

    /* Lines — taupe-tinted so they stay warm on cream */
    --hairline:        rgba(119,105,94,.22);
    --hairline-strong: rgba(119,105,94,.4);  /* input borders */
    --hairline-btn:    rgba(119,105,94,.5);  /* outline button borders */

    /* Sidebar (on taupe). White is 5.3:1 on #77695E, so item alphas run higher
       than they did on navy to keep every label above 4.5:1. */
    --sb-item:      rgba(255,255,255,.92);
    --sb-subitem:   rgba(255,255,255,.88);
    --sb-group:     rgba(255,255,255,.66);
    --sb-hairline:  rgba(255,255,255,.14);
    --sb-fill:      rgba(255,255,255,.07);
    --sb-border:    rgba(255,255,255,.2);
    --sb-active-bg: rgba(51,51,51,.18);
    --sb-chip:      rgba(255,255,255,.14);

    /* Functional */
    --danger:  #C1272D;
    --success: #16A34A;

    /* Geometry — depth comes from hairlines, never shadow */
    --radius-ctrl: 3px;
    --radius-card: 0;
    --sidebar-w:   264px;
    --topbar-h:    62px;
    --focus-ring:  0 0 0 3px rgba(180,140,50,.25);
}

/* ── Compatibility aliases (migration layer) ────────────────────────────────
   The 34 admin pages carry ~6,800 lines of inline <style> that reference the
   two old token sets (--color-* from MasterThemeVer1, --brand/--ink/… from
   AdminRestyle) in ~900 places. Re-pointing those names at the Aristoqle
   palette moves every page onto the new theme without touching them, so the
   console is visually coherent from the first load.

   These are scaffolding, not API. As each page's inline CSS is rewritten
   against the real tokens above, its aliases become unused; when the last
   reference to a name is gone, delete the alias. Do not add new ones.

   Two deliberate remappings, both to keep all copy ≥ 4.5:1:
     --color-orange-500 → gold-INK (#8A6A22, 5.0:1) not the raw gold
       (#B48C32, 3.1:1). It is used for both fills and text; the ink version
       is legible as text and still reads as the accent when used as a fill.
     --color-slate-400 → --ink-2 (~6:1) not --ink-3 (.5 alpha).
   The old "primary" (navy) roles map to taupe, which works both as a fill
   under white text (5.3:1) and as text on white; gold stays fills-only.
   ------------------------------------------------------------------------- */
:root {
    /* MasterThemeVer1 — accent ramp */
    --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);

    /* MasterThemeVer1 — neutral ramp */
    --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);

    /* MasterThemeVer1 — Material-3 surface/ink roles */
    --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;

    /* AdminRestyle */
    --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);
    --radius-card:   0;
    --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 a flat taupe fill so existing
   markup renders correctly instead of hunting every usage. */
.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, 264px);
    padding: 22px 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: var(--brand-taupe);
    border-right: 0;
    box-shadow: none;
}

/* Header row: the horizontal logo (mark + ARISTOQLE logotype), knocked out to
   white for the taupe rail. The logotype is the brand's own artwork, so it is
   an image rather than live text. */
.master-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    padding: 4px 20px 16px;
    margin: 0 0 2px;
    border-bottom: 1px solid var(--sb-hairline);
}

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

.master-sidebar .sidebar-lockup img {
    display: block;
    width: 100%;
    max-width: 196px;
    height: auto;
}

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

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

.master-sidebar .sidebar-search input {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 32px;
    border: 1px solid var(--sb-border);
    border-radius: var(--radius-ctrl);
    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,.35); }
.master-sidebar .sidebar-search input:focus        { border-color: rgba(255,255,255,.4); }

.master-sidebar nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    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: .6rem;
    padding: 8px 20px;
    border-left: 2px solid transparent;
    color: var(--sb-item);
    font: 500 13px/1 'Manrope', sans-serif;
    text-decoration: none;
    transition: background .15s, color .15s;
}

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

.master-sidebar .nav-link.active {
    background: var(--sb-active-bg);
    border-left-color: var(--brand-gold);
    color: #fff;
    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, 264px);
    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 ────────────────────────────────────────────────────── */
.nav-tree-node { transition: none; }
.nav-tree-node.hidden-by-search   { display: none; }
.nav-tree-children.collapsed      { display: none; }

/* Row metrics come straight from the design: 8px/20px for top-level items,
   7px/20px with a 34px indent for nested ones. */
.nav-tree-toggle,
.nav-tree-leaf {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 8px 20px;
    border-left: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}

.nav-tree-leaf { padding: 7px 20px 7px 34px; }

.nav-tree-toggle:hover,
.nav-tree-leaf:hover { background: rgba(255,255,255,.04); }

.nav-tree-chevron {
    flex-shrink: 0;
    font-size: 15px;
    color: rgba(255,255,255,.45);
    transition: transform .2s ease;
}
.nav-tree-toggle:not(.collapsed) > .nav-tree-chevron { transform: rotate(90deg); }
.nav-tree-toggle.collapsed > .nav-tree-chevron       { transform: rotate(0deg); }

.nav-tree-icon {
    flex-shrink: 0;
    font-size: 17px;
    color: rgba(255,255,255,.5);
}

/* Brand icon in the tree (activity leaves). Slightly dimmed at rest so the
   active/hover row still stands out, full strength once the row lights up. */
.nav-tree-icon-img {
    width: 16px;
    height: 16px;
    opacity: .75;
    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 {
    font: 500 13px/1 'Manrope', sans-serif;
    color: var(--sb-item);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-tree-leaf .nav-tree-label { font: 400 12.5px/1 'Manrope', sans-serif; color: var(--sb-subitem); }

.nav-tree-toggle:hover .nav-tree-icon,
.nav-tree-leaf:hover   .nav-tree-icon { color: var(--brand-gold); }

/* Group labels ("CJELINE", "KLIJENTI") — generous space above, tight below,
   so the label binds to the group it heads. */
.nav-tree-group-label {
    padding: 18px 20px 6px;
    font: 700 10px/1 'Manrope', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sb-group);
}
.nav-tree-group-label:first-child { padding-top: 10px; }

/* Unit section items (the former in-page tabs) */
.nav-tree-section .nav-tree-label { font-size: 12.5px; font-weight: 400; }

.nav-tree-count {
    margin-left: auto;
    flex-shrink: 0;
    background: var(--sb-chip);
    color: rgba(255,255,255,.6);
    font: 600 10px/1 'Manrope', sans-serif;
    padding: 3px 6px;
    border-radius: 2px;
}

/* Active node: white text, faint fill, 2px accent left border. */
.nav-tree-node.nav-active > .nav-tree-leaf,
.nav-tree-node.nav-active > .nav-tree-toggle {
    background: var(--sb-active-bg);
    border-left-color: var(--brand-gold);
    box-shadow: none;
}
.nav-tree-node.nav-active > .nav-tree-leaf .nav-tree-label,
.nav-tree-node.nav-active > .nav-tree-toggle .nav-tree-label { color: #fff; font-weight: 600; }
.nav-tree-node.nav-active > .nav-tree-leaf .nav-tree-icon,
.nav-tree-node.nav-active > .nav-tree-toggle .nav-tree-icon { color: var(--brand-gold); }
.nav-tree-node.nav-active > .nav-tree-leaf .nav-tree-count {
    background: var(--brand-gold);
    color: #fff;
}

/* Active trail — ancestors of the selection brighten so the path reads. */
.nav-tree-node.nav-trail > .nav-tree-toggle .nav-tree-icon,
.nav-tree-node.nav-trail > .nav-tree-toggle .nav-tree-chevron { color: var(--brand-gold); }
.nav-tree-node.nav-trail > .nav-tree-toggle .nav-tree-label   { color: #fff; }
.nav-tree-node.nav-trail[data-node-type="client"] > .nav-tree-toggle .nav-tree-label { font-weight: 700; }

.nav-tree-node.search-match > .nav-tree-toggle .nav-tree-label,
.nav-tree-node.search-match > .nav-tree-leaf   .nav-tree-label { color: var(--brand-gold); font-weight: 600; }

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

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

.master-topbar .topbar-left  { display: flex; align-items: center; gap: 10px; }
.master-topbar .topbar-right { display: flex; align-items: center; gap: 10px; }

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

.master-topbar .breadcrumb-nav { display: flex; align-items: center; gap: 8px; }

.master-topbar .breadcrumb-nav .breadcrumb-item {
    font: 500 13px/1 'Manrope', sans-serif;
    color: var(--ink-2);
    text-decoration: none;
}

.master-topbar .breadcrumb-nav .breadcrumb-separator {
    font-size: 13px;
    color: var(--ink-3);
}

.master-topbar .breadcrumb-nav .breadcrumb-active {
    font: 500 13px/1 'Manrope', sans-serif;
    color: var(--brand-gold-ink);
    border-bottom: 0;
    text-decoration: none;
}

.master-topbar .topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius-ctrl);
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.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; }

.master-topbar .topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 14px;
    margin-left: 4px;
    border-left: 1px solid var(--hairline);
}
.master-topbar .topbar-user-info { text-align: right; }
.master-topbar .topbar-user-name { font: 600 12.5px/1.3 'Manrope', sans-serif; color: var(--ink); margin: 0; }
.master-topbar .topbar-user-role { font: 400 11px/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: 1px solid var(--hairline);
    box-shadow: none;
}

/* Language selector — 32px, hairline, 3px radius. */
.lang-dropdown { position: relative; display: inline-block; }

.lang-dropdown-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-ctrl);
    background: var(--surface);
    box-shadow: none;
    font: 500 12.5px/1 'Manrope', sans-serif;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s;
}
.lang-dropdown-btn:hover { background: var(--surface); border-color: var(--brand-taupe); }

.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: none;
    overflow: hidden;
}
.lang-dropdown-menu.open { display: block; }

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

/* ── Content ────────────────────────────────────────────────────────────── */
/* Full width by default — the design has no narrow measure, and 21 of 23
   admin pages were overriding the old 56rem cap anyway.
   34px/40px matches the content column on design screens 02 and 04; the extra
   bottom padding is ours, so long pages don't end flush against the viewport. */
.master-content {
    width: 100%;
    max-width: none;
    padding: 34px 40px 56px;
}

.master-content .page-header { margin-bottom: 26px; }

.master-content .page-title {
    margin: 0 0 8px;
    font: 700 31px/1.1 'Manrope', sans-serif;
    letter-spacing: -.01em;
    color: var(--ink);
}

.master-content .page-subtitle {
    margin: 0;
    max-width: 52ch;
    font: 400 14px/1.55 'Manrope', sans-serif;
    color: var(--ink-2);
}

/* Eyebrow — 10px/700 caps, accent-ink (never the raw accent: it fails AA). */
.eyebrow {
    font: 700 10px/1 'Manrope', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand-gold-ink);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 16px;
    font: 500 12.5px/1 'Manrope', sans-serif;
    color: var(--ink-2);
    text-decoration: none;
}
.back-link:hover { color: var(--ink); }
.back-link .material-symbols-outlined { font-size: 16px; }

/* Accent rule — the 42×2px divider under hero headlines. */
.accent-rule { width: 42px; height: 2px; background: var(--brand-gold); border: 0; margin: 0; }

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

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

.form-section-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-taupe);
}
.form-section-icon .material-symbols-outlined { font-size: 17px; }

.form-section-title {
    margin: 0;
    font: 700 15.5px/1.3 'Manrope', sans-serif;
    letter-spacing: -.01em;
    color: var(--ink);
}

/* Paper callout — the AI responsibility notice. */
.paper-notice {
    background: var(--paper);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-card);
    padding: 20px;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }

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

.form-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-ctrl);
    background: var(--surface);
    box-shadow: none;
    outline: none;
    color: var(--ink);
    font: 400 14.5px/1 'Manrope', sans-serif;
    transition: border-color .15s, box-shadow .15s;
}

textarea.form-input { height: auto; padding: 11px 14px; line-height: 1.5; }
select.form-input   { padding-right: 10px; }

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

.form-input:focus {
    border-color: var(--brand-gold);
    box-shadow: var(--focus-ring);
}

.form-input-wrapper { position: relative; }
.form-input-with-prefix { padding-left: 4.5rem; }
.form-input-with-icon   { padding-left: 2.75rem; }

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

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

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

/* Checkbox / radio pick up the brand without custom markup. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--brand-gold); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-ctrl);
    background: var(--brand-gold);
    color: #fff;
    font: 600 13.5px/1 'Manrope', sans-serif;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: background .15s;
}
.btn-primary-action:hover  { background: var(--brand-gold-hover); }
.btn-primary-action:active { transform: none; }
.btn-primary-action.signature-gradient { background: var(--brand-gold); box-shadow: none; }

.btn-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid var(--hairline-btn);
    border-radius: var(--radius-ctrl);
    background: var(--surface);
    color: var(--ink);
    font: 600 13.5px/1 'Manrope', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.btn-secondary-action:hover { border-color: var(--brand-taupe); background: var(--surface-hover); }

/* Accent-outline — reserved for AI actions ("AI kreator"). */
.btn-accent-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid var(--brand-gold);
    border-radius: var(--radius-ctrl);
    background: var(--surface);
    color: var(--brand-gold-ink);
    font: 600 13.5px/1 'Manrope', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}
.btn-accent-action:hover { background: var(--accent-wash); }

.btn-danger-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    padding: 0 20px;
    border: 1px solid var(--danger);
    border-radius: var(--radius-ctrl);
    background: var(--surface);
    color: var(--danger);
    font: 600 13.5px/1 'Manrope', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}
.btn-danger-action:hover { background: #FDF2F2; }

/* ── Data table ─────────────────────────────────────────────────────────── */
.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: 10px 16px;
    font: 700 10px/1.4 'Manrope', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    color: var(--ink-2);
    border-bottom: 1px solid var(--hairline);
}

.data-table tbody tr { border-bottom: 1px solid var(--hairline); transition: background .12s; }
.data-table tbody tr:hover { background: var(--surface-sunk); }
.data-table tbody tr:last-child { border-bottom: none; }

.data-table tbody td {
    padding: 13px 16px;
    font: 400 13.5px/1.45 'Manrope', sans-serif;
    color: var(--ink-2);
    vertical-align: middle;
    border-bottom: 1px solid var(--hairline);
}
.data-table tbody tr:last-child td { border-bottom: none; }

.data-table .cell-name { display: flex; align-items: center; gap: 10px; }

/* 30px icon slot. Holds a per-type brand icon (taupe strokes + gold accent on
   transparent), so the slot itself stays unfilled — a taupe tile would swallow it. */
.data-table .cell-name-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}
.data-table .cell-name-icon img { width: 24px; height: 24px; }
.data-table .cell-name-icon .material-symbols-outlined { font-size: 20px; }

.data-table .cell-name-text { font-weight: 600; color: var(--ink); }
.data-table .cell-secondary { font-size: 13px; color: var(--ink-2); }

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

.data-table .cell-badge,
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 2px;
    background: rgba(51,51,51,.07);
    font: 600 11px/1.4 'Manrope', sans-serif;
    color: var(--ink-2);
}

.data-table .cell-actions { text-align: right; white-space: nowrap; }

.icon-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-ctrl);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.icon-action-btn .material-symbols-outlined { font-size: 18px; }
.icon-action-btn:hover { background: var(--canvas); color: var(--brand-gold-ink); }
.icon-action-btn--danger:hover { background: #FDF2F2; color: var(--danger); }

/* ── Stat / chart / results cards ───────────────────────────────────────────
   Shared by ClientStatistics, ClientCredits and the ClientUnit results tab,
   which each carried their own near-identical rounded copy. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

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

.stat-card-icon  { font-size: 22px; color: var(--ink); }
.stat-card-value { font: 700 30px/1.1 'Manrope', sans-serif; letter-spacing: -.01em; color: var(--ink); }
.stat-card-label {
    font: 700 10px/1.4 'Manrope', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.chart-card,
.res-card {
    padding: 20px;
    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: 700 10px/1.4 'Manrope', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.chart-canvas-wrap { position: relative; height: 220px; }

/* Secondary table — same language as .data-table, lighter chrome. */
.stats-table { width: 100%; border-collapse: collapse; }

.stats-table th {
    padding: 10px 16px;
    text-align: left;
    font: 700 10px/1.4 'Manrope', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--hairline);
}

.stats-table td {
    padding: 12px 16px;
    font: 400 13.5px/1.45 'Manrope', sans-serif;
    color: var(--ink-2);
    border-bottom: 1px solid var(--hairline);
}
.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; }

/* Pills are square-cornered like the nav count chip — no 999px capsules.
   Taupe fill rather than gold: white on #B48C32 is 3.1:1, under AA at this size. */
.badge-sessions,
.res-badge {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 2px;
    background: var(--brand-taupe);
    color: #fff;
    font: 600 11px/1.4 'Manrope', sans-serif;
}

.step-badge {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 2px;
    background: rgba(51,51,51,.07);
    color: var(--ink-2);
    font: 600 11px/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 ───────────────────────────────────────────────── */
/* The old theme stripped each editor's own "*-container" card chrome; the flat
   design does the same, so panels float directly on the canvas. */
.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 .cbedit-container {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* Wide configuration, narrow preview — 70:30 on every edit page. */
.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 .cbedit-grid {
    grid-template-columns: 6.5fr 3.5fr;
}
@media (max-width: 1024px) {
    .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 .cbedit-grid {
        grid-template-columns: 1fr;
    }
}

.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);
    border-bottom: 1px solid var(--hairline);
}

.edit-panel-title {
    font: 700 13px/1 'Manrope', sans-serif;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--ink);
}

.edit-panel-refresh {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding: 4px;
    border: none;
    border-radius: var(--radius-ctrl);
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    line-height: 1;
    transition: background .15s, color .15s;
}
.edit-panel-refresh:hover { color: var(--brand-gold-ink); background: var(--canvas); }
.edit-panel-refresh .material-symbols-outlined { font-size: 18px; }

.edit-panel-body { flex: 1; overflow-y: auto; padding: 18px; }

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

/* ── Module meta row + settings card ────────────────────────────────────── */
.master-content .module-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--hairline);
}
.master-content .quizedit-meta .module-meta-row { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
@media (max-width: 560px) {
    .master-content .module-meta-row { grid-template-columns: 1fr; }
}

.master-content .mod-settings { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.master-content .mod-set-title { margin: 0 0 .55rem; font: 700 14px/1.3 'Manrope', sans-serif; color: var(--ink); }
.master-content .mod-set-card  { padding: 0 .9rem; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); }
.master-content .mod-set-row   { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; min-height: 2.75rem; }
.master-content .mod-set-row.has-divider { border-top: 1px solid var(--hairline); }
.master-content .mod-set-label { font: 600 13.5px/1.3 'Manrope', sans-serif; color: var(--ink); }
.master-content .mod-set-points-input { width: 84px; text-align: right; }
.master-content .mod-grouped .mod-set-card + .mod-set-card { margin-top: .75rem; }

/* Toggle switch */
.mod-switch { position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; flex-shrink: 0; }
.mod-switch input { opacity: 0; width: 0; height: 0; }
.mod-switch-slider { position: absolute; inset: 0; background: rgba(51,51,51,.22); border-radius: 9999px; transition: background .15s; }
.mod-switch-slider::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    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(18px); }

/* ── Phone chrome for module-editor previews ────────────────────────────── */
.smk-phone-topbar {
    position: absolute; top: 0; left: 0; right: 0; height: 2.15rem;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.2rem; z-index: 3; pointer-events: none;
    color: #fff; font: 700 .72rem/1 'Manrope', sans-serif; letter-spacing: .02em;
}
.smk-phone-icons { display: flex; align-items: center; gap: .18rem; }
.smk-phone-icons .material-symbols-outlined { font-size: .95rem; line-height: 1; }
.smk-phone-island {
    position: absolute; top: .52rem; left: 50%; transform: translateX(-50%);
    width: 33%; height: 1.15rem; background: #000; border-radius: 9999px;
    z-index: 4; pointer-events: none;
}
[class*="-phone-screen"] > iframe { transform-origin: top left; }

/* ── Step wizard (design 03 "AI Graditelj modula") ──────────────────────────
   A 5-column white strip with hairline dividers — no circles, no connector
   lines. The active cell is marked by a 2px accent bottom border and an
   accent-ink eyebrow; completed cells keep the accent eyebrow without the rule,
   so the trail reads left to right.

   goToStep() toggles .active / .done on .wizard-step-wrap — that contract is
   unchanged. It also iterates .wizard-step-line, which no longer exists; an
   empty NodeList is a harmless no-op. */
.wizard-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    margin-bottom: 22px;
}

.wizard-step-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-right: 1px solid rgba(51,51,51,.08);
    border-bottom: 2px solid transparent;
    min-width: 0;
}
.wizard-step-wrap:last-child { border-right: 0; }

/* Eyebrow + label stack, so a completed step can carry a tick beside the pair
   rather than above or inside the label. */
.wizard-step-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Green tick marking a finished step. It exists only on .done — the class
   goToStep() already toggles — so pending and active steps are untouched. */
.wizard-step-check {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    place-items: center;
    flex: none;
}
.wizard-step-wrap.done .wizard-step-check { display: grid; }
.wizard-step-check .material-symbols-outlined { font-size: 12px; font-weight: 700; }

.wizard-step-eyebrow {
    font: 700 10px/1 'Manrope', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
}

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

.wizard-step-wrap.active { border-bottom-color: var(--brand-gold); }
.wizard-step-wrap.active .wizard-step-eyebrow,
.wizard-step-wrap.done   .wizard-step-eyebrow { color: var(--brand-gold-ink); }
.wizard-step-wrap.active .wizard-step-label { font-weight: 600; color: var(--ink); }
.wizard-step-wrap.done   .wizard-step-label { color: var(--ink); }

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

/* Step body: wide explanation, narrow notice. */
.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; }
}

.wizard-lede h2 {
    margin: 0 0 12px;
    font: 700 22px/1.25 'Manrope', sans-serif;
    letter-spacing: -.01em;
    color: var(--ink);
}
.wizard-lede p {
    margin: 0;
    font: 400 14px/1.6 'Manrope', sans-serif;
    color: var(--ink-2);
}

/* Numbered rows with 26px square outline counters. */
.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 rgba(51,51,51,.2);
    font: 700 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; }

/* Acknowledgement inside the paper notice. */
.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; }

/* Footer rule with right-aligned actions. */
.wizard-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--hairline);
}

/* ── Login screen (brand20/loginscreen.jpg) ─────────────────────────────────
   Shared by AdminLogin and UserLogin, which are standalone pages (Layout = null)
   and would otherwise each carry their own copy. Two columns: a cream brand
   panel — logo + slogan lockup top-left, a large white mark bleeding off the
   bottom-left behind the headline — and a taupe form panel with a white mark,
   white copy, white fields and a gold button. */
/* minmax(0, …) is load-bearing: a bare `1.05fr` is `minmax(auto, 1.05fr)`, so a
   track can never shrink below its content's min-content width and the ratio
   silently drifts. Flooring at 0 makes the split hold at the design's 1.05:1
   (≈51/49) at every width. width/flex guard against body{display:flex}. */
.login-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    width: 100%;
    flex: 1;
    min-height: 100vh;
}

/* Left — cream brand panel */
.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; }

/* Logo + slogan lockup — ARISTOQLE_LOGO_SLOGAN.png cropped to its ink bounds,
   so the image box IS the artwork and the padding above is exact. */
.login-lockup { display: block; width: min(400px, 62%); }
.login-lockup img { display: block; width: 100%; height: auto; }

/* The mark, white, ~400px, bleeding off the bottom-left corner as texture. */
.login-watermark {
    position: absolute;
    z-index: 0;
    left: -46px;
    bottom: -72px;
    width: 400px;
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* Headline block: bottom of the panel, to the right of the mark. */
.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: var(--ink-2);
    text-wrap: pretty;
}

/* Right — taupe form panel */
.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 12px/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); }

.login-btn {
    height: 46px;
    margin-top: 6px;
    border: none;
    border-radius: var(--radius-ctrl);
    background: var(--brand-gold);
    color: #fff;
    font: 600 14px/1 'Manrope', sans-serif;
    cursor: pointer;
    transition: background .15s;
}
.login-btn:hover { background: var(--brand-gold-hover); }

/* Gold focus rings vanish on taupe — keyboard focus goes white on this panel. */
.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); }

/* Error + upgrade notices — light cards on the taupe panel. */
.login-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(193,39,45,.35);
    border-radius: var(--radius-card);
    background: #FDF2F2;
    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: 700 10px/1 'Manrope', sans-serif;
    letter-spacing: .14em;
    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); }

/* Below the split, the cream panel becomes a header band above the form. */
@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 ──────────────────────────────────────────────────────── */
/* Visible keyboard focus everywhere. The old theme removed outlines on inputs
   without providing a replacement. */
:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}
.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: 768px) {
    .master-sidebar  { display: none; }
    #sidebar-resizer { display: none; }
    .master-main     { margin-left: 0; }
    .master-content  { padding: 18px 16px 40px; }
    .master-content .page-title { font-size: 24px; }
}