rustio-core 2.0.5

/* ============================================================================
 * RustIO admin — design system  ·  "Bureau" (classic institutional)
 *
 * A redesign of the admin skin. Same contract, new look:
 *   - rio-* class names, minijinja logic, and {% block %} names are untouched.
 *   - Only appearance changes: palette, type, spacing, components, motion.
 *
 * Aesthetic point of view
 * -----------------------
 * Classic institutional. A composed navy-and-slate palette — the colour of
 * banks, courts, and universities — on cool paper, with crisp borders and a
 * formal, confident type voice. Type is large and the weights are heavy:
 * headings are extra-bold, labels are uppercase bold sans, body text is set
 * in medium. Numeric data (ids, counts, versions, code) keeps a monospace
 * voice for legibility. All fonts are the OS-native UI stack, so the admin
 * renders identically offline, behind a strict CSP, and inside the single
 * binary: no CDN @import, no runtime webfont download.
 *
 * File structure (compiled by build.rs with Tailwind v4; also valid as a
 * verbatim passthrough copy):
 *   :root            — token definitions browsers honour even without Tailwind
 *   [data-theme=…]   — light (default) / dark surface aliases
 *   @theme           — same tokens, for Tailwind's utility generator
 *   @layer base      — element resets and global type
 *   @layer components— every .rio-* primitive
 *   (un-layered)     — atmosphere + motion, so they win the cascade
 * ============================================================================ */

:root {
  /* Cool slate ladder (dark theme surfaces) -------------------------------- */
  --color-gray-950: #0D1420;
  --color-gray-900: #15202F;
  --color-gray-800: #1E2B3D;
  --color-gray-700: #2C3A4F;
  --color-gray-600: #3D4D64;
  --color-gray-500: #5E6E86;
  --color-gray-400: #8A98AD;
  --color-gray-300: #BAC5D4;
  --color-gray-100: #E9EEF5;

  /* Cool paper / slate-ink ladder (light theme), lightest first ------------ */
  --color-light-50:  #F2F5F9;   /* page canvas — cool paper */
  --color-light-100: #FFFFFF;   /* primary surface / cards */
  --color-light-200: #FAFBFD;   /* elevated surface / sidebar / topbar */
  --color-light-300: #DCE3EC;   /* default borders, dividers */
  --color-light-400: #C2CCDA;   /* strong borders */
  --color-light-500: #6E7B8F;   /* muted text / icons */
  --color-light-600: #45526A;   /* secondary text */
  --color-light-700: #28344A;   /* tertiary emphasis */
  --color-light-900: #141D2B;   /* primary text / headings — slate-ink */

  /* Institutional blue accent (new) ---------------------------------------- */
  --color-accent:      #1E4C8A;   /* confident navy/institutional blue */
  --color-accent-text: #FFFFFF;   /* text on a solid accent surface */
  --color-accent-deep: #163A6B;   /* hover / pressed */
  --color-accent-soft: #E8EFF8;   /* pale blue tint — active nav background */

  /* Type scale — enlarged across the board --------------------------------- */
  --text-hero:  38px;
  --text-stat:  34px;
  --text-h2:    26px;
  --text-h3:    20px;
  --text-body:  16.5px;
  --text-meta:  15px;
  --text-small: 14px;
  --text-mono:  13.5px;
  --text-micro: 12.5px;

  /* Radius — crisp, formal ------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* Space scale ------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 38px;
  --space-8: 52px;

  /* Fonts. Sans = native OS UI font (offline-safe, no external download).
     Mono = native programming font, reserved for numeric / code data. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(20, 29, 43, 0.06);
  --shadow-md: 0 8px 24px -12px rgba(20, 29, 43, 0.24);
  --shadow-pop: 0 22px 54px -20px rgba(20, 29, 43, 0.36);

  /* Legacy aliases — older templates still reference these names. */
  --gray-950: var(--color-gray-950);
  --gray-900: var(--color-gray-900);
  --gray-800: var(--color-gray-800);
  --gray-700: var(--color-gray-700);
  --gray-600: var(--color-gray-600);
  --gray-500: var(--color-gray-500);
  --gray-400: var(--color-gray-400);
  --gray-300: var(--color-gray-300);
  --gray-100: var(--color-gray-100);
  --accent:        var(--color-accent);
  --accent-text:   var(--color-accent-text);
  --accent-deep:   var(--color-accent-deep);
  --bg-canvas:      var(--color-canvas);
  --bg-surface:     var(--color-surface);
  --bg-elevated:    var(--color-elevated);
  --border-default: var(--color-border);
  --border-strong:  var(--color-border-strong);
  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary:  var(--color-text-tertiary);
}

