/* ============================================================
   🌀 SKIN 7 — MOIRÉ WAVE  (html[data-skin="moire"])
   Do radial gratings ulti disha me ghoomte hain; unki
   interference se background me halka moiré pattern banta hai.
   Cards uske upar translucent glass hain. Rang badalte hain
   🎨 accent palette ke saath.
   AMOLED base · koi blue nahi · mono-friendly.
   ============================================================ */

html[data-skin="moire"] {
  --mw-bg: #000000;
  --mw-card: rgba(17, 17, 20, .84);
  --mw-card-2: rgba(24, 24, 29, .88);
  --mw-line: rgba(255, 255, 255, .09);
  --mw-line-2: rgba(255, 255, 255, .18);
  --mw-text: #f6efe6;
  --mw-dim: #a89c8d;
  --mw-r: 18px;
  --mw-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---- do counter-rotating gratings = moiré interference ---- */
@keyframes mw-rot { to { rotate: 360deg; } }

html[data-skin="moire"] body::before,
html[data-skin="moire"] body::after {
  content: "";
  position: fixed;
  left: 50%; top: 46%;
  width: 150vmax; height: 150vmax;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  will-change: transform;
}
html[data-skin="moire"] body::before {
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--acc-a) 55%, transparent) 0deg .5deg,
    transparent .5deg 2.2deg);
  opacity: .17;
  animation: mw-rot 92s linear infinite;
}
html[data-skin="moire"] body::after {
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--acc-o) 52%, transparent) 0deg .55deg,
    transparent .55deg 2.35deg);
  opacity: .13;
  animation: mw-rot 76s linear infinite reverse;
}

@keyframes mw-in {
  0%   { transform: translateY(20px) scale(.97); opacity: 0; }
  60%  { transform: translateY(-3px) scale(1.008); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

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

/* ---------------- cards (glass over the pattern) ---------------- */
html[data-skin="moire"] .card,
html[data-skin="moire"] .os-card {
  background: var(--mw-card) !important;
  border: 1px solid var(--mw-line) !important;
  border-radius: var(--mw-r) !important;
  backdrop-filter: blur(7px) saturate(125%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  animation: mw-in .6s var(--mw-ease) backwards;
  transition: transform .5s var(--mw-ease), border-color .3s, box-shadow .35s !important;
}
html[data-skin="moire"] .card:nth-child(1), html[data-skin="moire"] .os-card:nth-child(1) { animation-delay: .02s; }
html[data-skin="moire"] .card:nth-child(2), html[data-skin="moire"] .os-card:nth-child(2) { animation-delay: .09s; }
html[data-skin="moire"] .card:nth-child(3), html[data-skin="moire"] .os-card:nth-child(3) { animation-delay: .16s; }
html[data-skin="moire"] .card:nth-child(4), html[data-skin="moire"] .os-card:nth-child(4) { animation-delay: .23s; }
html[data-skin="moire"] .card:nth-child(5), html[data-skin="moire"] .os-card:nth-child(5) { animation-delay: .30s; }
html[data-skin="moire"] .card:nth-child(n+6),
html[data-skin="moire"] .os-card:nth-child(n+6) { animation-delay: .36s; }

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

html[data-skin="moire"] .card:hover,
html[data-skin="moire"] .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, .62),
              0 0 28px color-mix(in srgb, var(--acc-o) 18%, transparent) !important;
}
html[data-skin="moire"] .card:active,
html[data-skin="moire"] .os-card:active { transform: scale(.97) !important; }

/* ---------------- hero ---------------- */
html[data-skin="moire"] .hero,
html[data-skin="moire"] .os-hero,
html[data-skin="moire"] .mcc-hero {
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--acc-o) 15%, var(--mw-card)),
    color-mix(in srgb, var(--acc-a) 7%, var(--mw-card))) !important;
  border: 1px solid color-mix(in srgb, var(--acc-o) 26%, transparent) !important;
  border-radius: 24px !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .58) !important;
  animation: mw-in .68s var(--mw-ease) backwards;
}

/* ---------------- buttons ---------------- */
html[data-skin="moire"] .btn,
html[data-skin="moire"] .os-btn {
  border-radius: 13px !important;
  border: 1px solid var(--mw-line-2) !important;
  background: var(--mw-card-2) !important;
  color: var(--mw-text) !important;
  font-weight: 650 !important;
  transition: transform .45s var(--mw-ease), box-shadow .3s, background .3s !important;
}
html[data-skin="moire"] .btn:hover,
html[data-skin="moire"] .os-btn:hover { transform: translateY(-3px) !important; }
html[data-skin="moire"] .btn:active,
html[data-skin="moire"] .os-btn:active { transform: scale(.93) !important; }
html[data-skin="moire"] .btn-primary,
html[data-skin="moire"] .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;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--acc-o) 34%, transparent) !important;
}

