/* ==========================================================================
   THEME SKINS
   Every theme first re-points the shared variables (so ALL text, borders and
   panels recolour correctly everywhere — launchpad, gate and admin), then
   gives the launchpad cards a genuinely different shape and layout.
   ========================================================================== */

/* ---------- 1. VARIABLE OVERRIDES (fixes text colour globally) ---------- */
body[data-theme="glass"] {
  --rk-text:#f4f7ff; --rk-muted:#c3cbe4; --rk-line:rgba(255,255,255,.24);
  --rk-panel:rgba(255,255,255,.08); --rk-panel-2:rgba(255,255,255,.13);
  --rk-metal:rgba(255,255,255,.09); --rk-metal-hi:rgba(255,255,255,.15);
  --rk-green:#5ef2c0; --rk-amber:#ffd479; --rk-red:#ff7a95; --rk-blue:#7cc9ff;
}
body[data-theme="google"] {
  --rk-text:#202124; --rk-muted:#5f6368; --rk-line:#dadce0;
  --rk-panel:#ffffff; --rk-panel-2:#ffffff; --rk-metal:#ffffff; --rk-metal-hi:#ffffff;
  --rk-green:#1e8e3e; --rk-amber:#f9ab00; --rk-red:#d93025; --rk-blue:#1a73e8;
}
body[data-theme="terminal"] {
  --rk-text:#7dffa4; --rk-muted:#2ea34d; --rk-line:#1c5f2c;
  --rk-panel:#050d05; --rk-panel-2:#081408; --rk-metal:#040a04; --rk-metal-hi:#0a1a0a;
  --rk-green:#48ff7a; --rk-amber:#c8ff48; --rk-red:#ff5f5f; --rk-blue:#48ffd0;
}
body[data-theme="neon"] {
  --rk-text:#f3e9ff; --rk-muted:#b98fff; --rk-line:#ff2e97;
  --rk-panel:rgba(16,3,32,.86); --rk-panel-2:rgba(26,6,48,.86);
  --rk-metal:rgba(16,3,32,.7); --rk-metal-hi:rgba(30,8,54,.8);
  --rk-green:#00fff2; --rk-amber:#ffe259; --rk-red:#ff2e97; --rk-blue:#00fff2;
}
body[data-theme="paper"] {
  --rk-text:#1f1b16; --rk-muted:#6f665c; --rk-line:#e0d6c6;
  --rk-panel:#fffdf9; --rk-panel-2:#fffdf9; --rk-metal:#f6efe4; --rk-metal-hi:#fbf7f0;
  --rk-green:#3f7a4a; --rk-amber:#a1622f; --rk-red:#a5341f; --rk-blue:#3c6389;
}
body[data-theme="season-summer"] {
  --rk-text:#4a2c10; --rk-muted:#8a5a24; --rk-line:rgba(196,120,42,.3);
  --rk-panel:rgba(255,255,255,.66); --rk-panel-2:rgba(255,255,255,.8);
  --rk-metal:rgba(255,255,255,.5); --rk-metal-hi:rgba(255,255,255,.72);
  --rk-green:#3f7a4a; --rk-amber:#c4782a; --rk-red:#b3401f; --rk-blue:#2f6f9e;
}
body[data-theme="season-monsoon"] {
  --rk-text:#eef5fb; --rk-muted:#b8cfe0; --rk-line:rgba(190,220,240,.28);
  --rk-panel:rgba(255,255,255,.1); --rk-panel-2:rgba(255,255,255,.15);
  --rk-metal:rgba(255,255,255,.08); --rk-metal-hi:rgba(255,255,255,.14);
  --rk-green:#7ee8b0; --rk-amber:#ffd479; --rk-red:#ff8f9e; --rk-blue:#8fd3ff;
}
body[data-theme="season-autumn"] {
  --rk-text:#4a2418; --rk-muted:#8a4a2c; --rk-line:rgba(190,110,70,.3);
  --rk-panel:rgba(255,255,255,.7); --rk-panel-2:rgba(255,255,255,.84);
  --rk-metal:rgba(255,255,255,.54); --rk-metal-hi:rgba(255,255,255,.76);
  --rk-green:#3f7a4a; --rk-amber:#c4692a; --rk-red:#a5341f; --rk-blue:#2f6f9e;
}
body[data-theme="season-winter"] {
  --rk-text:#16283a; --rk-muted:#4a6b85; --rk-line:rgba(120,160,190,.32);
  --rk-panel:rgba(255,255,255,.8); --rk-panel-2:rgba(255,255,255,.9);
  --rk-metal:rgba(255,255,255,.66); --rk-metal-hi:rgba(255,255,255,.86);
  --rk-green:#2f7a5a; --rk-amber:#9a6b2a; --rk-red:#b3352f; --rk-blue:#2f6f9e;
}
body[data-theme="day"] {
  --rk-text:#17293b; --rk-muted:#5a7a95; --rk-line:#d8e6f2;
  --rk-panel:#ffffff; --rk-panel-2:#ffffff; --rk-metal:#f4f9ff; --rk-metal-hi:#ffffff;
  --rk-green:#1e8e3e; --rk-amber:#c07c00; --rk-red:#c0392b; --rk-blue:#2f80ed;
}
body[data-theme="night"] {
  --rk-text:#e9eefa; --rk-muted:#9bb0cc; --rk-line:rgba(150,175,220,.2);
  --rk-panel:rgba(255,255,255,.05); --rk-panel-2:rgba(255,255,255,.08);
  --rk-metal:rgba(255,255,255,.04); --rk-metal-hi:rgba(255,255,255,.07);
  --rk-green:#5ee08a; --rk-amber:#ffcf6b; --rk-red:#ff8f8f; --rk-blue:#7ab8ff;
}
/* text follows the variable everywhere */
body[data-theme] { color: var(--rk-text); }
body[data-theme] .rk-name, body[data-theme] h1, body[data-theme] h2, body[data-theme] h3,
body[data-theme] .rk-blade h3, body[data-theme] .adm-card h2, body[data-theme] .rkp-telemetry strong,
body[data-theme] .theme-card b, body[data-theme] .adm-item b { color: var(--rk-text); }
body[data-theme] .rk-tag, body[data-theme] .rkp-cab-title, body[data-theme] .rk-label,
body[data-theme] .rk-blade p, body[data-theme] .rkp-telemetry, body[data-theme] .hint,
body[data-theme] .adm-field label, body[data-theme] .theme-card small,
body[data-theme] .adm-item small, body[data-theme] .boot-log { color: var(--rk-muted); }
body[data-theme] .adm-field input, body[data-theme] .adm-field select { color: var(--rk-text); }
body[data-theme]:not([data-theme="server"]) .adm-field input,
body[data-theme]:not([data-theme="server"]) .adm-field select,
body[data-theme]:not([data-theme="server"]) .icon-pick,
body[data-theme]:not([data-theme="server"]) .theme-card,
body[data-theme]:not([data-theme="server"]) .adm-item {
  background: color-mix(in srgb, var(--rk-text) 6%, transparent);
  border-color: var(--rk-line);
}
body[data-theme]:not([data-theme="server"]) .icon-pick button { color: var(--rk-text); }