/* ----------------------------------------------------------------------------
 * Theme aliases. Components only reference semantic names, so flipping
 * `data-theme` on <html> swaps the entire surface palette at once.
 * -------------------------------------------------------------------------- */

:root,
[data-theme="light"] {
  --color-canvas:         var(--color-light-50);
  --color-surface:        var(--color-light-100);
  --color-elevated:       var(--color-light-200);
  --color-border:         var(--color-light-300);
  --color-border-strong:  var(--color-light-400);
  --color-text-primary:   var(--color-light-900);
  --color-text-secondary: var(--color-light-600);
  --color-text-tertiary:  var(--color-light-700);
  --color-text-muted:     var(--color-light-500);
  --color-highlight-soft: var(--color-accent-soft);
  --row-hover: rgba(30, 76, 138, 0.05);
  --grain: rgba(20, 29, 43, 0.035);
}

/* Dark theme — soft, low-glare slate. No pure black, no near-black: the
 * dimmest surface is a desaturated charcoal (#171B22), and the elevation
 * ladder steps up logically from there. Text is off-white, never #FFF, to
 * kill glare. Accent is a lighter institutional blue tuned for AA on dark.
 *
 * Measured WCAG contrast (computed, sRGB):
 *   text-primary   #E6EAF1 vs canvas #171B22 = 14.31:1  (AAA)
 *   text-secondary #AEB8C6 vs canvas          =  8.61:1  (AAA)
 *   text-muted     #7E8896 vs canvas          =  4.81:1  (AA, body)
 *   accent         #6E9BE6 vs canvas          =  6.16:1  (AA, UI/large)
 *   text-primary   #E6EAF1 vs surface #1F242E = 12.89:1  (AAA)
 *   accent         #6E9BE6 vs surface         =  5.55:1  (AA)
 * Body text vs canvas ≥ 4.5:1 and large/UI ≥ 3:1 are satisfied. */
[data-theme="dark"] {
  --color-canvas:         #171B22;   /* dimmest — soft charcoal, not black */
  --color-surface:        #1F242E;   /* cards */
  --color-elevated:       #272D38;   /* sidebar / topbar / table head */
  --color-border:         #353C49;
  --color-border-strong:  #454D5C;
  --color-text-primary:   #E6EAF1;   /* soft off-white, not #FFF */
  --color-text-secondary: #AEB8C6;
  --color-text-tertiary:  #C3CBD7;
  --color-text-muted:     #7E8896;
  /* Lighter institutional blue — gentle, AA on the dark surface. */
  --color-accent:         #6E9BE6;
  --color-accent-text:    #0E1726;   /* dark ink on the lighter accent (buttons) */
  --color-accent-deep:    #5A86CF;
  --color-accent-soft:    rgba(110, 155, 230, 0.15);
  --color-highlight-soft: rgba(110, 155, 230, 0.15);
  --row-hover: rgba(110, 155, 230, 0.07);
  --grain: rgba(255, 255, 255, 0.022);
}

/* ----------------------------------------------------------------------------
 * Tailwind v4 tokens — feeds utility generation (bg-canvas, etc.). Browsers
 * ignore @theme; the :root block above is what they read.
 * -------------------------------------------------------------------------- */