/* ---------------- chips / tabs ---------------- */
html[data-skin="moire"] .chip,
html[data-skin="moire"] .os-chip,
html[data-skin="moire"] .mockhub-tab,
html[data-skin="moire"] .filter-btn {
  border-radius: 12px !important;
  border: 1px solid var(--mw-line-2) !important;
  background: var(--mw-card-2) !important;
  color: var(--mw-dim) !important;
  transition: transform .45s var(--mw-ease), background .3s, color .3s, border-color .3s !important;
}
html[data-skin="moire"] .chip:hover,
html[data-skin="moire"] .mockhub-tab:hover,
html[data-skin="moire"] .filter-btn:hover { transform: translateY(-2px) scale(1.05) !important; }
html[data-skin="moire"] .mockhub-tab.is-active,
html[data-skin="moire"] .os-chip--accent,
html[data-skin="moire"] .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: mw-in .45s var(--mw-ease) backwards;
}

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

/* ---------------- inputs ---------------- */
html[data-skin="moire"] input,
html[data-skin="moire"] select,
html[data-skin="moire"] textarea,
html[data-skin="moire"] .search-input {
  background: rgba(12, 12, 15, .85) !important;
  border: 1px solid var(--mw-line-2) !important;
  border-radius: 12px !important;
  color: var(--mw-text) !important;
  transition: border-color .3s, box-shadow .3s !important;
}
html[data-skin="moire"] input:focus,
html[data-skin="moire"] select:focus,
html[data-skin="moire"] 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 ---------------- */
html[data-skin="moire"] .os-bar,
html[data-skin="moire"] .progress,
html[data-skin="moire"] .bar { background: rgba(28, 28, 33, .9) !important; border-radius: 999px !important; overflow: hidden; }
html[data-skin="moire"] .os-bar-fill,
html[data-skin="moire"] .progress-bar > i {
  background: linear-gradient(90deg, var(--acc-o), var(--acc-y)) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--acc-o) 45%, transparent) !important;
  transition: width .8s var(--mw-ease) !important;
}

/* ---------------- overlays ---------------- */
html[data-skin="moire"] .modal,
html[data-skin="moire"] .dialog,
html[data-skin="moire"] .sheet,
html[data-skin="moire"] .os-sheet,
html[data-skin="moire"] .toast,
html[data-skin="moire"] .os-toast,
html[data-skin="moire"] .os-palette {
  background: rgba(15, 15, 18, .96) !important;
  border: 1px solid var(--mw-line-2) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8) !important;
  animation: mw-in .48s var(--mw-ease) backwards;
}

/* ---------------- mock-test console ---------------- */
html[data-skin="moire"] .ex-qcard {
  background: var(--mw-card) !important;
  border: 1px solid var(--mw-line) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(7px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .58) !important;
  animation: mw-in .6s var(--mw-ease) backwards;
}
html[data-skin="moire"] [class*="ex-opt"] {
  background: var(--mw-card-2) !important;
  border: 1px solid var(--mw-line-2) !important;
  border-radius: 15px !important;
  transition: transform .45s var(--mw-ease), background .28s, border-color .28s !important;
}
html[data-skin="moire"] [class*="ex-opt"]:hover { transform: translateY(-2px) !important; }
html[data-skin="moire"] [class*="ex-opt"]:active { transform: scale(.97) !important; }
html[data-skin="moire"] [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: mw-in .4s var(--mw-ease) backwards;
}
html[data-skin="moire"] [class*="ex-opt"].on * { color: var(--acc-on) !important; }
html[data-skin="moire"] .ex-radio { border-radius: 999px !important; border: 1.5px solid var(--mw-line-2) !important; }
html[data-skin="moire"] .ex-radio-dot { background: var(--acc-on) !important; border-radius: 999px !important; }
html[data-skin="moire"] .ex-pal {
  background: var(--mw-card-2) !important;
  border: 1px solid var(--mw-line) !important;
  border-radius: 14px !important;
}
html[data-skin="moire"] .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;
}
html[data-skin="moire"] .ex-clock * { color: var(--acc-on) !important; }

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

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

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