/* Kitsune Docs shared visual language — keep identical across the library suite. */
:root {
  --ks-bg: #080914;
  --ks-surface: #101225;
  --ks-surface-2: #171a34;
  --ks-sidebar: #0c0d1c;
  --ks-text: #f4f4ff;
  --ks-muted: #b9bbdc;
  --ks-line: rgba(255,255,255,.11);
  --ks-accent: #ff6a3d;
  --ks-accent-2: #7c5cff;
  --ks-success: #55e99b;
  --ks-radius-sm: 12px;
  --ks-radius: 18px;
  --ks-radius-lg: 26px;
  --ks-shadow: 0 18px 55px rgba(0,0,0,.34);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ks-bg); scroll-behavior: smooth; }
html body {
  width: 100%;
  max-width: none !important;
  margin: 0;
  min-height: 100vh;
  color: var(--ks-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(900px 520px at 8% 0%, rgba(255,106,61,.12), transparent 58%),
    radial-gradient(760px 500px at 100% 5%, rgba(124,92,255,.16), transparent 56%),
    var(--ks-bg);
}
.sidebar, nav.sidebar, aside.sidebar {
  color: var(--ks-text) !important;
  background: linear-gradient(180deg, var(--ks-sidebar), #111329) !important;
  border-right: 1px solid var(--ks-line);
}
.sidebar-header, .sidebar .logo {
  background: linear-gradient(145deg, rgba(255,106,61,.14), rgba(124,92,255,.13)) !important;
  border-bottom: 1px solid var(--ks-line) !important;
}
.sidebar h1, .sidebar-header h1, .sidebar .logo h1 { color: #fff !important; letter-spacing: -.02em; }
.sidebar a, .menu-link, .nav-link {
  color: var(--ks-muted) !important;
  border-radius: 10px;
  border-left: 0 !important;
}
.sidebar a:hover, .sidebar a.active, .menu-link:hover, .menu-link.active, .nav-link:hover, .nav-link.active {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(255,106,61,.16), rgba(124,92,255,.13)) !important;
}
.nav-section, .nav-section-title, .menu-section {
  color: #c7c0ff !important;
  letter-spacing: .09em !important;
}
.lang-btn, .lang-toggle-btn, .lang-sw-btn {
  border: 1px solid var(--ks-line) !important;
  border-radius: 10px !important;
  color: var(--ks-muted) !important;
  background: rgba(255,255,255,.04) !important;
}
.lang-btn.active, .lang-toggle-btn.active, .lang-sw-btn.active {
  color: #fff !important;
  border-color: rgba(255,106,61,.55) !important;
  background: linear-gradient(135deg, var(--ks-accent), #ef486f) !important;
}
.version, .sidebar-header .version {
  display: inline-flex;
  color: #fff !important;
  background: linear-gradient(135deg, var(--ks-accent), var(--ks-accent-2)) !important;
  border-radius: 999px !important;
  padding: 5px 11px !important;
  opacity: 1 !important;
}
.content, .page, .content-area {
  width: 100%;
  max-width: none !important;
  margin-right: 0 !important;
  color: var(--ks-text);
  background: transparent !important;
}
.main { max-width: none !important; }
iframe, .content-frame, #content-frame {
  width: 100%;
  min-width: 0;
  background: var(--ks-bg) !important;
  border: 0 !important;
}
.page-header, main > header, .main > header {
  padding: 24px !important;
  margin-bottom: 22px !important;
  border: 1px solid var(--ks-line) !important;
  border-radius: var(--ks-radius-lg) !important;
  background: linear-gradient(135deg, rgba(255,106,61,.12), rgba(124,92,255,.12)) !important;
  box-shadow: var(--ks-shadow);
}
section {
  border-radius: var(--ks-radius) !important;
}
.content > section, .page > section, .main > section, body > section, div.section {
  padding: 22px !important;
  margin-bottom: 18px !important;
  border: 1px solid var(--ks-line) !important;
  background: linear-gradient(180deg, rgba(23,26,52,.92), rgba(15,17,35,.92)) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
}
h1, h2, h3, h4 { color: var(--ks-text) !important; }
h1 { letter-spacing: -.035em; }
h2 {
  border-color: rgba(255,106,61,.55) !important;
  letter-spacing: -.02em;
}
p, li, td, .subtitle, .meta { color: var(--ks-muted) !important; }
a { color: #b9adff; }
a:hover { color: #ffd1c3; }
code {
  color: #ffd0c2 !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  padding: .12em .36em;
}
pre, .code-block, .example-content {
  color: #e9eaff !important;
  background: #090a15 !important;
  border: 1px solid var(--ks-line) !important;
  border-radius: var(--ks-radius-sm) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}
pre { padding: 16px !important; overflow: auto; }
pre code { color: inherit !important; padding: 0; border: 0; background: transparent !important; }
table {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--ks-line) !important;
  border-radius: var(--ks-radius-sm);
  border-collapse: separate !important;
  border-spacing: 0;
  background: rgba(7,8,18,.35) !important;
}
th { color: #fff !important; background: rgba(124,92,255,.14) !important; }
th, td { border-color: var(--ks-line) !important; }
.alert, .note, .tip, .warn, .info-box, .example-box, .feature-card, .arch-card, .module-card, .component-card, .method-card, .data-class, .toc, .card {
  border: 1px solid var(--ks-line) !important;
  border-radius: var(--ks-radius) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.example-header {
  color: var(--ks-text) !important;
  border-color: var(--ks-line) !important;
  background: rgba(124,92,255,.12) !important;
}
p.description, .method-card .description {
  color: var(--ks-muted) !important;
  border-color: var(--ks-line) !important;
  border-left-color: var(--ks-success) !important;
  background: linear-gradient(135deg, rgba(124,92,255,.10), rgba(85,233,155,.07)) !important;
  box-shadow: none !important;
}
.property-name, .property-type, .toc a { color: #d7d1ff !important; }
.property-list li { border-color: var(--ks-line) !important; }
.alert { color: var(--ks-text) !important; }
.alert-info { border-left-color: #64b5f6 !important; }
.alert-warning { border-left-color: #ffad5c !important; }
.alert-success { border-left-color: var(--ks-success) !important; }
.alert-danger { border-left-color: #ff6b7d !important; }
.alert-info strong { color: #90caf9 !important; }
.alert-warning strong { color: #ffc078 !important; }
.alert-success strong { color: #8cf0b9 !important; }
.alert-danger strong { color: #ff9cab !important; }
tr:hover { background: rgba(255,255,255,.035) !important; }
.badge-green { color: #a8f3c8 !important; background: rgba(85,233,155,.12) !important; }
.badge-blue { color: #a9ccff !important; background: rgba(100,181,246,.13) !important; }
.badge-orange { color: #ffc194 !important; background: rgba(255,106,61,.13) !important; }
.badge-purple { color: #cfc5ff !important; background: rgba(124,92,255,.15) !important; }
.btn, button {
  border-radius: var(--ks-radius-sm) !important;
}
.install-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.install-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 26px 18px; border-right: 1px solid var(--ks-line); background: linear-gradient(180deg, var(--ks-sidebar), #111329); }
.install-sidebar-brand { display: flex; gap: 12px; align-items: center; padding: 16px; margin-bottom: 24px; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); background: linear-gradient(145deg, rgba(255,106,61,.14), rgba(124,92,255,.13)); }
.install-sidebar-brand strong, .install-sidebar-brand span { display: block; color: #fff; }
.install-sidebar-brand small { display: block; margin-top: 4px; color: var(--ks-muted); }
.install-sidebar-icon { font-size: 25px; }
.install-sidebar-title { margin: 18px 10px 8px; color: #c7c0ff !important; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.install-sidebar nav { display: grid; gap: 6px; }
.install-sidebar nav a { padding: 11px 12px; color: var(--ks-muted); border-radius: 10px; text-decoration: none; }
.install-sidebar nav a:hover, .install-sidebar nav a.active { color: #fff; background: linear-gradient(90deg, rgba(255,106,61,.16), rgba(124,92,255,.13)); }
.kitsune-install { width: 100%; max-width: none; min-width: 0; margin: 0; padding: 34px 48px 64px; }
html.is-embedded .install-layout { display: block; min-height: auto; }
html.is-embedded .install-sidebar { display: none; }
.kitsune-install .install-hero {
  padding: 30px;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-lg);
  background: linear-gradient(135deg, rgba(255,106,61,.15), rgba(124,92,255,.17));
  box-shadow: var(--ks-shadow);
}
.install-eyebrow { color: #ffd0c2 !important; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.install-version-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.install-pill { padding: 7px 11px; border: 1px solid var(--ks-line); border-radius: 999px; background: rgba(0,0,0,.22); color: #fff; font: 700 12px/1 ui-monospace, monospace; }
.install-step { padding: 24px; margin-top: 16px; border: 1px solid var(--ks-line); border-radius: var(--ks-radius); background: linear-gradient(180deg, var(--ks-surface-2), var(--ks-surface)); }
.install-step h2 { margin-top: 0; }
.install-note { padding: 14px 16px; border-left: 3px solid var(--ks-accent); border-radius: 0 var(--ks-radius-sm) var(--ks-radius-sm) 0; background: rgba(255,106,61,.08); }
.install-lang { display: flex; gap: 8px; margin-bottom: 16px; }
.install-lang button { padding: 8px 12px; border: 1px solid var(--ks-line); color: var(--ks-muted); background: rgba(255,255,255,.04); cursor: pointer; }
.install-lang button.active { color: #fff; background: linear-gradient(135deg, var(--ks-accent), #ef486f); }
html[data-lang="pl"] [data-doc-lang="en"], html[data-lang="en"] [data-doc-lang="pl"] { display: none !important; }
@media (max-width: 820px) {
  .sidebar, nav.sidebar, aside.sidebar { border-right: 0; border-bottom: 1px solid var(--ks-line); }
  .install-layout { width: 100%; grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
  .install-sidebar { position: relative; height: auto; padding: 14px; border-right: 0; border-bottom: 1px solid var(--ks-line); }
  .install-sidebar-brand { margin-bottom: 10px; }
  .install-sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .install-sidebar-title { display: none; }
  .kitsune-install { padding: 18px 14px 48px; }
  .kitsune-install .install-hero, .install-step { min-width: 0; max-width: 100%; padding: 18px; border-radius: 16px; }
  .install-eyebrow, .install-hero h1, .install-step h2 { overflow-wrap: anywhere; }
  .install-step pre { width: 100%; max-width: 100%; }
  .install-step table { display: block; max-width: 100%; overflow-x: auto; }
  .content > section, .page > section, .main > section, body > section, div.section { padding: 17px !important; border-radius: 16px !important; }
}