/* ============================================================
   🪶 SKIN 3 — LINEAR FLOW  (html[data-skin="linear"])
   Gehra kala + halki glow · silk jaisi transitions ·
   cards ek ke baad ek upar aate hain (stagger) · hover par halki lift.
   AMOLED base + mono font + koi blue nahi.
   ============================================================ */

html[data-skin="linear"] {
  --ln-bg: #08090a;
  --ln-card: #0e0f12;
  --ln-card-2: #121317;
  --ln-line: #1c1e24;
  --ln-line-2: #2a2d35;
  --ln-accent: #ff6b35;
  --ln-accent-2: #ff9f0a;
  --ln-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- base ---------- */
html[data-skin="linear"] body {
  background: var(--ln-bg) !important;
}
html[data-skin="linear"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 260px at 78% -8%, rgba(255, 107, 53, .13), transparent 62%),
    radial-gradient(420px 220px at 8% 6%, rgba(255, 159, 10, .07), transparent 60%);
}
html[data-skin="linear"] #app,
html[data-skin="linear"] .content,
html[data-skin="linear"] .os-page { position: relative; z-index: 1; }

/* ---------- cards: crisp + entry stagger + hover lift ---------- */
html[data-skin="linear"] .card,
html[data-skin="linear"] .os-card {
  background: var(--ln-card) !important;
  border: 1px solid var(--ln-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6) !important;
  animation: ln-up .55s var(--ln-ease) both;
  transition: transform .28s var(--ln-ease),
              border-color .28s ease,
              box-shadow .28s ease,
              background .28s ease;
}
html[data-skin="linear"] .card:nth-child(1) { animation-delay: .03s; }
html[data-skin="linear"] .card:nth-child(2) { animation-delay: .09s; }
html[data-skin="linear"] .card:nth-child(3) { animation-delay: .15s; }
html[data-skin="linear"] .card:nth-child(4) { animation-delay: .21s; }
html[data-skin="linear"] .card:nth-child(5) { animation-delay: .27s; }
html[data-skin="linear"] .card:nth-child(n+6) { animation-delay: .32s; }
html[data-skin="linear"] .os-card:nth-child(1) { animation-delay: .03s; }
html[data-skin="linear"] .os-card:nth-child(2) { animation-delay: .09s; }
html[data-skin="linear"] .os-card:nth-child(3) { animation-delay: .15s; }
html[data-skin="linear"] .os-card:nth-child(4) { animation-delay: .21s; }
html[data-skin="linear"] .os-card:nth-child(n+5) { animation-delay: .27s; }

@keyframes ln-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

html[data-skin="linear"] .card:hover,
html[data-skin="linear"] .os-card:hover {
  transform: translateY(-2px);
  background: var(--ln-card-2) !important;
  border-color: var(--ln-line-2) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6) !important;
}