@theme {
  --color-gray-950: #0D1420;
  --color-gray-900: #15202F;
  --color-gray-800: #1E2B3D;
  --color-gray-700: #2C3A4F;
  --color-gray-600: #3D4D64;
  --color-gray-500: #5E6E86;
  --color-gray-400: #8A98AD;
  --color-gray-300: #BAC5D4;
  --color-gray-100: #E9EEF5;

  --color-light-50:  #F2F5F9;
  --color-light-100: #FFFFFF;
  --color-light-200: #FAFBFD;
  --color-light-300: #DCE3EC;
  --color-light-400: #C2CCDA;
  --color-light-500: #6E7B8F;
  --color-light-600: #45526A;
  --color-light-700: #28344A;
  --color-light-900: #141D2B;

  --color-accent:      #1E4C8A;
  --color-accent-text: #FFFFFF;
  --color-accent-deep: #163A6B;
  --color-accent-soft: #E8EFF8;

  --color-canvas:        var(--color-light-50);
  --color-surface:       var(--color-light-100);
  --color-elevated:      var(--color-light-200);
  --color-border:        var(--color-light-300);
  --color-border-strong: var(--color-light-400);
  --color-text-primary:   var(--color-light-900);
  --color-text-secondary: var(--color-light-600);
  --color-text-tertiary:  var(--color-light-700);
  --color-text-muted:     var(--color-light-500);
  --color-highlight-soft: var(--color-accent-soft);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ----------------------------------------------------------------------------
 * Base layer — resets and global type.
 * -------------------------------------------------------------------------- */

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html {
    font-family: var(--font-sans);
    background: var(--color-canvas);
    color: var(--color-text-primary);
    font-size: 17px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    accent-color: var(--color-accent);
  }
  body {
    background: var(--color-canvas);
    color: var(--color-text-primary);
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.7;
  }
  h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
  }
  h1 { font-size: var(--text-hero); line-height: 1.18; letter-spacing: -0.01em; }
  h2 { font-size: var(--text-h2);  line-height: 1.33; }
  h3 { font-size: var(--text-h3);  line-height: 1.35; }
  h4 { font-size: var(--text-h3);  line-height: 1.35; }
  p  { margin: 0; font-size: var(--text-body); line-height: 1.7; font-weight: 500; color: var(--color-text-secondary); }
  a  { color: var(--color-accent); text-decoration: none; font-weight: 600; transition: color .14s ease; }
  a:hover { color: var(--color-accent-deep); }
  strong { font-weight: 800; color: var(--color-text-primary); }
  code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    font-weight: 600;
    padding: 0.12em 0.4em;
    border-radius: var(--radius-sm);
    background: var(--color-highlight-soft);
    color: var(--color-accent-deep);
    border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  }
  [data-theme="dark"] code { color: var(--color-accent); }
  ::selection { background: var(--color-accent); color: var(--color-accent-text); }
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border: 3px solid var(--color-canvas);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
}

/* ============================================================================
 * Components
 * ============================================================================ */

