/* ============================================================
   🎈 SKIN 4 — BOUNCY BENTO  (html[data-skin="bento"])
   Modular bento grid + har card alag spring se kood kar aata hai
   (scale + rotate overshoot). ColorOS jaisi smoothness.
   AMOLED base + mono font + koi blue nahi.
   ============================================================ */

html[data-skin="bento"] {
  --bn-bg: #0a0a0c;
  --bn-card: #151518;
  --bn-card-2: #1b1b1f;
  --bn-line: #232328;
  --bn-line-2: #2f2f36;
  --bn-r: 20px;
  --bn-r-sm: 13px;
  --bn-a1: #ff453a;
  --bn-a2: #ff9f0a;
  --bn-a3: #ffd166;
  --bn-spring: cubic-bezier(.34, 1.56, .64, 1);
}

html[data-skin="bento"] body { background: var(--bn-bg) !important; }

/* ---------- spring pop: har card kood kar aata hai ---------- */
@keyframes bn-pop {
  0%   { opacity: 0; transform: scale(.84) rotate(-2.2deg); }
  55%  { opacity: 1; transform: scale(1.04) rotate(.7deg); }
  78%  { transform: scale(.985) rotate(-.25deg); }
  100% { transform: none; }
}
@keyframes bn-pop-soft {
  0%   { opacity: 0; transform: scale(.9) translateY(12px); }
  58%  { opacity: 1; transform: scale(1.02) translateY(-3px); }
  80%  { transform: scale(.995) translateY(1px); }
  100% { transform: none; }
}

html[data-skin="bento"] .card,
html[data-skin="bento"] .os-card {
  background: var(--bn-card) !important;
  border: 1px solid var(--bn-line) !important;
  border-radius: var(--bn-r) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45) !important;
  animation: bn-pop .62s var(--bn-spring) both;
  transition: transform .24s var(--bn-spring),
              border-color .24s ease,
              box-shadow .24s ease,
              background .24s ease;
}
html[data-skin="bento"] .card:nth-child(1),
html[data-skin="bento"] .os-card:nth-child(1) { animation-delay: .02s; }
html[data-skin="bento"] .card:nth-child(2),
html[data-skin="bento"] .os-card:nth-child(2) { animation-delay: .09s; }
html[data-skin="bento"] .card:nth-child(3),
html[data-skin="bento"] .os-card:nth-child(3) { animation-delay: .16s; }
html[data-skin="bento"] .card:nth-child(4),
html[data-skin="bento"] .os-card:nth-child(4) { animation-delay: .23s; }
html[data-skin="bento"] .card:nth-child(5),
html[data-skin="bento"] .os-card:nth-child(5) { animation-delay: .30s; }
html[data-skin="bento"] .card:nth-child(n+6),
html[data-skin="bento"] .os-card:nth-child(n+6) { animation-delay: .36s; }

/* andar wale chhote cards halka bounce karein (double jump se bachaav) */
html[data-skin="bento"] .card .card,
html[data-skin="bento"] .os-card .os-card,
html[data-skin="bento"] .card .os-card,
html[data-skin="bento"] .os-card .card {
  animation: bn-pop-soft .5s var(--bn-spring) both;
}

html[data-skin="bento"] .card:hover,
html[data-skin="bento"] .os-card:hover {
  transform: translateY(-3px) scale(1.012);
  background: var(--bn-card-2) !important;
  border-color: var(--bn-line-2) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55) !important;
}

/* ---------- hero: bada gol block ---------- */
html[data-skin="bento"] .hero,
html[data-skin="bento"] .os-hero,
html[data-skin="bento"] .mcc-hero {
  background: linear-gradient(140deg, #1d1a20, #121216) !important;
  border: 1px solid var(--bn-line-2) !important;
  border-radius: 26px !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .5) !important;
  animation: bn-pop .7s var(--bn-spring) both;
}

