/* ============================================================
   🪀 SKIN 5 — ELASTIC MOMENTUM  (html[data-skin="elastic"])
   Physics-inspired motion: damped-spring entry (multiple
   overshoots), press par motion-blur + squash, hover par Z-depth
   lift. Rang badalte hain 🎨 accent palette ke saath.
   AMOLED base · koi blue nahi · mono-friendly.
   ============================================================ */

html[data-skin="elastic"] {
  --el-bg: #000000;
  --el-card: #121214;
  --el-card-2: #17171a;
  --el-line: rgba(255, 255, 255, .08);
  --el-line-2: rgba(255, 255, 255, .16);
  --el-text: #f6efe6;
  --el-dim: #a89c8d;
  --el-r: 18px;
  --el-r-sm: 13px;
  --el-spring: cubic-bezier(.2, 1.45, .35, 1);
  --el-glide: cubic-bezier(.16, 1, .3, 1);
}

/* damped spring — bounce kar kar ke baithta hai */
@keyframes el-settle {
  0%   { transform: translateY(30px) scale(.93); opacity: 0; }
  42%  { transform: translateY(-10px) scale(1.035); opacity: 1; }
  64%  { transform: translateY(5px) scale(.988); }
  80%  { transform: translateY(-2.5px) scale(1.008); }
  91%  { transform: translateY(1px) scale(.998); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes el-drop {
  0%   { transform: translateY(-16px) scale(.97); opacity: 0; }
  46%  { transform: translateY(3px) scale(1.01); opacity: 1; }
  70%  { transform: translateY(-1.5px) scale(.997); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

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

/* ---------------- cards ---------------- */
html[data-skin="elastic"] .card,
html[data-skin="elastic"] .os-card {
  background: var(--el-card) !important;
  border: 1px solid var(--el-line) !important;
  border-radius: var(--el-r) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  animation: el-settle .62s var(--el-spring) both;
  transition: transform .5s var(--el-spring), box-shadow .35s ease, border-color .3s ease, filter .18s ease !important;
  transform-origin: 50% 60%;
}
html[data-skin="elastic"] .card:nth-child(1), html[data-skin="elastic"] .os-card:nth-child(1) { animation-delay: .02s; }
html[data-skin="elastic"] .card:nth-child(2), html[data-skin="elastic"] .os-card:nth-child(2) { animation-delay: .09s; }
html[data-skin="elastic"] .card:nth-child(3), html[data-skin="elastic"] .os-card:nth-child(3) { animation-delay: .16s; }
html[data-skin="elastic"] .card:nth-child(4), html[data-skin="elastic"] .os-card:nth-child(4) { animation-delay: .23s; }
html[data-skin="elastic"] .card:nth-child(5), html[data-skin="elastic"] .os-card:nth-child(5) { animation-delay: .30s; }
html[data-skin="elastic"] .card:nth-child(n+6),
html[data-skin="elastic"] .os-card:nth-child(n+6) { animation-delay: .36s; }

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

/* hover = Z-depth lift (perspective ke saath) */
html[data-skin="elastic"] .card:hover,
html[data-skin="elastic"] .os-card:hover {
  transform: perspective(950px) translateZ(16px) translateY(-4px) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .7), 0 0 30px color-mix(in srgb, var(--acc-o) 14%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  border-color: color-mix(in srgb, var(--acc-o) 30%, transparent) !important;
}
/* press = squash + motion blur (momentum ka feel) */
html[data-skin="elastic"] .card:active,
html[data-skin="elastic"] .os-card:active {
  transform: scale(.955) translateY(2px) !important;
  filter: blur(.35px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .7) !important;
}

/* ---------------- hero ---------------- */
html[data-skin="elastic"] .hero,
html[data-skin="elastic"] .os-hero,
html[data-skin="elastic"] .mcc-hero {
  background: linear-gradient(155deg, color-mix(in srgb, var(--acc-o) 16%, var(--el-card)),
                                       color-mix(in srgb, var(--acc-y) 7%, var(--el-card))) !important;
  border: 1px solid color-mix(in srgb, var(--acc-o) 26%, transparent) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  animation: el-settle .7s var(--el-spring) both;
}

/* ---------------- buttons ---------------- */
html[data-skin="elastic"] .btn,
html[data-skin="elastic"] .os-btn {
  border-radius: 13px !important;
  border: 1px solid var(--el-line-2) !important;
  background: var(--el-card-2) !important;
  color: var(--el-text) !important;
  font-weight: 650 !important;
  transition: transform .42s var(--el-spring), box-shadow .3s ease, background .3s ease, filter .18s ease !important;
}
html[data-skin="elastic"] .btn:hover,
html[data-skin="elastic"] .os-btn:hover { transform: translateY(-3px) scale(1.03) !important; }
html[data-skin="elastic"] .btn:active,
html[data-skin="elastic"] .os-btn:active {
  transform: scale(.92) translateY(3px) !important;
  filter: blur(.4px);
}
html[data-skin="elastic"] .btn-primary,
html[data-skin="elastic"] .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 24px color-mix(in srgb, var(--acc-o) 34%, transparent) !important;
}
html[data-skin="elastic"] .btn-primary:hover,
html[data-skin="elastic"] .os-btn--primary:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--acc-o) 46%, transparent) !important;
}

