/*
  Kurumi Aurora - shared design system ("Clockwork Aurora").
  Project-owned. Loads LAST (after kurumi-r58.css) so it can re-skin every
  existing page and provide the ka-* component catalog (see ../AURORA.md).

  Contents
    0. Tokens (--ka-*) and remapped --kurumi-* palette
    1. Shell atmosphere (moon glow, clock dial, vignette, grain)
    2. Base typography, links, selection, scrollbars, focus
    3. Global restyle of Argon/Bootstrap components
    4. ka-* components
    5. Motion keyframes and utilities
    6. Reduced-motion / motion-off neutralisation
*/

/* ========================================================================== *
 * 0. TOKENS
 * ========================================================================== */

@property --ka-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  /* Midnight / obsidian with a faint warm-violet cast */
  --ka-void: #0a0810;
  --ka-obsidian: #100d17;
  --ka-night: #17121f;
  --ka-plum: #1f1829;
  --ka-velvet: #2a2036;
  --ka-velvet-hi: #372b45;

  /* Blood-moon crimson, wine and burgundy depth */
  --ka-crimson-100: #ffd9d6;
  --ka-crimson-200: #ffa9a3;
  --ka-crimson-300: #ff766f;
  --ka-crimson-400: #f04a4e;
  --ka-crimson-500: #d02a3a;
  --ka-crimson-600: #ad1a2d;
  --ka-crimson-700: #86122a;
  --ka-crimson-800: #5c0d20;
  --ka-crimson-900: #3a0914;
  --ka-wine: #2a0a17;

  /* Clock-gold: antique brass to bright gold */
  --ka-gold-100: #fcf2d2;
  --ka-gold-200: #f3dfa0;
  --ka-gold-300: #e8c872;
  --ka-gold-400: #d6ac4c;
  --ka-gold-500: #b98e3b;
  --ka-gold-600: #95712c;
  --ka-gold-700: #6f5322;

  /* Ivory text */
  --ka-ivory: #f4ebda;
  --ka-ivory-dim: #cfc4b4;
  --ka-ivory-mute: #b2a797;

  /* Semantic (kept in the gothic register, AA on night surfaces) */
  --ka-ok: #7fc59a;
  --ka-warn: #e6b350;
  --ka-down: #ff6b6b;
  --ka-info: #8fb4d6;
  --ka-idle: #9a8fa8;

  /* Hairlines */
  --ka-line: rgba(244, 235, 218, 0.09);
  --ka-line-gold: rgba(214, 172, 76, 0.26);
  --ka-line-gold-strong: rgba(232, 200, 114, 0.5);
  --ka-line-crimson: rgba(240, 74, 78, 0.45);

  /* Gradients */
  --ka-grad-moon: radial-gradient(circle at 50% 40%, #ff8a80 0%, #e0343f 28%, #9a1228 58%, #4a0a1a 100%);
  --ka-grad-crimson: linear-gradient(135deg, #c8232f 0%, #9a1228 55%, #6d0d22 100%);
  --ka-grad-crimson-hi: linear-gradient(135deg, #e0343f 0%, #b01a2d 55%, #7d1026 100%);
  --ka-grad-brass: linear-gradient(135deg, #f3dfa0 0%, #d6ac4c 42%, #95712c 100%);
  --ka-grad-brass-text: linear-gradient(100deg, #b98e3b 0%, #f3dfa0 38%, #d6ac4c 55%, #f7e9b8 78%, #b98e3b 100%);
  --ka-grad-midnight: linear-gradient(180deg, #1f1829 0%, #17121f 55%, #100d17 100%);
  --ka-grad-surface: linear-gradient(160deg, rgba(42, 32, 54, 0.92) 0%, rgba(26, 20, 34, 0.94) 60%, rgba(22, 16, 28, 0.96) 100%);
  --ka-grad-hair: linear-gradient(90deg, transparent, var(--ka-gold-500) 20%, var(--ka-gold-200) 50%, var(--ka-gold-500) 80%, transparent);

  /* Glows and shadows */
  --ka-glow-crimson: 0 0 0 1px rgba(240, 74, 78, 0.35), 0 10px 38px -8px rgba(208, 42, 58, 0.55);
  --ka-glow-gold: 0 0 0 1px rgba(232, 200, 114, 0.4), 0 10px 34px -10px rgba(214, 172, 76, 0.5);
  --ka-shadow-sm: 0 1px 2px rgba(5, 3, 9, 0.5), 0 4px 12px rgba(5, 3, 9, 0.28);
  --ka-shadow-md: 0 2px 4px rgba(5, 3, 9, 0.45), 0 14px 34px -12px rgba(5, 3, 9, 0.75);
  --ka-shadow-lg: 0 4px 8px rgba(5, 3, 9, 0.4), 0 30px 70px -20px rgba(5, 3, 9, 0.9);
  --ka-inset-hair: inset 0 1px 0 rgba(243, 223, 160, 0.12);

  /* Radii */
  --ka-r-xs: 4px;
  --ka-r-sm: 8px;
  --ka-r-md: 14px;
  --ka-r-lg: 20px;
  --ka-r-pill: 999px;

  /* Spacing scale */
  --ka-s-1: 0.25rem;
  --ka-s-2: 0.5rem;
  --ka-s-3: 0.75rem;
  --ka-s-4: 1rem;
  --ka-s-5: 1.5rem;
  --ka-s-6: 2rem;
  --ka-s-7: 3rem;
  --ka-s-8: 4.5rem;

  /* Motion */
  --ka-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ka-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ka-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ka-dur-1: 140ms;
  --ka-dur-2: 260ms;
  --ka-dur-3: 520ms;
  --ka-dur-4: 900ms;
  --ka-dur-5: 1500ms;

  /* Layers (below the masthead at 1030+) */
  --ka-z-atmosphere: -2;
  --ka-z-embers: -1;
  --ka-z-raised: 2;
  --ka-z-sticky: 20;
  --ka-z-toast: 1090;

  /* Type */
  --ka-font-display: "Cormorant Garamond", "Playfair Display", "EB Garamond", "Times New Roman", serif;
  --ka-font-ui: "Source Sans 3", "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ka-font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --ka-page-max: 1240px;
  --ka-gutter: clamp(1rem, 3vw, 2rem);
}

/* Remap the legacy --kurumi-* tokens so every legacy rule picks up the palette.
   (Values changed, names preserved.) */
body.kurumi {
  --kurumi-obsidian: var(--ka-obsidian);
  --kurumi-charcoal: var(--ka-night);
  --kurumi-surface: var(--ka-plum);
  --kurumi-elevated: var(--ka-velvet);
  --kurumi-selected: #4a2433;
  --kurumi-input: #1a1424;
  --kurumi-berry: var(--ka-crimson-600);
  --kurumi-berry-hover: var(--ka-crimson-500);
  --kurumi-berry-soft: var(--ka-crimson-400);
  --kurumi-berry-light: var(--ka-gold-300);
  --kurumi-crimson: var(--ka-crimson-600);
  --kurumi-crimson-deep: var(--ka-crimson-800);
  --kurumi-crimson-high: var(--ka-crimson-500);
  --kurumi-gold: var(--ka-gold-400);
  --kurumi-burgundy: var(--ka-wine);
  --kurumi-ivory: var(--ka-ivory);
  --kurumi-ivory-muted: var(--ka-ivory-dim);
  --kurumi-success: var(--ka-ok);
  --kurumi-warning: var(--ka-warn);
  --kurumi-info: var(--ka-info);
  --kurumi-error: var(--ka-down);
  --kurumi-disabled: #776c80;
  --kurumi-focus: var(--ka-gold-200);
  --kurumi-border: var(--ka-line-gold);
  --kurumi-border-strong: var(--ka-line-gold-strong);
  --kurumi-line: var(--ka-line);
  --kurumi-shadow: var(--ka-shadow-md);
  --kurumi-masthead-bg: rgba(16, 13, 23, 0.94);
  --kurumi-masthead-border: var(--ka-line-gold);
  --kurumi-panel-bg: rgba(26, 20, 34, 0.98);
  --kurumi-panel-shadow: var(--ka-shadow-lg);
}

/* ========================================================================== *
 * 1. SHELL ATMOSPHERE
 * Two fixed pseudo layers on <body> (no extra markup). The ember canvas, when
 * enabled by JS, sits between them. All layers: pointer-events none.
 * ========================================================================== */

html {
  background-color: var(--ka-obsidian);
  scroll-behavior: smooth;
}

body.kurumi,
body.kurumi[data-background-theme] {
  /* html carries the base colour so the fixed atmosphere layers (z -2) show. */
  background-color: transparent !important;
  background-image: none !important;
  font-family: var(--ka-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* Layer 1: layered midnight gradient + blood-moon glow + vignette. */
body.kurumi::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--ka-z-atmosphere);
  pointer-events: none;
  background:
    radial-gradient(60vmax 44vmax at 88% -8%, rgba(208, 42, 58, 0.40), transparent 62%),
    radial-gradient(46vmax 38vmax at -6% 104%, rgba(134, 18, 42, 0.42), transparent 60%),
    radial-gradient(70vmax 50vmax at 50% 118%, rgba(214, 172, 76, 0.10), transparent 60%),
    radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(5, 3, 9, 0.62) 100%),
    linear-gradient(180deg, #1a1424 0%, #120e1a 45%, #0c0912 100%);
}

/* Layer 2: slowly rotating gold clock dial watermark + faint grain. */
body.kurumi::after {
  content: "";
  position: fixed;
  z-index: var(--ka-z-atmosphere);
  pointer-events: none;
  width: min(118vmax, 1500px);
  height: min(118vmax, 1500px);
  right: calc(min(118vmax, 1500px) * -0.34);
  top: calc(min(118vmax, 1500px) * -0.30);
  opacity: 0.085;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23e8c872' stroke-linecap='round'%3E%3Ccircle cx='200' cy='200' r='196' stroke-width='1.4'/%3E%3Ccircle cx='200' cy='200' r='186' stroke-width='.6'/%3E%3Ccircle cx='200' cy='200' r='140' stroke-width='.8' stroke-dasharray='2 6'/%3E%3Ccircle cx='200' cy='200' r='96' stroke-width='.8'/%3E%3Ccircle cx='200' cy='200' r='6' stroke-width='1.4'/%3E%3Cg stroke-width='2'%3E%3Cpath d='M200 6v22M200 372v22M6 200h22M372 200h22'/%3E%3C/g%3E%3Cg stroke-width='1'%3E%3Cpath d='M297 32l-9 15M368 103l-15 9M368 297l-15-9M297 368l-9-15M103 368l9-15M32 297l15-9M32 103l15 9M103 32l9 15'/%3E%3C/g%3E%3Cg stroke-width='.6'%3E%3Cpath d='M200 60v28M200 312v28M60 200h28M312 200h28M101 101l20 20M279 279l20 20M299 101l-20 20M121 279l-20 20'/%3E%3C/g%3E%3Cpath d='M200 200L200 84' stroke-width='2'/%3E%3Cpath d='M200 200L282 242' stroke-width='3'/%3E%3Cpath d='M200 150a50 50 0 0 1 50 50' stroke-width='.6' stroke-dasharray='1 4'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: ka-spin-slow 240s linear infinite;
  will-change: transform;
}

/* Grain + faint scanline wash, painted by a data-URI noise on <html>. */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--ka-z-atmosphere);
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ember canvas (created by kurumi-aurora.js). */
.ka-embers {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--ka-z-embers);
  pointer-events: none;
  opacity: 0.85;
}

/* Legacy opaque page wrappers must let the atmosphere through. */
body.kurumi .main-content,
body.kurumi .kurumi-stage,
body.kurumi .kurumi-fullscreen-body,
body.kurumi .container-fluid {
  background-color: transparent;
  background-image: none;
}

/* Page enter */
body.kurumi #kurumi-content {
  animation: ka-page-enter var(--ka-dur-4) var(--ka-ease) both;
}

/* ========================================================================== *
 * 2. BASE TYPOGRAPHY, LINKS, SELECTION, SCROLLBARS, FOCUS
 * ========================================================================== */

body.kurumi h1,
body.kurumi h2,
body.kurumi h3,
body.kurumi h4,
body.kurumi .h1,
body.kurumi .h2,
body.kurumi .h3,
body.kurumi .h4 {
  font-family: var(--ka-font-display);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ka-ivory);
  line-height: 1.15;
}

body.kurumi h1 em,
body.kurumi h2 em,
body.kurumi h3 em,
body.kurumi .ka-accent {
  font-style: italic;
  font-weight: 600;
  color: var(--ka-gold-300);
}

body.kurumi h5,
body.kurumi h6,
body.kurumi .h5,
body.kurumi .h6 {
  font-family: var(--ka-font-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ka-ivory);
}

body.kurumi p,
body.kurumi li,
body.kurumi label {
  color: inherit;
}

body.kurumi .text-muted,
body.kurumi .text-secondary,
body.kurumi small.text-muted {
  color: var(--ka-ivory-mute) !important;
}

body.kurumi .text-primary {
  color: var(--ka-crimson-300) !important;
}

body.kurumi hr,
body.kurumi hr.horizontal {
  border: 0;
  height: 1px;
  opacity: 1;
  background: var(--ka-grad-hair);
  background-color: transparent;
  margin: var(--ka-s-5) 0;
}

body.kurumi hr.horizontal.dark,
body.kurumi hr.horizontal.light {
  background: var(--ka-grad-hair);
}

/* Links: animated gold underline */
body.kurumi a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item):not([class*="kurumi-mega"]):not([class*="kurumi-drawer"]):not([class*="kl-"]):not([class*="ka-btn"]):not(.kurumi-skip):not(.kurumi-guild-card) {
  color: var(--ka-gold-300);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--ka-dur-3) var(--ka-ease), color var(--ka-dur-2) var(--ka-ease-soft);
}

