/* kyudo.me shared theme: landing page, YTC, Dossier, Kyudo Accounts, Dashboard (Next keeps its own --cl-* block).
   LIGHT by default (P58): /kyudo-theme.js sets html[data-theme] to "light" unless the visitor picked dark.
   Token blocks: :root = dark values, html[data-theme="light"] = light values (kept this way so the per-app
   `:root, html[data-theme="light"]` overrides keep winning in both themes).
   Plain CSS (no build step). Pages link it as /kyudo.css?v=N; ~/scripts/build-css.sh bumps N. */

/* =====================================================================================
   KYUDO DESIGN SYSTEM v3 (P58, 2026-10-01): one family with Next.
   Sunsama-like calm: cream page, solid white cards with a 1px warm border and a soft shadow,
   ink text, orange as the brand. Filled buttons are orange with DARK text (never white on
   orange); selected chips/tabs are a soft orange fill + orange border + orange-brown text.
   Red only for errors and destructive actions. No glass, grain, grid or looping animation.
   Every text tier is >= 4.5:1 on surface AND raised in both themes (table in ~/p58/REPORT.md).
   The apps use Tailwind classes, so the greys/reds/... below are re-mapped onto the tokens.
   ===================================================================================== */
:root {
  --kx-page: #1A1917;   --kx-surface: #23221F;  --kx-raised: #2C2B27;  --kx-hover: #34332E;
  --kx-border: #383631; --kx-border-strong: #4A4740;
  --kx-text: #EDEBE7;   --kx-text-2: #C9C5BD;   --kx-text-3: #ABA69D;  --kx-text-4: #9F9A91;
  --kx-brand: #F5A33B;                                   /* logo, indicators, focus borders, selected-chip borders */
  --kx-accent: #EE8A1F; --kx-accent-hover: #F5A33B; --kx-on-accent: #24180B;   /* filled buttons: dark text, 6.85:1 */
  --kx-accent-text: #F5A33B; --kx-accent-soft: rgba(245,163,59,.16); --kx-accent-line: rgba(245,163,59,.45);
  --kx-danger: #FF8A80; --kx-danger-soft: rgba(255,138,128,.14); --kx-danger-line: rgba(255,138,128,.45);
  --kx-ok: #5FC98D;     --kx-ok-soft: rgba(95,201,141,.14);  --kx-warn: #F0C36A; --kx-warn-soft: rgba(240,195,106,.13);
  --kx-info: #7CC0F2;   --kx-info-soft: rgba(124,192,242,.14);
  --kx-shadow: 0 1px 2px rgba(0,0,0,.3);
  --kx-lift: 0 16px 36px rgba(0,0,0,.5);
  --kx-ring: 0 0 0 3px rgba(245,163,59,.16);             /* a box-shadow value, never a colour */
  --kx-radius: 12px;
  --kx-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
html[data-theme="light"] {
  --kx-page: #F7F6F3;   --kx-surface: #FFFFFF;  --kx-raised: #F6F4F0;  --kx-hover: #EFECE6;
  --kx-border: #E7E4DE; --kx-border-strong: #D6D2CA;
  --kx-text: #2A2926;   --kx-text-2: #57534C;   --kx-text-3: #6B665E;  --kx-text-4: #6E695F;
  --kx-accent-text: #A84D06; --kx-accent-soft: rgba(245,163,59,.16); --kx-accent-line: rgba(238,138,31,.55);
  --kx-danger: #B3261E; --kx-danger-soft: rgba(179,38,30,.08); --kx-danger-line: rgba(179,38,30,.35);
  --kx-ok: #2B7549;     --kx-ok-soft: rgba(43,117,73,.1);  --kx-warn: #875800; --kx-warn-soft: rgba(245,163,59,.16);
  --kx-info: #1F6CAD;   --kx-info-soft: rgba(31,108,173,.09);
  --kx-shadow: 0 1px 2px rgba(42,41,38,.05), 0 1px 1px rgba(42,41,38,.03);
  --kx-lift: 0 16px 36px rgba(42,41,38,.18);
}
:root { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
html, html[data-theme="light"] { background: var(--kx-page); }           /* no flash between pages */
body.kx { font-family: var(--kx-font); color: var(--kx-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--kx-page) !important; }
::selection { background: rgba(245,163,59,.32); }
:focus-visible { outline-color: var(--kx-brand); }

/* Smooth cross-page fades (Chrome/Edge 126+, Safari 18.2+; others just navigate normally) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }

/* ---------- Background: flat page colour. The landing keeps ONE faint warm glow at the top. ---------- */
.kx-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--kx-page) !important; }
.kx-bg::before { display: none; }
.kx-grain { display: none !important; }
.kx-bg::after {                               /* gradient, not filter:blur (2x faster first paint) */
  content: ""; position: absolute; top: -220px; left: 50%; width: 1000px; height: 760px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(245,163,59,.13), rgba(245,163,59,.05) 55%, transparent);
}
/* Light page: a warmer, wider sunrise glow (more stops = no visible rings, a faint noise layer dithers the rest) and the
   page deepens to a sandy tone at the bottom so the white cards stand out. Landing only; dark mode is unchanged.
   To go back to the old calm glow: restore the one-line rule from git (landing/kyudo.css before this block). */
html[data-theme="light"] .kx-bg::after {
  top: -460px; width: 2000px; height: 1240px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .35 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(closest-side, rgba(255,166,56,.40) 0%, rgba(255,170,64,.31) 14%, rgba(250,168,66,.23) 28%, rgba(247,166,64,.15) 44%, rgba(245,163,59,.08) 60%, rgba(245,163,59,.03) 80%, transparent 100%);
}
html[data-theme="light"] body.kx-landing .kx-bg::before {
  display: block; content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(222,196,160,0) 35%, rgba(222,196,160,.34) 100%);
}
body:not(.kx-landing) .kx-bg::after { display: none; }

/* ---------- Brand mark (the K) ---------- */
.kx-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.kx-mark { width: 30px; height: 30px; flex: none; border-radius: 8px; transition: transform .2s ease; }
.kx-brand:hover .kx-mark { transform: translateY(-1px) rotate(-4deg); }

