/* ============================================================
   🎵 SKIN 6 — SONIC ORBIT  (html[data-skin="sonic"])
   Reactive motion: cards halki saans lete hain (breathing glow),
   progress bars waveform/equalizer ki tarah chalte hain, primary
   buttons pulse karte hain, tap par accent ring "ping" hoti hai.
   Rang badalte hain 🎨 accent palette ke saath.
   AMOLED base · koi blue nahi · mono-friendly.
   ============================================================ */

html[data-skin="sonic"] {
  --so-bg: #000000;
  --so-card: #111114;
  --so-card-2: #17171c;
  --so-line: rgba(255, 255, 255, .08);
  --so-line-2: rgba(255, 255, 255, .17);
  --so-text: #f6efe6;
  --so-dim: #a89c8d;
  --so-r: 18px;
  --so-r-sm: 13px;
  --so-ease: cubic-bezier(.22, 1, .36, 1);
}

/* entry — neeche se uth kar aata hai (fill:backwards, taaki hover kaam kare) */
@keyframes so-rise {
  0%   { transform: translateY(24px) scale(.94); opacity: 0; }
  58%  { transform: translateY(-5px) scale(1.012); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* saans — reactive glow */
@keyframes so-breathe {
  0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, .55),
                         0 0 0 0 color-mix(in srgb, var(--acc-o) 0%, transparent); }
  50%      { box-shadow: 0 3px 16px rgba(0, 0, 0, .6),
                         0 0 26px color-mix(in srgb, var(--acc-o) 20%, transparent); }
}
/* waveform — bars chalte hain */
@keyframes so-wave { to { background-position: 200% 0; } }
/* beat */
@keyframes so-beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.028); }
}
/* tap par ring */
@keyframes so-ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc-o) 60%, transparent); }
  100% { box-shadow: 0 0 0 16px transparent; }
}

html[data-skin="sonic"] body {
  background: var(--so-bg) !important;
  color: var(--so-text) !important;
}

/* ---------------- cards ---------------- */
html[data-skin="sonic"] .card,
html[data-skin="sonic"] .os-card {
  background: var(--so-card) !important;
  border: 1px solid var(--so-line) !important;
  border-radius: var(--so-r) !important;
  animation: so-rise .6s var(--so-ease) backwards,
             so-breathe 5.4s ease-in-out .9s infinite;
  transition: transform .5s var(--so-ease), border-color .3s ease, box-shadow .4s ease !important;
}
html[data-skin="sonic"] .card:nth-child(1), html[data-skin="sonic"] .os-card:nth-child(1) { animation-delay: .02s, 1.0s; }
html[data-skin="sonic"] .card:nth-child(2), html[data-skin="sonic"] .os-card:nth-child(2) { animation-delay: .09s, 1.7s; }
html[data-skin="sonic"] .card:nth-child(3), html[data-skin="sonic"] .os-card:nth-child(3) { animation-delay: .16s, 2.4s; }
html[data-skin="sonic"] .card:nth-child(4), html[data-skin="sonic"] .os-card:nth-child(4) { animation-delay: .23s, 3.1s; }
html[data-skin="sonic"] .card:nth-child(5), html[data-skin="sonic"] .os-card:nth-child(5) { animation-delay: .30s, 3.8s; }
html[data-skin="sonic"] .card:nth-child(n+6),
html[data-skin="sonic"] .os-card:nth-child(n+6) { animation-delay: .36s, 4.4s; }

html[data-skin="sonic"] .card .card,
html[data-skin="sonic"] .os-card .os-card,
html[data-skin="sonic"] .card .os-card,
html[data-skin="sonic"] .os-card .card {
  background: var(--so-card-2) !important;
  animation: none !important;
}

html[data-skin="sonic"] .card:hover,
html[data-skin="sonic"] .os-card:hover {
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--acc-o) 34%, transparent) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .7),
              0 0 34px color-mix(in srgb, var(--acc-o) 26%, transparent) !important;
}
html[data-skin="sonic"] .card:active,
html[data-skin="sonic"] .os-card:active {
  transform: scale(.965) !important;
  animation: so-ping .55s ease-out, so-breathe 5.4s ease-in-out .9s infinite;
}

/* ---------------- hero ---------------- */
html[data-skin="sonic"] .hero,
html[data-skin="sonic"] .os-hero,
html[data-skin="sonic"] .mcc-hero {
  background:
    radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--acc-o) 20%, transparent), transparent 62%),
    linear-gradient(155deg, var(--so-card), #0b0b0e) !important;
  border: 1px solid color-mix(in srgb, var(--acc-o) 28%, transparent) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .62) !important;
  animation: so-rise .68s var(--so-ease) backwards;
}