body.kurumi a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.list-group-item):not([class*="kurumi-mega"]):not([class*="kurumi-drawer"]):not([class*="kl-"]):not([class*="ka-btn"]):not(.kurumi-skip):not(.kurumi-guild-card):hover {
  color: var(--ka-gold-100);
  background-size: 100% 1px;
}

body.kurumi ::selection {
  background: rgba(208, 42, 58, 0.55);
  color: #fff;
  text-shadow: none;
}

/* Scrollbars */
html {
  scrollbar-color: var(--ka-gold-600) var(--ka-night);
  scrollbar-width: thin;
}

body.kurumi ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

body.kurumi ::-webkit-scrollbar-track {
  background: var(--ka-night);
}

body.kurumi ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ka-gold-600), var(--ka-crimson-700));
  border: 2px solid var(--ka-night);
  border-radius: var(--ka-r-pill);
}

body.kurumi ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--ka-gold-400), var(--ka-crimson-500));
}

/* Focus ring: gold inner hairline + crimson halo */
body.kurumi :focus-visible {
  outline: 2px solid var(--ka-gold-200) !important;
  outline-offset: 2px;
  border-radius: var(--ka-r-xs);
  box-shadow: 0 0 0 5px rgba(208, 42, 58, 0.28);
}

body.kurumi input:focus-visible,
body.kurumi select:focus-visible,
body.kurumi textarea:focus-visible {
  outline-offset: 0;
}

body.kurumi code,
body.kurumi kbd,
body.kurumi samp {
  font-family: var(--ka-font-mono);
}

body.kurumi code {
  color: var(--ka-gold-200);
  background: rgba(134, 18, 42, 0.26);
  border: 1px solid rgba(240, 74, 78, 0.2);
  border-radius: var(--ka-r-xs);
  padding: 0.08em 0.4em;
  font-size: 0.88em;
  word-break: break-word;
}

body.kurumi pre {
  background: linear-gradient(160deg, #130e1b, #0d0a13) !important;
  border: 1px solid var(--ka-line-gold);
  border-left: 3px solid var(--ka-crimson-500);
  border-radius: var(--ka-r-sm);
  color: var(--ka-ivory-dim) !important;
  padding: var(--ka-s-4);
  box-shadow: var(--ka-inset-hair);
}

body.kurumi pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

/* ========================================================================== *
 * 3. GLOBAL RESTYLE OF EXISTING COMPONENTS
 * ========================================================================== */

/* ---- Cards ------------------------------------------------------------- */
body.kurumi .card {
  background: var(--ka-grad-surface) !important;
  border: 1px solid var(--ka-line-gold) !important;
  border-radius: var(--ka-r-md);
  box-shadow: var(--ka-shadow-md), var(--ka-inset-hair);
  color: var(--ka-ivory);
  transition: transform var(--ka-dur-3) var(--ka-ease), border-color var(--ka-dur-3) var(--ka-ease), box-shadow var(--ka-dur-3) var(--ka-ease);
}

body.kurumi .card:hover {
  border-color: var(--ka-line-gold-strong) !important;
}

body.kurumi .card.card-plain,
body.kurumi .card.bg-transparent {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
}

body.kurumi .card-header {
  background: linear-gradient(90deg, rgba(134, 18, 42, 0.28), rgba(42, 32, 54, 0) 70%) !important;
  border-bottom: 1px solid var(--ka-line-gold) !important;
  border-radius: var(--ka-r-md) var(--ka-r-md) 0 0;
  color: var(--ka-ivory);
}

body.kurumi .card-footer {
  background: rgba(10, 8, 16, 0.35) !important;
  border-top: 1px solid var(--ka-line) !important;
}

body.kurumi .card-title,
body.kurumi .card-header h1,
body.kurumi .card-header h2,
body.kurumi .card-header h3,
body.kurumi .card-header h4,
body.kurumi .card-header h5,
body.kurumi .card-header h6 {
  font-family: var(--ka-font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ka-ivory);
}

body.kurumi .card-body {
  color: var(--ka-ivory-dim);
}

/* ---- Buttons ----------------------------------------------------------- */
body.kurumi .btn {
  font-family: var(--ka-font-ui);
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--ka-r-sm);
  transition: transform var(--ka-dur-1) var(--ka-ease), box-shadow var(--ka-dur-3) var(--ka-ease), background-color var(--ka-dur-2) var(--ka-ease-soft), border-color var(--ka-dur-2) var(--ka-ease-soft), color var(--ka-dur-2) var(--ka-ease-soft), filter var(--ka-dur-2);
}

body.kurumi .btn:active:not(:disabled):not(.disabled) {
  transform: translateY(1px) scale(0.985);
}