/* ---------- Cards: solid surface, 1px warm border, soft shadow (never see-through) ---------- */
.kx-card, html[data-theme="light"] .kx-card { background-color: var(--kx-surface) !important; border: 1px solid var(--kx-border) !important;
  border-radius: var(--kx-radius) !important; box-shadow: var(--kx-shadow) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.backdrop-blur-sm, .backdrop-blur { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Tailwind's heavy drop shadows -> the soft card shadow */
body.kx :is(.shadow-lg, .shadow-xl, .shadow-2xl, .hover\:shadow-xl:hover) { box-shadow: var(--kx-shadow) !important; }

/* ---------- Primary buttons: orange with dark text ---------- */
.kx-btn { background-image: none !important; background-color: var(--kx-accent) !important; color: var(--kx-on-accent) !important;
  box-shadow: none !important; font-weight: 700; border: 0; transition: background-color .15s ease, opacity .2s ease; }
.kx-btn:hover:not(:disabled) { background-color: var(--kx-accent-hover) !important; }
.kx-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--kx-surface), 0 0 0 5px var(--kx-brand) !important; }

/* ---------- Entrance (one short fade, played once) ---------- */
.kx-enter { animation: kx-in .3s cubic-bezier(.2,.75,.2,1) both; }
.kx-d1 { animation-delay: .04s; } .kx-d2 { animation-delay: .08s; } .kx-d3 { animation-delay: .12s; }
@keyframes kx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Home-screen app (iPhone notch / home bar). Opt-in: pages with p-6 bodies ---------- */
@supports (padding: env(safe-area-inset-top)) {
  body.kx-safe {
    padding-top: max(1.5rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}

/* ---------- Show/hide password button (kyudo-eye.js) ---------- */
.kx-pw { position: relative; display: block; }
.kx-pw > input { width: 100%; padding-right: 2.9rem !important; }
.kx-pw > input::-ms-reveal, .kx-pw > input::-ms-clear { display: none; }   /* Edge's own eye */
.kx-eye {
  position: absolute; top: 50%; right: .3rem; transform: translateY(-50%);
  width: 2.3rem; height: 2.3rem; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: .5rem; background: transparent; color: var(--kx-text-3); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color .15s ease, background-color .15s ease;
}
.kx-eye:hover { color: var(--kx-text); background: var(--kx-hover); }
.kx-eye[aria-pressed="true"] { color: var(--kx-accent-text); }
.kx-eye:focus-visible { outline: 2px solid var(--kx-brand); outline-offset: 1px; }

/* ---------- Passkeys / Face ID (kyudo-passkey.js) ---------- */
.kx-pk-or { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .75rem; color: var(--kx-text-4); font-size: .8rem; }
.kx-pk-or::before, .kx-pk-or::after { content: ""; flex: 1; height: 1px; background: var(--kx-border); }
.kx-pk-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px;
  padding: .65rem 1rem; border-radius: 10px; border: 1px solid var(--kx-border-strong);
  background: var(--kx-surface); color: var(--kx-text); font: 600 .95rem/1.2 var(--kx-font); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.kx-pk-btn:hover:not(:disabled) { background: var(--kx-hover); border-color: var(--kx-border-strong); }
.kx-pk-btn:disabled { opacity: .7; cursor: default; }
.kx-pk-btn svg { color: var(--kx-accent-text); flex: none; }
.kx-pk-err, .kx-pk-msg { margin-top: .6rem; font-size: .85rem; color: var(--kx-danger); }
.kx-pk-msg.ok { color: var(--kx-ok); }
.kx-pk-banner {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; padding: .75rem .9rem;
  border-radius: var(--kx-radius); border: 1px solid var(--kx-border); border-left: 3px solid var(--kx-brand);
  background: var(--kx-surface); box-shadow: var(--kx-shadow);
}
.kx-pk-banner > svg { color: var(--kx-accent-text); flex: none; }
.kx-pk-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .88rem; }
.kx-pk-banner-text strong { color: var(--kx-text); }
.kx-pk-banner-text span { color: var(--kx-text-3); font-size: .8rem; }
.kx-pk-yes { flex: none; padding: .45rem .85rem; border-radius: 8px; border: 0; background: var(--kx-accent); color: var(--kx-on-accent); font: 700 .82rem/1.2 var(--kx-font); cursor: pointer; }
.kx-pk-yes:hover { background: var(--kx-accent-hover); }
.kx-pk-no { flex: none; width: 1.8rem; height: 1.8rem; border: 0; border-radius: .4rem; background: transparent; color: var(--kx-text-3); font-size: 1.2rem; line-height: 1; cursor: pointer; }

.kx-modal { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.6); display: flex; align-items: flex-start; justify-content: center; padding: max(1.5rem, env(safe-area-inset-top)) 1rem 1.5rem; overflow-y: auto; }
html[data-theme="light"] .kx-modal { background: rgba(42,41,38,.32); }
.kx-sheet { width: 100%; max-width: 28rem; margin-top: 6vh; border-radius: 14px; border: 1px solid var(--kx-border); background: var(--kx-surface); box-shadow: var(--kx-lift); color: var(--kx-text-2); font-family: var(--kx-font); }
.kx-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--kx-border); }
.kx-sheet-head h3 { margin: 0; font-size: 1.12rem; font-weight: 700; color: var(--kx-text); letter-spacing: -.01em; }
.kx-x { width: 2.25rem; height: 2.25rem; border: 0; border-radius: .5rem; background: transparent; color: var(--kx-text-3); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.kx-pk-no:hover, .kx-x:hover { color: var(--kx-text); background: var(--kx-hover); }
.kx-sheet-body { padding: .25rem 1.25rem 1.25rem; }
.kx-sec { padding-top: 1rem; }
.kx-sec + .kx-sec { margin-top: 1rem; border-top: 1px solid var(--kx-border); }
.kx-sec h4 { margin: 0 0 .25rem; font-size: .98rem; font-weight: 700; color: var(--kx-text); }
.kx-muted { margin: 0 0 .75rem; font-size: .86rem; color: var(--kx-text-3); line-height: 1.5; }
.kx-muted strong { color: var(--kx-text); }
.kx-pk-list { margin: .25rem 0 .9rem; display: flex; flex-direction: column; gap: .5rem; }
.kx-pk-list .kx-muted { margin: 0; }
.kx-pk-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .75rem; border-radius: 10px; background: var(--kx-raised); border: 1px solid var(--kx-border); }
.kx-pk-row div { display: flex; flex-direction: column; min-width: 0; }
.kx-pk-row strong { font-size: .9rem; color: var(--kx-text); }
.kx-pk-row span { font-size: .78rem; color: var(--kx-text-3); }
.kx-pk-del { flex: none; border: 0; background: transparent; color: var(--kx-danger); font: 600 .82rem/1.2 var(--kx-font); cursor: pointer; padding: .35rem .5rem; border-radius: .4rem; }
.kx-pk-del:hover { background: var(--kx-danger-soft); }
.kx-pk-add { width: 100%; min-height: 44px; padding: .65rem 1rem; border: 0; border-radius: 10px; color: var(--kx-on-accent); font: 700 .92rem/1.2 var(--kx-font); cursor: pointer; }
.kx-pk-add:disabled { opacity: .7; }
.kx-code { display: block; width: 100%; padding: .55rem .7rem; border-radius: .5rem; background: var(--kx-raised); border: 1px solid var(--kx-border); color: var(--kx-ok); font: .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; user-select: all; }
.kx-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.kx-row > * { flex: 1 1 auto; }
.kx-ghost { padding: .55rem .9rem; border-radius: 10px; border: 1px solid var(--kx-border-strong); background: var(--kx-surface); color: var(--kx-text); font: 600 .86rem/1.2 var(--kx-font); cursor: pointer; text-align: center; text-decoration: none; }
.kx-ghost:hover { background: var(--kx-hover); }
.kx-ghost.danger { color: var(--kx-danger); }
.kx-steps { margin: .5rem 0 0; padding-left: 1.2rem; font-size: .86rem; color: var(--kx-text-2); line-height: 1.55; }
.kx-steps li + li { margin-top: .3rem; }
.kx-field { background: var(--kx-raised) !important; border: 1px solid var(--kx-border-strong) !important; color: var(--kx-text) !important; border-radius: 10px !important; }
.kx-field:focus, .kx-field:focus-visible { outline: none !important; border-color: var(--kx-brand) !important; box-shadow: var(--kx-ring) !important; }