/* strip the rack furniture outside the server theme */
body[data-theme]:not([data-theme="server"])::before,
body[data-theme]:not([data-theme="server"])::after { display: none !important; }
body[data-theme]:not([data-theme="server"]) .rkp-cab::before,
body[data-theme]:not([data-theme="server"]) .rkp-cab::after,
body[data-theme]:not([data-theme="server"]) .rk-rack::before,
body[data-theme]:not([data-theme="server"]) .rk-rack::after { display: none; }
body[data-theme]:not([data-theme="server"]) .rk-hw { display: none !important; }  /* disks/fans/switch on gate */
body[data-theme]:not([data-theme="server"]) .rk-led { animation: none !important; }
body[data-theme]:not([data-theme="server"]) .rkp-cab {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 4px !important;
}
body[data-theme]:not([data-theme="server"]) .rkp-top,
body[data-theme]:not([data-theme="server"]) .rkp-telemetry,
body[data-theme]:not([data-theme="server"]) .rkp-ticker,
body[data-theme]:not([data-theme="server"]) .rk-rack,
body[data-theme]:not([data-theme="server"]) .rk-unit,
body[data-theme]:not([data-theme="server"]) .adm-card {
  background: var(--rk-panel) !important; border: 1px solid var(--rk-line) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.14) !important;
}
body[data-theme]:not([data-theme="server"]) .rk-console {
  background: color-mix(in srgb, var(--rk-text) 5%, transparent) !important;
  border: 1px solid var(--rk-line) !important; box-shadow: none !important;
}
body[data-theme]:not([data-theme="server"]) .gate-form input[type="password"] {
  background: color-mix(in srgb, var(--rk-text) 6%, transparent) !important;
  color: var(--rk-text) !important; border: 1px solid var(--rk-line) !important; letter-spacing: .12em !important;
}
body[data-theme]:not([data-theme="server"]) .gate-form .btn {
  background: var(--rk-green) !important; color: #fff !important; border: 0 !important;
}
body[data-theme]:not([data-theme="server"]) .rkp-logout,
body[data-theme]:not([data-theme="server"]) .adm-btn {
  color: var(--rk-text); border-color: var(--rk-line);
  background: color-mix(in srgb, var(--rk-text) 7%, transparent);
}
body[data-theme]:not([data-theme="server"]) .adm-btn:not(.ghost):not(.danger) { background: var(--rk-green); color: #fff; border-color: transparent; }
body[data-theme]:not([data-theme="server"]) .adm-btn.danger,
body[data-theme]:not([data-theme="server"]) .rkp-logout { color: var(--rk-red); border-color: color-mix(in srgb, var(--rk-red) 45%, transparent); }

/* ---------- 2. PER-THEME BACKGROUNDS + CARD DESIGNS ---------- */

/* ============ GLASS: floating frosted pills, icon in a soft orb ========== */
body[data-theme="glass"] {
  background:
    radial-gradient(circle at 12% 18%, #7c5cff55, transparent 45%),
    radial-gradient(circle at 85% 25%, #ff5c8a4d, transparent 45%),
    radial-gradient(circle at 50% 90%, #22d3ee4d, transparent 45%),
    linear-gradient(150deg, #1b1a3a, #0f172a);
  font-family: 'Inter', system-ui, sans-serif;
}
body[data-theme="glass"] .rk-blade {
  background: rgba(255,255,255,.1) !important; border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important; backdrop-filter: blur(18px) saturate(150%);
  padding: 12px 22px 12px 12px !important; box-shadow: 0 8px 32px rgba(0,0,0,.25) !important;
}
body[data-theme="glass"] .rk-blade:hover { transform: translateY(-5px) scale(1.02); background: rgba(255,255,255,.18) !important; }
body[data-theme="glass"] .bl-screen {
  border-radius: 50% !important; width: 56px !important; height: 56px !important;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(255,255,255,.1)) !important;
  border: 1px solid rgba(255,255,255,.35) !important; box-shadow: 0 4px 18px rgba(0,0,0,.2) !important;
}
body[data-theme="glass"] .rkp-top, body[data-theme="glass"] .rkp-telemetry,
body[data-theme="glass"] .rkp-ticker, body[data-theme="glass"] .adm-card,
body[data-theme="glass"] .rk-rack, body[data-theme="glass"] .rk-unit {
  backdrop-filter: blur(18px) saturate(140%); border-radius: 22px !important;
}

/* ============ GOOGLE: vertical Material cards, circular icon on top ====== */
body[data-theme="google"] { background: #f8f9fa; font-family: 'Inter','Roboto',system-ui,sans-serif; }
body[data-theme="google"] .rkp-top { border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid #dadce0 !important; box-shadow: none !important; }
body[data-theme="google"] .rk-blade {
  flex-direction: column !important; text-align: center; justify-content: flex-start; gap: 10px;
  background: #fff !important; border: 1px solid #dadce0 !important; border-left: 1px solid #dadce0 !important;
  border-radius: 28px !important; padding: 22px 16px !important; box-shadow: none !important;
}
body[data-theme="google"] .rk-blade:hover { transform: none; box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 6px 12px rgba(60,64,67,.15) !important; }
body[data-theme="google"] .bl-screen {
  width: 66px !important; height: 66px !important; border-radius: 50% !important;
  background: color-mix(in srgb, var(--bl-c, #1a73e8) 16%, #fff) !important; border: 0 !important; box-shadow: none !important;
}
body[data-theme="google"] .rk-blade p { white-space: normal !important; }
body[data-theme="google"] .bl-io { flex-direction: row !important; align-items: center; }
body[data-theme="google"] .rkp-ticker { background: #fff; border-top: 1px solid #dadce0; }

/* ============ TERMINAL: bare log rows, no boxes, ASCII markers =========== */
body[data-theme="terminal"] {
  background: #020602; font-family: 'JetBrains Mono', monospace;
}
body[data-theme="terminal"]::before {
  display: block !important; content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(72,255,122,.05) 0 1px, transparent 1px 3px);
}
body[data-theme="terminal"] .rk-blade {
  background: transparent !important; border: 0 !important; border-bottom: 1px dashed #1c5f2c !important;
  border-radius: 0 !important; padding: 9px 4px !important; box-shadow: none !important; gap: 10px;
}
body[data-theme="terminal"] .rk-blade:hover { background: rgba(72,255,122,.07) !important; transform: none; padding-left: 12px !important; }
body[data-theme="terminal"] .bl-screen {
  width: 30px !important; height: 30px !important; background: transparent !important;
  border: 0 !important; box-shadow: none !important; font-size: 1rem !important;
  filter: grayscale(1) sepia(1) hue-rotate(75deg) saturate(4) brightness(1.2);
}
body[data-theme="terminal"] .rk-blade h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
body[data-theme="terminal"] .rk-blade h3::before { content: "root@haddu:~$ "; color: var(--rk-muted); font-weight: 400; text-transform: none; }
body[data-theme="terminal"] .rkp-cab-title::before { content: "── "; }
body[data-theme="terminal"] .rkp-top, body[data-theme="terminal"] .rkp-telemetry,
body[data-theme="terminal"] .rkp-ticker, body[data-theme="terminal"] .adm-card,
body[data-theme="terminal"] .rk-rack, body[data-theme="terminal"] .rk-unit { border-radius: 2px !important; }

/* ============ NEON: clipped angular slabs with glow edges =============== */
body[data-theme="neon"] {
  background:
    linear-gradient(rgba(255,0,128,.07) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgba(0,255,255,.07) 1px, transparent 1px) 0 0 / 40px 100%,
    #06010f;
  font-family: 'JetBrains Mono', monospace;
}
body[data-theme="neon"] .rk-blade {
  background: rgba(16,3,32,.85) !important; border: 1px solid var(--bl-c, #00fff2) !important;
  border-radius: 0 !important; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: 0 0 16px color-mix(in srgb, var(--bl-c,#00fff2) 35%, transparent) !important; padding: 14px 18px !important;
}
body[data-theme="neon"] .rk-blade:hover { transform: translateX(6px); box-shadow: 0 0 30px color-mix(in srgb, var(--bl-c,#00fff2) 60%, transparent) !important; }
body[data-theme="neon"] .bl-screen {
  background: #0d0220 !important; border: 1px solid var(--bl-c, #00fff2) !important; border-radius: 0 !important;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  width: 56px !important; height: 56px !important; box-shadow: none !important;
}
body[data-theme="neon"] .rk-blade h3 { text-transform: uppercase; letter-spacing: .1em; text-shadow: 0 0 10px currentColor; }
body[data-theme="neon"] .rkp-cab-title { text-shadow: 0 0 10px currentColor; }

/* ============ PAPER: editorial rows, drop-cap icon, rules not boxes ===== */
body[data-theme="paper"] { background: #fbf7f0; font-family: 'Inter', Georgia, serif; }
body[data-theme="paper"] .rk-blade {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid #e0d6c6 !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 14px 4px !important; align-items: flex-start;
}
body[data-theme="paper"] .rk-blade:hover { transform: none; background: #fffdf9 !important; box-shadow: 0 6px 18px rgba(31,27,22,.07) !important; }
body[data-theme="paper"] .bl-screen {
  width: 46px !important; height: 46px !important; border-radius: 50% !important;
  background: transparent !important; border: 2px solid var(--bl-c, #a1622f) !important; box-shadow: none !important;
}
body[data-theme="paper"] .rk-blade h3 { font-family: 'Sora', Georgia, serif; font-size: 1.12rem; }
body[data-theme="paper"] .rk-blade p { font-style: italic; white-space: normal !important; }
body[data-theme="paper"] .rkp-cab-title { font-size: .72rem; letter-spacing: .22em; }
body[data-theme="paper"] .rkp-top { border-radius: 0 !important; border: 0 !important; border-bottom: 3px double var(--rk-text) !important; }

/* ============ SEASONS: organic rounded tiles with watermark icon ======== */
body[data-theme^="season-"] .rk-blade {
  border-radius: 26px 26px 26px 6px !important; border: 1px solid var(--rk-line) !important;
  border-left-width: 1px !important; background: var(--rk-panel) !important; padding: 16px 18px !important;
  position: relative; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.08) !important;
}
body[data-theme^="season-"] .rk-blade::after {
  content: ""; position: absolute; right: -18px; bottom: -22px; width: 96px; height: 96px; border-radius: 50%;
  background: color-mix(in srgb, var(--bl-c, #888) 18%, transparent); pointer-events: none;
}
body[data-theme^="season-"] .rk-blade:hover { transform: translateY(-4px); }
body[data-theme^="season-"] .bl-screen {
  width: 58px !important; height: 58px !important; border-radius: 20px 20px 20px 6px !important;
  background: color-mix(in srgb, var(--bl-c, #888) 22%, transparent) !important; border: 0 !important; box-shadow: none !important;
}
body[data-theme="season-summer"] { background: linear-gradient(170deg,#fff3d4,#ffd9a0 45%,#ffbe76); font-family:'Inter',sans-serif; }
body[data-theme="season-monsoon"] {
  background: repeating-linear-gradient(100deg, rgba(255,255,255,.09) 0 1px, transparent 1px 9px),
              linear-gradient(180deg,#46617d,#2f4256 60%,#22303f);
  font-family:'Inter',sans-serif;
}
body[data-theme="season-monsoon"] .rk-blade { backdrop-filter: blur(10px); }
body[data-theme="season-autumn"] { background: linear-gradient(165deg,#fff1e0,#ffd9b8 50%,#e8a87c); font-family:'Inter',sans-serif; }
body[data-theme="season-winter"] { background: linear-gradient(175deg,#f2f8fc,#dbe9f4 55%,#c3d7e8); font-family:'Inter',sans-serif; }

/* ============ DAY / NIGHT: soft split cards, icon badge top-left ======== */
body[data-theme="day"]   { background: linear-gradient(180deg,#eaf4ff,#f7fbff 60%,#fff); font-family:'Inter',sans-serif; }
body[data-theme="night"] { background: linear-gradient(180deg,#0b1020,#131a2e 60%,#0a0f1c); font-family:'Inter',sans-serif; }
body[data-theme="day"] .rk-blade, body[data-theme="night"] .rk-blade {
  flex-direction: column !important; align-items: flex-start; gap: 12px;
  border-radius: 20px !important; border-left-width: 1px !important;
  padding: 18px !important; background: var(--rk-panel) !important; border: 1px solid var(--rk-line) !important;
  position: relative;
}
body[data-theme="day"] .rk-blade::before, body[data-theme="night"] .rk-blade::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--bl-c, #888);
}
body[data-theme="day"] .bl-screen, body[data-theme="night"] .bl-screen {
  width: 50px !important; height: 50px !important; border-radius: 15px !important;
  background: color-mix(in srgb, var(--bl-c,#888) 18%, transparent) !important; border: 0 !important; box-shadow: none !important;
}
body[data-theme="day"] .rk-blade p, body[data-theme="night"] .rk-blade p { white-space: normal !important; }
body[data-theme="day"] .rk-blade:hover, body[data-theme="night"] .rk-blade:hover { transform: translateY(-4px); }
body[data-theme="night"] .rk-blade { backdrop-filter: blur(8px); }

/* ==========================================================================
   ALIGNMENT PASS — keeps text and badges tidy in every card layout
   ========================================================================== */
body[data-theme] .rk-blade { position: relative; align-items: center; }
body[data-theme] .rk-blade .bl-body { min-width: 0; }
body[data-theme] .rk-blade h3 { overflow-wrap: anywhere; }
/* column layouts: float the status LED to the corner so it can't shove text */
body[data-theme="google"] .rk-blade,
body[data-theme="day"] .rk-blade,
body[data-theme="night"] .rk-blade,
body[data-theme="retro"] .rk-blade { align-items: flex-start; }
body[data-theme="google"] .rk-blade { align-items: center; }
body[data-theme="google"] .bl-io,
body[data-theme="day"] .bl-io,
body[data-theme="night"] .bl-io,
body[data-theme="aurora"] .bl-io,
body[data-theme="retro"] .bl-io,
body[data-theme^="season-"] .bl-io {
  position: absolute; top: 12px; right: 14px; flex-direction: row; gap: 6px; z-index: 2;
}
body[data-theme="google"] .rk-blade .bl-body { width: 100%; text-align: center; }
body[data-theme="paper"] .rk-blade { align-items: flex-start; }
body[data-theme="paper"] .bl-io { margin-top: 6px; }
body[data-theme="terminal"] .rk-blade { align-items: center; }
body[data-theme] .rk-blade p { line-height: 1.45; }
body[data-theme]:not([data-theme="server"]) .rk-blade p { white-space: normal; }
body[data-theme] .rkp-telemetry { align-items: center; row-gap: 6px; }
body[data-theme] .adm-item { align-items: center; flex-wrap: wrap; row-gap: 8px; }
body[data-theme] .adm-item .tx { flex: 1 1 160px; }

/* ==========================================================================
   ANIMATIONS (all respect prefers-reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* staggered entrance for cards */
  .rk-blade { animation: bladeIn .45s cubic-bezier(.2,.8,.3,1) backwards; }
  .rkp-blades .rk-blade:nth-child(1) { animation-delay: .02s }
  .rkp-blades .rk-blade:nth-child(2) { animation-delay: .07s }
  .rkp-blades .rk-blade:nth-child(3) { animation-delay: .12s }
  .rkp-blades .rk-blade:nth-child(4) { animation-delay: .17s }
  .rkp-blades .rk-blade:nth-child(n+5) { animation-delay: .22s }
  @keyframes bladeIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
  .rkp-cab { animation: cabIn .5s ease backwards; }
  @keyframes cabIn { from { opacity: 0; transform: translateY(8px); } }

  /* icon reacts on hover in every theme */
  .rk-blade .bl-screen { transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s; }
  .rk-blade:hover .bl-screen { transform: scale(1.12) rotate(-4deg); }

  /* glass: slow drifting colour wash + orb shimmer */
  body[data-theme="glass"] { background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%; animation: glassDrift 24s ease-in-out infinite alternate; }
  @keyframes glassDrift { to { background-position: 20% 10%, -15% 20%, 10% -10%, 0 0; } }
  body[data-theme="glass"] .bl-screen { animation: orbFloat 5s ease-in-out infinite; }
  @keyframes orbFloat { 50% { transform: translateY(-4px); } }

  /* terminal: scanline sweep + caret */
  body[data-theme="terminal"]::after {
    display: block !important; content: ""; position: fixed; left: 0; right: 0; height: 90px; z-index: 998;
    background: linear-gradient(180deg, transparent, rgba(72,255,122,.07), transparent); pointer-events: none;
    animation: sweep 6s linear infinite;
  }
  @keyframes sweep { from { top: -90px } to { top: 100% } }

  /* neon: pulsing edges */
  body[data-theme="neon"] .rk-blade { animation: bladeIn .45s backwards, neonPulse 3.4s ease-in-out infinite; }
  @keyframes neonPulse { 50% { box-shadow: 0 0 26px color-mix(in srgb, var(--bl-c,#00fff2) 55%, transparent) !important; } }

  /* monsoon: falling rain */
  body[data-theme="season-monsoon"] { background-attachment: fixed; animation: rainFall 1.4s linear infinite; }
  @keyframes rainFall { to { background-position: -40px 120px, 0 0; } }

  /* summer: heat haze on the watermark */
  body[data-theme="season-summer"] .rk-blade::after { animation: haze 7s ease-in-out infinite; }
  @keyframes haze { 50% { transform: scale(1.15) translate(-6px,-4px); opacity: .8; } }

  /* winter: gentle drift */
  body[data-theme="season-winter"] .bl-screen { animation: orbFloat 6s ease-in-out infinite; }
}

/* ==========================================================================
   NEW THEME 1 — BLUEPRINT (technical drawing)
   ========================================================================== */
body[data-theme="blueprint"] {
  --rk-text:#dbeeff; --rk-muted:#7fb3d9; --rk-line:rgba(125,200,255,.42);
  --rk-panel:rgba(10,40,70,.55); --rk-panel-2:rgba(14,52,88,.6);
  --rk-metal:rgba(8,34,60,.6); --rk-metal-hi:rgba(12,46,78,.6);
  --rk-green:#5ad1ff; --rk-amber:#ffd479; --rk-red:#ff8a8a; --rk-blue:#5ad1ff;
  background:
    linear-gradient(rgba(125,200,255,.13) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(125,200,255,.13) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(rgba(125,200,255,.06) 1px, transparent 1px) 0 0/140px 140px,
    linear-gradient(90deg, rgba(125,200,255,.06) 1px, transparent 1px) 0 0/140px 140px,
    #072240;
  font-family: 'JetBrains Mono', monospace;
}
body[data-theme="blueprint"] .rk-blade {
  background: rgba(10,40,70,.5) !important; border: 1px solid var(--rk-line) !important;
  border-left: 1px solid var(--rk-line) !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 16px !important;
}
body[data-theme="blueprint"] .rk-blade::before {
  content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(125,200,255,.3); pointer-events: none;
}
body[data-theme="blueprint"] .rk-blade:hover { background: rgba(20,64,104,.65) !important; transform: none; box-shadow: 0 0 0 1px var(--rk-green) !important; }
body[data-theme="blueprint"] .bl-screen {
  background: transparent !important; border: 1px solid var(--rk-line) !important; border-radius: 0 !important;
  box-shadow: none !important; filter: grayscale(1) sepia(1) hue-rotate(165deg) saturate(3) brightness(1.3);
}
body[data-theme="blueprint"] .rk-blade h3 { text-transform: uppercase; letter-spacing: .1em; font-size: .92rem; }
body[data-theme="blueprint"] .rkp-cab-title::before { content: "◤ "; }

/* ==========================================================================
   NEW THEME 2 — BRUTALIST MONO
   ========================================================================== */
body[data-theme="brutal"] {
  --rk-text:#000000; --rk-muted:#444444; --rk-line:#000000;
  --rk-panel:#ffffff; --rk-panel-2:#ffffff; --rk-metal:#ffffff; --rk-metal-hi:#f2f2f2;
  --rk-green:#000000; --rk-amber:#000000; --rk-red:#e0001b; --rk-blue:#000000;
  background: #fdfdfb; font-family: 'JetBrains Mono', monospace;
}
body[data-theme="brutal"] .rkp-top, body[data-theme="brutal"] .rkp-telemetry,
body[data-theme="brutal"] .adm-card, body[data-theme="brutal"] .rk-rack,
body[data-theme="brutal"] .rk-unit, body[data-theme="brutal"] .rkp-ticker {
  border: 3px solid #000 !important; border-radius: 0 !important; box-shadow: 6px 6px 0 #000 !important;
  background: #fff !important;
}
body[data-theme="brutal"] .rk-blade {
  background: #fff !important; border: 3px solid #000 !important; border-left: 3px solid #000 !important;
  border-radius: 0 !important; box-shadow: 6px 6px 0 var(--bl-c, #000) !important; padding: 16px !important;
}
body[data-theme="brutal"] .rk-blade:hover { transform: translate(-3px,-3px); box-shadow: 10px 10px 0 var(--bl-c, #000) !important; }
body[data-theme="brutal"] .bl-screen {
  background: var(--bl-c, #000) !important; border: 3px solid #000 !important; border-radius: 0 !important;
  box-shadow: none !important; filter: grayscale(.2);
}
body[data-theme="brutal"] .rk-blade h3 { text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; }
body[data-theme="brutal"] .rkp-cab-title { background: #000; color: #fff !important; display: inline-flex; padding: 3px 10px; letter-spacing: .2em; }
body[data-theme="brutal"] .rkp-cab-title::after { display: none; }

/* ==========================================================================
   NEW THEME 3 — AURORA
   ========================================================================== */
body[data-theme="aurora"] {
  --rk-text:#eafcff; --rk-muted:#a9d6dd; --rk-line:rgba(180,255,240,.25);
  --rk-panel:rgba(12,32,44,.5); --rk-panel-2:rgba(18,44,58,.55);
  --rk-metal:rgba(10,28,40,.5); --rk-metal-hi:rgba(16,40,54,.55);
  --rk-green:#6bffcb; --rk-amber:#ffe08a; --rk-red:#ff9ab5; --rk-blue:#8ad7ff;
  background:
    radial-gradient(ellipse 70% 40% at 20% 0%, rgba(107,255,203,.3), transparent 60%),
    radial-gradient(ellipse 60% 40% at 75% 10%, rgba(138,215,255,.28), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(180,120,255,.25), transparent 60%),
    linear-gradient(180deg, #04121c, #061a26 60%, #04121c);
  font-family: 'Inter', system-ui, sans-serif;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-theme="aurora"] { background-size: 180% 140%, 160% 140%, 180% 160%, 100% 100%; animation: auroraDrift 18s ease-in-out infinite alternate; }
  @keyframes auroraDrift { to { background-position: 30% 10%, -20% 20%, 20% -10%, 0 0; } }
}
body[data-theme="aurora"] .rk-blade {
  background: rgba(255,255,255,.07) !important; border: 1px solid var(--rk-line) !important;
  border-left: 1px solid var(--rk-line) !important; border-radius: 18px !important;
  backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0,0,0,.3) !important; padding: 16px 18px !important;
  overflow: hidden;
}
body[data-theme="aurora"] .rk-blade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--bl-c,#6bffcb) 22%, transparent) 50%, transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  body[data-theme="aurora"] .rk-blade::after { background-size: 220% 100%; animation: shimmer 5.5s ease-in-out infinite; }
  @keyframes shimmer { 0%,100% { background-position: 180% 0 } 50% { background-position: -60% 0 } }
}
body[data-theme="aurora"] .bl-screen {
  border-radius: 50% !important; background: color-mix(in srgb, var(--bl-c,#6bffcb) 22%, transparent) !important;
  border: 1px solid var(--rk-line) !important; box-shadow: 0 0 20px color-mix(in srgb, var(--bl-c,#6bffcb) 35%, transparent) !important;
}
body[data-theme="aurora"] .rk-blade:hover { transform: translateY(-5px); }

/* ==========================================================================
   NEW THEME 4 — RETRO DESKTOP (90s window chrome)
   ========================================================================== */
body[data-theme="retro"] {
  --rk-text:#0d0d0d; --rk-muted:#3f3f46; --rk-line:#8a8a8a;
  --rk-panel:#d9d5cc; --rk-panel-2:#e6e2d8; --rk-metal:#c9c5bc; --rk-metal-hi:#e6e2d8;
  --rk-green:#0a7d3c; --rk-amber:#a06a00; --rk-red:#b81414; --rk-blue:#000a8c;
  background: #12855c;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 6px 6px;
  font-family: 'Inter', Tahoma, sans-serif;
}
body[data-theme="retro"] .rkp-top, body[data-theme="retro"] .rkp-telemetry,
body[data-theme="retro"] .adm-card, body[data-theme="retro"] .rk-rack,
body[data-theme="retro"] .rk-unit, body[data-theme="retro"] .rkp-ticker,
body[data-theme="retro"] .rk-blade {
  background: #d9d5cc !important; border-radius: 0 !important;
  border-top: 2px solid #fff !important; border-left: 2px solid #fff !important;
  border-right: 2px solid #6b6b6b !important; border-bottom: 2px solid #6b6b6b !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.35) !important;
}
body[data-theme="retro"] .rk-blade { padding: 26px 12px 12px !important; }
/* pixel title bar across the top of each card */
body[data-theme="retro"] .rk-blade::before {
  content: ""; position: absolute; top: 2px; left: 2px; right: 2px; height: 17px;
  background: linear-gradient(90deg, var(--bl-c, #000a8c), #6f7fd6);
}
body[data-theme="retro"] .rk-blade::after {
  content: "▪ ▪ ▪"; position: absolute; top: 2px; right: 6px; height: 17px; line-height: 17px;
  font-size: .6rem; color: #fff; letter-spacing: 2px;
}
body[data-theme="retro"] .rk-blade:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(0,0,0,.4) !important; }
body[data-theme="retro"] .bl-screen {
  background: #fff !important; border-radius: 0 !important;
  border-top: 2px solid #6b6b6b !important; border-left: 2px solid #6b6b6b !important;
  border-right: 2px solid #fff !important; border-bottom: 2px solid #fff !important; box-shadow: none !important;
}
body[data-theme="retro"] .rk-blade h3 { font-weight: 700; font-size: .95rem; }
body[data-theme="retro"] .rkp-cab-title {
  background: #000a8c; color: #fff !important; display: inline-flex; padding: 3px 12px; letter-spacing: .1em;
}
body[data-theme="retro"] .rkp-cab-title::after { display: none; }
body[data-theme="retro"] .rkp-logout, body[data-theme="retro"] .adm-btn {
  background: #d9d5cc !important; color: #0d0d0d !important; border-radius: 0 !important;
  border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #6b6b6b; border-bottom: 2px solid #6b6b6b;
}

/* ==========================================================================
   AI STUDIO DASHBOARD — light SaaS console
   Written from scratch in the modern-dashboard idiom: soft grey canvas,
   white rounded cards, one violet accent, generous spacing, Raleway type.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&display=swap');

body[data-theme="studio"] {
  --rk-text:#212529; --rk-muted:#6b7280; --rk-line:rgba(0,0,0,.09);
  --rk-panel:#ffffff; --rk-panel-2:#ffffff; --rk-metal:#ffffff; --rk-metal-hi:#ffffff;
  --rk-green:#6c50bf; --rk-amber:#f59e0b; --rk-red:#ef4444; --rk-blue:#6c50bf;
  --st-accent:#6c50bf; --st-accent-soft:#efeaff; --st-canvas:#f7f7f8;
  background: var(--st-canvas);
  font-family: 'Raleway', system-ui, sans-serif;
  color: var(--rk-text);
}
body[data-theme="studio"] h1, body[data-theme="studio"] h2,
body[data-theme="studio"] h3, body[data-theme="studio"] .rk-name {
  font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: -.01em;
}

/* top bar — clean white app header */
body[data-theme="studio"] .rkp-top {
  background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--rk-line) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 16px 24px !important; margin-bottom: 22px;
}
body[data-theme="studio"] .rk-name span { color: var(--st-accent); }
body[data-theme="studio"] .rk-tag { font-size: .68rem; letter-spacing: .1em; }

/* telemetry as a pill-shaped stat bar */
body[data-theme="studio"] .rkp-telemetry {
  background: #fff !important; border: 1px solid var(--rk-line) !important;
  border-radius: 16px !important; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
  font-family: 'Raleway', sans-serif; font-size: .78rem; padding: 14px 20px !important;
}
body[data-theme="studio"] .rkp-telemetry strong { font-weight: 700; }

/* section headings — quiet uppercase labels */
body[data-theme="studio"] .rkp-cab-title {
  font-family: 'Raleway', sans-serif; font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; color: var(--rk-muted); margin: 26px 0 12px;
}
body[data-theme="studio"] .rkp-cab-title::after { background: var(--rk-line); }

/* the cards: white, 16px radius, hairline border, lift on hover */
body[data-theme="studio"] .rk-blade {
  background: #fff !important;
  border: 1px solid var(--rk-line) !important; border-left: 1px solid var(--rk-line) !important;
  border-radius: 16px !important; padding: 20px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
  align-items: flex-start; gap: 14px;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
body[data-theme="studio"] .rk-blade:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--bl-c, #6c50bf) 45%, transparent) !important;
  box-shadow: 0 12px 28px rgba(16,24,40,.1) !important;
}
/* accent wash that grows from the corner on hover */
body[data-theme="studio"] .rk-blade::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: color-mix(in srgb, var(--bl-c, #6c50bf) 12%, transparent);
  opacity: 0; transform: scale(.6); transition: opacity .3s, transform .35s; pointer-events: none;
}
body[data-theme="studio"] .rk-blade:hover::after { opacity: 1; transform: scale(1); }
body[data-theme="studio"] .rk-blade > * { position: relative; z-index: 1; }

/* rounded-square icon tile in a soft tint of the card's colour */
body[data-theme="studio"] .bl-screen {
  width: 52px !important; height: 52px !important; border-radius: 14px !important;
  background: color-mix(in srgb, var(--bl-c, #6c50bf) 13%, #fff) !important;
  color: var(--bl-c, #6c50bf) !important; border: 0 !important; box-shadow: none !important;
  font-size: 1.4rem !important;
}
body[data-theme="studio"] .rk-blade h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
body[data-theme="studio"] .rk-blade p { font-size: .82rem; font-weight: 500; white-space: normal !important; }

/* status dot floats to the corner */
body[data-theme="studio"] .bl-io { position: absolute; top: 16px; right: 16px; }
body[data-theme="studio"] .rk-led { width: 7px; height: 7px; background: #22c55e !important; box-shadow: 0 0 0 3px #dcfce7 !important; }

/* buttons — pill, solid violet primary */
body[data-theme="studio"] .rkp-logout {
  background: #fff !important; color: var(--rk-red) !important;
  border: 1px solid var(--rk-line) !important; border-radius: 999px !important;
  font-family: 'Raleway', sans-serif !important; font-weight: 700; text-transform: none; letter-spacing: 0;
}
body[data-theme="studio"] .rkp-logout:hover { background: #fef2f2 !important; box-shadow: none; }
body[data-theme="studio"] .adm-btn {
  font-family: 'Raleway', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
  border-radius: 999px !important; font-weight: 700;
}
body[data-theme="studio"] .adm-btn:not(.ghost):not(.danger) {
  background: var(--st-accent) !important; color: #fff !important; border: 0 !important;
}
body[data-theme="studio"] .adm-btn.ghost { background: #fff !important; color: var(--rk-text) !important; border: 1px solid var(--rk-line) !important; }
body[data-theme="studio"] .adm-btn.danger { background: #fff !important; color: var(--rk-red) !important; border: 1px solid #fecaca !important; }

/* admin cards + inputs */
body[data-theme="studio"] .adm-card {
  background: #fff !important; border: 1px solid var(--rk-line) !important;
  border-radius: 16px !important; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
}
body[data-theme="studio"] .adm-field input, body[data-theme="studio"] .adm-field select,
body[data-theme="studio"] .icon-pick, body[data-theme="studio"] .theme-card, body[data-theme="studio"] .adm-item {
  background: #fff !important; border: 1px solid var(--rk-line) !important; border-radius: 12px !important;
}
body[data-theme="studio"] .adm-field input:focus, body[data-theme="studio"] .adm-field select:focus {
  border-color: var(--st-accent) !important; box-shadow: 0 0 0 4px var(--st-accent-soft) !important;
}
body[data-theme="studio"] .theme-card[aria-pressed="true"] { border-color: var(--st-accent) !important; box-shadow: 0 0 0 4px var(--st-accent-soft) !important; }

/* ticker as a slim status bar */
body[data-theme="studio"] .rkp-ticker {
  background: #fff; border-top: 1px solid var(--rk-line); color: var(--rk-muted); font-family: 'Raleway', sans-serif;
}
body[data-theme="studio"] .rkp-ticker .tk-label { color: var(--st-accent); font-weight: 700; }

/* gate — centred white sign-in card */
body[data-theme="studio"] .rk-rack {
  background: #fff !important; border: 1px solid var(--rk-line) !important;
  border-radius: 20px !important; box-shadow: 0 18px 50px rgba(16,24,40,.1) !important; padding: 26px !important;
}
body[data-theme="studio"] .rk-unit {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
}
body[data-theme="studio"] .rk-console {
  background: var(--st-canvas) !important; border: 1px solid var(--rk-line) !important;
  border-radius: 14px !important; box-shadow: none !important;
}
body[data-theme="studio"] .boot-log { font-family: 'JetBrains Mono', monospace; font-size: .7rem; }
body[data-theme="studio"] .gate-form input[type="password"] {
  background: #fff !important; border: 1px solid var(--rk-line) !important; border-radius: 12px !important;
  color: var(--rk-text) !important; font-family: 'Raleway', sans-serif !important; letter-spacing: .1em !important;
}
body[data-theme="studio"] .gate-form input:focus { border-color: var(--st-accent) !important; box-shadow: 0 0 0 4px var(--st-accent-soft) !important; }
body[data-theme="studio"] .gate-form .btn {
  background: var(--st-accent) !important; color: #fff !important; border: 0 !important;
  border-radius: 12px !important; font-family: 'Raleway', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
}

@media (prefers-reduced-motion: no-preference) {
  body[data-theme="studio"] .bl-screen { transition: transform .3s cubic-bezier(.2,.8,.3,1); }
  body[data-theme="studio"] .rk-blade:hover .bl-screen { transform: scale(1.08) rotate(-3deg); }
}

/* ==========================================================================
   AI STUDIO — sidebar dashboard shell, folder icon tiles, motion
   (all hand-written; sidebar only appears in this theme)
   ========================================================================== */
.st-side { display: none; }

body[data-theme="studio"].pad {
  display: grid !important;
  grid-template-columns: 264px 1fr;
  align-items: start;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
}
body[data-theme="studio"] .st-side {
  display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; height: 100vh;
  background: #fff; border-right: 1px solid var(--rk-line);
  padding: 20px 16px 16px; z-index: 40;
}
body[data-theme="studio"] .st-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px; }
body[data-theme="studio"] .st-logo {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: linear-gradient(140deg, #8b6cf0, #6c50bf); color: #fff;
  box-shadow: 0 6px 16px rgba(108,80,191,.35);
}
body[data-theme="studio"] .st-logo svg { width: 21px; height: 21px; }
body[data-theme="studio"] .st-brand-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
body[data-theme="studio"] .st-brand-tx b { font-size: .95rem; font-weight: 800; }
body[data-theme="studio"] .st-brand-tx small { font-size: .68rem; color: var(--rk-muted); }

body[data-theme="studio"] .st-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; }
body[data-theme="studio"] .st-nav-label {
  font-size: .63rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #a1a1aa; padding: 16px 10px 6px;
}
body[data-theme="studio"] .st-nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px;
  color: #52525b; text-decoration: none; font-weight: 600; font-size: .88rem;
  position: relative; overflow: hidden;
  transition: background .18s, color .18s, transform .18s;
}
body[data-theme="studio"] .st-nav-item svg { width: 18px; height: 18px; flex: none; }
body[data-theme="studio"] .st-nav-item span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-theme="studio"] .st-count {
  font-style: normal; font-size: .68rem; font-weight: 800; color: var(--st-accent);
  background: var(--st-accent-soft); border-radius: 999px; padding: 2px 8px;
}
body[data-theme="studio"] .st-nav-item:hover { background: #f4f4f5; color: #18181b; transform: translateX(3px); }
body[data-theme="studio"] .st-nav-item.is-active { background: var(--st-accent-soft); color: var(--st-accent); }
body[data-theme="studio"] .st-nav-item.is-active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--st-accent);
}
body[data-theme="studio"] .st-side-foot {
  display: flex; align-items: center; gap: 10px; padding: 12px 8px 2px; border-top: 1px solid var(--rk-line);
}
body[data-theme="studio"] .st-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--st-accent-soft); color: var(--st-accent); font-weight: 800; font-size: .85rem;
}
body[data-theme="studio"] .st-side-out {
  margin-left: auto; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  background: #fff; border: 1px solid var(--rk-line); color: #ef4444; display: grid; place-items: center;
  transition: background .18s, transform .18s;
}
body[data-theme="studio"] .st-side-out svg { width: 16px; height: 16px; }
body[data-theme="studio"] .st-side-out:hover { background: #fef2f2; transform: translateX(2px); }

/* main column */
body[data-theme="studio"].pad .rkp-wrap { max-width: 1240px; padding: 0 28px 60px; width: 100%; }
body[data-theme="studio"] .rkp-top {
  margin: 0 -28px 22px; padding: 16px 28px !important; position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.86) !important; backdrop-filter: blur(10px);
}
body[data-theme="studio"] .rkp-top .rk-name { font-size: 1.05rem; }
/* the sidebar carries the logout, so hide the header one here */
body[data-theme="studio"] .rkp-top .rkp-logout { display: none; }
body[data-theme="studio"] .rkp-grid { display: block !important; }

/* ---------------- FOLDER ICON TILES (drawn in CSS, no image files) ------- */
body[data-theme="studio"] .bl-screen {
  position: relative; width: 58px !important; height: 48px !important;
  background: transparent !important; border-radius: 0 !important; box-shadow: none !important;
  font-size: 1.05rem !important; overflow: visible;
}
/* back flap of the folder */
body[data-theme="studio"] .bl-screen::before {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bl-c, #6c50bf) 34%, #fff);
  border-radius: 8px 10px 10px 10px;
  clip-path: polygon(0 14%, 40% 14%, 48% 0, 100% 0, 100% 100%, 0 100%);
  transform-origin: 50% 100%;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
/* front pocket, slightly lighter, tilts open on hover */
body[data-theme="studio"] .bl-screen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 74%;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--bl-c, #6c50bf) 78%, #fff),
    color-mix(in srgb, var(--bl-c, #6c50bf) 96%, #000));
  border-radius: 8px;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--bl-c,#6c50bf) 30%, transparent);
  transform-origin: 50% 100%;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
/* the emoji sits on the folder face */
body[data-theme="studio"] .rk-blade .bl-screen {
  display: grid; place-items: center; padding-top: 10px;
}
body[data-theme="studio"] .bl-screen > * , body[data-theme="studio"] .bl-screen {
  z-index: 1;
}
body[data-theme="studio"] .rk-blade { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  body[data-theme="studio"] .rk-blade:hover .bl-screen::after {
    transform: perspective(220px) rotateX(-24deg) translateY(2px);
    box-shadow: 0 10px 18px color-mix(in srgb, var(--bl-c,#6c50bf) 40%, transparent);
  }
  body[data-theme="studio"] .rk-blade:hover .bl-screen::before { transform: translateY(-3px); }
  body[data-theme="studio"] .rk-blade:hover .bl-screen { transform: none !important; }
}

/* ---------------- MOTION ------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  body[data-theme="studio"] .st-side { animation: sideIn .5s cubic-bezier(.2,.8,.3,1) backwards; }
  @keyframes sideIn { from { opacity: 0; transform: translateX(-18px); } }
  body[data-theme="studio"] .st-nav-item { animation: navIn .4s ease backwards; }
  body[data-theme="studio"] .st-nav-item:nth-of-type(1) { animation-delay: .06s }
  body[data-theme="studio"] .st-nav-item:nth-of-type(2) { animation-delay: .1s }
  body[data-theme="studio"] .st-nav-item:nth-of-type(3) { animation-delay: .14s }
  body[data-theme="studio"] .st-nav-item:nth-of-type(n+4) { animation-delay: .18s }
  @keyframes navIn { from { opacity: 0; transform: translateX(-10px); } }

  /* light sweep across a card on hover */
  body[data-theme="studio"] .rk-blade::before {
    content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; z-index: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%);
    background-size: 250% 100%; background-position: 180% 0; opacity: 0;
    transition: opacity .2s;
  }
  body[data-theme="studio"] .rk-blade:hover::before { opacity: 1; animation: sweepCard .8s ease forwards; }
  @keyframes sweepCard { from { background-position: 180% 0 } to { background-position: -80% 0 } }

  /* live status dot breathes */
  body[data-theme="studio"] .rk-led { animation: dotPulse 2.4s ease-in-out infinite !important; }
  @keyframes dotPulse { 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.18) !important; } }

  /* primary buttons get a slow gradient shift */
  body[data-theme="studio"] .adm-btn:not(.ghost):not(.danger),
  body[data-theme="studio"] .gate-form .btn {
    background: linear-gradient(100deg, #6c50bf, #8b6cf0, #6c50bf) !important;
    background-size: 220% 100% !important; animation: btnShift 6s ease infinite;
  }
  @keyframes btnShift { 50% { background-position: 100% 0 } }

  /* telemetry strip slides in */
  body[data-theme="studio"] .rkp-telemetry { animation: cabIn .5s ease .1s backwards; }
}

/* responsive: sidebar collapses to icons, then hides */
@media (max-width: 1100px) {
  body[data-theme="studio"].pad { grid-template-columns: 76px 1fr; }
  body[data-theme="studio"] .st-nav-item span, body[data-theme="studio"] .st-count,
  body[data-theme="studio"] .st-brand-tx, body[data-theme="studio"] .st-nav-label { display: none; }
  body[data-theme="studio"] .st-side { padding: 18px 12px; align-items: center; }
  body[data-theme="studio"] .st-nav-item { justify-content: center; padding: 11px; }
  body[data-theme="studio"] .st-side-foot { flex-direction: column; }
  body[data-theme="studio"] .st-side-out { margin-left: 0; }
}
@media (max-width: 720px) {
  body[data-theme="studio"].pad { grid-template-columns: 1fr; }
  body[data-theme="studio"] .st-side { display: none; }
  body[data-theme="studio"] .rkp-top .rkp-logout { display: inline-flex; }
  body[data-theme="studio"].pad .rkp-wrap { padding: 0 16px 60px; }
  body[data-theme="studio"] .rkp-top { margin: 0 -16px 18px; padding: 14px 16px !important; }
}

/* ==========================================================================
   CONSOLE DARK — near-black app launcher
   Top utility bar · big search · greeting · grouped icon-tile grids
   ========================================================================== */
.cx-bar, .cx-search, .cx-hello { display: none; }

body[data-theme="console"] {
  --rk-text:#f4f4f5; --rk-muted:#9a9aa3; --rk-line:#232326;
  --rk-panel:#141416; --rk-panel-2:#18181b; --rk-metal:#141416; --rk-metal-hi:#1b1b1f;
  --rk-green:#22c55e; --rk-amber:#f5b544; --rk-red:#f2555a; --rk-blue:#8b7bf0;
  --cx-accent:#8b7bf0; --cx-tile:#141416; --cx-tile-hi:#1c1c21;
  background: #08080a;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--rk-text);
  display: block !important; height: auto !important; overflow: visible !important; padding: 0 0 70px !important;
}
body[data-theme="console"] .rkp-top { display: none; }          /* replaced by cx-bar */
body[data-theme="console"] .st-side { display: none; }
body[data-theme="console"].pad .rkp-wrap { max-width: 1320px; padding: 0 26px; }
body[data-theme="console"] .rkp-grid { display: block !important; }

/* ---------- top utility bar ---------- */
body[data-theme="console"] .cx-bar {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 0 16px; border-bottom: 1px solid var(--rk-line); margin-bottom: 34px;
}
body[data-theme="console"] .cx-mark { display: flex; flex-direction: column; line-height: 1.15; padding-right: 20px; border-right: 1px solid var(--rk-line); }
body[data-theme="console"] .cx-mark b {
  font-size: 1.15rem; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(92deg, #a99cff, #6f5bea); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body[data-theme="console"] .cx-mark b span { color: transparent; }
body[data-theme="console"] .cx-mark small { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--rk-muted); }
body[data-theme="console"] .cx-links { display: flex; gap: 22px; margin-left: auto; }
body[data-theme="console"] .cx-links a { color: var(--rk-text); text-decoration: none; font-size: .92rem; opacity: .85; transition: opacity .18s, color .18s; }
body[data-theme="console"] .cx-links a:hover { opacity: 1; color: var(--cx-accent); }
body[data-theme="console"] .cx-tools { display: flex; align-items: center; gap: 10px; }
body[data-theme="console"] .cx-ico {
  position: relative; width: 38px; height: 38px; border-radius: 11px; cursor: pointer;
  display: grid; place-items: center; background: transparent; border: 1px solid transparent;
  color: var(--rk-text); transition: background .18s, border-color .18s, transform .18s;
}
body[data-theme="console"] .cx-ico svg { width: 19px; height: 19px; }
body[data-theme="console"] .cx-ico:hover { background: var(--cx-tile-hi); border-color: var(--rk-line); transform: translateY(-1px); }
body[data-theme="console"] .cx-dot {
  position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rk-amber); border: 2px solid #08080a;
}
body[data-theme="console"] .cx-user {
  display: flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--cx-tile); border: 1px solid var(--rk-line); color: var(--rk-text);
  font-size: .9rem; font-weight: 500; cursor: pointer; transition: background .18s;
}
body[data-theme="console"] .cx-user:hover { background: var(--cx-tile-hi); }
body[data-theme="console"] .cx-av {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700;
  background: linear-gradient(140deg, #a99cff, #6f5bea); color: #0b0b10;
}

/* ---------- search ---------- */
body[data-theme="console"] .cx-search {
  display: flex; align-items: center; gap: 14px;
  background: var(--cx-tile); border: 1px solid var(--rk-line); border-radius: 16px;
  padding: 0 18px; height: 62px; margin-bottom: 34px;
  transition: border-color .2s, box-shadow .2s;
}
body[data-theme="console"] .cx-search:focus-within { border-color: #3b3b44; box-shadow: 0 0 0 4px rgba(139,123,240,.12); }
body[data-theme="console"] .cx-search svg { width: 21px; height: 21px; color: var(--rk-muted); flex: none; }
body[data-theme="console"] .cx-search input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--rk-text); font: 400 1.02rem 'Inter', sans-serif;
}
body[data-theme="console"] .cx-search input::placeholder { color: #6b6b75; }
body[data-theme="console"] .cx-search kbd {
  font: 600 .72rem 'JetBrains Mono', monospace; color: var(--rk-muted);
  background: #202026; border: 1px solid var(--rk-line); border-radius: 7px; padding: 4px 9px;
}

/* ---------- greeting ---------- */
body[data-theme="console"] .cx-hello {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 40px;
}
body[data-theme="console"] .cx-hello h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 400; margin: 0 0 6px; letter-spacing: -.01em; }
body[data-theme="console"] .cx-hello h1 span { font-weight: 700; color: var(--cx-accent); }
body[data-theme="console"] .cx-hello p { color: var(--rk-muted); margin: 0; font-size: .95rem; }
body[data-theme="console"] .cx-when { text-align: right; flex: none; }
body[data-theme="console"] .cx-when b { display: block; font-size: 2.2rem; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
body[data-theme="console"] .cx-when span { font-size: .85rem; color: var(--rk-muted); }

/* ---------- section label ---------- */
body[data-theme="console"] .rkp-cab { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 34px; }
body[data-theme="console"] .rkp-cab-title {
  font-size: .95rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--rk-text); margin: 0 0 16px;
}
body[data-theme="console"] .rkp-cab-title::after { display: none; }

/* ---------- icon tiles ---------- */
body[data-theme="console"] .rkp-blades {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
  gap: 16px !important; grid-auto-rows: auto !important;
}
body[data-theme="console"] .rk-blade {
  flex-direction: column !important; align-items: center !important; justify-content: flex-start;
  gap: 10px; background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important; text-align: center; overflow: visible;
}
/* the square tile is the icon holder */
body[data-theme="console"] .bl-screen {
  width: 100% !important; aspect-ratio: 1 / 1; height: auto !important; max-width: 118px;
  border-radius: 15px !important; display: grid !important; place-items: center;
  background: var(--cx-tile) !important; border: 1px solid var(--rk-line) !important;
  color: var(--rk-text) !important; box-shadow: none !important; font-size: 1.6rem !important;
  transition: background .22s, border-color .22s, transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s;
}
body[data-theme="console"] .bl-screen svg { width: 34px; height: 34px; stroke-width: 1.4; }
body[data-theme="console"] .rk-blade h3 {
  font-size: .88rem; font-weight: 400; color: var(--rk-text); margin: 0; letter-spacing: 0;
}
body[data-theme="console"] .rk-blade p { display: none; }
/* status pip becomes a corner badge on the tile */
body[data-theme="console"] .bl-io { position: absolute; top: -7px; right: -4px; z-index: 3; }
body[data-theme="console"] .rk-led {
  width: 20px !important; height: 20px !important; border-radius: 50% !important;
  background: var(--cx-tile-hi) !important; border: 1px solid var(--rk-line);
  box-shadow: none !important;
}
body[data-theme="console"] .rk-blade { position: relative; }

body[data-theme="console"] .rk-blade:hover .bl-screen {
  background: var(--cx-tile-hi) !important;
  border-color: color-mix(in srgb, var(--bl-c, #8b7bf0) 55%, #2a2a30) !important;
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--bl-c,#8b7bf0) 30%, transparent);
}
body[data-theme="console"] .rk-blade:hover .bl-screen svg { color: var(--bl-c, #8b7bf0); }
body[data-theme="console"] .rk-blade:hover h3 { color: #fff; }

/* ---------- telemetry + ticker in dark ---------- */
body[data-theme="console"] .rkp-telemetry {
  background: var(--cx-tile) !important; border: 1px solid var(--rk-line) !important;
  border-radius: 14px !important; box-shadow: none !important; color: var(--rk-muted);
  font-family: 'JetBrains Mono', monospace; font-size: .74rem; margin-bottom: 30px;
}
body[data-theme="console"] .rkp-ticker { background: rgba(8,8,10,.94); border-top: 1px solid var(--rk-line); }
body[data-theme="console"] .rkp-ticker .tk-label { color: var(--cx-accent); }
body[data-theme="console"] .toast { background: #1c1c21; border: 1px solid var(--rk-line); color: var(--rk-text); }

/* ---------- gate + admin inherit the dark shell ---------- */
body[data-theme="console"] .rk-rack {
  background: var(--cx-tile) !important; border: 1px solid var(--rk-line) !important;
  border-radius: 18px !important; box-shadow: 0 24px 60px rgba(0,0,0,.6) !important;
}
body[data-theme="console"] .rk-unit { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body[data-theme="console"] .rk-console { background: #0d0d10 !important; border: 1px solid var(--rk-line) !important; }
body[data-theme="console"] .gate-form input[type="password"] {
  background: #0d0d10 !important; border: 1px solid var(--rk-line) !important; color: var(--rk-text) !important;
}
body[data-theme="console"] .gate-form .btn, body[data-theme="console"] .adm-btn:not(.ghost):not(.danger) {
  background: linear-gradient(100deg, #6f5bea, #a99cff) !important; color: #0b0b10 !important; border: 0 !important; font-weight: 700;
}
body[data-theme="console"] .adm-card, body[data-theme="console"] .adm-item,
body[data-theme="console"] .theme-card, body[data-theme="console"] .icon-pick,
body[data-theme="console"] .adm-field input, body[data-theme="console"] .adm-field select {
  background: var(--cx-tile) !important; border: 1px solid var(--rk-line) !important; color: var(--rk-text) !important;
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  body[data-theme="console"] .cx-bar { animation: cabIn .45s ease backwards; }
  body[data-theme="console"] .cx-search { animation: cabIn .5s ease .06s backwards; }
  body[data-theme="console"] .cx-hello { animation: cabIn .5s ease .12s backwards; }
  body[data-theme="console"] .rk-blade { animation: tileIn .42s cubic-bezier(.2,.8,.3,1) backwards; }
  @keyframes tileIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }
  body[data-theme="console"] .rkp-blades .rk-blade:nth-child(1) { animation-delay: .02s }
  body[data-theme="console"] .rkp-blades .rk-blade:nth-child(2) { animation-delay: .06s }
  body[data-theme="console"] .rkp-blades .rk-blade:nth-child(3) { animation-delay: .1s }
  body[data-theme="console"] .rkp-blades .rk-blade:nth-child(4) { animation-delay: .14s }
  body[data-theme="console"] .rkp-blades .rk-blade:nth-child(5) { animation-delay: .18s }
  body[data-theme="console"] .rkp-blades .rk-blade:nth-child(n+6) { animation-delay: .22s }
  body[data-theme="console"] .cx-av { animation: dotPulse 3s ease-in-out infinite; }
}

@media (max-width: 720px) {
  body[data-theme="console"] .cx-links { display: none; }
  body[data-theme="console"] .cx-hello { flex-direction: column; }
  body[data-theme="console"] .cx-when { text-align: left; }
  body[data-theme="console"] .rkp-blades { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }
  body[data-theme="console"].pad .rkp-wrap { padding: 0 16px; }
}

/* ==========================================================================
   CONSOLE DARK — 8-up grid, single screen, icon draws itself on hover
   ========================================================================== */

/* icon sits centred inside the tile box */
body[data-theme="console"] .bl-screen { position: relative; overflow: hidden; }
body[data-theme="console"] .bl-screen svg {
  width: 52%; height: 52%; display: block; color: #d6d6de;
  transition: color .25s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}

/* hover: recolour to the app's own colour and re-draw the strokes */
body[data-theme="console"] .rk-blade:hover .bl-screen svg { color: var(--bl-c, #8b7bf0); }
@media (prefers-reduced-motion: no-preference) {
  body[data-theme="console"] .bl-screen svg > * {
    stroke-dasharray: 100 100; stroke-dashoffset: 0;
  }
  body[data-theme="console"] .rk-blade:hover .bl-screen svg > * {
    animation: drawIcon .75s cubic-bezier(.4,0,.2,1) forwards;
  }
  body[data-theme="console"] .rk-blade:hover .bl-screen svg > *:nth-child(2) { animation-delay: .09s; }
  body[data-theme="console"] .rk-blade:hover .bl-screen svg > *:nth-child(3) { animation-delay: .17s; }
  body[data-theme="console"] .rk-blade:hover .bl-screen svg > *:nth-child(n+4) { animation-delay: .24s; }
  @keyframes drawIcon {
    from { stroke-dashoffset: 100; opacity: .25; }
    to   { stroke-dashoffset: 0; opacity: 1; }
  }
  body[data-theme="console"] .rk-blade:hover .bl-screen svg { transform: scale(1.06); }
}

/* ---- 8 tiles per row, whole page fits one screen ---- */
@media (min-width: 900px) {
  body[data-theme="console"] {
    height: 100vh; overflow: hidden; padding: 0 !important;
    display: flex !important; flex-direction: column;
  }
  body[data-theme="console"].pad .rkp-wrap {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    max-width: 1500px; padding: 0 30px 8px;
  }
  /* tighter chrome so the tiles get the room */
  body[data-theme="console"] .cx-bar { padding: 12px 0 12px; margin-bottom: 16px; flex: none; }
  body[data-theme="console"] .cx-search { height: 52px; margin-bottom: 16px; flex: none; }
  body[data-theme="console"] .cx-hello { margin-bottom: 18px; flex: none; align-items: center; }
  body[data-theme="console"] .cx-hello h1 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: 2px; }
  body[data-theme="console"] .cx-hello p { font-size: .86rem; }
  body[data-theme="console"] .cx-when b { font-size: 1.7rem; }
  body[data-theme="console"] .rkp-telemetry { margin-bottom: 14px; flex: none; }

  body[data-theme="console"] .rkp-grid {
    flex: 1; min-height: 0; display: flex !important; flex-direction: column;
    gap: clamp(10px, 1.6vh, 22px); overflow: hidden;
  }
  body[data-theme="console"] .rkp-cab { margin: 0 !important; flex: none; }
  body[data-theme="console"] .rkp-cab-title { margin: 0 0 clamp(6px, 1vh, 12px); font-size: .88rem; }

  /* exactly 8 columns */
  body[data-theme="console"] .rkp-blades {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: clamp(8px, 1.1vw, 18px) !important;
  }
  /* tile size follows viewport height so everything stays on one screen */
  body[data-theme="console"] .bl-screen {
    max-width: none !important;
    width: 100% !important;
    height: clamp(52px, 8.2vh, 104px) !important;
    aspect-ratio: auto !important;
  }
  body[data-theme="console"] .rk-blade { gap: clamp(4px, .8vh, 9px); }
  body[data-theme="console"] .rk-blade h3 { font-size: clamp(.7rem, .82vw, .86rem); }
  body[data-theme="console"] .rkp-ticker { position: static; flex: none; background: transparent; border-top: 1px solid var(--rk-line); }
}

/* very short screens: shrink the greeting away rather than scroll */
@media (min-width: 900px) and (max-height: 700px) {
  body[data-theme="console"] .cx-hello p { display: none; }
  body[data-theme="console"] .cx-search { height: 44px; margin-bottom: 12px; }
  body[data-theme="console"] .rkp-ticker { display: none; }
}

/* ==========================================================================
   CONSOLE DARK v2 — 4-up grid, richer palette, system information panel
   ========================================================================== */
body[data-theme="console"] {
  --rk-text:#eef0f6; --rk-muted:#878b9c; --rk-line:#23242e;
  --rk-panel:#13141a; --rk-panel-2:#171922;
  --cx-accent:#7c6cf5; --cx-accent-2:#a99cff;
  --cx-tile:#14151c; --cx-tile-hi:#1b1d27; --cx-ink:#c9ccda;
  background:
    radial-gradient(1100px 520px at 18% -8%, rgba(124,108,245,.11), transparent 62%),
    radial-gradient(900px 460px at 88% 4%, rgba(47,180,196,.07), transparent 60%),
    #0a0b10;
}
body[data-theme="console"] .cx-bar { border-bottom-color: var(--rk-line); }
body[data-theme="console"] .cx-mark b { background: linear-gradient(92deg, #b6abff, #7c6cf5); -webkit-background-clip: text; background-clip: text; }
body[data-theme="console"] .cx-search { background: var(--cx-tile); border-color: var(--rk-line); }
body[data-theme="console"] .cx-search:focus-within { border-color: #3a3a52; box-shadow: 0 0 0 4px rgba(124,108,245,.13); }
body[data-theme="console"] .cx-hello h1 span { color: var(--cx-accent-2); }
body[data-theme="console"] .cx-av { background: linear-gradient(140deg, #b6abff, #7c6cf5); color: #0c0d14; }
body[data-theme="console"] .cx-dot { border-color: #0a0b10; }

/* ---- system information panel ---- */
body[data-theme="console"] .cx-sys { display: block; margin-bottom: 20px; }
body[data-theme="console"] .cx-sys-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
body[data-theme="console"] .cx-sys-head h2 { font-size: .95rem; font-weight: 500; margin: 0; color: var(--rk-text); }
body[data-theme="console"] .cx-src {
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cx-accent-2);
  background: rgba(124,108,245,.13); border: 1px solid rgba(124,108,245,.28); border-radius: 999px; padding: 3px 10px;
}
body[data-theme="console"] .cx-sys-grid {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px;
}
body[data-theme="console"] .cx-card {
  background: var(--cx-tile); border: 1px solid var(--rk-line); border-radius: 13px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  transition: border-color .2s, background .2s;
}
body[data-theme="console"] .cx-card:hover { border-color: #33344a; background: var(--cx-tile-hi); }
body[data-theme="console"] .cx-k { font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--rk-muted); }
body[data-theme="console"] .cx-v { font-size: 1.02rem; font-weight: 500; color: var(--rk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-theme="console"] .cx-n { font-size: .66rem; color: #6d7183; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- 4 tiles per row, larger, evenly spaced ---- */
@media (min-width: 900px) {
  body[data-theme="console"] .rkp-blades {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.6vw, 26px) !important;
  }
  body[data-theme="console"] .bl-screen {
    height: clamp(64px, 10.5vh, 132px) !important;
    border-radius: 18px !important;
  }
  body[data-theme="console"] .bl-screen svg { width: 46%; height: 46%; }
  body[data-theme="console"] .rk-blade h3 { font-size: clamp(.78rem, .95vw, .95rem); }
  body[data-theme="console"] .rkp-grid { gap: clamp(12px, 1.8vh, 24px); }
  body[data-theme="console"] .rkp-cab-title { font-size: .9rem; }
}
@media (min-width: 900px) and (max-height: 780px) {
  body[data-theme="console"] .cx-sys-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; }
  body[data-theme="console"] .cx-card { padding: 9px 11px; border-radius: 11px; }
  body[data-theme="console"] .cx-v { font-size: .9rem; }
}

/* ---- tile colours ---- */
body[data-theme="console"] .bl-screen {
  background: linear-gradient(180deg, #171922, #12131a) !important;
  border: 1px solid #262836 !important;
}
body[data-theme="console"] .bl-screen svg { color: var(--cx-ink); }
body[data-theme="console"] .rk-blade:hover .bl-screen {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bl-c, #7c6cf5) 16%, #171922), #14151d) !important;
  border-color: color-mix(in srgb, var(--bl-c, #7c6cf5) 62%, #262836) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.55), 0 0 26px -8px color-mix(in srgb, var(--bl-c,#7c6cf5) 55%, transparent) !important;
}
body[data-theme="console"] .rk-led {
  background: #10121a !important; border: 1px solid #2b2d3c !important;
  width: 16px !important; height: 16px !important;
}
body[data-theme="console"] .rk-blade:hover .rk-led { border-color: color-mix(in srgb, var(--bl-c,#7c6cf5) 60%, #2b2d3c) !important; }
body[data-theme="console"] .rk-blade h3 { color: #c3c7d6; transition: color .2s; }
body[data-theme="console"] .rk-blade:hover h3 { color: #fff; }

@media (max-width: 900px) {
  body[data-theme="console"] .cx-sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-theme="console"] .rkp-blades { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   CONSOLE DARK v3 — one-line system bar, square tiles
   ========================================================================== */
body[data-theme="console"] .cx-sys {
  display: flex; align-items: center; gap: 0;
  background: var(--cx-tile); border: 1px solid var(--rk-line); border-radius: 14px;
  padding: 0 6px 0 16px; margin-bottom: 22px; height: 58px; overflow: hidden;
}
body[data-theme="console"] .cx-sys-head { margin: 0; flex: none; display: flex; align-items: center; gap: 9px; padding-right: 16px; border-right: 1px solid var(--rk-line); height: 100%; }
body[data-theme="console"] .cx-sys-head h2 { font-size: .8rem; font-weight: 500; white-space: nowrap; }
body[data-theme="console"] .cx-src { font-size: .58rem; padding: 2px 8px; }
body[data-theme="console"] .cx-sys-grid {
  display: flex !important; align-items: center; flex: 1; min-width: 0; height: 100%;
  gap: 0; overflow-x: auto; scrollbar-width: none;
}
body[data-theme="console"] .cx-sys-grid::-webkit-scrollbar { display: none; }
body[data-theme="console"] .cx-card {
  flex: 1 1 0; min-width: 0; background: transparent !important; border: 0 !important;
  border-right: 1px solid var(--rk-line) !important; border-radius: 0 !important;
  padding: 0 14px !important; height: 32px; display: flex; flex-direction: column; justify-content: center; gap: 0;
}
body[data-theme="console"] .cx-card:last-child { border-right: 0 !important; }
body[data-theme="console"] .cx-card:hover { background: transparent !important; }
body[data-theme="console"] .cx-k { font-size: .58rem; letter-spacing: .12em; }
body[data-theme="console"] .cx-v { font-size: .88rem; line-height: 1.2; }
body[data-theme="console"] .cx-n { display: none; }

/* square tiles, centred in their column */
@media (min-width: 900px) {
  body[data-theme="console"] .bl-screen {
    width: clamp(64px, 11vh, 128px) !important;
    height: clamp(64px, 11vh, 128px) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto;
  }
}
body[data-theme="console"] .bl-screen { aspect-ratio: 1 / 1 !important; }

@media (max-width: 900px) {
  body[data-theme="console"] .cx-sys { height: auto; flex-direction: column; align-items: stretch; padding: 12px; gap: 10px; }
  body[data-theme="console"] .cx-sys-head { border-right: 0; border-bottom: 1px solid var(--rk-line); padding: 0 0 10px; }
  body[data-theme="console"] .cx-sys-grid { flex-wrap: wrap; height: auto; }
  body[data-theme="console"] .cx-card { flex: 1 1 40%; height: auto; padding: 6px 8px !important; border-right: 0 !important; }
}

/* ==========================================================================
   CONSOLE DARK — inner pages (upload, admin): minimal, legible, accessible
   ========================================================================== */
body[data-theme="console"] .cx-page { max-width: 880px; margin: 0 auto; padding-bottom: 60px; }
body[data-theme="console"] .cx-page-head { margin-bottom: 28px; }
body[data-theme="console"] .cx-page-head h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; margin: 0 0 6px; }
body[data-theme="console"] .cx-page-head p { color: var(--rk-muted); margin: 0; font-size: .95rem; }

/* destination chooser */
body[data-theme="console"] .cx-choose { border: 0; padding: 0; margin: 0 0 20px; }
body[data-theme="console"] .cx-choose legend {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rk-muted);
  padding: 0; margin-bottom: 10px;
}
body[data-theme="console"] .cx-choose-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
body[data-theme="console"] .cx-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
body[data-theme="console"] .cx-opt-box {
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  background: var(--cx-tile); border: 1px solid var(--rk-line); border-radius: 14px; padding: 16px;
  transition: border-color .18s, background .18s, transform .18s;
}
body[data-theme="console"] .cx-opt-box svg { width: 22px; height: 22px; color: var(--cx-ink); margin-bottom: 4px; }
body[data-theme="console"] .cx-opt-box b { font-size: .95rem; font-weight: 500; }
body[data-theme="console"] .cx-opt-box small { font-size: .76rem; color: var(--rk-muted); }
body[data-theme="console"] .cx-opt-box:hover { background: var(--cx-tile-hi); transform: translateY(-2px); }
body[data-theme="console"] .cx-opt input:checked + .cx-opt-box {
  border-color: var(--cx-accent); background: rgba(124,108,245,.1);
}
body[data-theme="console"] .cx-opt input:checked + .cx-opt-box svg { color: var(--cx-accent-2); }
body[data-theme="console"] .cx-opt input:focus-visible + .cx-opt-box { outline: 2px solid var(--cx-accent-2); outline-offset: 2px; }

/* dropzone */
body[data-theme="console"] .cx-drop {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--cx-tile); border: 1.5px dashed #2f3142; border-radius: 18px;
  padding: 44px 20px; cursor: pointer; color: var(--rk-text); font: inherit;
  transition: border-color .2s, background .2s;
}
body[data-theme="console"] .cx-drop svg { width: 34px; height: 34px; color: var(--cx-accent-2); }
body[data-theme="console"] .cx-drop b { font-size: 1rem; font-weight: 500; }
body[data-theme="console"] .cx-drop small { font-size: .8rem; color: var(--rk-muted); }
body[data-theme="console"] .cx-drop:hover, body[data-theme="console"] .cx-drop.is-over {
  border-color: var(--cx-accent); background: rgba(124,108,245,.08);
}
body[data-theme="console"] .cx-drop:focus-visible { outline: 2px solid var(--cx-accent-2); outline-offset: 3px; }

/* queue */
body[data-theme="console"] .cx-queue { margin-top: 26px; }
body[data-theme="console"] .cx-queue-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
body[data-theme="console"] .cx-queue-head h2 { font-size: .95rem; font-weight: 500; margin: 0; }
body[data-theme="console"] .cx-mini {
  background: transparent; border: 1px solid var(--rk-line); color: var(--rk-muted);
  border-radius: 9px; padding: 6px 12px; font-size: .78rem; cursor: pointer; min-height: 34px;
}
body[data-theme="console"] .cx-mini:hover { color: var(--rk-text); border-color: #33344a; }
body[data-theme="console"] .cx-item {
  position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden;
  background: var(--cx-tile); border: 1px solid var(--rk-line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
}
body[data-theme="console"] .cx-item-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #1b1d27; flex: none; }
body[data-theme="console"] .cx-item-ic svg { width: 17px; height: 17px; color: var(--cx-ink); }
body[data-theme="console"] .cx-item-tx { flex: 1; min-width: 0; }
body[data-theme="console"] .cx-item-tx b { display: block; font-size: .88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-theme="console"] .cx-item-tx small { font-size: .74rem; color: var(--rk-muted); }
body[data-theme="console"] .cx-item-pct { font: 600 .76rem 'JetBrains Mono', monospace; color: var(--rk-muted); flex: none; }
body[data-theme="console"] .cx-item-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #1e202b; }
body[data-theme="console"] .cx-item-bar i { display: block; height: 100%; width: 0; background: var(--cx-accent); transition: width .25s ease; }
body[data-theme="console"] .cx-item.is-done { border-color: rgba(63,191,148,.35); }
body[data-theme="console"] .cx-item.is-done .cx-item-pct { color: #3fbf94; }
body[data-theme="console"] .cx-item.is-done .cx-item-bar i { background: #3fbf94; }
body[data-theme="console"] .cx-note { margin-top: 26px; font-size: .78rem; color: #6d7183; }
body[data-theme="console"] .cx-note code { background: #1b1d27; border: 1px solid var(--rk-line); border-radius: 5px; padding: 1px 6px; font-size: .74rem; }

/* ---------------- admin console, minimal in dark ---------------- */
body[data-theme="console"].adm { padding: 0 0 50px !important; }
body[data-theme="console"] .adm-wrap { max-width: 1180px; padding: 0 26px; }
body[data-theme="console"] .adm-card {
  background: var(--cx-tile) !important; border: 1px solid var(--rk-line) !important;
  border-radius: 16px !important; box-shadow: none !important; padding: 20px !important;
}
body[data-theme="console"] .adm-card h2 { font-size: .98rem; font-weight: 500; }
body[data-theme="console"] .adm-card .hint { font-size: .8rem; color: var(--rk-muted); }
body[data-theme="console"] .adm-field label { font-size: .62rem; letter-spacing: .13em; color: var(--rk-muted); }
body[data-theme="console"] .adm-field input, body[data-theme="console"] .adm-field select {
  background: #0f1016 !important; border: 1px solid var(--rk-line) !important; border-radius: 10px !important;
  color: var(--rk-text) !important; min-height: 42px;
}
body[data-theme="console"] .adm-field input:focus, body[data-theme="console"] .adm-field select:focus {
  border-color: var(--cx-accent) !important; box-shadow: 0 0 0 3px rgba(124,108,245,.16) !important; outline: none;
}
body[data-theme="console"] .adm-btn {
  border-radius: 10px !important; font-family: 'Inter', sans-serif !important;
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 500; font-size: .84rem !important;
}
body[data-theme="console"] .adm-btn.ghost { background: transparent !important; border: 1px solid var(--rk-line) !important; color: var(--rk-text) !important; }
body[data-theme="console"] .adm-btn.ghost:hover { border-color: #3a3c52 !important; background: var(--cx-tile-hi) !important; }
body[data-theme="console"] .adm-btn.danger { background: transparent !important; border: 1px solid rgba(242,85,90,.4) !important; color: #f2555a !important; }
body[data-theme="console"] .adm-item {
  background: #0f1016 !important; border: 1px solid var(--rk-line) !important; border-radius: 12px !important;
  border-left: 3px solid var(--it-c, var(--cx-accent)) !important;
}
body[data-theme="console"] .adm-item b { font-size: .88rem; font-weight: 500; }
body[data-theme="console"] .adm-item small { font-size: .74rem; }
body[data-theme="console"] .icon-pick { background: #0f1016 !important; border-radius: 12px !important; }
body[data-theme="console"] .icon-pick button:hover { background: var(--cx-tile-hi); }
body[data-theme="console"] .icon-pick button[aria-pressed="true"] { border-color: var(--cx-accent); background: rgba(124,108,245,.16); }
body[data-theme="console"] .theme-card { background: #0f1016 !important; border-radius: 12px !important; }
body[data-theme="console"] .theme-card[aria-pressed="true"] { border-color: var(--cx-accent) !important; box-shadow: 0 0 0 3px rgba(124,108,245,.14) !important; }
body[data-theme="console"] .adm-badge { background: rgba(124,108,245,.14); color: var(--cx-accent-2); border-color: rgba(124,108,245,.35); }
body[data-theme="console"] .rkp-logout { background: transparent !important; border: 1px solid rgba(242,85,90,.35) !important; color: #f2555a !important; border-radius: 10px !important; }

@media (max-width: 700px) {
  body[data-theme="console"] .cx-choose-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CONSOLE DARK v4 — animated backdrop, bigger square tiles, no corner pip,
   admin console matched to the launchpad and fitted to one screen
   ========================================================================== */

/* ---- living background (soft drifting light, very low cost) ---- */
body[data-theme="console"] { position: relative; }
body[data-theme="console"]::before {
  content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none; display: block !important;
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(124,108,245,.20), transparent 60%),
    radial-gradient(34% 38% at 78% 22%, rgba(47,180,196,.14), transparent 62%),
    radial-gradient(40% 44% at 62% 82%, rgba(192,110,240,.13), transparent 62%);
  filter: blur(24px);
}
body[data-theme="console"]::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; display: block !important;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 75%);
  opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-theme="console"]::before { animation: bgDrift 26s ease-in-out infinite alternate; }
  @keyframes bgDrift {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
  }
  body[data-theme="console"]::after { animation: gridPan 40s linear infinite; }
  @keyframes gridPan { to { background-position: 46px 46px, 46px 46px; } }
}

/* ---- no status pip on the tiles ---- */
body[data-theme="console"] .bl-io { display: none !important; }

/* ---- bigger squares, 4 per row ---- */
@media (min-width: 900px) {
  body[data-theme="console"] .rkp-blades {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2vw, 30px) !important;
  }
  body[data-theme="console"] .bl-screen {
    width: clamp(88px, 15vh, 178px) !important;
    height: clamp(88px, 15vh, 178px) !important;
    border-radius: 22px !important;
  }
  body[data-theme="console"] .bl-screen svg { width: 44%; height: 44%; }
  body[data-theme="console"] .rk-blade h3 { font-size: clamp(.82rem, 1vw, 1rem); }
  body[data-theme="console"] .rkp-grid { gap: clamp(10px, 1.4vh, 20px); }
}
@media (min-width: 900px) and (max-height: 820px) {
  body[data-theme="console"] .cx-hello p { display: none; }
  body[data-theme="console"] .cx-sys { height: 50px; margin-bottom: 14px; }
}

/* clock meridiem */
body[data-theme="console"] .cx-mer { font-style: normal; font-size: .9rem; font-weight: 500; color: var(--rk-muted); margin-left: 2px; }

/* ==========================================================================
   ADMIN CONSOLE — same shell, fits one screen, panels scroll inside
   ========================================================================== */
body[data-theme="console"].adm {
  height: 100vh; overflow: hidden; padding: 0 !important; display: flex; flex-direction: column;
}
body[data-theme="console"].adm .adm-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  max-width: 1500px; width: 100%; margin: 0 auto; padding: 0 30px 18px;
}
body[data-theme="console"].adm .cx-bar { flex: none; margin-bottom: 18px; }
body[data-theme="console"].adm .adm-grid {
  flex: 1; min-height: 0; display: grid; gap: 18px;
  grid-template-columns: 1.05fr .95fr; align-items: stretch;
}
body[data-theme="console"].adm .adm-grid > div {
  min-height: 0; overflow-y: auto; padding-right: 6px;
  display: flex; flex-direction: column; gap: 16px;
}
body[data-theme="console"].adm .adm-grid > div::-webkit-scrollbar { width: 6px; }
body[data-theme="console"].adm .adm-grid > div::-webkit-scrollbar-thumb { background: #262836; border-radius: 6px; }
body[data-theme="console"].adm .adm-card { margin: 0 !important; }
body[data-theme="console"] .adm-list { max-height: none; }

/* type + colour parity with the launchpad */
body[data-theme="console"] .adm-card h2,
body[data-theme="console"] .adm-item b,
body[data-theme="console"] .theme-card b { font-family: 'Inter', system-ui, sans-serif; }
body[data-theme="console"] .adm-card h2 { letter-spacing: -.01em; }
body[data-theme="console"] .adm-badge {
  font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  background: rgba(124,108,245,.14); color: var(--cx-accent-2); border: 1px solid rgba(124,108,245,.32);
  border-radius: 999px; padding: 4px 11px; align-self: center;
}
body[data-theme="console"] .theme-swatch { border-radius: 8px; }
body[data-theme="console"] .cx-user { cursor: pointer; }

@media (max-width: 1000px) {
  body[data-theme="console"].adm { height: auto; overflow: visible; }
  body[data-theme="console"].adm .adm-grid { grid-template-columns: 1fr; }
  body[data-theme="console"].adm .adm-grid > div { overflow: visible; }
}

/* ==========================================================================
   ADMIN CONSOLE (.ax) — built from the launchpad's own vocabulary
   ========================================================================== */
body[data-theme="console"].ax {
  height: 100vh; overflow: hidden; padding: 0 !important; display: flex; flex-direction: column;
}
body[data-theme="console"].ax .rkp-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  max-width: 1500px; width: 100%; margin: 0 auto; padding: 0 30px 20px;
}
body[data-theme="console"].ax .cx-bar { flex: none; margin-bottom: 18px; }

.ax-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; }
.ax-col { display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; padding-right: 6px; }
.ax-col::-webkit-scrollbar { width: 6px; }
.ax-col::-webkit-scrollbar-thumb { background: #262836; border-radius: 6px; }

body[data-theme="console"] .ax-card {
  background: var(--cx-tile); border: 1px solid var(--rk-line); border-radius: 18px; padding: 20px;
}
body[data-theme="console"] .ax-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
body[data-theme="console"] .ax-card-head h2 { font-size: 1rem; font-weight: 500; margin: 0; letter-spacing: -.01em; }
body[data-theme="console"] .ax-card-head .ax-btn { margin-left: auto; }
body[data-theme="console"] .ax-count {
  margin-left: auto; font-size: .7rem; color: var(--rk-muted);
  background: #10121a; border: 1px solid var(--rk-line); border-radius: 999px; padding: 3px 10px;
}
body[data-theme="console"] .ax-hint { font-size: .82rem; color: var(--rk-muted); margin: 0 0 16px; }

/* fields */
body[data-theme="console"] .ax-form { display: flex; flex-direction: column; gap: 14px; }
body[data-theme="console"] .ax-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body[data-theme="console"] .ax-field { display: flex; flex-direction: column; gap: 6px; }
body[data-theme="console"] .ax-field > span {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rk-muted);
}
body[data-theme="console"] .ax-field input, body[data-theme="console"] .ax-field select,
body[data-theme="console"] .ax-inline input {
  background: #0f1016; border: 1px solid var(--rk-line); border-radius: 11px; color: var(--rk-text);
  font: 400 .92rem 'Inter', sans-serif; padding: 11px 13px; min-height: 44px; width: 100%;
}
body[data-theme="console"] .ax-field input:focus, body[data-theme="console"] .ax-field select:focus,
body[data-theme="console"] .ax-inline input:focus {
  outline: none; border-color: var(--cx-accent); box-shadow: 0 0 0 3px rgba(124,108,245,.16);
}
body[data-theme="console"] .ax-inline { display: flex; gap: 10px; margin-bottom: 14px; }

/* icon grid — same drawn icons as the launchpad tiles */
body[data-theme="console"] .ax-icons {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px;
  max-height: 168px; overflow-y: auto; padding: 10px; background: #0f1016;
  border: 1px solid var(--rk-line); border-radius: 13px;
}
body[data-theme="console"] .ax-icons::-webkit-scrollbar { width: 5px; }
body[data-theme="console"] .ax-icons::-webkit-scrollbar-thumb { background: #262836; border-radius: 5px; }
body[data-theme="console"] .ax-ico {
  aspect-ratio: 1; display: grid; place-items: center; cursor: pointer;
  background: #14151c; border: 1px solid transparent; border-radius: 11px; color: var(--cx-ink);
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
body[data-theme="console"] .ax-ico svg { width: 21px; height: 21px; }
body[data-theme="console"] .ax-ico:hover { background: var(--cx-tile-hi); transform: translateY(-2px); }
body[data-theme="console"] .ax-ico.is-on { border-color: var(--cx-accent); background: rgba(124,108,245,.15); color: var(--cx-accent-2); }
body[data-theme="console"] .ax-ico:focus-visible { outline: 2px solid var(--cx-accent-2); outline-offset: 2px; }

/* colour swatches */
body[data-theme="console"] .ax-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
body[data-theme="console"] .ax-sw {
  width: 32px; height: 32px; border-radius: 10px; cursor: pointer; background: var(--sw);
  border: 2px solid transparent; transition: transform .16s, box-shadow .16s;
}
body[data-theme="console"] .ax-sw:hover { transform: translateY(-2px); }
body[data-theme="console"] .ax-sw.is-on { border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw) 40%, transparent); }

/* live preview of the tile being built */
body[data-theme="console"] .ax-preview {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: #0f1016; border: 1px dashed #2c2e3d; border-radius: 14px;
}
body[data-theme="console"] .ax-preview-tile {
  width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; flex: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bl-c,#7c6cf5) 16%, #171922), #14151d);
  border: 1px solid color-mix(in srgb, var(--bl-c,#7c6cf5) 50%, #262836);
  color: var(--bl-c, #7c6cf5);
}
body[data-theme="console"] .ax-preview-tile svg { width: 27px; height: 27px; }
body[data-theme="console"] .ax-preview b { font-size: .95rem; font-weight: 500; }

/* buttons */
body[data-theme="console"] .ax-btn {
  font: 500 .85rem 'Inter', sans-serif; border-radius: 11px; padding: 11px 18px; min-height: 44px;
  cursor: pointer; border: 1px solid var(--rk-line); background: transparent; color: var(--rk-text);
  transition: background .16s, border-color .16s, transform .16s; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 7px;
}
body[data-theme="console"] .ax-btn:hover { background: var(--cx-tile-hi); border-color: #35374a; transform: translateY(-1px); }
body[data-theme="console"] .ax-primary { background: var(--cx-accent); border-color: transparent; color: #fff; font-weight: 600; }
body[data-theme="console"] .ax-primary:hover { background: #8b7bf5; }
body[data-theme="console"] .ax-danger { color: #f2555a; border-color: rgba(242,85,90,.35); }
body[data-theme="console"] .ax-danger:hover { background: rgba(242,85,90,.1); border-color: rgba(242,85,90,.55); }
body[data-theme="console"] .ax-sm { padding: 7px 12px; min-height: 34px; font-size: .78rem; border-radius: 9px; }
body[data-theme="console"] .ax-btn:focus-visible { outline: 2px solid var(--cx-accent-2); outline-offset: 2px; }

/* lists */
body[data-theme="console"] .ax-list { display: flex; flex-direction: column; gap: 8px; }
body[data-theme="console"] .ax-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: #0f1016; border: 1px solid var(--rk-line); border-radius: 13px;
}
body[data-theme="console"] .ax-item.is-off { opacity: .45; }
body[data-theme="console"] .ax-item-ic {
  width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bl-c,#7c6cf5) 14%, #171922), #14151d);
  border: 1px solid color-mix(in srgb, var(--bl-c,#7c6cf5) 34%, #262836); color: var(--bl-c,#7c6cf5);
}
body[data-theme="console"] .ax-item-ic svg { width: 19px; height: 19px; }
body[data-theme="console"] .ax-item-tx { flex: 1; min-width: 0; }
body[data-theme="console"] .ax-item-tx b { display: block; font-size: .89rem; font-weight: 500; }
body[data-theme="console"] .ax-item-tx small { font-size: .74rem; color: var(--rk-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-theme="console"] .ax-item-acts { display: flex; gap: 6px; flex: none; }

/* themes */
body[data-theme="console"] .ax-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
body[data-theme="console"] .ax-theme {
  display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left;
  background: #0f1016; border: 1px solid var(--rk-line); border-radius: 12px; padding: 10px;
  color: var(--rk-text); font: inherit; transition: border-color .16s, transform .16s;
}
body[data-theme="console"] .ax-theme i { width: 26px; height: 26px; border-radius: 8px; flex: none; display: block; }
body[data-theme="console"] .ax-theme b { font-size: .8rem; font-weight: 500; }
body[data-theme="console"] .ax-theme:hover { transform: translateY(-2px); border-color: #35374a; }
body[data-theme="console"] .ax-theme.is-on { border-color: var(--cx-accent); box-shadow: 0 0 0 3px rgba(124,108,245,.14); }

/* no-access screen */
body[data-theme="console"] .ax-denied {
  max-width: 460px; margin: 8vh auto; text-align: center;
  background: var(--cx-tile); border: 1px solid var(--rk-line); border-radius: 20px; padding: 40px 30px;
}
body[data-theme="console"] .ax-denied svg { width: 42px; height: 42px; color: #f2555a; margin-bottom: 14px; }
body[data-theme="console"] .ax-denied h1 { font-size: 1.3rem; font-weight: 500; margin: 0 0 8px; }
body[data-theme="console"] .ax-denied p { color: var(--rk-muted); font-size: .9rem; margin: 0 0 22px; }

/* rack chips on the launchpad */
body[data-theme="console"] .cx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
body[data-theme="console"] .cx-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--cx-tile); border: 1px solid var(--rk-line); border-radius: 999px;
  padding: 8px 15px; color: var(--rk-muted); font: 500 .82rem 'Inter', sans-serif;
  transition: color .16s, border-color .16s, background .16s;
}
body[data-theme="console"] .cx-chip em { font-style: normal; font-size: .7rem; color: #6d7183; }
body[data-theme="console"] .cx-chip:hover { color: var(--rk-text); border-color: #35374a; }
body[data-theme="console"] .cx-chip.is-on { background: rgba(124,108,245,.14); border-color: rgba(124,108,245,.45); color: var(--cx-accent-2); }
body[data-theme="console"] .cx-chip.is-on em { color: var(--cx-accent-2); }
body[data-theme="console"] .cx-chip:focus-visible { outline: 2px solid var(--cx-accent-2); outline-offset: 2px; }
.cx-chips { display: none; }

@media (max-width: 1000px) {
  body[data-theme="console"].ax { height: auto; overflow: visible; }
  .ax-grid { grid-template-columns: 1fr; }
  .ax-col { overflow: visible; }
}

/* ==========================================================================
   SIGN-IN — same console language, single quiet card
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body[data-theme="console"].gx { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
body[data-theme="console"] .gx-wrap { width: 100%; max-width: 430px; }
body[data-theme="console"] .gx-card {
  background: var(--cx-tile); border: 1px solid var(--rk-line); border-radius: 22px;
  padding: 38px 34px 26px; text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
body[data-theme="console"] .gx-logo {
  width: 54px; height: 54px; border-radius: 17px; display: inline-grid; place-items: center;
  background: linear-gradient(140deg, #a99cff, #6f5bea); color: #0b0b10; margin-bottom: 18px;
  box-shadow: 0 10px 26px rgba(124,108,245,.35);
}
body[data-theme="console"] .gx-logo svg { width: 26px; height: 26px; }
body[data-theme="console"] .gx-card h1 {
  font-size: 1.35rem; font-weight: 800; letter-spacing: .06em; margin: 0 0 8px;
  background: linear-gradient(92deg, #b6abff, #7c6cf5); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body[data-theme="console"] .gx-sub { color: var(--rk-muted); font-size: .88rem; margin: 0 0 24px; }
body[data-theme="console"] .gx-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
body[data-theme="console"] .gx-input {
  display: flex; align-items: center; gap: 11px; padding: 0 15px; height: 52px;
  background: #0f1016; border: 1px solid var(--rk-line); border-radius: 14px;
  transition: border-color .18s, box-shadow .18s;
}
body[data-theme="console"] .gx-input svg { width: 18px; height: 18px; color: var(--rk-muted); flex: none; }
body[data-theme="console"] .gx-input input {
  flex: 1; min-width: 0; background: transparent !important; border: 0 !important; outline: none;
  color: var(--rk-text) !important; font: 500 1rem 'Inter', sans-serif !important;
  letter-spacing: .18em !important; box-shadow: none !important; padding: 0 !important;
}
body[data-theme="console"] .gx-input input::placeholder { color: #5d6070; letter-spacing: normal; }
body[data-theme="console"] .gx-input:focus-within { border-color: var(--cx-accent); box-shadow: 0 0 0 4px rgba(124,108,245,.14); }
body[data-theme="console"] .gx-go {
  height: 50px; border-radius: 14px !important; border: 0 !important;
  background: var(--cx-accent) !important; color: #fff !important;
  font: 600 .95rem 'Inter', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  transition: background .18s, transform .18s;
}
body[data-theme="console"] .gx-go svg { width: 17px; height: 17px; }
body[data-theme="console"] .gx-go:hover { background: #8b7bf5 !important; transform: translateY(-1px); }
body[data-theme="console"] .gx-msg { min-height: 1.3em; font-size: .82rem; margin: 14px 0 0; font-family: 'Inter', sans-serif; }
body[data-theme="console"] .gx-msg.err { color: #ff8288; }
body[data-theme="console"] .gx-msg.good { color: #4fd6a4; }
body[data-theme="console"] .gx-foot {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rk-line);
  font-size: .74rem; color: var(--rk-muted);
}
body[data-theme="console"] .gx-pip { width: 7px; height: 7px; border-radius: 50%; background: #3fbf94; }
body[data-theme="console"] .gx-when { margin-left: auto; font-family: 'JetBrains Mono', monospace; }
@media (prefers-reduced-motion: no-preference) {
  body[data-theme="console"] .gx-card { animation: cabIn .5s cubic-bezier(.2,.8,.3,1) backwards; }
  body[data-theme="console"] .gx-pip { animation: dotPulse 2.6s ease-in-out infinite; }
  body[data-theme="console"] .gx-card.shake { animation: rkShake .45s; }
}

/* ==========================================================================
   Launchpad tile fixes: breathing room above, and only the square is clickable
   ========================================================================== */
body[data-theme="console"] .rkp-grid { padding-top: 14px; }
body[data-theme="console"] .rkp-blades { padding-top: 6px; }
body[data-theme="console"] .rk-blade { pointer-events: none; }        /* label is not a hit area */
body[data-theme="console"] .rk-blade .bl-screen { pointer-events: auto; cursor: pointer; }
body[data-theme="console"] .rk-blade:hover { z-index: 5; }             /* lifted tile sits above neighbours */
body[data-theme="console"] .cx-sys, body[data-theme="console"] .cx-chips { position: relative; z-index: 6; }

/* accent picker + top-bar logout */
body[data-theme="console"] .ax-accents { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
body[data-theme="console"] .ax-accent {
  display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left;
  background: #0f1016; border: 1px solid var(--rk-line); border-radius: 12px; padding: 10px;
  color: var(--rk-text); font: inherit; transition: border-color .16s, transform .16s;
}
body[data-theme="console"] .ax-accent i { width: 24px; height: 24px; border-radius: 8px; flex: none; display: block; }
body[data-theme="console"] .ax-accent b { font-size: .82rem; font-weight: 500; }
body[data-theme="console"] .ax-accent:hover { transform: translateY(-2px); border-color: #35374a; }
body[data-theme="console"] .ax-accent.is-on { border-color: var(--cx-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 16%, transparent); }
body[data-theme="console"] .cx-out:hover { color: #f2555a; border-color: rgba(242,85,90,.4); background: rgba(242,85,90,.08); }

/* starfield canvas sits behind everything, above the gradient wash */
#vs-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: block; }
body[data-theme="console"]::after { opacity: .22; }
body[data-theme="console"] > *:not(#vs-stars) { position: relative; z-index: 1; }

/* ==========================================================================
   Sign-in: centred card, accent-driven controls, animated padlock
   ========================================================================== */
body[data-theme="console"].gx {
  display: grid !important; place-items: center; min-height: 100dvh; padding: 24px;
}
body[data-theme="console"] .gx-wrap { width: 100%; max-width: 400px; margin: 0 auto; }
body[data-theme="console"] .gx-logo {
  background: linear-gradient(140deg, var(--cx-accent-2), var(--cx-accent));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--cx-accent) 38%, transparent);
}
body[data-theme="console"] .gx-card h1 {
  background: linear-gradient(92deg, var(--cx-accent-2), var(--cx-accent));
  -webkit-background-clip: text; background-clip: text;
}

/* access code field follows the accent */
body[data-theme="console"] .gx-input { background: rgba(255,255,255,.03); border-color: #262836; }
body[data-theme="console"] .gx-input:focus-within {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-accent) 16%, transparent);
  background: rgba(255,255,255,.05);
}
body[data-theme="console"] .gx-input:focus-within svg { color: var(--cx-accent-2); }
body[data-theme="console"] .gx-input input { caret-color: var(--cx-accent-2); }
body[data-theme="console"] .gx-input input:disabled { opacity: .5; }

/* unlock button in the accent, with a padlock that springs open */
body[data-theme="console"] .gx-go {
  background: linear-gradient(100deg, var(--cx-accent), var(--cx-accent-2)) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--cx-accent) 32%, transparent);
}
body[data-theme="console"] .gx-go:hover { background-position: 100% 0 !important; }
body[data-theme="console"] .gx-go:disabled { filter: grayscale(.7); opacity: .55; cursor: not-allowed; box-shadow: none; }
body[data-theme="console"] .gx-lock { display: grid; place-items: center; width: 19px; height: 19px; }
body[data-theme="console"] .gx-lock svg { width: 19px; height: 19px; overflow: visible; }
body[data-theme="console"] .gx-shackle { transform-origin: 15.5px 10.5px; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
body[data-theme="console"] .gx-pin { opacity: 0; transition: opacity .25s .1s; }
@media (prefers-reduced-motion: no-preference) {
  body[data-theme="console"] .gx-go:hover .gx-shackle,
  body[data-theme="console"] .gx-go:focus-visible .gx-shackle { transform: rotate(-22deg) translateY(-1.5px); }
  body[data-theme="console"] .gx-go:hover .gx-pin { opacity: 1; }
  body[data-theme="console"] .gx-go:active .gx-lock { animation: lockPop .32s ease; }
  @keyframes lockPop { 40% { transform: scale(.86) } 100% { transform: scale(1) } }
  body[data-theme="console"] .gx-card { animation: gxIn .55s cubic-bezier(.2,.8,.3,1) backwards; }
  @keyframes gxIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
}
body[data-theme="console"] .gx-pip { background: #3fbf94; }
body[data-theme="console"] .gx-msg.err { color: #ff8f95; }

/* tile grid driven by the fitter: columns and size come from JS */
@media (min-width: 900px) {
  body[data-theme="console"] .rkp-blades {
    grid-template-columns: repeat(var(--cx-cols, 4), minmax(0, 1fr)) !important;
    gap: 18px !important;
    justify-items: center;
  }
  body[data-theme="console"] .bl-screen {
    width: var(--cx-tile, clamp(64px, 11vh, 128px)) !important;
    height: var(--cx-tile, clamp(64px, 11vh, 128px)) !important;
  }
  body[data-theme="console"] .rk-blade h3 {
    font-size: clamp(.7rem, .9vw, .92rem); line-height: 1.25;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body[data-theme="console"] .rkp-grid { overflow: hidden; }
  body[data-theme="console"] { overflow: hidden !important; }
}
/* the admin user chip is a label, not a button */
body[data-theme="console"] .cx-user-static { cursor: default; }

/* ==========================================================================
   RESPONSIVE — one screen on desktop, a proper layout on phones and tablets
   ========================================================================== */

/* the fitter drives columns, size and gap at every width */
body[data-theme="console"] .rkp-blades {
  display: grid !important;
  grid-template-columns: repeat(var(--cx-cols, 4), minmax(0, 1fr)) !important;
  gap: var(--cx-gap, 18px) !important;
  justify-items: center;
}
body[data-theme="console"] .bl-screen {
  width: var(--cx-tile, 108px) !important;
  height: var(--cx-tile, 108px) !important;
  aspect-ratio: 1 / 1 !important;
}
body[data-theme="console"] .rk-blade { width: 100%; max-width: var(--cx-tile, 108px); }
body[data-theme="console"] .rk-blade h3 {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}

/* ---------- tablet ---------- */
@media (max-width: 1000px) {
  body[data-theme="console"] { overflow-y: auto !important; height: auto; min-height: 100dvh; }
  body[data-theme="console"].pad .rkp-wrap { padding: 0 20px 30px; }
  body[data-theme="console"] .cx-sys { height: auto; padding: 10px 12px; }
  body[data-theme="console"] .cx-sys-grid { flex-wrap: wrap; }
  body[data-theme="console"] .cx-card { flex: 1 1 30%; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  body[data-theme="console"] { overflow-x: hidden !important; }
  body[data-theme="console"].pad .rkp-wrap { padding: 0 16px 24px; }

  /* top bar wraps into two tidy rows */
  body[data-theme="console"] .cx-bar {
    flex-wrap: wrap; gap: 10px; padding: 12px 0; margin-bottom: 14px;
  }
  body[data-theme="console"] .cx-mark { border-right: 0; padding-right: 0; flex: 1; }
  body[data-theme="console"] .cx-mark b { font-size: 1rem; }
  body[data-theme="console"] .cx-links { display: none; }
  body[data-theme="console"] .cx-tools { gap: 6px; }
  body[data-theme="console"] .cx-ico { width: 40px; height: 40px; }
  body[data-theme="console"] .cx-user { padding: 4px 12px 4px 4px; font-size: .84rem; }
  body[data-theme="console"] .cx-av { width: 28px; height: 28px; font-size: .74rem; }

  /* search + greeting */
  body[data-theme="console"] .cx-search { height: 48px; margin-bottom: 14px; padding: 0 14px; gap: 10px; }
  body[data-theme="console"] .cx-search input { font-size: .95rem; }
  body[data-theme="console"] .cx-search kbd { display: none; }
  body[data-theme="console"] .cx-hello { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 14px; }
  body[data-theme="console"] .cx-hello h1 { font-size: 1.32rem; margin-bottom: 2px; }
  body[data-theme="console"] .cx-hello p { display: none; }
  body[data-theme="console"] .cx-when { text-align: right; }
  body[data-theme="console"] .cx-when b { font-size: 1.15rem; }
  body[data-theme="console"] .cx-when span { font-size: .68rem; }

  /* system strip: two columns of compact readouts */
  body[data-theme="console"] .cx-sys {
    flex-direction: column; align-items: stretch; height: auto; padding: 12px; gap: 10px; margin-bottom: 14px;
  }
  body[data-theme="console"] .cx-sys-head { border-right: 0; border-bottom: 1px solid var(--rk-line); padding: 0 0 9px; height: auto; }
  body[data-theme="console"] .cx-sys-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; }
  body[data-theme="console"] .cx-card { height: auto; padding: 4px 2px !important; border-right: 0 !important; }
  body[data-theme="console"] .cx-v { font-size: .82rem; }

  /* rack chips scroll sideways instead of stacking */
  body[data-theme="console"] .cx-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px 14px; padding: 0 16px 2px;
  }
  body[data-theme="console"] .cx-chips::-webkit-scrollbar { display: none; }
  body[data-theme="console"] .cx-chip { flex: none; padding: 7px 13px; font-size: .78rem; }

  /* tiles: touch friendly, label always readable */
  body[data-theme="console"] .rkp-grid { padding-top: 4px; overflow: visible; }
  body[data-theme="console"] .rk-blade h3 { font-size: .7rem; }
  body[data-theme="console"] .bl-screen { border-radius: 16px !important; }
  body[data-theme="console"] .bl-screen svg { width: 46%; height: 46%; }
  /* hover effects don't exist on touch — make the tap state obvious instead */
  body[data-theme="console"] .rk-blade .bl-screen:active {
    transform: scale(.94);
    border-color: color-mix(in srgb, var(--bl-c, #7c6cf5) 62%, #262836) !important;
  }

  /* sign-in */
  body[data-theme="console"].gx { padding: 18px; align-content: center; }
  body[data-theme="console"] .gx-card { padding: 30px 22px 20px; border-radius: 20px; }
  body[data-theme="console"] .gx-card h1 { font-size: 1.2rem; }
  body[data-theme="console"] .gx-sub { font-size: .84rem; margin-bottom: 20px; }
  body[data-theme="console"] .gx-input { height: 50px; }
  body[data-theme="console"] .gx-go { height: 50px; }

  /* upload */
  body[data-theme="console"] .cx-page-head h1 { font-size: 1.4rem; }
  body[data-theme="console"] .cx-choose-row { grid-template-columns: 1fr; gap: 10px; }
  body[data-theme="console"] .cx-opt-box { flex-direction: row; align-items: center; gap: 12px; padding: 14px; }
  body[data-theme="console"] .cx-opt-box svg { margin-bottom: 0; }
  body[data-theme="console"] .cx-drop { padding: 34px 16px; }
  body[data-theme="console"] .cx-item-pct { font-size: .7rem; }

  /* admin */
  body[data-theme="console"].ax { height: auto; overflow: visible; }
  body[data-theme="console"].ax .rkp-wrap { padding: 0 16px 26px; }
  body[data-theme="console"] .ax-grid { grid-template-columns: 1fr; gap: 14px; }
  body[data-theme="console"] .ax-col { overflow: visible; padding-right: 0; gap: 14px; }
  body[data-theme="console"] .ax-card { padding: 16px; border-radius: 16px; }
  body[data-theme="console"] .ax-row { grid-template-columns: 1fr; }
  body[data-theme="console"] .ax-item { flex-wrap: wrap; row-gap: 10px; }
  body[data-theme="console"] .ax-item-tx { flex: 1 1 100%; order: -1; }
  body[data-theme="console"] .ax-item-acts { width: 100%; }
  body[data-theme="console"] .ax-item-acts .ax-btn { flex: 1; }
  body[data-theme="console"] .ax-icons { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); max-height: 140px; }
  body[data-theme="console"] .ax-accents, body[data-theme="console"] .ax-themes { grid-template-columns: 1fr 1fr; }
  body[data-theme="console"] .ax-preview-tile { width: 54px; height: 54px; }
  body[data-theme="console"] .ax-denied { margin: 6vh auto; padding: 30px 22px; }
}

/* very small phones */
@media (max-width: 380px) {
  body[data-theme="console"] .cx-hello h1 { font-size: 1.15rem; }
  body[data-theme="console"] .cx-sys-grid { grid-template-columns: 1fr; }
  body[data-theme="console"] .ax-accents, body[data-theme="console"] .ax-themes { grid-template-columns: 1fr; }
}

/* landscape phones: reclaim vertical space */
@media (max-height: 480px) and (orientation: landscape) {
  body[data-theme="console"] .cx-hello, body[data-theme="console"] .cx-sys { display: none; }
  body[data-theme="console"] .cx-search { height: 42px; margin-bottom: 10px; }
}

/* notch / home-indicator safe areas on phones */
@supports (padding: max(0px)) {
  @media (max-width: 640px) {
    body[data-theme="console"].pad .rkp-wrap,
    body[data-theme="console"].ax .rkp-wrap {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
      padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
    body[data-theme="console"].gx { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  }
}
/* stop iOS zooming when a field is focused: inputs stay at 16px */
@media (max-width: 640px) {
  body[data-theme="console"] input, body[data-theme="console"] select, body[data-theme="console"] textarea { font-size: 16px !important; }
  body[data-theme="console"] .cx-search input { font-size: 16px !important; }
}

/* ==========================================================================
   FULL-WIDTH DESKTOP — no dead margins either side
   ========================================================================== */
body[data-theme="console"].pad .rkp-wrap,
body[data-theme="console"].ax .rkp-wrap {
  max-width: none !important;
  width: 100%;
  padding-left: clamp(18px, 2.6vw, 52px);
  padding-right: clamp(18px, 2.6vw, 52px);
}
/* tiles keep their square size; the block of them is centred with even gaps */
body[data-theme="console"] .rkp-blades {
  grid-template-columns: repeat(var(--cx-cols, 4), var(--cx-tile, 108px)) !important;
  justify-content: center;
  align-content: start;
}
body[data-theme="console"] .rk-blade { max-width: var(--cx-tile, 108px); width: var(--cx-tile, 108px); }
/* admin uses the whole width too */
body[data-theme="console"] .ax-grid { width: 100%; }
body[data-theme="console"] .cx-page { max-width: 1000px; }
@media (min-width: 1500px) {
  body[data-theme="console"] .cx-sys-grid { gap: 0; }
  body[data-theme="console"] .cx-hello h1 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); }
}

/* ==========================================================================
   Admin: scrollable panels that actually reach the bottom, reorder controls
   ========================================================================== */
body[data-theme="console"].ax { height: 100dvh; overflow: hidden; }
body[data-theme="console"].ax .rkp-wrap { min-height: 0; }
body[data-theme="console"] .ax-grid { min-height: 0; overflow: hidden; }
body[data-theme="console"] .ax-col {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 8px; padding-bottom: 24px;
  scrollbar-width: thin; scrollbar-color: #2b2d3c transparent;
}
body[data-theme="console"] .ax-col::-webkit-scrollbar { width: 8px; }
body[data-theme="console"] .ax-col::-webkit-scrollbar-thumb { background: #2b2d3c; border-radius: 8px; }
body[data-theme="console"] .ax-col::-webkit-scrollbar-track { background: transparent; }
/* the lists inside grow naturally; the column does the scrolling */
body[data-theme="console"] .ax-list { max-height: none; overflow: visible; }
body[data-theme="console"] .ax-card:last-child { margin-bottom: 8px; }

body[data-theme="console"] .ax-move {
  width: 34px; padding: 0 !important; font-size: 1rem; line-height: 1;
  flex: none; color: var(--rk-muted);
}
body[data-theme="console"] .ax-move:hover:not(:disabled) { color: var(--cx-accent-2); }
body[data-theme="console"] .ax-move:disabled { opacity: .28; cursor: default; transform: none; }
body[data-theme="console"] .ax-item-acts { flex-wrap: wrap; justify-content: flex-end; }

/* weather chip next to the clock */
body[data-theme="console"] .cx-right { display: flex; align-items: center; gap: 16px; }
body[data-theme="console"] .cx-wx {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--cx-tile); border: 1px solid var(--rk-line); border-radius: 14px;
  padding: 8px 14px 8px 10px; color: var(--rk-text); font: inherit;
  transition: border-color .18s, background .18s, transform .18s;
}
body[data-theme="console"] .cx-wx:hover { border-color: #35374a; background: var(--cx-tile-hi); transform: translateY(-1px); }
body[data-theme="console"] .cx-wx-ic { width: 30px; height: 30px; display: grid; place-items: center; color: var(--cx-accent-2); flex: none; }
body[data-theme="console"] .cx-wx-ic svg { width: 26px; height: 26px; }
body[data-theme="console"] .cx-wx-tx { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
body[data-theme="console"] .cx-wx-tx b { font-size: 1.05rem; font-weight: 500; }
body[data-theme="console"] .cx-wx-tx small { font-size: .68rem; color: var(--rk-muted); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  body[data-theme="console"] .cx-wx-ic svg { animation: wxIn .5s ease backwards; }
  @keyframes wxIn { from { opacity: 0; transform: scale(.8) rotate(-12deg); } }
}
@media (max-width: 640px) {
  body[data-theme="console"] .cx-right { gap: 10px; }
  body[data-theme="console"] .cx-wx { padding: 6px 10px 6px 7px; border-radius: 12px; }
  body[data-theme="console"] .cx-wx-ic { width: 24px; height: 24px; }
  body[data-theme="console"] .cx-wx-ic svg { width: 21px; height: 21px; }
  body[data-theme="console"] .cx-wx-tx b { font-size: .9rem; }
  body[data-theme="console"] .cx-wx-tx small { display: none; }
}

/* ==========================================================================
   ADMIN SCROLL FIX
   The grid had no explicit row track, so each column grew to its content
   height and was simply clipped. Pinning the row to the container makes the
   columns the scrolling element, as intended.
   ========================================================================== */
body[data-theme="console"] .ax-grid {
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch;
}
body[data-theme="console"] .ax-col {
  height: 100%;
  max-height: 100%;
  overflow-y: auto !important;
}
/* short windows: let the whole page scroll rather than trap the content */
@media (max-height: 700px), (max-width: 1000px) {
  body[data-theme="console"].ax { height: auto !important; overflow-y: auto !important; }
  body[data-theme="console"] .ax-grid { grid-template-rows: auto !important; overflow: visible !important; }
  body[data-theme="console"] .ax-col { height: auto; max-height: none; overflow: visible !important; }
}

/* ==========================================================================
   LIGHT MODE — same console, inverted surfaces. Every colour comes from the
   variables below so text, panels, borders and icons stay in step.
   ========================================================================== */
body[data-theme="console"][data-mode="light"] {
  --rk-text:#14161f; --rk-muted:#5d6270; --rk-line:#e2e4ec;
  --rk-panel:#ffffff; --rk-panel-2:#ffffff;
  --cx-tile:#ffffff; --cx-tile-hi:#f5f6fb; --cx-ink:#3d4252;
  color: var(--rk-text);
  background:
    radial-gradient(1100px 520px at 18% -8%, color-mix(in srgb, var(--cx-accent) 12%, transparent), transparent 62%),
    radial-gradient(900px 460px at 88% 4%, rgba(47,180,196,.10), transparent 60%),
    #f4f5fa;
}
body[data-theme="console"][data-mode="light"]::before {
  background:
    radial-gradient(38% 42% at 22% 28%, color-mix(in srgb, var(--cx-accent) 16%, transparent), transparent 60%),
    radial-gradient(34% 38% at 78% 22%, rgba(47,180,196,.12), transparent 62%),
    radial-gradient(40% 44% at 62% 82%, rgba(192,110,240,.11), transparent 62%);
}
body[data-theme="console"][data-mode="light"]::after {
  background-image:
    linear-gradient(rgba(20,22,31,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,31,.045) 1px, transparent 1px);
}

/* surfaces */
body[data-theme="console"][data-mode="light"] .cx-search,
body[data-theme="console"][data-mode="light"] .cx-sys,
body[data-theme="console"][data-mode="light"] .cx-wx,
body[data-theme="console"][data-mode="light"] .cx-chip,
body[data-theme="console"][data-mode="light"] .cx-user,
body[data-theme="console"][data-mode="light"] .ax-card,
body[data-theme="console"][data-mode="light"] .gx-card,
body[data-theme="console"][data-mode="light"] .rk-rack,
body[data-theme="console"][data-mode="light"] .cx-item,
body[data-theme="console"][data-mode="light"] .cx-opt-box,
body[data-theme="console"][data-mode="light"] .cx-drop {
  background: #fff !important; border-color: var(--rk-line) !important;
  box-shadow: 0 1px 2px rgba(20,22,31,.05) !important;
}
body[data-theme="console"][data-mode="light"] .ax-item,
body[data-theme="console"][data-mode="light"] .ax-icons,
body[data-theme="console"][data-mode="light"] .ax-accent,
body[data-theme="console"][data-mode="light"] .ax-preview,
body[data-theme="console"][data-mode="light"] .ax-field input,
body[data-theme="console"][data-mode="light"] .ax-field select,
body[data-theme="console"][data-mode="light"] .ax-inline input,
body[data-theme="console"][data-mode="light"] .gx-input,
body[data-theme="console"][data-mode="light"] .rk-console {
  background: #fafbfe !important; border-color: var(--rk-line) !important; color: var(--rk-text) !important;
}
body[data-theme="console"][data-mode="light"] .ax-ico { background: #fff; color: var(--cx-ink); }
body[data-theme="console"][data-mode="light"] .ax-ico:hover { background: #f1f2f8; }

/* text */
body[data-theme="console"][data-mode="light"] .rk-blade h3 { color: #23262f; }
body[data-theme="console"][data-mode="light"] .rk-blade:hover h3 { color: #000; }
body[data-theme="console"][data-mode="light"] .cx-n,
body[data-theme="console"][data-mode="light"] .cx-search input::placeholder { color: #7b8092; }
body[data-theme="console"][data-mode="light"] .cx-mark small,
body[data-theme="console"][data-mode="light"] .cx-k { color: var(--rk-muted); }
body[data-theme="console"][data-mode="light"] .cx-links a { color: #2c3040; }
body[data-theme="console"][data-mode="light"] .cx-ico { color: #2c3040; }
body[data-theme="console"][data-mode="light"] .cx-ico:hover { background: #eceef6; border-color: var(--rk-line); }
body[data-theme="console"][data-mode="light"] .cx-search kbd { background: #f1f2f8; border-color: var(--rk-line); color: var(--rk-muted); }

/* tiles: white cards with a coloured wash on hover */
body[data-theme="console"][data-mode="light"] .bl-screen {
  background: #fff !important;
  border: 1px solid var(--rk-line) !important;
  box-shadow: 0 1px 3px rgba(20,22,31,.06) !important;
}
body[data-theme="console"][data-mode="light"] .bl-screen svg { color: var(--cx-ink); }
body[data-theme="console"][data-mode="light"] .rk-blade:hover .bl-screen {
  background: color-mix(in srgb, var(--bl-c, #7c6cf5) 9%, #fff) !important;
  border-color: color-mix(in srgb, var(--bl-c, #7c6cf5) 45%, var(--rk-line)) !important;
  box-shadow: 0 12px 26px rgba(20,22,31,.12), 0 0 0 1px color-mix(in srgb, var(--bl-c,#7c6cf5) 22%, transparent) !important;
}
body[data-theme="console"][data-mode="light"] .ax-item-ic,
body[data-theme="console"][data-mode="light"] .ax-preview-tile {
  background: color-mix(in srgb, var(--bl-c, #7c6cf5) 10%, #fff) !important;
  border-color: color-mix(in srgb, var(--bl-c, #7c6cf5) 30%, var(--rk-line)) !important;
}

/* controls */
body[data-theme="console"][data-mode="light"] .ax-btn { background: #fff; border-color: var(--rk-line); color: var(--rk-text); }
body[data-theme="console"][data-mode="light"] .ax-btn:hover { background: #f2f3f9; border-color: #ccd0dd; }
body[data-theme="console"][data-mode="light"] .ax-primary { background: var(--cx-accent) !important; color: #fff !important; }
body[data-theme="console"][data-mode="light"] .ax-danger { background: #fff !important; color: #d33a3f !important; border-color: #f2c9cb !important; }
body[data-theme="console"][data-mode="light"] .cx-out:hover { background: #fdeff0; border-color: #f2c9cb; color: #d33a3f; }
body[data-theme="console"][data-mode="light"] .cx-chip.is-on {
  background: color-mix(in srgb, var(--cx-accent) 12%, #fff) !important;
  border-color: color-mix(in srgb, var(--cx-accent) 40%, var(--rk-line)) !important;
  color: color-mix(in srgb, var(--cx-accent) 78%, #000) !important;
}
body[data-theme="console"][data-mode="light"] .cx-chip.is-on em { color: inherit; }
body[data-theme="console"][data-mode="light"] .cx-src {
  background: color-mix(in srgb, var(--cx-accent) 11%, #fff);
  border-color: color-mix(in srgb, var(--cx-accent) 34%, var(--rk-line));
  color: color-mix(in srgb, var(--cx-accent) 72%, #000);
}
body[data-theme="console"][data-mode="light"] .cx-hello h1 span,
body[data-theme="console"][data-mode="light"] .cx-wx-ic { color: color-mix(in srgb, var(--cx-accent) 78%, #000); }
body[data-theme="console"][data-mode="light"] .cx-mark b,
body[data-theme="console"][data-mode="light"] .gx-card h1 {
  background: linear-gradient(92deg, color-mix(in srgb, var(--cx-accent) 85%, #000), var(--cx-accent));
  -webkit-background-clip: text; background-clip: text;
}
body[data-theme="console"][data-mode="light"] .toast { background: #23262f; color: #fff; border-color: #23262f; }
body[data-theme="console"][data-mode="light"] .ax-denied { background: #fff !important; }
body[data-theme="console"][data-mode="light"] .cx-item-bar { background: #eceef6; }
body[data-theme="console"][data-mode="light"] .ax-col::-webkit-scrollbar-thumb { background: #d3d7e3; }
body[data-theme="console"][data-mode="light"] .cx-av { color: #fff; }

/* mode toggle button */
.cx-modebtn .cx-sun { display: none; }
body[data-theme="console"][data-mode="light"] .cx-modebtn .cx-sun { display: block; }
body[data-theme="console"][data-mode="light"] .cx-modebtn .cx-moon { display: none; }

/* light / dark control in the admin panel */
body[data-theme="console"] .ax-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
body[data-theme="console"] .ax-mode {
  display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
  background: #0f1016; border: 1px solid var(--rk-line); border-radius: 12px; padding: 12px;
  color: var(--rk-text); font: inherit; transition: border-color .16s, transform .16s, background .16s;
}
body[data-theme="console"] .ax-mode svg { width: 18px; height: 18px; }
body[data-theme="console"] .ax-mode b { font-size: .85rem; font-weight: 500; }
body[data-theme="console"] .ax-mode:hover { transform: translateY(-2px); border-color: #35374a; }
body[data-theme="console"] .ax-mode.is-on {
  border-color: var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 14%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-accent) 14%, transparent);
}
body[data-theme="console"][data-mode="light"] .ax-mode { background: #fafbfe; }
body[data-theme="console"][data-mode="light"] .ax-mode:hover { background: #f2f3f9; border-color: #ccd0dd; }

/* ==========================================================================
   ADMIN PAGE SCROLLING — final word
   The console theme sets height/overflow with !important for the launchpad's
   fit-to-screen behaviour. The admin console is a long form, so it opts out
   and scrolls like an ordinary page; nothing can end up unreachable.
   ========================================================================== */
body[data-theme="console"].ax {
  height: auto !important;
  min-height: 100dvh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  padding: 0 0 40px !important;
}
body[data-theme="console"].ax .rkp-wrap {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}
body[data-theme="console"].ax .cx-bar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--cx-tile) 88%, transparent);
  backdrop-filter: blur(10px);
  margin-bottom: 18px;
}
body[data-theme="console"].ax .ax-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto !important;
  align-items: start;
  height: auto !important;
  overflow: visible !important;
  gap: 18px;
}
body[data-theme="console"].ax .ax-col {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0;
  padding-bottom: 0;
}
@media (max-width: 1000px) {
  body[data-theme="console"].ax .ax-grid { grid-template-columns: 1fr; }
}