@layer components {

  /* --- Shell ------------------------------------------------------------- */
  .rio-shell {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    min-height: 100vh;
  }
  .rio-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-6) var(--space-7) var(--space-7);
    gap: var(--space-5);
  }
  .rio-main > .rio-page-header,
  .rio-main > .rio-page-head { margin-top: var(--space-1); }

  /* --- Sidebar ----------------------------------------------------------- */
  .rio-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    background: var(--color-elevated);
    border-right: 1px solid var(--color-border);
    padding: var(--space-5) var(--space-4) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .rio-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-2) var(--space-4);
    color: var(--color-text-primary);
  }
  .rio-sidebar__brand:hover { color: var(--color-text-primary); }
  .rio-sidebar__mark {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    flex: none;
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--shadow-sm);
  }
  .rio-sidebar__wordmark {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.015em;
    color: var(--color-text-primary);
  }
  .rio-sidebar__group { display: flex; flex-direction: column; gap: 2px; }
  .rio-sidebar__section {
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0 var(--space-3) var(--space-2);
  }
  .rio-sidebar__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-meta);
    font-weight: 600;
    line-height: 1.3;
    transition: background .14s ease, color .14s ease;
  }
  .rio-sidebar__item:hover {
    background: var(--color-highlight-soft);
    color: var(--color-text-primary);
  }
  .rio-sidebar__item.is-active,
  .rio-sidebar__item.is-current {
    background: var(--color-accent-soft);
    color: var(--color-accent-deep);
    font-weight: 800;
    box-shadow: inset 3px 0 0 var(--color-accent);
  }
  [data-theme="dark"] .rio-sidebar__item.is-active,
  [data-theme="dark"] .rio-sidebar__item.is-current { color: var(--color-accent); }
  .rio-sidebar__count {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 1px 9px;
    min-width: 24px;
    text-align: center;
  }
  .rio-sidebar__item.is-active .rio-sidebar__count,
  .rio-sidebar__item.is-current .rio-sidebar__count {
    color: var(--color-accent-deep);
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
    background: transparent;
  }

  /* --- Topbar ------------------------------------------------------------ */
  .rio-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }
  .rio-topbar--inset { margin: calc(var(--space-6) * -1) calc(var(--space-7) * -1) 0; padding: var(--space-4) var(--space-7); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
  .rio-topbar__status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-secondary);
  }
  .rio-topbar__dot {
    width: 9px; height: 9px;
    border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent);
    animation: rio-pulse 2.6s ease-in-out infinite;
  }
  .rio-topbar__brand { display: flex; align-items: center; gap: var(--space-2); }
  .rio-topbar__mark {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    background: var(--color-accent); color: var(--color-accent-text);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans); font-weight: 800; font-size: 15px;
  }
  .rio-topbar__wordmark { font-family: var(--font-sans); font-weight: 800; }
  .rio-topbar__nav { display: flex; align-items: center; gap: var(--space-2); }
  .rio-topbar__link {
    font-size: var(--text-meta);
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 7px var(--space-3);
    border-radius: var(--radius-sm);
  }
  .rio-topbar__link:hover { color: var(--color-text-primary); background: var(--color-highlight-soft); }
  .rio-topbar__logout-form { margin: 0; }

  /* Environment chip */
  .rio-env-chip {
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-canvas);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    padding: 4px 12px;
  }
  .rio-env-chip.is-prod {
    color: var(--color-accent-text);
    background: var(--color-accent);
    border-color: var(--color-accent);
  }

  /* Theme toggle */
  .rio-theme-toggle {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
  }
  .rio-theme-toggle:hover {
    border-color: var(--color-border-strong);
    color: var(--color-accent);
    background: var(--color-highlight-soft);
  }

  /* --- Statusbar (footer) ------------------------------------------------ */
  .rio-statusbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .rio-statusbar__sep { color: var(--color-border-strong); }
  .rio-statusbar__spacer { flex: 1; }

  /* --- Page header ------------------------------------------------------- */
  .rio-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
  }
  .rio-page-header h1 { grid-column: 1; grid-row: 2; }
  .rio-page-header .rio-breadcrumb { grid-column: 1; grid-row: 1; }
  .rio-page-header__actions {
    grid-column: 2; grid-row: 1 / span 2;
    display: flex; align-items: center; gap: var(--space-2);
    justify-self: end;
  }
  .rio-page-head { display: flex; flex-direction: column; gap: var(--space-2); max-width: 68ch; }
  .rio-page-head--with-action { flex-direction: row; align-items: center; justify-content: space-between; max-width: none; }
  .rio-page-head p { color: var(--color-text-secondary); }
  .rio-accent-word { color: var(--color-accent); }

  .rio-breadcrumb {
    display: flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .rio-breadcrumb a { color: var(--color-text-muted); font-weight: 700; }
  .rio-breadcrumb a:hover { color: var(--color-accent); }
  .rio-breadcrumb__sep { color: var(--color-border-strong); }

  /* --- Cards ------------------------------------------------------------- */
  .rio-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-5);
    box-shadow: var(--shadow-sm);
  }
  .rio-card--featured { border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border)); }
  .rio-card__title { font-size: var(--text-h3); font-weight: 800; margin: 0 0 var(--space-3); }
  .rio-card__meta { font-family: var(--font-sans); font-size: var(--text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); }
  .rio-card > table.rio-table { margin: 0; }
  .rio-card > h2 { font-size: var(--text-h3); font-weight: 800; margin: 0 0 var(--space-3); }
  .rio-card > h2:not(:first-child) { margin-top: var(--space-5); }
  .rio-card ul, .rio-card ol { margin: 0; padding-left: 1.3rem; color: var(--color-text-secondary); }
  .rio-card li { margin: var(--space-2) 0; line-height: 1.55; font-weight: 500; }
  .rio-card li::marker { color: var(--color-accent); font-weight: 700; }

  /* Cards that contain a full-bleed table lose their inner padding. */
  .rio-card:has(> .rio-table) { padding: 0; overflow: hidden; }

  /* --- Stat grid (dashboard) -------------------------------------------- */
  .rio-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
    gap: var(--space-4);
  }
  .rio-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  .rio-stat::after {
    content: "";
    position: absolute; inset: 0 0 auto 0;
    height: 3px;
    background: transparent;
    transition: background .16s ease;
  }
  .rio-stat:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    color: var(--color-text-primary);
  }
  .rio-stat:hover::after { background: var(--color-border-strong); }
  .rio-stat__value {
    font-size: var(--text-stat);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
  }
  .rio-stat__label {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .rio-stat--featured { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }
  .rio-stat--featured::after { background: var(--color-accent); }
  .rio-stat--featured .rio-stat__value { color: var(--color-accent); }

  /* --- Toolbar ----------------------------------------------------------- */
  .rio-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .rio-toolbar__count {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-text-muted);
    margin-left: auto;
  }

  /* --- Inputs ------------------------------------------------------------ */
  .rio-input, .rio-select, .rio-textarea,
  .rio-form__input,
  .rio-form input, .rio-form select, .rio-form textarea {
    width: 100%;
    font: inherit;
    font-size: var(--text-meta);
    font-weight: 500;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 11px var(--space-4);
    line-height: 1.4;
    transition: border-color .14s ease, box-shadow .14s ease;
  }
  .rio-input::placeholder, .rio-form__input::placeholder,
  .rio-form input::placeholder, .rio-form textarea::placeholder { color: var(--color-text-muted); font-weight: 500; }
  .rio-input:focus, .rio-select:focus, .rio-textarea:focus,
  .rio-form__input:focus,
  .rio-form input:focus, .rio-form select:focus, .rio-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
  }
  .rio-textarea, .rio-form__input--textarea,
  .rio-form textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
  .rio-form__input--inline, .rio-select { width: auto; min-width: 180px; }
  select.rio-form__input, .rio-select, .rio-form select { cursor: pointer; }

  /* --- Forms ------------------------------------------------------------- */
  .rio-form { display: flex; flex-direction: column; gap: var(--space-4); }
  .rio-form__field, .rio-field { display: flex; flex-direction: column; gap: var(--space-2); }
  .rio-form__label, .rio-label {
    font-size: var(--text-small);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
  }
  .rio-form__required { color: var(--color-accent); }
  .rio-form__help { font-size: var(--text-small); font-weight: 500; color: var(--color-text-muted); line-height: 1.5; }
  .rio-form__help--error { color: #C0392B; font-weight: 600; }
  [data-theme="dark"] .rio-form__help--error { color: #F1998E; }
  .rio-form__check { display: flex; align-items: center; gap: var(--space-2); }
  .rio-form__check input { width: auto; }
  .rio-form__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  /* --- Buttons ----------------------------------------------------------- */
  .rio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-meta);
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 11px var(--space-5);
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s ease, border-color .14s ease, color .14s ease, transform .06s ease;
  }
  .rio-btn:hover { border-color: var(--color-text-muted); color: var(--color-text-primary); background: var(--color-elevated); }
  .rio-btn:active { transform: translateY(1px); }
  .rio-btn:disabled { opacity: .5; cursor: not-allowed; }

  .rio-btn--primary {
    color: var(--color-accent-text);
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .rio-btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: var(--color-accent-text); }

  .rio-btn--secondary { background: var(--color-elevated); }

  .rio-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-secondary);
    padding-inline: var(--space-3);
  }
  .rio-btn--ghost:hover { background: var(--color-highlight-soft); border-color: transparent; color: var(--color-accent-deep); }
  [data-theme="dark"] .rio-btn--ghost:hover { color: var(--color-accent); }

  .rio-btn--block { width: 100%; }

  /* --- Table ------------------------------------------------------------- */
  .rio-table-wrap { overflow-x: auto; }
  .rio-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-meta);
  }
  .rio-table thead th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-elevated);
    border-bottom: 2px solid var(--color-border-strong);
    white-space: nowrap;
  }
  .rio-table tbody td {
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-weight: 500;
    vertical-align: middle;
  }
  .rio-table tbody tr:last-child td { border-bottom: 0; }
  .rio-table tbody tr { transition: background .12s ease; }
  .rio-table tbody tr:hover { background: var(--row-hover); }
  .rio-table tbody tr:hover td { color: var(--color-text-primary); }
  .rio-table a { color: var(--color-accent); font-weight: 700; }
  .rio-table a:hover { color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
  /* Trailing actions column sits to the right, quiet until row hover. */
  .rio-table td:last-child { white-space: nowrap; text-align: right; }
  .rio-table td:last-child .rio-btn { opacity: .72; }
  .rio-table tr:hover td:last-child .rio-btn { opacity: 1; }

  /* Selected row / item state */
  .rio-table tbody tr.is-selected { background: var(--color-highlight-soft); }
  .rio-table tbody tr.is-selected td { color: var(--color-text-primary); }
  .is-selected { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent); }

  /* Rust-rendered cell classes */
  .rio-cell-primary { font-weight: 800; color: var(--color-text-primary); }
  .rio-cell-id {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
  }
  .rio-num { font-variant-numeric: tabular-nums; }

  /* --- Pills / status ---------------------------------------------------- */
  .rio-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    padding: 5px 10px 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    white-space: nowrap;
  }
  .rio-pill::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--color-text-muted);
    flex: none;
  }
  .rio-pill--lift { align-self: flex-start; margin-bottom: var(--space-4); }

  .rio-pill-emerald { color: #0B6B45; background: #E4F6EC; border-color: #A6E0C2; }
  .rio-pill-emerald::before { background: #138A5C; }
  .rio-pill-amber   { color: #8A5008; background: #FBF0D9; border-color: #ECC988; }
  .rio-pill-amber::before   { background: #CC8A1C; }
  .rio-pill-slate   { color: var(--color-text-secondary); background: var(--color-elevated); border-color: var(--color-border-strong); }
  .rio-pill-slate::before   { background: var(--color-text-muted); }
  [data-theme="dark"] .rio-pill-emerald { color: #74E2AD; background: rgba(19,138,92,.16); border-color: rgba(19,138,92,.42); }
  [data-theme="dark"] .rio-pill-amber   { color: #F3C173; background: rgba(204,138,28,.16); border-color: rgba(204,138,28,.42); }

  .badge-status, [data-status] {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-secondary);
    background: var(--color-surface);
  }

  /* --- Detail / meta lists ---------------------------------------------- */
  .rio-detail-list, .rio-meta-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-3) var(--space-5);
    margin: 0;
  }
  .rio-detail-list dt, .rio-meta-list dt {
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    align-self: center;
  }
  .rio-detail-list dd, .rio-meta-list dd {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
  }

  /* --- Detail grid (edit form + side panel) ----------------------------- */
  .rio-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: var(--space-5);
    align-items: start;
  }
  .rio-detail-main { min-width: 0; }
  .rio-detail-single { max-width: 760px; }
  .rio-detail-side { position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

  /* --- Alerts ------------------------------------------------------------ */
  .rio-alert {
    padding: var(--space-4) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    font-size: var(--text-meta);
    font-weight: 600;
    color: var(--color-text-primary);
    background: var(--color-surface);
  }
  .rio-alert--danger {
    color: #962119;
    background: #FBEEEC;
    border-color: #EEB6AF;
    border-left-color: #C0392B;
  }
  [data-theme="dark"] .rio-alert--danger { color: #F4B3AC; background: rgba(192,57,43,.13); border-color: rgba(192,57,43,.42); border-left-color: #E5675C; }

  /* --- Empty state ------------------------------------------------------- */
  .rio-empty {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  }
  .rio-empty .rio-card__title { margin-bottom: var(--space-2); }
  .rio-empty p { color: var(--color-text-muted); max-width: 44ch; margin: 0 auto; }

  /* --- Pagination -------------------------------------------------------- */
  .rio-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--color-text-muted);
  }
  .rio-pagination__pages { display: flex; align-items: center; gap: 4px; }
  .rio-pagination__pages a,
  .rio-pagination__link {
    display: grid; place-items: center;
    min-width: 36px; height: 36px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
  }
  .rio-pagination__pages a:hover,
  .rio-pagination__link:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
  .rio-pagination__pages a.is-active,
  .rio-pagination__link--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-text);
  }

  /* --- Timeline (actions) ------------------------------------------------ */
  .rio-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
  .rio-timeline__dot {
    width: 10px; height: 10px; border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-highlight-soft);
  }

  /* --- Meta text --------------------------------------------------------- */
  .rio-meta {
    font-family: var(--font-sans);
    font-size: var(--text-micro);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* --- Auth pages -------------------------------------------------------- */
  .rio-auth {
    width: 100%;
    max-width: 408px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    padding: var(--space-7) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .rio-auth form { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
  .rio-auth__header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); margin-bottom: var(--space-1); }
  .rio-auth__mark {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    background: var(--color-accent); color: var(--color-accent-text);
    border-radius: var(--radius-md);
    font-family: var(--font-sans); font-weight: 800; font-size: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--shadow-md);
    margin-bottom: var(--space-2);
  }
  .rio-auth__title { font-size: var(--text-h2); }
  .rio-auth__subtitle {
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
}