/* ---------------- chips / tabs / filters ---------------- */
html[data-skin="elastic"] .chip,
html[data-skin="elastic"] .os-chip,
html[data-skin="elastic"] .mockhub-tab,
html[data-skin="elastic"] .filter-btn {
  border-radius: 12px !important;
  border: 1px solid var(--el-line-2) !important;
  background: var(--el-card-2) !important;
  color: var(--el-dim) !important;
  transition: transform .42s var(--el-spring), background .3s, color .3s, border-color .3s !important;
}
html[data-skin="elastic"] .chip:hover,
html[data-skin="elastic"] .mockhub-tab:hover,
html[data-skin="elastic"] .filter-btn:hover { transform: scale(1.06) translateY(-2px) !important; }
html[data-skin="elastic"] .mockhub-tab.is-active,
html[data-skin="elastic"] .os-chip--accent,
html[data-skin="elastic"] .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: el-drop .5s var(--el-spring) both;
}

/* ---------------- shell ---------------- */
html[data-skin="elastic"] .sidebar,
html[data-skin="elastic"] .os-nav {
  background: #08080a !important;
  border-right: 1px solid var(--el-line) !important;
}
html[data-skin="elastic"] .topbar,
html[data-skin="elastic"] .os-topbar {
  background: rgba(8, 8, 10, .88) !important;
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--el-line) !important;
}
html[data-skin="elastic"] .nav-item {
  border-radius: 12px !important;
  transition: transform .42s var(--el-spring), background .3s, color .3s !important;
}
html[data-skin="elastic"] .nav-item:hover { background: var(--el-card) !important; transform: translateX(4px) scale(1.02) !important; }
html[data-skin="elastic"] .nav-item.active,
html[data-skin="elastic"] .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="elastic"] .nav-item.active * { color: var(--acc-y) !important; }

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

/* ---------------- progress ---------------- */
html[data-skin="elastic"] .os-bar,
html[data-skin="elastic"] .progress,
html[data-skin="elastic"] .bar {
  background: #1c1c20 !important;
  border-radius: 999px !important;
  overflow: hidden;
}
html[data-skin="elastic"] .os-bar-fill,
html[data-skin="elastic"] .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(--el-glide) !important;
}

/* ---------------- overlays ---------------- */
html[data-skin="elastic"] .modal,
html[data-skin="elastic"] .dialog,
html[data-skin="elastic"] .sheet,
html[data-skin="elastic"] .os-sheet,
html[data-skin="elastic"] .toast,
html[data-skin="elastic"] .os-toast,
html[data-skin="elastic"] .os-palette {
  background: #101012 !important;
  border: 1px solid var(--el-line-2) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8) !important;
  animation: el-drop .46s var(--el-spring) both;
}

/* ---------------- mock-test console ---------------- */
html[data-skin="elastic"] .ex-qcard {
  background: var(--el-card) !important;
  border: 1px solid var(--el-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .6) !important;
  animation: el-settle .6s var(--el-spring) both;
}
html[data-skin="elastic"] [class*="ex-opt"] {
  background: var(--el-card-2) !important;
  border: 1px solid var(--el-line-2) !important;
  border-radius: 15px !important;
  transition: transform .42s var(--el-spring), background .28s, border-color .28s, filter .18s !important;
}
html[data-skin="elastic"] [class*="ex-opt"]:hover { transform: scale(1.015) translateY(-2px) !important; }
html[data-skin="elastic"] [class*="ex-opt"]:active { transform: scale(.965) !important; filter: blur(.35px); }
html[data-skin="elastic"] [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: el-drop .4s var(--el-spring) both;
}
html[data-skin="elastic"] [class*="ex-opt"].on * { color: var(--acc-on) !important; }
html[data-skin="elastic"] .ex-radio { border-radius: 999px !important; border: 1.5px solid var(--el-line-2) !important; }
html[data-skin="elastic"] .ex-radio-dot { background: var(--acc-on) !important; border-radius: 999px !important; }
html[data-skin="elastic"] .ex-pal {
  background: var(--el-card-2) !important;
  border: 1px solid var(--el-line) !important;
  border-radius: 14px !important;
}
html[data-skin="elastic"] .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="elastic"] .ex-clock * { color: var(--acc-on) !important; }

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

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

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