/* ============================================================
   💧 SKIN 2 — LIQUID GLASS  (html[data-skin="liquid"])
   Kaanch jaisi panels · pichhe rang hilte rahte hain ·
   upar se roshni ka jhalak (sheen) guzarti hai.
   AMOLED kala base + mono font + koi blue nahi.
   ============================================================ */

html[data-skin="liquid"] {
  --lg-glass: rgba(255, 255, 255, .07);
  --lg-glass-2: rgba(255, 255, 255, .12);
  --lg-line: rgba(255, 255, 255, .16);
  --lg-line-2: rgba(255, 255, 255, .26);
  --lg-r: 18px;
  --lg-r-sm: 13px;
}

/* ---------- pichhe hilte hue rang (poori screen ke peechhe) ---------- */
html[data-skin="liquid"] body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 16% 20%, rgba(255, 69, 58, .40), transparent 62%),
    radial-gradient(34% 28% at 84% 24%, rgba(255, 159, 10, .34), transparent 62%),
    radial-gradient(42% 32% at 52% 92%, rgba(255, 209, 102, .24), transparent 64%);
  filter: blur(34px);
  animation: lg-drift 20s ease-in-out infinite alternate;
}
@keyframes lg-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.10); }
}

/* content hamesha blobs ke upar */
html[data-skin="liquid"] #app,
html[data-skin="liquid"] .content,
html[data-skin="liquid"] .os-page { position: relative; z-index: 1; }

/* ---------- glass cards ---------- */
html[data-skin="liquid"] .card,
html[data-skin="liquid"] .os-card {
  background: var(--lg-glass) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--lg-line) !important;
  border-radius: var(--lg-r) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
              inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

/* ---------- hero: glass + sheen sweep ---------- */
html[data-skin="liquid"] .hero,
html[data-skin="liquid"] .os-hero,
html[data-skin="liquid"] .mcc-hero {
  position: relative;
  overflow: hidden;
  background: var(--lg-glass-2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--lg-line-2) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5),
              inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}
html[data-skin="liquid"] .hero::after,
html[data-skin="liquid"] .os-hero::after,
html[data-skin="liquid"] .mcc-hero::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  animation: lg-sheen 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lg-sheen {
  0%        { transform: translateX(-170%); }
  55%, 100% { transform: translateX(430%); }
}