/* ---------- buttons: spring press ---------- */
html[data-skin="bento"] .btn,
html[data-skin="bento"] .os-btn {
  background: var(--bn-card-2) !important;
  border: 1px solid var(--bn-line-2) !important;
  border-radius: var(--bn-r-sm) !important;
  color: #f2f2f5 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: transform .18s var(--bn-spring),
              background .18s ease, box-shadow .18s ease;
}
html[data-skin="bento"] .btn:hover,
html[data-skin="bento"] .os-btn:hover {
  transform: translateY(-2px) scale(1.025);
  background: #22222a !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45) !important;
}
html[data-skin="bento"] .btn:active,
html[data-skin="bento"] .os-btn:active {
  transform: scale(.93) translateY(1px);
  box-shadow: none !important;
}
html[data-skin="bento"] .btn-primary,
html[data-skin="bento"] .os-btn--primary {
  background: linear-gradient(135deg, var(--bn-a1), var(--bn-a2)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(255, 69, 58, .30) !important;
}
html[data-skin="bento"] .btn-primary:hover,
html[data-skin="bento"] .os-btn--primary:hover {
  box-shadow: 0 12px 28px rgba(255, 69, 58, .40) !important;
}

/* ---------- chips / tabs ---------- */
html[data-skin="bento"] .chip,
html[data-skin="bento"] .os-chip,
html[data-skin="bento"] .mockhub-tab,
html[data-skin="bento"] .filter-btn {
  background: var(--bn-card-2) !important;
  border: 1px solid var(--bn-line-2) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: transform .2s var(--bn-spring), background .2s ease;
}
html[data-skin="bento"] .chip:hover,
html[data-skin="bento"] .mockhub-tab:hover,
html[data-skin="bento"] .filter-btn:hover { transform: scale(1.05); }
html[data-skin="bento"] .mockhub-tab.is-active,
html[data-skin="bento"] .os-chip--accent,
html[data-skin="bento"] .filter-btn.active {
  background: linear-gradient(135deg, var(--bn-a1), var(--bn-a2)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  transform: scale(1.03);
}

/* ---------- nav / topbar ---------- */
html[data-skin="bento"] .sidebar,
html[data-skin="bento"] .os-nav {
  background: var(--bn-bg) !important;
  border-right: 1px solid var(--bn-line) !important;
}
html[data-skin="bento"] .topbar,
html[data-skin="bento"] .os-topbar {
  background: rgba(10, 10, 12, .82) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bn-line) !important;
}
html[data-skin="bento"] .nav-item {
  border-radius: 13px !important;
  transition: transform .2s var(--bn-spring), background .2s ease, color .2s ease;
}
html[data-skin="bento"] .nav-item:hover { background: var(--bn-card) !important; transform: scale(1.02); }
html[data-skin="bento"] .nav-item.active,
html[data-skin="bento"] .nav-item[aria-current="page"] {
  background: linear-gradient(135deg, var(--bn-a1), var(--bn-a2)) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(255, 69, 58, .28) !important;
}
html[data-skin="bento"] .nav-item.active * { color: #ffffff !important; }

/* ---------- inputs / bars ---------- */
html[data-skin="bento"] input,
html[data-skin="bento"] select,
html[data-skin="bento"] textarea,
html[data-skin="bento"] .search-input {
  background: var(--bn-card) !important;
  border: 1px solid var(--bn-line-2) !important;
  border-radius: var(--bn-r-sm) !important;
  color: #f2f2f5 !important;
}
html[data-skin="bento"] input:focus,
html[data-skin="bento"] select:focus,
html[data-skin="bento"] textarea:focus {
  outline: none !important;
  border-color: var(--bn-a2) !important;
  box-shadow: 0 0 0 3px rgba(255, 159, 10, .18) !important;
}
html[data-skin="bento"] .os-bar,
html[data-skin="bento"] .progress,
html[data-skin="bento"] .bar {
  background: #202025 !important;
  border: none !important;
  border-radius: 999px !important;
}
html[data-skin="bento"] .os-bar-fill,
html[data-skin="bento"] .progress-bar > i {
  background: linear-gradient(90deg, var(--bn-a1), var(--bn-a3)) !important;
  border-radius: 999px !important;
}

/* ---------- modal / palette: bouncy entry ---------- */
html[data-skin="bento"] .modal,
html[data-skin="bento"] .dialog,
html[data-skin="bento"] .sheet,
html[data-skin="bento"] .os-sheet,
html[data-skin="bento"] .toast,
html[data-skin="bento"] .os-toast,
html[data-skin="bento"] .os-palette {
  background: #131316 !important;
  border: 1px solid var(--bn-line-2) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important;
  animation: bn-pop .42s var(--bn-spring) both;
}

/* ---------- 🎯 mock test UI ---------- */
html[data-skin="bento"] .ex-qcard {
  background: var(--bn-card) !important;
  border: 1px solid var(--bn-line-2) !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5) !important;
  animation: bn-pop .6s var(--bn-spring) both;
}
html[data-skin="bento"] [class*="ex-opt"] {
  background: var(--bn-card-2) !important;
  border: 1px solid var(--bn-line-2) !important;
  border-radius: 15px !important;
  transition: transform .18s var(--bn-spring), background .18s ease, border-color .18s ease;
}
html[data-skin="bento"] [class*="ex-opt"]:hover { transform: scale(1.015); background: #23232b !important; }
html[data-skin="bento"] [class*="ex-opt"]:active { transform: scale(.97); }
html[data-skin="bento"] [class*="ex-opt"].on {
  background: linear-gradient(135deg, var(--bn-a1), var(--bn-a2)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(255, 69, 58, .30) !important;
  animation: bn-pop .36s var(--bn-spring) both;
}
html[data-skin="bento"] [class*="ex-opt"].on * { color: #ffffff !important; }
html[data-skin="bento"] .ex-radio { border-radius: 999px !important; border: 1px solid #3a3a44 !important; }
html[data-skin="bento"] .ex-radio-dot { background: #ffffff !important; border-radius: 999px !important; }
html[data-skin="bento"] .ex-pal {
  background: var(--bn-card) !important;
  border: 1px solid var(--bn-line) !important;
  border-radius: 20px !important;
}
html[data-skin="bento"] .ex-clock {
  background: linear-gradient(135deg, var(--bn-a1), var(--bn-a2)) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 22px rgba(255, 69, 58, .28) !important;
}
html[data-skin="bento"] .ex-clock * { color: #ffffff !important; }

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

/* ---------- 🏠 HOME (Overview) ko asli BENTO grid banao ---------- */
@media (min-width: 1100px) {
  html[data-skin="bento"] .dash-wrap {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start;
  }
  html[data-skin="bento"] .dash-wrap > * { margin-bottom: 0 !important; margin-top: 0 !important; }
  html[data-skin="bento"] .dash-wrap > .page-head  { grid-column: span 6; }
  html[data-skin="bento"] .dash-wrap > .hero       { grid-column: span 4; }
  html[data-skin="bento"] .dash-wrap > .stat-grid  { grid-column: span 2; }
  html[data-skin="bento"] .dash-wrap > .card       { grid-column: span 2; }
  html[data-skin="bento"] .dash-wrap > .two-col    { grid-column: span 6; }
}

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