body.kurumi .btn-primary,
body.kurumi .btn.bg-gradient-primary,
body.kurumi .btn.bg-gradient-success,
body.kurumi .btn-success {
  background: var(--ka-grad-crimson) !important;
  border: 1px solid rgba(255, 169, 163, 0.35) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px -8px rgba(208, 42, 58, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.kurumi .btn-primary:hover:not(:disabled),
body.kurumi .btn.bg-gradient-primary:hover:not(:disabled),
body.kurumi .btn.bg-gradient-success:hover:not(:disabled),
body.kurumi .btn-success:hover:not(:disabled) {
  background: var(--ka-grad-crimson-hi) !important;
  border-color: var(--ka-gold-300) !important;
  box-shadow: var(--ka-glow-crimson), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
  color: #fff !important;
}

body.kurumi .btn-secondary,
body.kurumi .btn-outline-secondary,
body.kurumi .btn-outline-primary,
body.kurumi .btn-light,
body.kurumi .btn.bg-gradient-neutral,
body.kurumi .btn-dark {
  background: rgba(244, 235, 218, 0.04) !important;
  border: 1px solid var(--ka-line-gold-strong) !important;
  color: var(--ka-gold-200) !important;
  box-shadow: var(--ka-inset-hair);
}

body.kurumi .btn-secondary:hover:not(:disabled),
body.kurumi .btn-outline-secondary:hover:not(:disabled),
body.kurumi .btn-outline-primary:hover:not(:disabled),
body.kurumi .btn-light:hover:not(:disabled),
body.kurumi .btn.bg-gradient-neutral:hover:not(:disabled),
body.kurumi .btn-dark:hover:not(:disabled) {
  background: rgba(214, 172, 76, 0.14) !important;
  border-color: var(--ka-gold-300) !important;
  color: var(--ka-gold-100) !important;
  box-shadow: var(--ka-glow-gold);
  transform: translateY(-1px);
}

body.kurumi .btn-danger,
body.kurumi .btn-outline-danger {
  background: rgba(134, 18, 42, 0.35) !important;
  border: 1px solid var(--ka-line-crimson) !important;
  color: #ffc4c0 !important;
}

body.kurumi .btn-danger:hover:not(:disabled),
body.kurumi .btn-outline-danger:hover:not(:disabled) {
  background: var(--ka-crimson-600) !important;
  border-color: var(--ka-crimson-300) !important;
  color: #fff !important;
  box-shadow: var(--ka-glow-crimson);
}

body.kurumi .btn-warning,
body.kurumi .btn-outline-warning,
body.kurumi .btn.bg-gradient-warning {
  background: rgba(230, 179, 80, 0.12) !important;
  border: 1px solid rgba(230, 179, 80, 0.5) !important;
  color: var(--ka-warn) !important;
}

body.kurumi .btn-warning:hover:not(:disabled),
body.kurumi .btn-outline-warning:hover:not(:disabled) {
  background: rgba(230, 179, 80, 0.24) !important;
  color: var(--ka-gold-100) !important;
}

body.kurumi .btn-info,
body.kurumi .btn-outline-info {
  background: rgba(143, 180, 214, 0.1) !important;
  border: 1px solid rgba(143, 180, 214, 0.45) !important;
  color: var(--ka-info) !important;
}

body.kurumi .btn-link {
  color: var(--ka-gold-300);
}

body.kurumi .btn.disabled,
body.kurumi .btn:disabled {
  opacity: 0.5;
  filter: saturate(0.6);
}

body.kurumi .btn i,
body.kurumi .btn .fa {
  color: inherit;
}

/* Legacy project buttons (.kurumi-btn family; masthead variants keep their own rules). */
body.kurumi .kurumi-btn:not(.kurumi-masthead .kurumi-btn):not(.kurumi-menu__item):not(.kurumi-btn-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 40px;
  padding: 0.5em 1.2em;
  border-radius: var(--ka-r-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  background-image: none;
  transition: transform var(--ka-dur-1) var(--ka-ease), box-shadow var(--ka-dur-3) var(--ka-ease), background-color var(--ka-dur-2), border-color var(--ka-dur-2);
}
body.kurumi .kurumi-btn-primary:not(.kurumi-masthead .kurumi-btn-primary) {
  background: var(--ka-grad-crimson) !important;
  border: 1px solid rgba(255, 169, 163, 0.38) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px -8px rgba(208, 42, 58, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
body.kurumi .kurumi-btn-primary:not(.kurumi-masthead .kurumi-btn-primary):hover {
  background: var(--ka-grad-crimson-hi) !important;
  border-color: var(--ka-gold-300) !important;
  box-shadow: var(--ka-glow-crimson);
  transform: translateY(-1px);
}
body.kurumi .kurumi-btn-secondary,
body.kurumi .kurumi-btn-ghost {
  background: rgba(244, 235, 218, 0.04) !important;
  border: 1px solid var(--ka-line-gold-strong) !important;
  color: var(--ka-gold-100) !important;
}
body.kurumi .kurumi-btn-secondary:hover,
body.kurumi .kurumi-btn-ghost:hover {
  background: rgba(214, 172, 76, 0.14) !important;
  border-color: var(--ka-gold-300) !important;
  box-shadow: var(--ka-glow-gold);
  transform: translateY(-1px);
}
body.kurumi .kurumi-btn-danger:not(.kurumi-menu__item) {
  background: rgba(134, 18, 42, 0.4) !important;
  border: 1px solid var(--ka-line-crimson) !important;
  color: #ffc4c0 !important;
}
body.kurumi .kurumi-btn-danger:not(.kurumi-menu__item):hover {
  background: var(--ka-crimson-600) !important;
  color: #fff !important;
  border-color: var(--ka-crimson-300) !important;
  box-shadow: var(--ka-glow-crimson);
}
body.kurumi .kurumi-btn-link {
  background: transparent !important;
  border: 0 !important;
  color: var(--ka-gold-200) !important;
  box-shadow: none;
}

/* ---- Forms ------------------------------------------------------------- */
body.kurumi .form-control,
body.kurumi .form-select,
body.kurumi .custom-select,
body.kurumi textarea.form-control,
body.kurumi input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not(.btn) {
  background-color: var(--kurumi-input) !important;
  border: 1px solid rgba(214, 172, 76, 0.2);
  border-radius: var(--ka-r-sm);
  color: var(--ka-ivory) !important;
  box-shadow: inset 0 2px 8px rgba(5, 3, 9, 0.35);
  transition: border-color var(--ka-dur-2) var(--ka-ease-soft), box-shadow var(--ka-dur-2) var(--ka-ease-soft), background-color var(--ka-dur-2);
}

body.kurumi .form-control:hover,
body.kurumi .form-select:hover,
body.kurumi .custom-select:hover {
  border-color: rgba(214, 172, 76, 0.4);
}

body.kurumi .form-control:focus,
body.kurumi .form-select:focus,
body.kurumi .custom-select:focus,
body.kurumi input:focus:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.btn) {
  border-color: var(--ka-gold-300) !important;
  box-shadow: 0 0 0 3px rgba(208, 42, 58, 0.3), inset 0 2px 8px rgba(5, 3, 9, 0.35) !important;
  outline: none !important;
}

body.kurumi .form-control::placeholder,
body.kurumi input::placeholder,
body.kurumi textarea::placeholder {
  color: #8f8596 !important;
  opacity: 1;
}

body.kurumi .form-select,
body.kurumi .custom-select {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23e8c872' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  background-size: 14px !important;
}

body.kurumi .form-select option,
body.kurumi select option {
  background: var(--ka-night);
  color: var(--ka-ivory);
}

body.kurumi .form-control:disabled,
body.kurumi .form-control[readonly],
body.kurumi .form-select:disabled {
  background-color: rgba(26, 20, 36, 0.7) !important;
  color: var(--ka-ivory-mute) !important;
}

body.kurumi .input-group-text {
  background: linear-gradient(160deg, var(--ka-velvet), var(--ka-plum)) !important;
  border: 1px solid rgba(214, 172, 76, 0.2) !important;
  color: var(--ka-gold-300) !important;
}

body.kurumi .input-group > .form-control:not(:last-child),
body.kurumi .input-group > .form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body.kurumi label,
body.kurumi .form-control-label,
body.kurumi .col-form-label {
  color: var(--ka-ivory-dim);
  font-weight: 600;
}

body.kurumi .form-text,
body.kurumi .help-block {
  color: var(--ka-ivory-mute);
}

body.kurumi .form-control.is-invalid,
body.kurumi .was-validated .form-control:invalid {
  border-color: var(--ka-down) !important;
}

body.kurumi .invalid-feedback {
  color: var(--ka-down);
}

body.kurumi .form-control.is-valid {
  border-color: var(--ka-ok) !important;
}

/* Checkbox / radio / switch */
body.kurumi .form-check-input {
  background-color: var(--kurumi-input);
  border: 1px solid rgba(214, 172, 76, 0.45);
  transition: background-color var(--ka-dur-2) var(--ka-ease-soft), border-color var(--ka-dur-2), box-shadow var(--ka-dur-2);
}

body.kurumi .form-check-input:checked {
  background-color: var(--ka-crimson-600);
  border-color: var(--ka-gold-300);
  box-shadow: 0 0 0 3px rgba(208, 42, 58, 0.22);
}

body.kurumi .form-check-input:focus {
  border-color: var(--ka-gold-300);
  box-shadow: 0 0 0 3px rgba(208, 42, 58, 0.3);
}

body.kurumi .form-switch .form-check-input:checked {
  background-color: var(--ka-crimson-600);
  border-color: var(--ka-gold-300);
}

body.kurumi input[type="range"] {
  accent-color: var(--ka-crimson-500);
}

/* ---- Tables ------------------------------------------------------------ */
body.kurumi .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ka-ivory-dim);
  --bs-table-border-color: var(--ka-line);
  --bs-table-striped-bg: rgba(244, 235, 218, 0.025);
  --bs-table-striped-color: var(--ka-ivory-dim);
  --bs-table-hover-bg: rgba(134, 18, 42, 0.2);
  --bs-table-hover-color: var(--ka-ivory);
  color: var(--ka-ivory-dim);
  border-color: var(--ka-line);
}

body.kurumi .table > :not(caption) > * > * {
  background-color: transparent;
  color: inherit;
  border-bottom-color: var(--ka-line);
}

body.kurumi .table thead th {
  font-family: var(--ka-font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ka-gold-300);
  background: linear-gradient(180deg, rgba(214, 172, 76, 0.1), rgba(214, 172, 76, 0.02));
  border-bottom: 1px solid var(--ka-line-gold-strong);
}

body.kurumi .table tbody tr {
  transition: background-color var(--ka-dur-2) var(--ka-ease-soft);
}

body.kurumi .table-hover > tbody > tr:hover > * {
  background-color: rgba(134, 18, 42, 0.2);
  color: var(--ka-ivory);
}

body.kurumi .table td .text-dark,
body.kurumi .table td h6 {
  color: var(--ka-ivory);
}

body.kurumi .table-responsive {
  border-radius: var(--ka-r-sm);
}

/* ---- Nav tabs / pills -------------------------------------------------- */
body.kurumi .nav-tabs {
  border-bottom: 1px solid var(--ka-line-gold);
  gap: 0.15rem;
}

body.kurumi .nav-tabs .nav-link {
  color: var(--ka-ivory-dim);
  border: 1px solid transparent;
  border-radius: var(--ka-r-sm) var(--ka-r-sm) 0 0;
  background: transparent;
  font-weight: 600;
  transition: color var(--ka-dur-2), background-color var(--ka-dur-2), border-color var(--ka-dur-2);
}

body.kurumi .nav-tabs .nav-link:hover {
  color: var(--ka-gold-100);
  border-color: var(--ka-line) var(--ka-line) transparent;
}

body.kurumi .nav-tabs .nav-link.active,
body.kurumi .nav-tabs .nav-item.show .nav-link {
  color: var(--ka-gold-100);
  background: linear-gradient(180deg, rgba(134, 18, 42, 0.4), rgba(26, 20, 34, 0.9));
  border-color: var(--ka-line-gold-strong) var(--ka-line-gold-strong) transparent;
  box-shadow: inset 0 2px 0 var(--ka-crimson-400);
}

body.kurumi .nav-pills .nav-link {
  color: var(--ka-ivory-dim);
  border-radius: var(--ka-r-pill);
  font-weight: 600;
  border: 1px solid transparent;
}

body.kurumi .nav-pills .nav-link:hover {
  color: var(--ka-gold-100);
  background: rgba(214, 172, 76, 0.08);
  border-color: var(--ka-line-gold);
}

body.kurumi .nav-pills .nav-link.active,
body.kurumi .nav-pills .show > .nav-link {
  background: var(--ka-grad-crimson) !important;
  color: #fff !important;
  border-color: rgba(255, 169, 163, 0.4);
  box-shadow: 0 6px 18px -8px rgba(208, 42, 58, 0.8);
}

/* ---- Badges ------------------------------------------------------------ */
body.kurumi .badge {
  font-family: var(--ka-font-ui);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
  border-radius: var(--ka-r-pill);
  padding: 0.38em 0.8em;
  border: 1px solid var(--ka-line-gold);
  background: rgba(214, 172, 76, 0.12);
  color: var(--ka-gold-200);
}

body.kurumi .badge.bg-primary,
body.kurumi .badge.bg-gradient-primary,
body.kurumi .badge-primary {
  background: var(--ka-grad-crimson) !important;
  color: #fff !important;
  border-color: rgba(255, 169, 163, 0.35);
}

body.kurumi .badge.bg-success,
body.kurumi .badge.bg-gradient-success,
body.kurumi .badge-success {
  background: rgba(127, 197, 154, 0.14) !important;
  color: var(--ka-ok) !important;
  border-color: rgba(127, 197, 154, 0.4);
}

body.kurumi .badge.bg-danger,
body.kurumi .badge.bg-gradient-danger,
body.kurumi .badge-danger {
  background: rgba(255, 107, 107, 0.14) !important;
  color: var(--ka-down) !important;
  border-color: rgba(255, 107, 107, 0.4);
}

body.kurumi .badge.bg-warning,
body.kurumi .badge-warning {
  background: rgba(230, 179, 80, 0.14) !important;
  color: var(--ka-warn) !important;
  border-color: rgba(230, 179, 80, 0.4);
}

body.kurumi .badge.bg-info,
body.kurumi .badge-info,
body.kurumi .badge.bg-secondary,
body.kurumi .badge.bg-dark {
  background: rgba(143, 180, 214, 0.12) !important;
  color: var(--ka-info) !important;
  border-color: rgba(143, 180, 214, 0.36);
}

/* ---- Alerts ------------------------------------------------------------ */
body.kurumi .alert {
  border-radius: var(--ka-r-sm);
  border: 1px solid var(--ka-line-gold);
  border-left-width: 3px;
  background: linear-gradient(90deg, rgba(42, 32, 54, 0.95), rgba(26, 20, 34, 0.9)) !important;
  color: var(--ka-ivory) !important;
  box-shadow: var(--ka-shadow-sm);
}

body.kurumi .alert .alert-link,
body.kurumi .alert a {
  color: var(--ka-gold-200);
}

body.kurumi .alert-success { border-color: rgba(127, 197, 154, 0.4); border-left-color: var(--ka-ok); }
body.kurumi .alert-danger { border-color: rgba(255, 107, 107, 0.4); border-left-color: var(--ka-down); background: linear-gradient(90deg, rgba(92, 13, 32, 0.55), rgba(26, 20, 34, 0.9)) !important; }
body.kurumi .alert-warning { border-color: rgba(230, 179, 80, 0.4); border-left-color: var(--ka-warn); }
body.kurumi .alert-info,
body.kurumi .alert-primary,
body.kurumi .alert-secondary { border-color: rgba(143, 180, 214, 0.35); border-left-color: var(--ka-info); }

/* ---- Dropdowns --------------------------------------------------------- */
body.kurumi .dropdown-menu {
  background: linear-gradient(170deg, #241b30, #17121f) !important;
  border: 1px solid var(--ka-line-gold-strong) !important;
  border-radius: var(--ka-r-sm);
  box-shadow: var(--ka-shadow-lg) !important;
  padding: 0.4rem;
}

body.kurumi .dropdown-item {
  color: var(--ka-ivory-dim) !important;
  border-radius: var(--ka-r-xs);
  transition: background-color var(--ka-dur-1), color var(--ka-dur-1), padding-left var(--ka-dur-2) var(--ka-ease);
}

body.kurumi .dropdown-item:hover,
body.kurumi .dropdown-item:focus {
  background: rgba(134, 18, 42, 0.45) !important;
  color: var(--ka-gold-100) !important;
  padding-left: 1.25rem;
}

body.kurumi .dropdown-item.active,
body.kurumi .dropdown-item:active {
  background: var(--ka-grad-crimson) !important;
  color: #fff !important;
}

body.kurumi .dropdown-divider {
  border-top-color: var(--ka-line-gold);
}

/* ---- Modals ------------------------------------------------------------ */
body.kurumi .modal-content {
  background: linear-gradient(165deg, #261c33, #170f20) !important;
  border: 1px solid var(--ka-line-gold-strong) !important;
  border-radius: var(--ka-r-md);
  box-shadow: var(--ka-shadow-lg), 0 0 80px -20px rgba(208, 42, 58, 0.45) !important;
  color: var(--ka-ivory);
}

body.kurumi .modal-header,
body.kurumi .modal-footer {
  border-color: var(--ka-line-gold) !important;
}

body.kurumi .modal-title {
  font-family: var(--ka-font-display);
  font-size: 1.45rem;
  color: var(--ka-gold-100);
}

body.kurumi .modal-backdrop.show {
  background: radial-gradient(circle at 50% 30%, #2a0a17, #05030a);
  opacity: 0.82;
}

body.kurumi .modal.fade .modal-dialog {
  transition: transform var(--ka-dur-3) var(--ka-ease), opacity var(--ka-dur-3);
}

body.kurumi .btn-close {
  filter: invert(1) sepia(0.6) saturate(2);
}

/* ---- Pagination -------------------------------------------------------- */
body.kurumi .page-link {
  background: rgba(244, 235, 218, 0.03);
  border: 1px solid var(--ka-line-gold);
  color: var(--ka-gold-200);
  transition: background-color var(--ka-dur-2), color var(--ka-dur-2), transform var(--ka-dur-1);
}

body.kurumi .page-link:hover {
  background: rgba(134, 18, 42, 0.4);
  color: var(--ka-gold-100);
  border-color: var(--ka-gold-300);
}

body.kurumi .page-item.active .page-link {
  background: var(--ka-grad-crimson);
  border-color: rgba(255, 169, 163, 0.4);
  color: #fff;
}

body.kurumi .page-item.disabled .page-link {
  background: transparent;
  color: var(--ka-ivory-mute);
  opacity: 0.55;
}

/* ---- List group -------------------------------------------------------- */
body.kurumi .list-group-item {
  background: rgba(26, 20, 34, 0.7);
  border-color: var(--ka-line);
  color: var(--ka-ivory-dim);
  transition: background-color var(--ka-dur-2), color var(--ka-dur-2);
}

body.kurumi .list-group-item-action:hover,
body.kurumi .list-group-item-action:focus {
  background: rgba(134, 18, 42, 0.25);
  color: var(--ka-gold-100);
}

body.kurumi .list-group-item.active {
  background: var(--ka-grad-crimson);
  border-color: rgba(255, 169, 163, 0.4);
  color: #fff;
}

/* ---- Progress ---------------------------------------------------------- */
body.kurumi .progress {
  background: rgba(10, 8, 16, 0.7);
  border: 1px solid var(--ka-line-gold);
  border-radius: var(--ka-r-pill);
  height: 0.7rem;
  overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

body.kurumi .progress-bar {
  background: var(--ka-grad-crimson);
  box-shadow: 0 0 14px rgba(240, 74, 78, 0.55);
  border-radius: var(--ka-r-pill);
  transition: width var(--ka-dur-5) var(--ka-ease);
}

body.kurumi .progress-bar.bg-success { background: linear-gradient(90deg, #3d8a5c, var(--ka-ok)) !important; box-shadow: 0 0 12px rgba(127, 197, 154, 0.45); }
body.kurumi .progress-bar.bg-warning { background: linear-gradient(90deg, #a87a1c, var(--ka-warn)) !important; box-shadow: 0 0 12px rgba(230, 179, 80, 0.45); }
body.kurumi .progress-bar.bg-info { background: linear-gradient(90deg, #4f7fa6, var(--ka-info)) !important; }

/* ---- Tooltips / popovers ---------------------------------------------- */
body.kurumi .tooltip-inner {
  background: linear-gradient(160deg, #2a2036, #170f20);
  border: 1px solid var(--ka-line-gold-strong);
  color: var(--ka-ivory);
  border-radius: var(--ka-r-xs);
  font-size: 0.82rem;
  box-shadow: var(--ka-shadow-md);
}

body.kurumi .popover {
  background: #1e1628;
  border: 1px solid var(--ka-line-gold-strong);
  border-radius: var(--ka-r-sm);
  box-shadow: var(--ka-shadow-lg);
}

body.kurumi .popover-header {
  background: rgba(134, 18, 42, 0.3);
  color: var(--ka-gold-100);
  border-bottom-color: var(--ka-line-gold);
  font-family: var(--ka-font-display);
}

body.kurumi .popover-body {
  color: var(--ka-ivory-dim);
}

/* ---- Accordion / collapse --------------------------------------------- */
body.kurumi .accordion-item {
  background: rgba(26, 20, 34, 0.7);
  border-color: var(--ka-line-gold);
  color: var(--ka-ivory-dim);
}

body.kurumi .accordion-button {
  background: transparent;
  color: var(--ka-ivory);
  font-weight: 700;
}

body.kurumi .accordion-button:not(.collapsed) {
  background: rgba(134, 18, 42, 0.3);
  color: var(--ka-gold-100);
  box-shadow: none;
}

/* ---- Toastr / choices / flatpickr ------------------------------------- */
body.kurumi #toast-container > div {
  background-color: #1e1628 !important;
  border: 1px solid var(--ka-line-gold-strong);
  border-radius: var(--ka-r-sm);
  box-shadow: var(--ka-shadow-lg) !important;
  color: var(--ka-ivory) !important;
  opacity: 1;
  background-image: none;
  padding-left: 1.1rem;
}

body.kurumi #toast-container > div::before {
  content: none;
}

body.kurumi .choices__inner {
  background: var(--kurumi-input) !important;
  border: 1px solid rgba(214, 172, 76, 0.22);
  border-radius: var(--ka-r-sm);
  color: var(--ka-ivory);
}

body.kurumi .choices__list--dropdown,
body.kurumi .choices__list[aria-expanded] {
  background: #1e1628;
  border: 1px solid var(--ka-line-gold-strong);
  color: var(--ka-ivory);
}

body.kurumi .choices.is-focused .choices__inner {
  border-color: var(--ka-gold-300);
}

body.kurumi .flatpickr-calendar {
  background: #1e1628;
  border: 1px solid var(--ka-line-gold-strong);
  box-shadow: var(--ka-shadow-lg);
}

body.kurumi .dropzone {
  background: rgba(26, 20, 34, 0.6);
  border: 1px dashed var(--ka-line-gold-strong);
  border-radius: var(--ka-r-md);
}

/* ---- Page headings in legacy markup ---------------------------------- */
body.kurumi .kurumi-page-head,
body.kurumi .kurumi-section-title {
  font-family: var(--ka-font-display);
}

body.kurumi .kurumi-page-head h1 {
  background: var(--ka-grad-brass-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 220% 100%;
  animation: ka-shimmer 9s linear infinite;
}

/* Login shell: lace-bordered panel instead of a flat obsidian slab. */
body.kurumi .kurumi-login {
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(208, 42, 58, 0.22), transparent 62%),
    var(--ka-grad-surface);
  border: 1px solid var(--ka-line-gold);
  border-radius: var(--ka-r-lg);
  box-shadow: var(--ka-shadow-lg), var(--ka-inset-hair);
}
body.kurumi .kurumi-login__art {
  border-radius: var(--ka-r-md);
  border-color: var(--ka-line-gold-strong);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8), 0 0 0 5px rgba(10, 8, 16, 0.6);
}
body.kurumi .kurumi-login__oauth {
  background: var(--ka-grad-crimson) !important;
  border: 1px solid rgba(255, 169, 163, 0.4) !important;
  color: #fff !important;
  border-radius: var(--ka-r-sm);
  box-shadow: 0 8px 22px -10px rgba(208, 42, 58, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform var(--ka-dur-1) var(--ka-ease), box-shadow var(--ka-dur-3) var(--ka-ease);
}
body.kurumi .kurumi-login__oauth:hover {
  transform: translateY(-2px);
  box-shadow: var(--ka-glow-crimson);
}

/* Footer */
body.kurumi .kurumi-footer {
  border-top: 0;
  position: relative;
  background: linear-gradient(180deg, transparent, rgba(10, 8, 16, 0.7)) !important;
}

body.kurumi .kurumi-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--ka-grad-hair);
}

/* ========================================================================== *
 * 4. ka-* COMPONENTS
 * ========================================================================== */

/* ---- ka-page ----------------------------------------------------------- */
.ka-page {
  width: 100%;
  max-width: var(--ka-page-max);
  margin-inline: auto;
  padding: var(--ka-s-6) var(--ka-gutter) var(--ka-s-8);
  box-sizing: border-box;
  font-family: var(--ka-font-ui);
  color: var(--ka-ivory);
}

.ka-page--narrow { max-width: 860px; }
.ka-page--wide { max-width: 1480px; }
.ka-stack > * + * { margin-top: var(--ka-s-5); }
.ka-stack--lg > * + * { margin-top: var(--ka-s-7); }
.ka-row { display: flex; flex-wrap: wrap; gap: var(--ka-s-3); align-items: center; }
.ka-row--between { justify-content: space-between; }
.ka-muted { color: var(--ka-ivory-mute); }
.ka-gold { color: var(--ka-gold-300); }
.ka-crimson { color: var(--ka-crimson-300); }
.ka-display { font-family: var(--ka-font-display); }
.ka-mono { font-family: var(--ka-font-mono); }
.ka-num { font-variant-numeric: tabular-nums lining-nums; }
.ka-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---- ka-hero ----------------------------------------------------------- */
.ka-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ka-s-5);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--ka-r-lg);
  border: 1px solid var(--ka-line-gold);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(208, 42, 58, 0.28), transparent 60%),
    radial-gradient(50% 100% at 0% 100%, rgba(214, 172, 76, 0.1), transparent 60%),
    var(--ka-grad-surface);
  box-shadow: var(--ka-shadow-lg), var(--ka-inset-hair);
  overflow: hidden;
  isolation: isolate;
}

.ka-hero::after {
  /* faint dial in the corner */
  content: "";
  position: absolute;
  right: -90px; top: -90px;
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 1px solid var(--ka-line-gold);
  box-shadow: inset 0 0 0 14px transparent, inset 0 0 0 15px var(--ka-line-gold), 0 0 0 28px rgba(214, 172, 76, 0.04);
  background: repeating-conic-gradient(from 0deg, rgba(232, 200, 114, 0.22) 0 0.6deg, transparent 0.6deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 62%, #000 63%, #000 70%, transparent 71%);
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
  animation: ka-spin-slow 120s linear infinite;
}

@media (min-width: 900px) {
  .ka-hero--art { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.ka-hero__eyebrow,
.ka-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 var(--ka-s-3);
  font-family: var(--ka-font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ka-gold-300);
}

.ka-hero__eyebrow::before,
.ka-eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--ka-grad-hair);
}

.ka-hero__title {
  margin: 0 0 var(--ka-s-3);
  font-family: var(--ka-font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--ka-ivory);
}

.ka-hero__title em {
  font-style: italic;
  background: var(--ka-grad-brass-text);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ka-shimmer 8s linear infinite;
}

.ka-hero__lede {
  max-width: 62ch;
  margin: 0 0 var(--ka-s-5);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.65;
  color: var(--ka-ivory-dim);
}

.ka-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ka-s-3); }

.ka-hero__art {
  position: relative;
  min-height: 160px;
  display: grid;
  place-items: center;
}

.ka-hero__art img,
.ka-hero__art svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- ka-card ----------------------------------------------------------- */
.ka-card {
  position: relative;
  padding: var(--ka-s-5);
  border-radius: var(--ka-r-md);
  border: 1px solid var(--ka-line-gold);
  background: var(--ka-grad-surface);
  box-shadow: var(--ka-shadow-md), var(--ka-inset-hair);
  color: var(--ka-ivory-dim);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  transition: transform var(--ka-dur-3) var(--ka-ease), box-shadow var(--ka-dur-3) var(--ka-ease), border-color var(--ka-dur-3) var(--ka-ease);
  overflow: hidden;
  isolation: isolate;
}

/* Border sweep: a conic highlight masked to the 1px border ring. */
.ka-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ka-sweep, 0deg), transparent 0 55%, var(--ka-crimson-400) 72%, var(--ka-gold-200) 86%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity var(--ka-dur-3) var(--ka-ease);
  pointer-events: none;
  z-index: 1;
}

.ka-card:hover,
.ka-card:focus-within {
  border-color: var(--ka-line-gold-strong);
  box-shadow: var(--ka-shadow-lg), var(--ka-inset-hair);
  transform: perspective(900px) rotateX(var(--ka-rx, 0deg)) rotateY(var(--ka-ry, 0deg)) translateY(-4px);
}

.ka-card:hover::before,
.ka-card:focus-within::before {
  opacity: 1;
  animation: ka-sweep 3.6s linear infinite;
}

@property --ka-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.ka-card > * { position: relative; z-index: 2; }
.ka-card__title {
  margin: 0 0 var(--ka-s-2);
  font-family: var(--ka-font-display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ka-ivory);
}
.ka-card__text { margin: 0; line-height: 1.6; }
.ka-card__foot { margin-top: var(--ka-s-4); padding-top: var(--ka-s-3); border-top: 1px solid var(--ka-line); display: flex; gap: var(--ka-s-3); flex-wrap: wrap; align-items: center; }

.ka-card--glow { border-color: var(--ka-line-crimson); box-shadow: var(--ka-glow-crimson), var(--ka-inset-hair); background:
  radial-gradient(80% 90% at 100% 0%, rgba(208, 42, 58, 0.22), transparent 62%), var(--ka-grad-surface); }
.ka-card--gold { border-color: var(--ka-line-gold-strong); background:
  radial-gradient(80% 90% at 0% 0%, rgba(214, 172, 76, 0.14), transparent 62%), var(--ka-grad-surface); }
.ka-card--gold:hover { box-shadow: var(--ka-glow-gold), var(--ka-inset-hair); }
.ka-card--flat { background: rgba(23, 18, 31, 0.6); box-shadow: none; transform: none !important; }
.ka-card--flat:hover { transform: none !important; }
.ka-card--static { transform: none !important; }

/* ka-ornament: gold lace corners (add to any positioned box) */
.ka-ornament { position: relative; }
.ka-ornament::after {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  z-index: 1;
  border-radius: calc(var(--ka-r-md) - 5px);
  --_c: var(--ka-gold-400);
  background:
    linear-gradient(var(--_c), var(--_c)) top left / 14px 1px no-repeat,
    linear-gradient(var(--_c), var(--_c)) top left / 1px 14px no-repeat,
    linear-gradient(var(--_c), var(--_c)) top right / 14px 1px no-repeat,
    linear-gradient(var(--_c), var(--_c)) top right / 1px 14px no-repeat,
    linear-gradient(var(--_c), var(--_c)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--_c), var(--_c)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--_c), var(--_c)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--_c), var(--_c)) bottom right / 1px 14px no-repeat;
  opacity: 0.7;
  transition: opacity var(--ka-dur-3), inset var(--ka-dur-3) var(--ka-ease);
}
.ka-ornament:hover::after { opacity: 1; inset: 5px; }