/* ---------- buttons ---------- */
html[data-skin="liquid"] .btn,
html[data-skin="liquid"] .os-btn {
  background: var(--lg-glass-2) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--lg-line) !important;
  border-radius: var(--lg-r-sm) !important;
  color: #f5f5f7 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35) !important;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1),
              background .18s ease, box-shadow .18s ease;
}
html[data-skin="liquid"] .btn:hover,
html[data-skin="liquid"] .os-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .17) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45) !important;
}
html[data-skin="liquid"] .btn:active,
html[data-skin="liquid"] .os-btn:active { transform: translateY(0) scale(.985); }
html[data-skin="liquid"] .btn-primary,
html[data-skin="liquid"] .os-btn--primary {
  background: linear-gradient(120deg, #ff453a, #ff9f0a) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .30) !important;
  box-shadow: 0 8px 24px rgba(255, 69, 58, .32) !important;
}

/* ---------- chips / tabs ---------- */
html[data-skin="liquid"] .chip,
html[data-skin="liquid"] .os-chip,
html[data-skin="liquid"] .mockhub-tab,
html[data-skin="liquid"] .filter-btn {
  background: var(--lg-glass) !important;
  border: 1px solid var(--lg-line) !important;
  border-radius: 999px !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html[data-skin="liquid"] .mockhub-tab.is-active,
html[data-skin="liquid"] .os-chip--accent,
html[data-skin="liquid"] .filter-btn.active {
  background: linear-gradient(120deg, #ff453a, #ff9f0a) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .32) !important;
}

/* ---------- sidebar / topbar: frost ---------- */
html[data-skin="liquid"] .sidebar,
html[data-skin="liquid"] .os-nav {
  background: rgba(0, 0, 0, .55) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-right: 1px solid var(--lg-line) !important;
}
html[data-skin="liquid"] .topbar,
html[data-skin="liquid"] .os-topbar {
  background: rgba(0, 0, 0, .50) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--lg-line) !important;
}
html[data-skin="liquid"] .nav-item.active,
html[data-skin="liquid"] .nav-item[aria-current="page"] {
  background: linear-gradient(120deg, rgba(255, 69, 58, .90), rgba(255, 159, 10, .90)) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(255, 69, 58, .28) !important;
}
html[data-skin="liquid"] .nav-item.active * { color: #ffffff !important; }

/* ---------- inputs / bars ---------- */
html[data-skin="liquid"] input,
html[data-skin="liquid"] select,
html[data-skin="liquid"] textarea,
html[data-skin="liquid"] .search-input {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--lg-line) !important;
  border-radius: 12px !important;
  color: #f5f5f7 !important;
}
html[data-skin="liquid"] input:focus,
html[data-skin="liquid"] select:focus,
html[data-skin="liquid"] textarea:focus {
  outline: none !important;
  border-color: rgba(255, 159, 10, .7) !important;
  box-shadow: 0 0 0 3px rgba(255, 159, 10, .18) !important;
}
html[data-skin="liquid"] .os-bar-fill,
html[data-skin="liquid"] .progress-bar > i {
  background: linear-gradient(90deg, #ff453a, #ffd166) !important;
  border-radius: 999px !important;
}

/* ---------- modal / toast ---------- */
html[data-skin="liquid"] .modal,
html[data-skin="liquid"] .dialog,
html[data-skin="liquid"] .sheet,
html[data-skin="liquid"] .os-sheet,
html[data-skin="liquid"] .toast,
html[data-skin="liquid"] .os-toast,
html[data-skin="liquid"] .os-palette {
  background: rgba(18, 18, 22, .82) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--lg-line-2) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6) !important;
}

/* ---------- mobile: blur halka (performance) ---------- */
@media (max-width: 620px) {
  html[data-skin="liquid"] .card,
  html[data-skin="liquid"] .os-card {
    -webkit-backdrop-filter: blur(9px) saturate(150%);
    backdrop-filter: blur(9px) saturate(150%);
  }
  html[data-skin="liquid"] body::before { filter: blur(28px); }
}

/* ---------- motion kam chahiye to ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="liquid"] body::before { animation: none; }
  html[data-skin="liquid"] .hero::after,
  html[data-skin="liquid"] .os-hero::after,
  html[data-skin="liquid"] .mcc-hero::after { display: none; }
}

/* ---------- 🎯 mock test UI (exam console) ---------- */
html[data-skin="liquid"] .ex-qcard {
  background: rgba(255, 255, 255, .07) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5),
              inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}
html[data-skin="liquid"] [class*="ex-opt"] {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 14px !important;
  transition: transform .16s cubic-bezier(.16, 1, .3, 1),
              background .2s ease, border-color .2s ease;
}
html[data-skin="liquid"] [class*="ex-opt"]:hover {
  background: rgba(255, 255, 255, .11) !important;
  transform: translateY(-1px);
}
html[data-skin="liquid"] [class*="ex-opt"].on {
  background: linear-gradient(120deg, #ff453a, #ff9f0a) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .34) !important;
  box-shadow: 0 8px 22px rgba(255, 69, 58, .30) !important;
}
html[data-skin="liquid"] [class*="ex-opt"].on * { color: #ffffff !important; }
html[data-skin="liquid"] .ex-radio { border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, .4) !important; }
html[data-skin="liquid"] .ex-radio-dot { background: #ffffff !important; border-radius: 999px !important; }
html[data-skin="liquid"] .ex-pal {
  background: rgba(255, 255, 255, .06) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 18px !important;
}
html[data-skin="liquid"] .ex-clock {
  background: linear-gradient(120deg, #ff453a, #ff9f0a) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .32) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(255, 69, 58, .30) !important;
}
html[data-skin="liquid"] .ex-clock * { color: #ffffff !important; }