/* ---------- hero ---------- */
html[data-skin="linear"] .hero,
html[data-skin="linear"] .os-hero,
html[data-skin="linear"] .mcc-hero {
  background: linear-gradient(180deg, #101116, #0b0c0f) !important;
  border: 1px solid var(--ln-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5) !important;
}

/* ---------- buttons ---------- */
html[data-skin="linear"] .btn,
html[data-skin="linear"] .os-btn {
  background: #16171b !important;
  border: 1px solid #26282f !important;
  border-radius: 8px !important;
  color: #e8e8ec !important;
  font-weight: 600 !important;
  transition: background .2s var(--ln-ease), transform .2s var(--ln-ease),
              border-color .2s ease, box-shadow .2s ease;
}
html[data-skin="linear"] .btn:hover,
html[data-skin="linear"] .os-btn:hover {
  background: #1d1f24 !important;
  border-color: #34373f !important;
  transform: translateY(-1px);
}
html[data-skin="linear"] .btn:active,
html[data-skin="linear"] .os-btn:active { transform: translateY(0) scale(.99); }
html[data-skin="linear"] .btn-primary,
html[data-skin="linear"] .os-btn--primary {
  background: linear-gradient(120deg, var(--ln-accent), var(--ln-accent-2)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(255, 107, 53, .28) !important;
}
html[data-skin="linear"] .btn-primary:hover,
html[data-skin="linear"] .os-btn--primary:hover {
  box-shadow: 0 10px 26px rgba(255, 107, 53, .38) !important;
}

/* ---------- chips / tabs ---------- */
html[data-skin="linear"] .chip,
html[data-skin="linear"] .os-chip,
html[data-skin="linear"] .mockhub-tab,
html[data-skin="linear"] .filter-btn {
  background: #14151a !important;
  border: 1px solid var(--ln-line) !important;
  border-radius: 8px !important;
  transition: background .2s ease, border-color .2s ease, transform .2s var(--ln-ease);
}
html[data-skin="linear"] .mockhub-tab.is-active,
html[data-skin="linear"] .os-chip--accent,
html[data-skin="linear"] .filter-btn.active {
  background: linear-gradient(120deg, var(--ln-accent), var(--ln-accent-2)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* ---------- nav / topbar ---------- */
html[data-skin="linear"] .sidebar,
html[data-skin="linear"] .os-nav {
  background: #08090a !important;
  border-right: 1px solid var(--ln-line) !important;
}
html[data-skin="linear"] .topbar,
html[data-skin="linear"] .os-topbar {
  background: rgba(8, 9, 10, .82) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ln-line) !important;
}
html[data-skin="linear"] .nav-item {
  border-radius: 7px !important;
  transition: background .18s ease, color .18s ease;
}
html[data-skin="linear"] .nav-item:hover { background: #14151a !important; }
html[data-skin="linear"] .nav-item.active,
html[data-skin="linear"] .nav-item[aria-current="page"] {
  background: #17181d !important;
  color: #f4f4f5 !important;
  box-shadow: inset 2px 0 0 var(--ln-accent) !important;
}

/* ---------- inputs / bars ---------- */
html[data-skin="linear"] input,
html[data-skin="linear"] select,
html[data-skin="linear"] textarea,
html[data-skin="linear"] .search-input {
  background: #0e0f12 !important;
  border: 1px solid var(--ln-line) !important;
  border-radius: 8px !important;
  color: #e8e8ec !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
html[data-skin="linear"] input:focus,
html[data-skin="linear"] select:focus,
html[data-skin="linear"] textarea:focus {
  outline: none !important;
  border-color: var(--ln-accent-2) !important;
  box-shadow: 0 0 0 3px rgba(255, 159, 10, .16) !important;
}
html[data-skin="linear"] .os-bar,
html[data-skin="linear"] .progress,
html[data-skin="linear"] .bar {
  background: #191b20 !important;
  border: none !important;
  border-radius: 999px !important;
}
html[data-skin="linear"] .os-bar-fill,
html[data-skin="linear"] .progress-bar > i {
  background: linear-gradient(90deg, var(--ln-accent), var(--ln-accent-2)) !important;
  border-radius: 999px !important;
  transition: width .6s var(--ln-ease) !important;
}

/* ---------- modal / palette ---------- */
html[data-skin="linear"] .modal,
html[data-skin="linear"] .dialog,
html[data-skin="linear"] .sheet,
html[data-skin="linear"] .os-sheet,
html[data-skin="linear"] .toast,
html[data-skin="linear"] .os-toast,
html[data-skin="linear"] .os-palette {
  background: #0f1013 !important;
  border: 1px solid var(--ln-line-2) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7) !important;
  animation: ln-pop .28s var(--ln-ease) both;
}
@keyframes ln-pop {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------- motion kam chahiye to ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="linear"] .card,
  html[data-skin="linear"] .os-card { animation: none !important; }
  html[data-skin="linear"] * { transition-duration: .01ms !important; }
}

/* ---------- 🎯 mock test UI (exam console) ---------- */
html[data-skin="linear"] .ex-qcard {
  background: #0e0f12 !important;
  border: 1px solid #1c1e24 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5) !important;
  animation: ln-up .5s cubic-bezier(.16, 1, .3, 1) both;
}
html[data-skin="linear"] [class*="ex-opt"] {
  background: #14151a !important;
  border: 1px solid #26282f !important;
  border-radius: 10px !important;
  transition: background .2s ease, border-color .2s ease,
              transform .2s cubic-bezier(.16, 1, .3, 1);
}
html[data-skin="linear"] [class*="ex-opt"]:hover {
  background: #1a1c22 !important;
  border-color: #34373f !important;
  transform: translateY(-1px);
}
html[data-skin="linear"] [class*="ex-opt"].on {
  background: linear-gradient(120deg, #ff6b35, #ff9f0a) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(255, 107, 53, .30) !important;
}
html[data-skin="linear"] [class*="ex-opt"].on * { color: #ffffff !important; }
html[data-skin="linear"] .ex-radio { border-radius: 999px !important; border: 1px solid #3a3d46 !important; }
html[data-skin="linear"] .ex-radio-dot { background: #ffffff !important; border-radius: 999px !important; }
html[data-skin="linear"] .ex-pal {
  background: #0e0f12 !important;
  border: 1px solid #1c1e24 !important;
  border-radius: 12px !important;
}
html[data-skin="linear"] .ex-clock {
  background: #14151a !important;
  border: 1px solid #26282f !important;
  border-radius: 10px !important;
  color: #f4f4f5 !important;
  box-shadow: none !important;
}
html[data-skin="linear"] .ex-clock * { color: #f4f4f5 !important; }