/* ---- ka-grid ----------------------------------------------------------- */
.ka-grid {
  display: grid;
  gap: var(--ka-s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ka-min, 260px)), 1fr));
}
.ka-grid--sm { --ka-min: 190px; }
.ka-grid--lg { --ka-min: 340px; }
.ka-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.ka-grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ka-min, 260px)), 1fr)); }

/* ---- ka-section -------------------------------------------------------- */
.ka-section { margin-top: var(--ka-s-7); }
.ka-section__head { margin-bottom: var(--ka-s-5); }
.ka-section__eyebrow { display: inline-flex; align-items: center; gap: 0.7em; margin: 0 0 var(--ka-s-2); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ka-gold-300); }
.ka-section__eyebrow::before { content: ""; width: 1.8rem; height: 1px; background: var(--ka-grad-hair); }
.ka-section__title { margin: 0; font-family: var(--ka-font-display); font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 600; line-height: 1.1; color: var(--ka-ivory); }
.ka-section__title em { font-style: italic; color: var(--ka-gold-300); }
.ka-section__lede { margin: var(--ka-s-2) 0 0; max-width: 64ch; color: var(--ka-ivory-dim); line-height: 1.6; }

/* ---- ka-stat ----------------------------------------------------------- */
.ka-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--ka-s-4) var(--ka-s-5);
  border-radius: var(--ka-r-md);
  border: 1px solid var(--ka-line-gold);
  background: var(--ka-grad-surface);
  box-shadow: var(--ka-shadow-sm), var(--ka-inset-hair);
  overflow: hidden;
}
.ka-stat::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 2px; background: linear-gradient(180deg, transparent, var(--ka-crimson-400), transparent); }
.ka-stat__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ka-ivory-mute); }
.ka-stat__value {
  font-family: var(--ka-font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ka-ivory);
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 0 28px rgba(208, 42, 58, 0.45);
}
.ka-stat__value small { font-size: 0.45em; margin-left: 0.2em; color: var(--ka-gold-300); font-family: var(--ka-font-ui); font-weight: 700; letter-spacing: 0.05em; }
.ka-stat__delta { font-size: 0.82rem; font-weight: 700; color: var(--ka-ivory-mute); display: inline-flex; gap: 0.35em; align-items: center; }
.ka-stat__delta--up { color: var(--ka-ok); }
.ka-stat__delta--down { color: var(--ka-down); }
.ka-stat__delta--up::before { content: "\25B2"; font-size: 0.7em; }
.ka-stat__delta--down::before { content: "\25BC"; font-size: 0.7em; }
.ka-stat__spark { margin-top: var(--ka-s-2); height: 38px; color: var(--ka-gold-300); }
.ka-stat__spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ka-stat__spark path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---- ka-dial (conic radial gauge; --ka-value 0..100) -------------------- */
.ka-dial {
  --ka-value: 0;
  --ka-p: 0;
  --ka-size: 140px;
  --ka-dial-a: var(--ka-crimson-400);
  --ka-dial-b: var(--ka-gold-300);
  position: relative;
  width: var(--ka-size);
  height: var(--ka-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, var(--ka-night) 0 57%, transparent 58%),
    conic-gradient(from 0deg, var(--ka-dial-a), var(--ka-dial-b) calc(var(--ka-p) * 1%), rgba(244, 235, 218, 0.07) 0);
  box-shadow: 0 0 0 1px var(--ka-line-gold), 0 12px 34px -12px rgba(208, 42, 58, 0.5);
  transition: --ka-p var(--ka-dur-5) var(--ka-ease);
}
.ka-dial::before {
  /* minute ticks */
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -0.4deg, rgba(232, 200, 114, 0.55) 0 0.8deg, transparent 0.8deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 71%, transparent 72%);
  mask: radial-gradient(circle, transparent 66%, #000 67%, #000 71%, transparent 72%);
  opacity: 0.55;
}
.ka-dial::after {
  /* inner hairline */
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  border: 1px solid var(--ka-line-gold);
}
.ka-dial.is-in,
html.no-js .ka-dial,
html:not(.ka-js) .ka-dial { --ka-p: var(--ka-value); }
.ka-dial__center { position: relative; z-index: 1; text-align: center; line-height: 1.1; }
.ka-dial__num { display: block; font-family: var(--ka-font-display); font-size: calc(var(--ka-size) * 0.27); font-weight: 600; color: var(--ka-ivory); font-variant-numeric: lining-nums tabular-nums; }
.ka-dial__num small { font-size: 0.5em; color: var(--ka-gold-300); }
.ka-dial__label { display: block; margin-top: 0.15em; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ka-ivory-mute); }
.ka-dial--sm { --ka-size: 96px; }
.ka-dial--lg { --ka-size: 190px; }
.ka-dial--ok { --ka-dial-a: #3d8a5c; --ka-dial-b: var(--ka-ok); }
.ka-dial--warn { --ka-dial-a: #a87a1c; --ka-dial-b: var(--ka-warn); }
.ka-dial--down { --ka-dial-a: var(--ka-crimson-700); --ka-dial-b: var(--ka-down); }

/* ---- ka-meter ---------------------------------------------------------- */
.ka-meter { --ka-value: 0; --ka-p: 0; display: grid; gap: 0.4rem; }
.ka-meter__head { display: flex; justify-content: space-between; gap: var(--ka-s-3); font-size: 0.82rem; font-weight: 600; color: var(--ka-ivory-dim); }
.ka-meter__head b { color: var(--ka-gold-200); font-variant-numeric: tabular-nums; }
.ka-meter__bar { position: relative; height: 0.6rem; border-radius: var(--ka-r-pill); background: rgba(10, 8, 16, 0.7); border: 1px solid var(--ka-line-gold); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
.ka-meter__fill { display: block; height: 100%; width: calc(var(--ka-p) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--ka-crimson-700), var(--ka-crimson-400) 60%, var(--ka-gold-300)); box-shadow: 0 0 14px rgba(240, 74, 78, 0.5); transition: --ka-p var(--ka-dur-5) var(--ka-ease); }
.ka-meter.is-in, html:not(.ka-js) .ka-meter { --ka-p: var(--ka-value); }
.ka-meter--ok .ka-meter__fill { background: linear-gradient(90deg, #2f7048, var(--ka-ok)); box-shadow: 0 0 12px rgba(127, 197, 154, 0.4); }
.ka-meter--warn .ka-meter__fill { background: linear-gradient(90deg, #8a6416, var(--ka-warn)); box-shadow: 0 0 12px rgba(230, 179, 80, 0.4); }

/* ---- ka-badge / ka-pill / ka-dot / ka-tag / ka-kbd ---------------------- */
.ka-badge,
.ka-pill {
  --_c: var(--ka-gold-300);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.32em 0.85em;
  border-radius: var(--ka-r-pill);
  border: 1px solid color-mix(in srgb, var(--_c) 45%, transparent);
  background: color-mix(in srgb, var(--_c) 13%, transparent);
  color: var(--_c);
  font-family: var(--ka-font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
.ka-pill { text-transform: none; letter-spacing: 0.02em; font-size: 0.82rem; }
.ka-badge--ok, .ka-pill--ok { --_c: var(--ka-ok); }
.ka-badge--warn, .ka-pill--warn { --_c: var(--ka-warn); }
.ka-badge--down, .ka-pill--down { --_c: var(--ka-down); }
.ka-badge--idle, .ka-pill--idle { --_c: var(--ka-idle); }
.ka-badge--info, .ka-pill--info { --_c: var(--ka-info); }
.ka-badge--crimson, .ka-pill--crimson { --_c: var(--ka-crimson-300); }

.ka-dot {
  --_c: var(--ka-idle);
  position: relative;
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  flex: none;
  border-radius: 50%;
  background: var(--_c);
  box-shadow: 0 0 8px var(--_c);
  vertical-align: middle;
}
.ka-dot--ok { --_c: var(--ka-ok); }
.ka-dot--warn { --_c: var(--ka-warn); }
.ka-dot--down { --_c: var(--ka-down); }
.ka-dot--info { --_c: var(--ka-info); }
.ka-dot--idle { --_c: var(--ka-idle); box-shadow: none; }
.ka-dot--pulse::after,
.ka-badge--pulse .ka-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--_c);
  animation: ka-ping 2s var(--ka-ease-soft) infinite;
}

.ka-tag {
  display: inline-block;
  padding: 0.12em 0.6em;
  border-radius: var(--ka-r-xs);
  border: 1px solid var(--ka-line-gold);
  background: rgba(214, 172, 76, 0.08);
  color: var(--ka-gold-200);
  font-size: 0.78rem;
  font-weight: 600;
}

.ka-kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.12em 0.5em;
  text-align: center;
  border: 1px solid var(--ka-line-gold-strong);
  border-bottom-width: 2px;
  border-radius: var(--ka-r-xs);
  background: linear-gradient(180deg, var(--ka-velvet), var(--ka-plum));
  color: var(--ka-gold-100);
  font-family: var(--ka-font-mono);
  font-size: 0.8em;
}

/* ---- ka-btn ------------------------------------------------------------ */
.ka-btn {
  --_bg: var(--ka-grad-crimson);
  --_bd: rgba(255, 169, 163, 0.38);
  --_fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 44px;
  padding: 0.6em 1.35em;
  border: 1px solid var(--_bd);
  border-radius: var(--ka-r-sm);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--ka-font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 8px 22px -10px rgba(208, 42, 58, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
  transition: transform var(--ka-dur-1) var(--ka-ease), box-shadow var(--ka-dur-3) var(--ka-ease), border-color var(--ka-dur-2), filter var(--ka-dur-2), background-color var(--ka-dur-2);
}
.ka-btn::after {
  /* sheen */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.ka-btn:hover { color: var(--_fg); transform: translateY(-2px); border-color: var(--ka-gold-300); box-shadow: var(--ka-glow-crimson), inset 0 1px 0 rgba(255, 255, 255, 0.25); filter: brightness(1.08); }
.ka-btn:hover::after { transform: translateX(120%); transition: transform 0.8s var(--ka-ease); }
.ka-btn:active { transform: translateY(1px) scale(0.98); filter: brightness(0.96); }
.ka-btn[disabled], .ka-btn.is-disabled { opacity: 0.5; pointer-events: none; filter: saturate(0.5); }
.ka-btn > svg, .ka-btn > i { flex: none; }

.ka-btn--ghost { --_bg: rgba(244, 235, 218, 0.04); --_bd: var(--ka-line-gold-strong); --_fg: var(--ka-gold-100); box-shadow: var(--ka-inset-hair); }
.ka-btn--ghost:hover { background: rgba(214, 172, 76, 0.13); box-shadow: var(--ka-glow-gold); }
.ka-btn--gold { --_bg: var(--ka-grad-brass); --_bd: rgba(252, 242, 210, 0.6); --_fg: #2a1a05; box-shadow: 0 8px 22px -10px rgba(214, 172, 76, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.ka-btn--gold:hover { box-shadow: var(--ka-glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.ka-btn--danger { --_bg: rgba(134, 18, 42, 0.4); --_bd: var(--ka-line-crimson); --_fg: #ffc4c0; box-shadow: none; }
.ka-btn--danger:hover { --_bg: var(--ka-crimson-600); --_fg: #fff; }
.ka-btn--sm { min-height: 36px; padding: 0.4em 0.95em; font-size: 0.82rem; }
.ka-btn--lg { min-height: 54px; padding: 0.75em 1.8em; font-size: 1.05rem; }
.ka-btn--block { display: flex; width: 100%; }
.ka-btn--icon { width: 44px; min-width: 44px; padding: 0; }
.ka-btn--icon.ka-btn--sm { width: 36px; min-width: 36px; }
@media (min-width: 768px) { .ka-btn--sm { min-height: 34px; } }

/* ---- ka-divider -------------------------------------------------------- */
.ka-divider {
  display: flex;
  align-items: center;
  gap: var(--ka-s-4);
  margin: var(--ka-s-6) 0;
  color: var(--ka-gold-400);
  font-family: var(--ka-font-display);
  font-size: 1.15rem;
  font-style: italic;
  letter-spacing: 0.2em;
}
.ka-divider::before,
.ka-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ka-gold-500));
}
.ka-divider::after { background: linear-gradient(270deg, transparent, var(--ka-gold-500)); }
.ka-divider > span { text-shadow: 0 0 18px rgba(214, 172, 76, 0.6); }
.ka-divider:empty::before { margin-right: 0; }
.ka-divider--crimson { color: var(--ka-crimson-300); }
.ka-divider--crimson::before { background: linear-gradient(90deg, transparent, var(--ka-crimson-500)); }
.ka-divider--crimson::after { background: linear-gradient(270deg, transparent, var(--ka-crimson-500)); }

/* ---- ka-table (opt-in dense skin; globals already skin .table) ---------- */
.ka-table-wrap { overflow-x: auto; border: 1px solid var(--ka-line-gold); border-radius: var(--ka-r-md); background: var(--ka-grad-surface); box-shadow: var(--ka-shadow-sm); }
.ka-table { width: 100%; border-collapse: collapse; color: var(--ka-ivory-dim); font-size: 0.92rem; }
.ka-table th { padding: 0.85rem 1rem; text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ka-gold-300); background: rgba(214, 172, 76, 0.07); border-bottom: 1px solid var(--ka-line-gold-strong); white-space: nowrap; }
.ka-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--ka-line); vertical-align: middle; }
.ka-table tbody tr { transition: background-color var(--ka-dur-2); }
.ka-table tbody tr:hover { background: rgba(134, 18, 42, 0.2); color: var(--ka-ivory); }
.ka-table tbody tr:last-child td { border-bottom: 0; }
.ka-table td.is-num, .ka-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- ka-timeline (changelog) ------------------------------------------- */
.ka-timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 1.9rem; }
.ka-timeline::before { content: ""; position: absolute; left: 0.55rem; top: 0.4rem; bottom: 0.4rem; width: 1px; background: linear-gradient(180deg, var(--ka-gold-400), var(--ka-crimson-600) 60%, transparent); }
.ka-timeline__item { position: relative; padding-bottom: var(--ka-s-6); }
.ka-timeline__item:last-child { padding-bottom: 0; }
.ka-timeline__item::before { content: ""; position: absolute; left: -1.9rem; top: 0.3rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ka-night); border: 1px solid var(--ka-gold-400); box-shadow: 0 0 0 4px var(--ka-obsidian), 0 0 16px rgba(214, 172, 76, 0.5); }
.ka-timeline__item::after { content: ""; position: absolute; left: calc(-1.9rem + 0.5rem); top: calc(0.3rem + 0.5rem - 0.1rem); width: 0.2rem; height: 0.2rem; border-radius: 50%; background: var(--ka-crimson-400); box-shadow: 0 0 8px var(--ka-crimson-400); }
.ka-timeline__time { margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ka-gold-300); }
.ka-timeline__title { margin: 0 0 0.35rem; font-family: var(--ka-font-display); font-size: 1.4rem; font-weight: 600; color: var(--ka-ivory); }
.ka-timeline__body { margin: 0; color: var(--ka-ivory-dim); line-height: 1.65; max-width: 70ch; }