/* ---------------- buttons ---------------- */
html[data-skin="sonic"] .btn,
html[data-skin="sonic"] .os-btn {
  border-radius: 13px !important;
  border: 1px solid var(--so-line-2) !important;
  background: var(--so-card-2) !important;
  color: var(--so-text) !important;
  font-weight: 650 !important;
  transition: transform .45s var(--so-ease), box-shadow .3s, background .3s !important;
}
html[data-skin="sonic"] .btn:hover,
html[data-skin="sonic"] .os-btn:hover { transform: translateY(-3px) !important; }
html[data-skin="sonic"] .btn:active,
html[data-skin="sonic"] .os-btn:active { transform: scale(.93) !important; }
html[data-skin="sonic"] .btn-primary,
html[data-skin="sonic"] .os-btn--primary {
  background: linear-gradient(135deg, var(--acc-o), var(--acc-y)) !important;
  border: 0 !important;
  color: var(--acc-on) !important;
  font-weight: 800 !important;
  animation: so-beat 3.6s ease-in-out 1.2s infinite;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--acc-o) 36%, transparent) !important;
}
html[data-skin="sonic"] .btn-primary:hover,
html[data-skin="sonic"] .os-btn--primary:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--acc-o) 50%, transparent) !important;
}

/* ---------------- chips / tabs ---------------- */
html[data-skin="sonic"] .chip,
html[data-skin="sonic"] .os-chip,
html[data-skin="sonic"] .mockhub-tab,
html[data-skin="sonic"] .filter-btn {
  border-radius: 12px !important;
  border: 1px solid var(--so-line-2) !important;
  background: var(--so-card-2) !important;
  color: var(--so-dim) !important;
  transition: transform .45s var(--so-ease), background .3s, color .3s, border-color .3s !important;
}
html[data-skin="sonic"] .chip:hover,
html[data-skin="sonic"] .mockhub-tab:hover,
html[data-skin="sonic"] .filter-btn:hover { transform: translateY(-2px) scale(1.05) !important; }
html[data-skin="sonic"] .mockhub-tab.is-active,
html[data-skin="sonic"] .os-chip--accent,
html[data-skin="sonic"] .filter-btn.active {
  background: linear-gradient(135deg, var(--acc-o), var(--acc-y)) !important;
  border-color: transparent !important;
  color: var(--acc-on) !important;
  font-weight: 750 !important;
  animation: so-rise .45s var(--so-ease) backwards;
}

/* ---------------- shell ---------------- */
html[data-skin="sonic"] .sidebar,
html[data-skin="sonic"] .os-nav { background: #07070a !important; border-right: 1px solid var(--so-line) !important; }
html[data-skin="sonic"] .topbar,
html[data-skin="sonic"] .os-topbar {
  background: rgba(7, 7, 10, .88) !important;
  backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid var(--so-line) !important;
}
html[data-skin="sonic"] .nav-item {
  border-radius: 12px !important;
  transition: transform .45s var(--so-ease), background .3s, color .3s !important;
}
html[data-skin="sonic"] .nav-item:hover { background: var(--so-card) !important; transform: translateX(4px) !important; }
html[data-skin="sonic"] .nav-item.active,
html[data-skin="sonic"] .nav-item[aria-current="page"] {
  background: color-mix(in srgb, var(--acc-o) 17%, transparent) !important;
  color: var(--acc-y) !important;
  font-weight: 750 !important;
  box-shadow: inset 3px 0 0 var(--acc-o) !important;
}
html[data-skin="sonic"] .nav-item.active * { color: var(--acc-y) !important; }

/* ---------------- inputs ---------------- */
html[data-skin="sonic"] input,
html[data-skin="sonic"] select,
html[data-skin="sonic"] textarea,
html[data-skin="sonic"] .search-input {
  background: #0c0c0f !important;
  border: 1px solid var(--so-line-2) !important;
  border-radius: 12px !important;
  color: var(--so-text) !important;
  transition: border-color .3s, box-shadow .3s !important;
}
html[data-skin="sonic"] input:focus,
html[data-skin="sonic"] select:focus,
html[data-skin="sonic"] textarea:focus {
  border-color: var(--acc-a) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc-o) 22%, transparent) !important;
}

/* ---------------- progress = waveform equalizer ---------------- */
html[data-skin="sonic"] .os-bar,
html[data-skin="sonic"] .progress,
html[data-skin="sonic"] .bar {
  background: #1a1a1f !important;
  border-radius: 999px !important;
  overflow: hidden;
}
html[data-skin="sonic"] .os-bar-fill,
html[data-skin="sonic"] .progress-bar > i {
  background-image: repeating-linear-gradient(90deg,
    var(--acc-y) 0 6px, var(--acc-o) 6px 10px,
    color-mix(in srgb, var(--acc-o) 55%, transparent) 10px 13px, var(--acc-y) 13px 19px) !important;
  background-size: 200% 100% !important;
  border-radius: 999px !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--acc-o) 50%, transparent) !important;
  animation: so-wave 2.6s linear infinite;
  transition: width .8s var(--so-ease) !important;
}