/* ============================================================================
 * Atmosphere + motion — un-layered so they reliably win the cascade.
 * ============================================================================ */

/* A faint dot grid + cool vignette gives the canvas depth without noise. */
body.admin-shell {
  background-color: var(--color-canvas);
  background-image:
    radial-gradient(var(--grain) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

body.admin-auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-5);
  background-color: var(--color-canvas);
  background-image:
    radial-gradient(120% 80% at 50% -10%, var(--color-highlight-soft) 0%, transparent 55%),
    radial-gradient(var(--grain) 1px, transparent 1px);
  background-size: auto, 26px 26px;
}

/* Page-load reveal — one quiet staggered rise. */
@keyframes rio-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rio-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent); }
  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 4%, transparent); }
}

.rio-main > * { animation: rio-rise .42s cubic-bezier(.22,.61,.36,1) both; }
.rio-main > *:nth-child(2) { animation-delay: .04s; }
.rio-main > *:nth-child(3) { animation-delay: .08s; }
.rio-main > *:nth-child(4) { animation-delay: .12s; }
.rio-stat-grid .rio-stat { animation: rio-rise .44s cubic-bezier(.22,.61,.36,1) both; }
.rio-stat-grid .rio-stat:nth-child(2) { animation-delay: .04s; }
.rio-stat-grid .rio-stat:nth-child(3) { animation-delay: .08s; }
.rio-stat-grid .rio-stat:nth-child(4) { animation-delay: .12s; }
.rio-stat-grid .rio-stat:nth-child(5) { animation-delay: .16s; }
.rio-stat-grid .rio-stat:nth-child(6) { animation-delay: .20s; }
.rio-auth { animation: rio-rise .5s cubic-bezier(.22,.61,.36,1) both; }

/* ============================================================================
 * Responsive
 * ============================================================================ */

@media (max-width: 960px) {
  .rio-shell { grid-template-columns: 1fr; }
  .rio-sidebar {
    position: static; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: var(--space-3);
    border-right: 0; border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-4);
  }
  .rio-sidebar__brand { padding: 0; margin-right: var(--space-2); }
  .rio-sidebar__group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
  .rio-sidebar__section { display: none; }
  .rio-main { padding: var(--space-4) var(--space-4) var(--space-6); }
  .rio-topbar--inset { margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0; padding: var(--space-3) var(--space-4); }
  .rio-detail-grid { grid-template-columns: 1fr; }
  .rio-detail-side { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .rio-main > *, .rio-stat-grid .rio-stat, .rio-auth { animation: none !important; }
  .rio-topbar__dot { animation: none !important; }
  * { scroll-behavior: auto !important; }
}
/* preview-only: frame the demo, no effect on the real skin */
.demo-divider{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-7) 0 var(--space-5);font-family:var(--font-sans);font-size:var(--text-micro);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);}
.demo-divider::before,.demo-divider::after{content:"";height:1px;flex:1;background:var(--color-border);}