.kro2-page {
  background-color: #07070c;
  color: #f2f2f7;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

.kro2-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 40px #7c5cff66;
}

.kro2-btn-ghost:hover {
  border-color: #22d3ee88;
  background: rgba(255,255,255,0.07);
}

.kro2-card:hover {
  transform: translateY(-6px);
  border-color: #7c5cff77;
  box-shadow: 0 24px 70px #7c5cff22;
}

.kro2-plan:hover {
  transform: translateY(-6px);
  border-color: #22d3ee77;
  box-shadow: 0 24px 70px #22d3ee1f;
}

@keyframes kro2fade {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kro2shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes kro2spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes kro2pulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(124,92,255,0.33); }
  50%      { box-shadow: 0 8px 44px rgba(34,211,238,0.55); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.kro3-switch:hover {
  filter: brightness(0.97);
}

.kro3-switch:focus-visible {
  outline: 2px solid #2a78d6;
  outline-offset: 2px;
}

.kro3-tile:hover {
  border-color: rgba(42,120,214,0.35);
}

.kro3-card:hover {
  border-color: rgba(42,120,214,0.28);
}

#kro3-theme:checked ~ .kro3-dash {
  background-color: #0d0d0d;
  color: #ffffff;
}

#kro3-theme:checked {
  background-color: #3987e5;
  background-position: 24px 0px;
  border: 1px solid rgba(255,255,255,0.10);
}

#kro3-theme:checked ~ .kro3-switch-text {
  color: #c3c2b7;
}

#kro3-theme:checked ~ .kro3-dash .kro3-eyebrow {
  color: #898781;
}

#kro3-theme:checked ~ .kro3-dash .kro3-sub {
  color: #c3c2b7;
}

#kro3-theme:checked ~ .kro3-dash .kro3-hero-card {
  background-color: #1a1a19;
  border: 1px solid rgba(255,255,255,0.10);
}

#kro3-theme:checked ~ .kro3-dash .kro3-hero-label {
  color: #c3c2b7;
}

#kro3-theme:checked ~ .kro3-dash .kro3-hero {
  color: #ffffff;
}

#kro3-theme:checked ~ .kro3-dash .kro3-hero-delta {
  color: #0ca30c;
}

#kro3-theme:checked ~ .kro3-dash .kro3-tile {
  background-color: #1a1a19;
  border: 1px solid rgba(255,255,255,0.10);
}

#kro3-theme:checked ~ .kro3-dash .kro3-tile-label {
  color: #c3c2b7;
}

#kro3-theme:checked ~ .kro3-dash .kro3-tile-value {
  color: #ffffff;
}

#kro3-theme:checked ~ .kro3-dash .kro3-tile-delta {
  color: #0ca30c;
}

#kro3-theme:checked ~ .kro3-dash .kro3-tile-delta-down {
  color: #c3c2b7;
}

#kro3-theme:checked ~ .kro3-dash .kro3-card {
  background-color: #1a1a19;
  border: 1px solid rgba(255,255,255,0.10);
}

#kro3-theme:checked ~ .kro3-dash .kro3-card-note {
  color: #898781;
}

#kro3-theme:checked ~ .kro3-dash .kro3-legend {
  color: #c3c2b7;
}

#kro3-theme:checked ~ .kro3-dash .kro3-th {
  border-bottom: 1px solid #2c2c2a;
  color: #898781;
}

#kro3-theme:checked ~ .kro3-dash .kro3-td {
  border-bottom: 1px solid #2c2c2a;
  color: #c3c2b7;
}

#kro3-theme:checked ~ .kro3-dash .kro3-td-strong {
  border-bottom: 1px solid #2c2c2a;
  color: #ffffff;
}

#kro3-theme:checked ~ .kro3-dash .kro3-pill {
  background-color: #16324f;
  color: #9ec5f4;
}

#kro3-theme:checked ~ .kro3-dash .kro3-pill-muted {
  background-color: #242422;
  color: #c3c2b7;
}

#kro3-theme:checked ~ .kro3-dash .kro3-grid {
  stroke: #2c2c2a;
}

#kro3-theme:checked ~ .kro3-dash .kro3-axis {
  stroke: #383835;
}

#kro3-theme:checked ~ .kro3-dash .kro3-tick {
  fill: #898781;
}

#kro3-theme:checked ~ .kro3-dash .kro3-cat {
  fill: #c3c2b7;
}

#kro3-theme:checked ~ .kro3-dash .kro3-val {
  fill: #ffffff;
}

#kro3-theme:checked ~ .kro3-dash .kro3-vlabel {
  fill: #ffffff;
}

#kro3-theme:checked ~ .kro3-dash .kro3-area {
  fill: #3987e5;
}

#kro3-theme:checked ~ .kro3-dash .kro3-line {
  stroke: #3987e5;
}

#kro3-theme:checked ~ .kro3-dash .kro3-dot {
  fill: #3987e5;
  stroke: #1a1a19;
}

#kro3-theme:checked ~ .kro3-dash .kro3-bar {
  fill: #3987e5;
}

#kro3-theme:checked ~ .kro3-dash .kro3-bar2 {
  fill: #d95926;
}

#kro3-theme:checked ~ .kro3-dash .kro3-spark {
  stroke: #3987e5;
}