/* "<- Home" links on app pages; hidden inside the installed home-screen app (it would open Safari) */
.kx-home { white-space: nowrap; }
@media (display-mode: standalone) { .kx-home { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .kx-enter { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Tailwind greys -> warm tokens (both themes; Tailwind's gray is blue-tinted) ---------- */
.bg-gray-950 { background-color: var(--kx-page) !important; }
.bg-gray-900, .bg-gray-900\/80 { background-color: var(--kx-surface) !important; }
.bg-gray-800, .bg-gray-800\/50, .bg-gray-800\/70, .bg-gray-800\/80, .bg-gray-800\/90 { background-color: var(--kx-raised) !important; }
.bg-gray-700, .bg-gray-700\/80 { background-color: var(--kx-hover) !important; }
.hover\:bg-gray-800:hover, .hover\:bg-gray-700:hover, .hover\:bg-gray-600:hover, .hover\:bg-gray-800\/30:hover { background-color: var(--kx-hover) !important; }
.from-gray-800 { --tw-gradient-from: var(--kx-raised) var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-gray-900 { --tw-gradient-to: var(--kx-surface) var(--tw-gradient-to-position) !important; }
.ring-gray-900 { --tw-ring-color: var(--kx-surface) !important; }
.border-gray-800 { border-color: var(--kx-border) !important; }
.border-gray-700, .border-gray-700\/60, .border-gray-700\/50, .border-gray-600, .hover\:border-gray-600:hover { border-color: var(--kx-border-strong) !important; }
.text-gray-100, .text-gray-200 { color: var(--kx-text) !important; }
.text-gray-300 { color: var(--kx-text-2) !important; }
.text-gray-400 { color: var(--kx-text-3) !important; }
.text-gray-500, .text-gray-600 { color: var(--kx-text-4) !important; }
.placeholder-gray-500::placeholder, input::placeholder, textarea::placeholder { color: var(--kx-text-4) !important; opacity: 1; }
/* red text: links / labels -> orange accent text; errors -> danger (below) */
.text-red-300, .text-red-400, .text-red-500, .hover\:text-red-300:hover { color: var(--kx-accent-text) !important; }
.text-green-300, .text-green-400 { color: var(--kx-ok) !important; }
.text-yellow-300, .text-yellow-400, .text-yellow-500\/90, .hover\:text-yellow-300:hover { color: var(--kx-warn) !important; }
.text-blue-300, .text-blue-400, .hover\:text-blue-300:hover { color: var(--kx-info) !important; }
.bg-red-600\/20 { background-color: var(--kx-accent-soft) !important; }
.border-red-600\/40 { border-color: var(--kx-accent-line) !important; }
.bg-red-950\/40 { background-color: var(--kx-danger-soft) !important; }
.border-red-800\/50 { border-color: var(--kx-danger-line) !important; }
.bg-blue-900\/20 { background-color: var(--kx-info-soft) !important; }
.border-blue-600\/40 { border-color: color-mix(in srgb, var(--kx-info) 40%, transparent) !important; }
.bg-yellow-900\/20 { background-color: var(--kx-warn-soft) !important; }
.border-yellow-600\/40 { border-color: color-mix(in srgb, var(--kx-warn) 40%, transparent) !important; }
.bg-yellow-500 { background-color: var(--kx-warn) !important; }
.bg-green-500 { background-color: var(--kx-ok) !important; }
/* red fills (primary buttons, progress, dots) -> orange */
.bg-red-600, .bg-red-500, .active\:bg-red-700:active { background-color: var(--kx-accent) !important; }
.hover\:bg-red-500:hover { background-color: var(--kx-accent-hover) !important; }
.shadow-red-600\/20, .hover\:shadow-red-500\/30:hover { --tw-shadow-color: rgba(238,138,31,.18) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.from-red-500 { --tw-gradient-from: var(--kx-brand) var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-red-700 { --tw-gradient-to: var(--kx-accent) var(--tw-gradient-to-position) !important; }
.focus\:ring-red-500:focus { --tw-ring-color: rgba(245,163,59,.28) !important; }
input, select, textarea { color: var(--kx-text); }
/* inputs: raised colour, orange focus border + soft orange ring (like Next) */
body.kx :is(input[type=text], input[type=password], input[type=number], input[type=email], input[type=search], input:not([type]), select, textarea):focus {
  outline: none !important; border-color: var(--kx-brand) !important; box-shadow: var(--kx-ring) !important; }
body.kx .bg-transparent:is(input):focus { box-shadow: none !important; }
body.kx :has(> input.bg-transparent:focus) { border-color: var(--kx-brand) !important; box-shadow: var(--kx-ring); }
/* errors are red (danger), never orange */
:is([id$="-error"], [id="error-message"], #reg-match).text-red-300, :is([id$="-error"], [id="error-message"], #reg-match).text-red-400,
.font-mono.text-red-400 { color: var(--kx-danger) !important; }
/* log out is not a destructive action: calm grey link */
:is(#logout-button, #logout-btn).text-red-400 { color: var(--kx-text-3) !important; }
:is(#logout-button, #logout-btn).hover\:text-red-300:hover { color: var(--kx-text) !important; }

/* "white" text: on ORANGE controls it becomes the dark on-accent ink in both themes (never white on orange); in
   light mode the rest of .text-white turns dark, except on orange and the remaining coloured controls (blue / green /
   black ...). Add any new coloured control to BOTH exception lists. */
html[data-theme="light"] :is(.text-white, .hover\:text-white:hover, .group:hover .group-hover\:text-white):not(:is(.bg-red-600, .bg-red-500, .kx-btn, .kx-pk-add, .kx-pk-yes, .bg-blue-600, .bg-green-600, .bg-yellow-700, .bg-cyan-700, .bg-purple-700, .bg-black, .bg-black\/80, .status-dot)):not(:is(.bg-red-600, .bg-red-500, .kx-btn, .bg-blue-600, .bg-green-600, .bg-yellow-700, .bg-cyan-700, .bg-purple-700, .bg-black, .bg-black\/80) *) { color: var(--kx-text) !important; }
:is(.bg-red-600, .bg-red-500, .kx-btn, .kx-pk-add, .kx-pk-yes),
:is(.bg-red-600, .bg-red-500, .kx-btn) :is(.text-gray-100, .text-gray-200, .text-gray-300, .text-gray-400, .text-gray-500, .text-white, .group-hover\:text-white),
.group:hover :is(.bg-red-600, .bg-red-500, .kx-btn) .group-hover\:text-white { color: var(--kx-on-accent) !important; }
/* YTC "done" card: the blurred thumbnail sits under a fade of the card colour (was blue-black gray-950) */
.from-gray-950\/95 { --tw-gradient-from: color-mix(in srgb, var(--kx-surface) 94%, transparent) var(--tw-gradient-from-position) !important; --tw-gradient-to: color-mix(in srgb, var(--kx-surface) 0%, transparent) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.via-gray-950\/60 { --tw-gradient-stops: var(--tw-gradient-from), color-mix(in srgb, var(--kx-surface) 64%, transparent) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.to-gray-950\/20 { --tw-gradient-to: color-mix(in srgb, var(--kx-surface) 25%, transparent) var(--tw-gradient-to-position) !important; }

/* ---------- shared components on tokens ---------- */
.kx-theme { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 999px; cursor: pointer; padding: 0;
  border: 1px solid var(--kx-border); background: var(--kx-surface); color: var(--kx-text-2); box-shadow: var(--kx-shadow); transition: transform .15s ease; }
.kx-theme:hover { transform: rotate(-12deg); color: var(--kx-text); }
.kx-theme:focus-visible { outline: none; box-shadow: var(--kx-ring); }
.kx-theme-float { position: fixed; z-index: 65; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); }

/* YTC controls on tokens (the selected MP3/MP4 segment = a soft orange chip, like Next) */
.seg-btn[aria-checked="true"] { background: var(--kx-accent-soft) !important; color: var(--kx-accent-text) !important;
  box-shadow: inset 0 0 0 1px var(--kx-brand) !important; }
.seg-btn[aria-checked="true"] * { color: inherit !important; }
.sw span { background: var(--kx-border-strong) !important; }
.sw input:checked + span { background: var(--kx-accent) !important; }
.sw input:focus-visible + span { outline-color: var(--kx-brand) !important; }
.shimmer { background: linear-gradient(90deg, var(--kx-raised) 0%, var(--kx-hover) 50%, var(--kx-raised) 100%) !important; background-size: 200% 100% !important; }
.bar-fill { background: var(--kx-accent) !important; box-shadow: none !important; }
.bar-fill.ok { background: var(--kx-ok) !important; }

/* ---------- two-factor (ticket P28, kyudo-passkey.js) ---------- */
.kx-2fa-input, .kx-2fa-form .kx-field { display: block; width: 100%; box-sizing: border-box; margin: 0 0 .6rem; padding: .65rem .8rem; border-radius: 10px; font: 400 1rem/1.4 var(--kx-font); }
.kx-2fa-input { font: 600 1.35rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .35em; text-align: center; }
.kx-2fa-input.kx-2fa-rec { font-size: 1rem; letter-spacing: .06em; }
.kx-2fa-input:focus, .kx-2fa-form .kx-field:focus { outline: none; border-color: var(--kx-brand) !important; box-shadow: var(--kx-ring) !important; }
.kx-2fa-link { display: block; margin: -.2rem 0 .75rem; padding: .3rem 0; border: 0; background: none; color: var(--kx-text-3); font: 400 .84rem/1.4 var(--kx-font); text-decoration: underline; cursor: pointer; }
.kx-2fa-link:hover { color: var(--kx-text); }
.kx-2fa-note { margin: 0 0 .9rem; padding: .6rem .75rem; border-radius: 8px; background: var(--kx-raised); border-left: 3px solid var(--kx-brand); color: var(--kx-text-2); font-size: .86rem; line-height: 1.45; }
.kx-2fa-step { margin-top: 1rem !important; }
.kx-2fa-qr { display: flex; justify-content: center; margin: .25rem 0 .75rem; }
.kx-2fa-qr img { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: .75rem; border: 1px solid var(--kx-border); image-rendering: pixelated; }
.kx-2fa-open { display: block; box-sizing: border-box; text-align: center; text-decoration: none; margin-bottom: .6rem; }
.kx-2fa-or { text-align: center; }
.kx-2fa-key { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; padding: .5rem .6rem; border-radius: 10px; background: var(--kx-raised); border: 1px solid var(--kx-border); }
.kx-2fa-key code { flex: 1; min-width: 0; font: 600 .9rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--kx-text); overflow-wrap: anywhere; user-select: all; }
.kx-2fa-ghost { flex: none; padding: .5rem .85rem; border-radius: 8px; border: 1px solid var(--kx-border-strong); background: var(--kx-surface); color: var(--kx-text); font: 600 .84rem/1.2 var(--kx-font); cursor: pointer; }
.kx-2fa-ghost:hover { background: var(--kx-hover); }
.kx-2fa-danger { color: var(--kx-danger); }
.kx-2fa-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.kx-2fa-row > * { flex: 1 1 auto; }
.kx-2fa-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .3rem 1rem; list-style: none; margin: 0 0 .75rem; padding: .7rem .9rem; white-space: nowrap; border-radius: 10px; background: var(--kx-raised); border: 1px solid var(--kx-border); font: 600 .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--kx-text); user-select: all; }
.kx-2fa-check { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-size: .9rem; color: var(--kx-text-2); cursor: pointer; }
.kx-2fa-check input { width: 18px; height: 18px; accent-color: var(--kx-accent); }
.kx-2fa-on { margin-left: .4rem; padding: .05rem .5rem; border-radius: 99px; background: var(--kx-ok-soft); color: var(--kx-ok); font-size: .74rem; font-weight: 700; vertical-align: middle; }
.kx-2fa-intro { margin: 0 0 .6rem; font-weight: 600; }

/* ---- Cursor spotlight + grid (kyudo-spot.js): orange, desktop mouse only, behind the content, moves only with the pointer. ---- */
.kx-spot, .kx-spot-grid { position: fixed; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .8s ease; --sp: 245,163,59; --sg: 238,138,31; --sa: .16; --sb: .06; --ga: .22; }
html[data-theme="light"] .kx-spot, html[data-theme="light"] .kx-spot-grid { --sa: .20; --sb: .07; --ga: .30; }
.kx-spot {
  left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 9999px;
  background: radial-gradient(circle, rgba(var(--sp), var(--sa)) 0%, rgba(var(--sp), var(--sb)) 38%, transparent 70%);
  transform: translate3d(var(--kx-x, 50vw), var(--kx-y, 40vh), 0);
}
.kx-spot-grid {
  inset: 0;
  background-image: linear-gradient(rgba(var(--sg), var(--ga)) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--sg), var(--ga)) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(220px circle at var(--kx-x, 50vw) var(--kx-y, 40vh), #000 0%, transparent 100%);
  mask-image: radial-gradient(220px circle at var(--kx-x, 50vw) var(--kx-y, 40vh), #000 0%, transparent 100%);
}
.kx-spot.on, .kx-spot-grid.on { opacity: 1; }
html.kx-spot-on body.kx, body.kx.kx-landing { background: transparent !important; }   /* the layers sit at z-index -1: a painted body would hide them */


/* =====================================================================================
   P68 CYBERPUNK SKIN (an easter egg: hold the K. 5 s while logged in, or Next's AI helper).
   html[data-skin="cyber"] is set by /kyudo-theme.js (logged in only; dark by default, light via the sun/moon switch, P225). Everything is scoped under
   :root[data-skin="cyber"] (0,2,0), so the normal look is byte-for-byte unchanged and beats the per-page :root /
   html[data-theme] token blocks (Next's --cl-* palette included). Near-black blue-violet surfaces, three neon hues used
   as thin lines and small fills (cyan = action, magenta + violet = decoration, acid = warnings), mono labels, chamfered
   primary buttons. No animated background: one static glow on the canvas. Every text tier >= 6:1 (P68 REPORT).
   The takeover animation lives in /kyudo-cyber.js. Off switch: delete this block (nothing else depends on it).
   ===================================================================================== */
:root[data-skin="cyber"] {
  --kx-page: #07070D;   --kx-surface: #0D0D17;  --kx-raised: #141423;  --kx-hover: #1B1B2E;
  --kx-border: #23233A; --kx-border-strong: #33335A;
  --kx-text: #EEF0FF;   --kx-text-2: #C5C8E8;   --kx-text-3: #A3A7D1;  --kx-text-4: #9599C6;
  --kx-brand: #3DE6F2;
  --kx-accent: #3DE6F2; --kx-accent-hover: #7FF1F8; --kx-on-accent: #05121A;
  --kx-accent-text: #3DE6F2; --kx-accent-soft: rgba(61,230,242,.12); --kx-accent-line: rgba(61,230,242,.5);
  --kx-danger: #FF6B86; --kx-danger-soft: rgba(255,107,134,.13); --kx-danger-line: rgba(255,107,134,.45);
  --kx-ok: #4CF0A6;     --kx-ok-soft: rgba(76,240,166,.12);  --kx-warn: #E6F15A; --kx-warn-soft: rgba(230,241,90,.11);
  --kx-info: #82A8FF;   --kx-info-soft: rgba(130,168,255,.13);
  --kx-shadow: 0 0 0 1px rgba(61,230,242,.035), 0 14px 34px -18px rgba(0,0,0,.95);
  --kx-lift: 0 26px 60px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(61,230,242,.1);
  --kx-ring: 0 0 0 3px rgba(61,230,242,.2);
  --kx-cy-cyan: #3DE6F2; --kx-cy-mag: #FF4FAE; --kx-cy-vio: #A98BFF; --kx-cy-acid: #E6F15A; --kx-cy-amber: #FFB547;
  --kx-cy-line: linear-gradient(90deg, transparent 3%, rgba(61,230,242,.6) 28%, rgba(169,139,255,.5) 58%, rgba(255,79,174,.55) 82%, transparent 97%);
  --kx-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* Next's own palette (its page remaps --kx-* from these) */
  --cl-orange: #3DE6F2; --cl-orange-strong: #3DE6F2; --cl-on-orange: #05121A;
  --cl-page: #07070D; --cl-side: #0A0A13; --cl-side-on: #171729; --cl-card: #0D0D17; --cl-raised: #141423; --cl-hover: #1B1B2E;
  --cl-border: #23233A; --cl-border-strong: #33335A;
  --cl-text: #EEF0FF; --cl-text-2: #C5C8E8; --cl-text-3: #A3A7D1; --cl-text-4: #9599C6;
  --cl-acc-text: #3DE6F2; --cl-acc-soft: rgba(61,230,242,.12); --cl-danger: #FF6B86;
  --cl-ok: #4CF0A6; --cl-ok-soft: rgba(76,240,166,.12); --cl-warn: #E6F15A; --cl-warn-soft: rgba(230,241,90,.11);
  --cl-blue: #82A8FF; --cl-blue-soft: rgba(130,168,255,.13);
  --cl-danger-soft: rgba(255,107,134,.13); --cl-yellow: #E6F15A; --cl-yellow-soft: rgba(230,241,90,.11);
  --cl-shadow: var(--kx-shadow); --cl-lift: var(--kx-lift);
  --cl-tag-1: #3DE6F2; --cl-tag-2: #FF4FAE; --cl-tag-3: #A98BFF; --cl-tag-4: #4CF0A6; --cl-tag-5: #FFB547; --cl-tag-6: #E6F15A;
  color-scheme: dark;
  scrollbar-color: #33335A transparent;
  background:
    linear-gradient(to bottom, #07070D 0, #07070D env(safe-area-inset-top, 0px), rgba(7,7,13,0) calc(env(safe-area-inset-top, 0px) + 150px)),   /* the top edge = the status bar colour (theme-color #07070D) */
    radial-gradient(1100px 700px at 4% -10%, rgba(61,230,242,.17), transparent 62%),
    radial-gradient(900px 640px at 98% 2%, rgba(169,139,255,.13), transparent 60%),
    radial-gradient(1100px 760px at 100% 106%, rgba(255,79,174,.14), transparent 62%),
    radial-gradient(900px 600px at -6% 100%, rgba(61,130,255,.08), transparent 60%),
    #07070D;
  background-attachment: fixed;
}
/* the canvas carries the glow: painted bodies / the landing's layer get out of the way */
:root[data-skin="cyber"] body, :root[data-skin="cyber"] body.kx, :root[data-skin="cyber"] body.bg-gray-950,
:root[data-skin="cyber"] .kx-bg { background: transparent !important; }
:root[data-skin="cyber"] .kx-bg::before, :root[data-skin="cyber"] .kx-bg::after { display: none !important; }
:root[data-skin="cyber"] .kx-spot, :root[data-skin="cyber"] .kx-spot-grid { --sp: 61,230,242; --sg: 169,139,255; --sa: .12; --sb: .04; --ga: .2; }
/* Next's sticky top bars (the "← October" back bar, the note editor bar, the sticky filter row) paint a flat var(--bg), but the canvas
   behind them is the neon glow gradient: in the light skin the glow is strong, so the bars showed as lighter bands. Make them
   translucent + blurred so the glow shows through and they read as one surface (text scrolling under stays hidden by the blur). */
:root[data-skin="cyber"] :is(section > .pg-back, .ne-top, .stick) {
  background: color-mix(in srgb, var(--kx-page) 38%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
:root[data-skin="cyber"] ::selection { background: rgba(255,79,174,.38); color: #fff; }
:root[data-skin="cyber"] :focus-visible { outline-color: #3DE6F2; }
/* P225: the sun/moon switch stays: the skin has a light (daytime) version, see the end of this block */
:root[data-skin="cyber"] .kx-modal { background: rgba(3,3,8,.72); }

/* cards: solid surface with a neon gradient border (cyan -> violet -> magenta) drawn by the border-box layer */
:root[data-skin="cyber"] :is(.card, .kx-card, .kx-sheet, .rounded-2xl.bg-gray-900, .rounded-xl.bg-gray-900, .rounded-2xl.bg-gray-900\/80, .rounded-xl.bg-gray-900\/80) {
  background: linear-gradient(var(--kx-surface), var(--kx-surface)) padding-box,
    linear-gradient(135deg, rgba(61,230,242,.55), rgba(169,139,255,.22) 38%, rgba(51,51,90,.55) 62%, rgba(255,79,174,.5)) border-box !important;
  border: 1px solid transparent !important; }
/* app tiles on the landing and Next's task cards: the same border, quieter, brighter on hover */
:root[data-skin="cyber"] :is(.item, .kx-tile, a.bg-gray-900, a.rounded-xl, .n-chip) { border-color: rgba(61,230,242,.16) !important; }
@media (hover: hover) { :root[data-skin="cyber"] :is(a.rounded-xl, a.rounded-2xl, .item):hover { border-color: rgba(61,230,242,.45) !important; box-shadow: 0 0 0 1px rgba(61,230,242,.12), 0 0 26px -8px rgba(61,230,242,.45) !important; } }

/* labels: small caps in mono */
:root[data-skin="cyber"] .card > h2, :root[data-skin="cyber"] .kx-sec h4, :root[data-skin="cyber"] .tracking-wider, :root[data-skin="cyber"] .uppercase {
  font-family: var(--kx-mono); letter-spacing: .14em; }
:root[data-skin="cyber"] .card > h2 { font-size: 11.5px; font-weight: 600; color: var(--kx-text-3); }

/* primary buttons: neon cyan -> violet, dark ink, chamfered corners */
:root[data-skin="cyber"] :is(.btn, .kx-btn, .kx-pk-add, .kx-pk-yes, button.bg-red-600, a.bg-red-600, button.bg-red-500, a.bg-red-500) {
  background-image: linear-gradient(100deg, #3DE6F2 0%, #7FE7FF 48%, #A98BFF 100%) !important; color: #05121A !important; border-radius: 2px !important;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); letter-spacing: .01em;
  transition: filter .15s ease, transform .15s ease; }
:root[data-skin="cyber"] :is(.btn, .kx-btn, .kx-pk-add, .kx-pk-yes, button.bg-red-600, a.bg-red-600):hover:not(:disabled) { filter: brightness(1.1) saturate(1.1); }
:root[data-skin="cyber"] :is(.btn, .kx-btn, .kx-pk-add, .kx-pk-yes, button.bg-red-600, a.bg-red-600):active:not(:disabled) { transform: translateY(1px); }
:root[data-skin="cyber"] :is(.btn, .kx-btn, .kx-pk-add, .kx-pk-yes, button.bg-red-600, a.bg-red-600):focus-visible { clip-path: none; outline: 2px solid #FF4FAE; outline-offset: 2px; }
:root[data-skin="cyber"] :is(.btn, .kx-btn, button.bg-red-600, a.bg-red-600) * { color: inherit !important; }

/* secondary buttons + chips: hairline, cyan when chosen */
:root[data-skin="cyber"] :is(.ghost, .kx-ghost, .kx-pk-btn):hover:not(:disabled) { border-color: rgba(61,230,242,.45) !important; }
:root[data-skin="cyber"] :is(.chip.on, .n-chip.on, .seg-btn[aria-checked="true"]) {
  background: rgba(61,230,242,.1) !important; border-color: rgba(61,230,242,.7) !important; color: #3DE6F2 !important;
  box-shadow: inset 0 0 12px rgba(61,230,242,.12), 0 0 14px -4px rgba(61,230,242,.45) !important; }
:root[data-skin="cyber"] :is(input, textarea, select):focus { border-color: #3DE6F2 !important; box-shadow: 0 0 0 3px rgba(61,230,242,.18), 0 0 20px -6px rgba(61,230,242,.5) !important; }

/* colour accents */
:root[data-skin="cyber"] .num { background: rgba(255,79,174,.14) !important; color: #FF4FAE !important; box-shadow: inset 0 0 0 1px rgba(255,79,174,.35); }
:root[data-skin="cyber"] :is(.dot, .k-dot, h1 b) { color: #FF4FAE !important; fill: #FF4FAE !important; text-shadow: 0 0 14px rgba(255,79,174,.6); }
:root[data-skin="cyber"] .chk.on { box-shadow: 0 0 12px -2px rgba(76,240,166,.6); }
:root[data-skin="cyber"] .pill.ai { color: #A98BFF !important; background: rgba(169,139,255,.13) !important; }
:root[data-skin="cyber"] .text-red-300, :root[data-skin="cyber"] .text-red-400 { text-shadow: 0 0 10px rgba(61,230,242,.25); }

/* the landing: the K. glows, the name gets a cold edge */
:root[data-skin="cyber"] body.kx-landing h1 { background: linear-gradient(92deg, #EEF0FF 30%, #3DE6F2 70%, #A98BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-skin="cyber"] .k-draw { color: #EEF0FF; filter: drop-shadow(-1.2px 0 rgba(255,79,174,.75)) drop-shadow(1.2px 0 rgba(61,230,242,.75)); }
:root[data-skin="cyber"] .kx-gl-k > div, :root[data-skin="cyber"] .kx-cy-k .kx-cy-k-box {
  background: linear-gradient(145deg, #141423, #0B0B14) !important; border-color: rgba(61,230,242,.35) !important;
  box-shadow: 0 0 0 1px rgba(61,230,242,.12), 0 0 36px -8px rgba(61,230,242,.45), 0 0 70px -24px rgba(255,79,174,.55) !important; }
:root[data-skin="cyber"] .kx-gl-k::after { border-color: #FF4FAE; }

/* -------------------------------------------------------------------------------------
   P225 CYBERPUNK LIGHT (daytime). :root[data-skin="cyber"][data-theme="light"] (0,3,0) re-points the tokens above and the
   few hard-coded neon colours at a pale-lavender "daylight" version: white cards, deep ink text, the same three hues but as
   deep, readable shades (cyan #00707D, magenta #C0106C, violet #6A42DB) with the bright neon kept for fills, gradients and
   borders. The cyan -> violet primary button keeps its dark ink (12:1). Dark stays the default of the skin; the choice is
   stored apart from the normal theme ("kyudo-cy-theme"), see kyudo-theme.js. Off switch: delete this block.
   ------------------------------------------------------------------------------------- */
:root[data-skin="cyber"][data-theme="light"] {
  --kx-page: #EEF0FA;   --kx-surface: #FFFFFF;  --kx-raised: #F5F6FD;  --kx-hover: #E7EAF8;
  --kx-border: #D3D8EE; --kx-border-strong: #B2B9DB;
  --kx-text: #12132B;   --kx-text-2: #34375C;   --kx-text-3: #4B4F7A;  --kx-text-4: #5C6089;
  --kx-brand: #00A7B8;
  --kx-accent: #3DE6F2; --kx-accent-hover: #26D5E2; --kx-on-accent: #05121A;
  --kx-accent-text: #00707D; --kx-accent-soft: rgba(0,170,190,.13); --kx-accent-line: rgba(0,150,170,.55);
  --kx-danger: #C8183F; --kx-danger-soft: rgba(200,24,63,.09); --kx-danger-line: rgba(200,24,63,.4);
  --kx-ok: #067048;     --kx-ok-soft: rgba(6,112,72,.1);     --kx-warn: #745F00; --kx-warn-soft: rgba(214,226,40,.3);
  --kx-info: #2F55D0;   --kx-info-soft: rgba(47,85,208,.09);
  --kx-shadow: 0 0 0 1px rgba(0,150,170,.05), 0 10px 26px -16px rgba(40,44,110,.28);
  --kx-lift: 0 24px 56px -14px rgba(40,44,110,.34), 0 0 0 1px rgba(0,150,170,.14);
  --kx-ring: 0 0 0 3px rgba(0,170,190,.22);
  --kx-cy-line: linear-gradient(90deg, transparent 3%, rgba(0,170,190,.6) 28%, rgba(124,92,255,.5) 58%, rgba(236,40,150,.5) 82%, transparent 97%);
  --cl-orange: #00A7B8; --cl-orange-strong: #3DE6F2; --cl-on-orange: #05121A;
  --cl-page: #EEF0FA; --cl-side: #E8EBF8; --cl-side-on: #DCE0F4; --cl-card: #FFFFFF; --cl-raised: #F5F6FD; --cl-hover: #E7EAF8;
  --cl-border: #D3D8EE; --cl-border-strong: #B2B9DB;
  --cl-text: #12132B; --cl-text-2: #34375C; --cl-text-3: #4B4F7A; --cl-text-4: #5C6089;
  --cl-acc-text: #00707D; --cl-acc-soft: rgba(0,170,190,.13); --cl-danger: #C8183F;
  --cl-ok: #067048; --cl-ok-soft: rgba(6,112,72,.1); --cl-warn: #745F00; --cl-warn-soft: rgba(214,226,40,.3);
  --cl-blue: #2F55D0; --cl-blue-soft: rgba(47,85,208,.09);
  --cl-danger-soft: rgba(200,24,63,.09); --cl-yellow: #6B5A00; --cl-yellow-soft: rgba(214,226,40,.34);
  --cl-shadow: var(--kx-shadow); --cl-lift: var(--kx-lift);
  --cl-tag-1: #00A7B8; --cl-tag-2: #E5188A; --cl-tag-3: #7C5CFF; --cl-tag-4: #12B27A; --cl-tag-5: #F09A1A; --cl-tag-6: #A6B800;
  --cl-blk-1: #087F8D; --cl-blk-2: #2F55D0; --cl-blk-3: #5B3FD0; --cl-blk-4: #0B7A52; --cl-blk-5: #B3116A; --cl-blk-6: #8A6200;
  --cl-blk-brk: #5C6089; --cl-blk-mute: #4B4F7A;
  --cl-gold: #C99700; --cl-gold-edge: #C99700; --cl-gold-text: #6B4E00; --cl-gold-soft: rgba(224,170,0,.16); --cl-gold-bg: #FBF3D2;
  color-scheme: light;
  scrollbar-color: #B2B9DB transparent;
  background:
    linear-gradient(to bottom, #EEF0FA 0, #EEF0FA env(safe-area-inset-top, 0px), rgba(238,240,250,0) calc(env(safe-area-inset-top, 0px) + 150px)),
    radial-gradient(1100px 700px at 4% -10%, rgba(61,230,242,.34), transparent 62%),
    radial-gradient(900px 640px at 98% 2%, rgba(169,139,255,.26), transparent 60%),
    radial-gradient(1100px 760px at 100% 106%, rgba(255,79,174,.2), transparent 62%),
    radial-gradient(900px 600px at -6% 100%, rgba(61,130,255,.14), transparent 60%),
    #EEF0FA;
  background-attachment: fixed;
}
:root[data-skin="cyber"][data-theme="light"] ::selection { background: rgba(255,79,174,.3); color: #12132B; }
:root[data-skin="cyber"][data-theme="light"] :focus-visible { outline-color: #00909F; }
:root[data-skin="cyber"][data-theme="light"] .kx-spot, :root[data-skin="cyber"][data-theme="light"] .kx-spot-grid { --sp: 0,170,190; --sg: 124,92,255; --sa: .1; --sb: .03; --ga: .16; }
:root[data-skin="cyber"][data-theme="light"] .kx-modal { background: rgba(30,34,90,.34); }
:root[data-skin="cyber"][data-theme="light"] :is(.card, .kx-card, .kx-sheet, .rounded-2xl.bg-gray-900, .rounded-xl.bg-gray-900, .rounded-2xl.bg-gray-900\/80, .rounded-xl.bg-gray-900\/80) {
  background: linear-gradient(var(--kx-surface), var(--kx-surface)) padding-box,
    linear-gradient(135deg, rgba(0,170,190,.6), rgba(124,92,255,.3) 38%, rgba(178,185,219,.7) 62%, rgba(236,40,150,.5)) border-box !important; }
:root[data-skin="cyber"][data-theme="light"] :is(.item, .kx-tile, a.bg-gray-900, a.rounded-xl, .n-chip) { border-color: rgba(0,150,170,.24) !important; }
@media (hover: hover) { :root[data-skin="cyber"][data-theme="light"] :is(a.rounded-xl, a.rounded-2xl, .item):hover { border-color: rgba(0,150,170,.6) !important; box-shadow: 0 0 0 1px rgba(0,170,190,.14), 0 0 26px -8px rgba(0,170,190,.45) !important; } }
:root[data-skin="cyber"][data-theme="light"] :is(.ghost, .kx-ghost, .kx-pk-btn):hover:not(:disabled) { border-color: rgba(0,150,170,.6) !important; }
:root[data-skin="cyber"][data-theme="light"] :is(.chip.on, .n-chip.on, .seg-btn[aria-checked="true"]) {
  background: rgba(0,190,210,.12) !important; border-color: rgba(0,140,160,.8) !important; color: #00707D !important;
  box-shadow: inset 0 0 12px rgba(0,190,210,.1), 0 0 14px -4px rgba(0,170,190,.4) !important; }
:root[data-skin="cyber"][data-theme="light"] :is(input, textarea, select):focus { border-color: #00A7B8 !important; box-shadow: 0 0 0 3px rgba(0,170,190,.2), 0 0 20px -6px rgba(0,170,190,.45) !important; }
:root[data-skin="cyber"][data-theme="light"] .num { background: rgba(236,40,150,.1) !important; color: #C0106C !important; box-shadow: inset 0 0 0 1px rgba(236,40,150,.35); }
:root[data-skin="cyber"][data-theme="light"] :is(.dot, .k-dot, h1 b) { color: #E5188A !important; fill: #E5188A !important; text-shadow: 0 0 12px rgba(229,24,138,.35); }
:root[data-skin="cyber"][data-theme="light"] .chk.on { box-shadow: 0 0 12px -2px rgba(18,178,122,.55); }
:root[data-skin="cyber"][data-theme="light"] .pill.ai { color: #6A42DB !important; background: rgba(124,92,255,.12) !important; }
:root[data-skin="cyber"][data-theme="light"] :is(.text-red-300, .text-red-400) { text-shadow: none; }
:root[data-skin="cyber"][data-theme="light"] body.kx-landing h1 { background: linear-gradient(92deg, #12132B 30%, #00909F 70%, #7C5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-skin="cyber"][data-theme="light"] .k-draw { color: #12132B; filter: drop-shadow(-1.2px 0 rgba(236,40,150,.6)) drop-shadow(1.2px 0 rgba(0,170,190,.65)); }
:root[data-skin="cyber"][data-theme="light"] .kx-gl-k > div, :root[data-skin="cyber"][data-theme="light"] .kx-cy-k .kx-cy-k-box {
  background: linear-gradient(145deg, #FFFFFF, #E9ECFB) !important; border-color: rgba(0,150,170,.45) !important;
  box-shadow: 0 0 0 1px rgba(0,170,190,.16), 0 0 36px -8px rgba(0,170,190,.4), 0 0 70px -24px rgba(236,40,150,.4) !important; }
:root[data-skin="cyber"][data-theme="light"] .kx-gl-k::after { border-color: #E5188A; }

/* P245 devices list */
.kx-dev-this { font-style: normal; font-weight: 700; font-size: .68rem; margin-left: .4rem; padding: .1rem .4rem; border-radius: 6px; background: var(--kx-accent); color: var(--kx-on-accent); vertical-align: middle; }
.kx-dev-all { width: 100%; margin-top: .25rem; min-height: 44px; }
.kx-dev-list { display: flex; flex-direction: column; gap: .5rem; margin: .25rem 0 .5rem; }
.kx-dev-list > .kx-muted { margin: 0; }