/* ---- ka-quote ---------------------------------------------------------- */
.ka-quote {
  position: relative;
  margin: 0;
  padding: var(--ka-s-5) var(--ka-s-6);
  border-left: 2px solid var(--ka-crimson-500);
  border-radius: 0 var(--ka-r-md) var(--ka-r-md) 0;
  background: linear-gradient(90deg, rgba(134, 18, 42, 0.22), transparent 80%);
  font-family: var(--ka-font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--ka-ivory);
}
.ka-quote::before { content: "\201C"; position: absolute; left: 0.7rem; top: -0.1rem; font-size: 3.4rem; line-height: 1; color: var(--ka-gold-500); opacity: 0.7; }
.ka-quote footer, .ka-quote cite { display: block; margin-top: var(--ka-s-3); font-family: var(--ka-font-ui); font-size: 0.78rem; font-style: normal; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ka-gold-300); }

/* ---- ka-empty ---------------------------------------------------------- */
.ka-empty { display: grid; justify-items: center; gap: var(--ka-s-3); padding: var(--ka-s-7) var(--ka-s-5); text-align: center; border: 1px dashed var(--ka-line-gold-strong); border-radius: var(--ka-r-lg); background: rgba(23, 18, 31, 0.5); color: var(--ka-ivory-dim); }
.ka-empty__glyph { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-family: var(--ka-font-display); font-size: 1.9rem; color: var(--ka-gold-300); border: 1px solid var(--ka-line-gold-strong); background: radial-gradient(circle, rgba(208, 42, 58, 0.22), transparent 70%), repeating-conic-gradient(from 0deg, rgba(232, 200, 114, 0.25) 0 1deg, transparent 1deg 30deg); box-shadow: inset 0 0 0 6px var(--ka-night); }
.ka-empty__title { margin: 0; font-family: var(--ka-font-display); font-size: 1.6rem; color: var(--ka-ivory); }
.ka-empty__text { margin: 0; max-width: 46ch; line-height: 1.6; }