/* ---------------- overlays ---------------- */
html[data-skin="sonic"] .modal,
html[data-skin="sonic"] .dialog,
html[data-skin="sonic"] .sheet,
html[data-skin="sonic"] .os-sheet,
html[data-skin="sonic"] .toast,
html[data-skin="sonic"] .os-toast,
html[data-skin="sonic"] .os-palette {
  background: #0f0f12 !important;
  border: 1px solid var(--so-line-2) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .82) !important;
  animation: so-rise .48s var(--so-ease) backwards;
}

/* ---------------- mock-test console ---------------- */
html[data-skin="sonic"] .ex-qcard {
  background: var(--so-card) !important;
  border: 1px solid var(--so-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .6) !important;
  animation: so-rise .6s var(--so-ease) backwards;
}
html[data-skin="sonic"] [class*="ex-opt"] {
  background: var(--so-card-2) !important;
  border: 1px solid var(--so-line-2) !important;
  border-radius: 15px !important;
  transition: transform .45s var(--so-ease), background .28s, border-color .28s, box-shadow .3s !important;
}
html[data-skin="sonic"] [class*="ex-opt"]:hover { transform: translateY(-2px) !important; }
html[data-skin="sonic"] [class*="ex-opt"]:active { transform: scale(.96) !important; animation: so-ping .5s ease-out; }
html[data-skin="sonic"] [class*="ex-opt"].on {
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc-o) 92%, transparent),
                                       color-mix(in srgb, var(--acc-y) 92%, transparent)) !important;
  border-color: var(--acc-y) !important;
  color: var(--acc-on) !important;
  font-weight: 750 !important;
  animation: so-rise .4s var(--so-ease) backwards;
}
html[data-skin="sonic"] [class*="ex-opt"].on * { color: var(--acc-on) !important; }
html[data-skin="sonic"] .ex-radio { border-radius: 999px !important; border: 1.5px solid var(--so-line-2) !important; }
html[data-skin="sonic"] .ex-radio-dot { background: var(--acc-on) !important; border-radius: 999px !important; }
html[data-skin="sonic"] .ex-pal {
  background: var(--so-card-2) !important;
  border: 1px solid var(--so-line) !important;
  border-radius: 14px !important;
}
html[data-skin="sonic"] .ex-clock {
  background: linear-gradient(135deg, var(--acc-o), var(--acc-y)) !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: var(--acc-on) !important;
  animation: so-beat 2.2s ease-in-out infinite;
}
html[data-skin="sonic"] .ex-clock * { color: var(--acc-on) !important; }

/* ---------------- desktop layout ---------------- */
@media (min-width: 1100px) {
  html[data-skin="sonic"] .os-page { max-width: 1400px !important; padding-left: 28px !important; padding-right: 28px !important; }
  html[data-skin="sonic"] .os-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 22px !important; }
  html[data-skin="sonic"] .os-grid > *:nth-child(1) { grid-column: span 4; }
  html[data-skin="sonic"] .os-grid > *:nth-child(2) { grid-column: span 2; }
  html[data-skin="sonic"] .os-grid > *:nth-child(3) { grid-column: span 2; }
  html[data-skin="sonic"] .os-grid > *:nth-child(4) { grid-column: span 2; }
  html[data-skin="sonic"] .os-grid > *:nth-child(5) { grid-column: span 2; }
  html[data-skin="sonic"] .os-grid > *:nth-child(n+6) { grid-column: span 3; }
  html[data-skin="sonic"] .two-col { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important; }
}

@media (min-width: 1100px) {
  html[data-skin="sonic"] .dash-wrap { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 20px !important; }
  html[data-skin="sonic"] .dash-wrap > * { margin-bottom: 0 !important; margin-top: 0 !important; }
  html[data-skin="sonic"] .dash-wrap > .page-head  { grid-column: span 6; }
  html[data-skin="sonic"] .dash-wrap > .hero       { grid-column: span 4; }
  html[data-skin="sonic"] .dash-wrap > .stat-grid  { grid-column: span 2; }
  html[data-skin="sonic"] .dash-wrap > .card       { grid-column: span 2; }
  html[data-skin="sonic"] .dash-wrap > .two-col    { grid-column: span 6; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-skin="sonic"] * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .06s !important; }
}