/* ---- ka-skeleton ------------------------------------------------------- */
.ka-skeleton { position: relative; display: block; min-height: 1em; border-radius: var(--ka-r-sm); background: rgba(244, 235, 218, 0.06); overflow: hidden; }
.ka-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(232, 200, 114, 0.14), transparent); animation: ka-skeleton 1.6s var(--ka-ease-soft) infinite; }
.ka-skeleton--line { height: 0.9rem; margin: 0.5rem 0; }
.ka-skeleton--title { height: 1.8rem; width: 55%; }
.ka-skeleton--block { height: 120px; }
.ka-skeleton--circle { width: 56px; height: 56px; border-radius: 50%; }

/* ---- ka-toast ---------------------------------------------------------- */
.ka-toasts { position: fixed; z-index: var(--ka-z-toast); right: var(--ka-s-4); bottom: var(--ka-s-4); display: grid; gap: var(--ka-s-2); width: min(380px, calc(100vw - 2rem)); pointer-events: none; }
.ka-toast { pointer-events: auto; display: flex; gap: var(--ka-s-3); align-items: flex-start; padding: 0.85rem 1rem; border-radius: var(--ka-r-sm); border: 1px solid var(--ka-line-gold-strong); border-left: 3px solid var(--_c, var(--ka-gold-400)); background: linear-gradient(160deg, #2a2036, #170f20); box-shadow: var(--ka-shadow-lg); color: var(--ka-ivory); animation: ka-toast-in var(--ka-dur-3) var(--ka-ease) both; }
.ka-toast--ok { --_c: var(--ka-ok); }
.ka-toast--warn { --_c: var(--ka-warn); }
.ka-toast--down { --_c: var(--ka-down); }
.ka-toast--info { --_c: var(--ka-info); }
.ka-toast.is-leaving { animation: ka-toast-out var(--ka-dur-2) var(--ka-ease-soft) both; }
.ka-toast__title { display: block; font-weight: 700; }
.ka-toast__text { display: block; font-size: 0.88rem; color: var(--ka-ivory-dim); }

/* ---- ka-clock (decorative ticking dial for headers/empty states) ------- */
.ka-clock { position: relative; width: var(--ka-size, 64px); height: var(--ka-size, 64px); border-radius: 50%; border: 1px solid var(--ka-gold-500); background: radial-gradient(circle, rgba(208, 42, 58, 0.2), transparent 70%), repeating-conic-gradient(from 0deg, rgba(232, 200, 114, 0.7) 0 1deg, transparent 1deg 30deg); box-shadow: inset 0 0 0 5px var(--ka-night), 0 0 22px rgba(214, 172, 76, 0.25); }
.ka-clock::before, .ka-clock::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 2px; background: var(--ka-gold-200); transform-origin: 50% 100%; border-radius: 2px; }
.ka-clock::before { height: 30%; margin-left: -1px; transform: rotate(40deg); }
.ka-clock::after { height: 38%; width: 1px; margin-left: -0.5px; background: var(--ka-crimson-400); animation: ka-tick 60s steps(60, end) infinite; }

/* ---- reveal / stagger / utilities -------------------------------------- */
html.ka-js .ka-reveal:not(.is-in),
html.ka-js .ka-stagger:not(.is-in) > * {
  opacity: 0;
  transform: translateY(20px);
}
.ka-reveal,
.ka-stagger > * {
  transition: opacity var(--ka-dur-4) var(--ka-ease), transform var(--ka-dur-4) var(--ka-ease);
  transition-delay: var(--ka-delay, 0ms);
}
.ka-reveal--left:not(.is-in) { transform: translateX(-26px) !important; }
.ka-reveal--scale:not(.is-in) { transform: scale(0.94) !important; }
.ka-stagger > *:nth-child(1) { --ka-delay: 0ms; }
.ka-stagger > *:nth-child(2) { --ka-delay: 70ms; }
.ka-stagger > *:nth-child(3) { --ka-delay: 140ms; }
.ka-stagger > *:nth-child(4) { --ka-delay: 210ms; }
.ka-stagger > *:nth-child(5) { --ka-delay: 280ms; }
.ka-stagger > *:nth-child(6) { --ka-delay: 350ms; }
.ka-stagger > *:nth-child(7) { --ka-delay: 420ms; }
.ka-stagger > *:nth-child(8) { --ka-delay: 490ms; }
.ka-stagger > *:nth-child(n + 9) { --ka-delay: 560ms; }

.ka-float { animation: ka-float 6s var(--ka-ease-soft) infinite; }
.ka-glow-pulse { animation: ka-glow-pulse 3.4s var(--ka-ease-soft) infinite; }
.ka-spin-slow { animation: ka-spin-slow 90s linear infinite; }
.ka-tick { animation: ka-tick 60s steps(60, end) infinite; transform-origin: 50% 50%; }
.ka-shimmer {
  background: var(--ka-grad-brass-text);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ka-shimmer 8s linear infinite;
}

/* Mobile */
@media (max-width: 575.98px) {
  .ka-page { padding-top: var(--ka-s-5); }
  .ka-card { padding: var(--ka-s-4); }
  .ka-hero { border-radius: var(--ka-r-md); }
  .ka-hero__actions .ka-btn { flex: 1 1 100%; }
  .ka-quote { padding: var(--ka-s-4) var(--ka-s-4) var(--ka-s-4) var(--ka-s-5); }
  .ka-toasts { left: var(--ka-s-3); right: var(--ka-s-3); bottom: var(--ka-s-3); width: auto; }
}

/* Cards never tilt on touch / coarse pointers. */
@media (hover: none), (pointer: coarse) {
  .ka-card:hover, .ka-card:focus-within { transform: translateY(-2px); }
}

/* ========================================================================== *
 * 5. KEYFRAMES
 * ========================================================================== */

@keyframes ka-page-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ka-spin-slow { to { transform: rotate(360deg); } }
@keyframes ka-tick { to { transform: rotate(360deg); } }
@keyframes ka-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ka-glow-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(240, 74, 78, 0.3), 0 0 18px -2px rgba(208, 42, 58, 0.35); } 50% { box-shadow: 0 0 0 1px rgba(240, 74, 78, 0.6), 0 0 38px 2px rgba(208, 42, 58, 0.65); } }
@keyframes ka-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
@keyframes ka-sweep { to { --ka-sweep: 360deg; } }
@keyframes ka-ping { 0% { transform: scale(1); opacity: 0.9; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes ka-skeleton { to { transform: translateX(100%); } }
@keyframes ka-toast-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes ka-toast-out { to { opacity: 0; transform: translateX(24px); } }

/* ========================================================================== *
 * 6. REDUCED MOTION / MOTION OFF
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.kurumi::after,
  .ka-embers,
  .ka-hero::after { animation: none !important; }
  body.kurumi::after { display: none; }
  .ka-embers { display: none !important; }
  body.kurumi #kurumi-content,
  .ka-float, .ka-glow-pulse, .ka-spin-slow, .ka-tick, .ka-shimmer,
  .ka-hero__title em, body.kurumi .kurumi-page-head h1,
  .ka-dot--pulse::after, .ka-badge--pulse .ka-dot::after,
  .ka-skeleton::after, .ka-card:hover::before, .ka-clock::after,
  .ka-toast { animation: none !important; }
  .ka-reveal, .ka-stagger > *, html.ka-js .ka-reveal:not(.is-in), html.ka-js .ka-stagger:not(.is-in) > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ka-card, .ka-card:hover, .ka-card:focus-within, .ka-btn, .ka-btn:hover, body.kurumi .btn, body.kurumi .btn:hover { transform: none !important; transition: none !important; }
  .ka-btn::after { display: none; }
  .ka-dial, .ka-meter { --ka-p: var(--ka-value) !important; transition: none !important; }
  .ka-meter__fill, body.kurumi .progress-bar { transition: none !important; }
  .ka-card:hover::before { opacity: 0; }
}

html[data-ka-motion="off"] { scroll-behavior: auto; }
html[data-ka-motion="off"] body.kurumi::after { display: none; }
html[data-ka-motion="off"] .ka-embers { display: none !important; }
html[data-ka-motion="off"] body.kurumi #kurumi-content,
html[data-ka-motion="off"] .ka-float,
html[data-ka-motion="off"] .ka-glow-pulse,
html[data-ka-motion="off"] .ka-spin-slow,
html[data-ka-motion="off"] .ka-tick,
html[data-ka-motion="off"] .ka-shimmer,
html[data-ka-motion="off"] .ka-hero__title em,
html[data-ka-motion="off"] .ka-hero::after,
html[data-ka-motion="off"] body.kurumi .kurumi-page-head h1,
html[data-ka-motion="off"] .ka-dot--pulse::after,
html[data-ka-motion="off"] .ka-badge--pulse .ka-dot::after,
html[data-ka-motion="off"] .ka-skeleton::after,
html[data-ka-motion="off"] .ka-clock::after,
html[data-ka-motion="off"] .ka-card:hover::before,
html[data-ka-motion="off"] .ka-toast { animation: none !important; }
html[data-ka-motion="off"] .ka-reveal,
html[data-ka-motion="off"] .ka-stagger > *,
html[data-ka-motion="off"] html.ka-js .ka-reveal:not(.is-in),
html[data-ka-motion="off"].ka-js .ka-reveal:not(.is-in),
html[data-ka-motion="off"].ka-js .ka-stagger:not(.is-in) > * { opacity: 1 !important; transform: none !important; transition: none !important; }
html[data-ka-motion="off"] .ka-card,
html[data-ka-motion="off"] .ka-card:hover,
html[data-ka-motion="off"] .ka-btn,
html[data-ka-motion="off"] .ka-btn:hover,
html[data-ka-motion="off"] body.kurumi .btn { transform: none !important; transition: none !important; }
html[data-ka-motion="off"] .ka-btn::after { display: none; }
html[data-ka-motion="off"] .ka-dial,
html[data-ka-motion="off"] .ka-meter { --ka-p: var(--ka-value) !important; transition: none !important; }
html[data-ka-motion="off"] .ka-meter__fill { transition: none !important; }

/* Lining numerals in display type: Cormorant's default zero is old-style and reads
   as a lowercase "o" ("o Integration Providers"). */
body.kurumi h1, body.kurumi h2, body.kurumi h3, body.kurumi h4,
body.kurumi .ka-display, body.kurumi .ka-num, body.kurumi .ka-stat__value,
body.kurumi .ka-hero__title, body.kurumi .ka-section__title {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Form controls may never be wider than the card they sit in (server settings had
   textareas ~1000px wide that ran past their container). */
body.kurumi textarea,
body.kurumi select,
body.kurumi .form-control,
body.kurumi input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  max-width: 100%;
  box-sizing: border-box;
}

/* Argon paints .nav.nav-pills near-white (#f8f9fa); theme the pill bar (Cogs / Downloader / Slash tabs). */
body.kurumi .nav.nav-pills {
  background: linear-gradient(160deg, rgba(31, 24, 41, 0.92), rgba(16, 13, 23, 0.92));
  border: 1px solid var(--ka-line-gold, rgba(214, 172, 76, 0.25));
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  padding: 0.3rem;
}

body.kurumi .nav.nav-pills .nav-link:not(.active) {
  color: var(--ka-gold-300, #e8c872);
  background: transparent;
}

body.kurumi .nav.nav-pills .nav-link:not(.active):hover,
body.kurumi .nav.nav-pills .nav-link:not(.active):focus-visible {
  color: var(--ka-gold-100, #fcf2d2);
  background: rgba(214, 172, 76, 0.12);
}

body.kurumi .kurumi-repo-agree {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--ka-line-gold, rgba(214, 172, 76, 0.25));
  border-left: 3px solid var(--ka-gold-300, #e8c872);
  border-radius: var(--ka-r-sm, 10px);
  background: rgba(214, 172, 76, 0.06);
  color: var(--ka-ivory, #f4ebda);
}