/* ============================================================
   🧱 SKIN 1 — NEO-BRUTALISM  (scoped: html[data-skin="brutal"])
   Ye file auto-generate hui hai (skins.py) — brutal.css se.
   ============================================================ */
/* ============================================================
   🧱  NEO-BRUTALISM  —  StudyNexus
   Yeh file sabse LAST me load hoti hai (os.css ke baad), isliye
   poori app isi look me aa jati hai.

   Formula:  AMOLED kala base (aapki constraint) + moti safed border
   + hard shadow (blur = 0) + square corners + mono/uppercase type
   + yellow / red / orange accents.  Koi blue nahi.
   ============================================================ */html[data-skin="brutal"] {
  --br-line:   #f2f2f5;   /* moti border (safed) */
  --br-yellow: #ffd166;
  --br-red:    #ff453a;
  --br-orange: #ff9f0a;
  --br-bg:     #000000;
  --br-s1:     #0a0a0a;   /* card */
  --br-s2:     #121212;   /* raised  */
  --br-s3:     #1a1a1a;   /* sunken  */
}
/* ---------------- tokens: blue ki jagah yellow/red ---------------- */html[data-skin="brutal"][data-theme="amoled"] {
  --os-accent: #ffd166;
  --os-accent-2: #ff453a;
  --os-accent-soft: rgba(255, 209, 102, .14);
  --os-accent-line: #ffd166;
  --os-info: #ffd166;
  --os-line: #f2f2f5;
  --os-line-2: #f2f2f5;
  --os-bg: #000000;
  --os-surface: #0a0a0a;
  --os-surface-2: #121212;
  --os-surface-3: #1a1a1a;
  --os-sh-1: 3px 3px 0 #ffd166;
  --os-sh-2: 4px 4px 0 #ffd166;
  --os-sh-3: 6px 6px 0 #ff453a;
}
html[data-skin="brutal"] body { background: #000 !important; }
/* ---------------- 1. sab kuch SQUARE (koi gol kona nahi) ---------------- */html[data-skin="brutal"] .card,
html[data-skin="brutal"] .os-card,
html[data-skin="brutal"] .btn,
html[data-skin="brutal"] .os-btn,
html[data-skin="brutal"] .chip,
html[data-skin="brutal"] .os-chip,
html[data-skin="brutal"] .nav-item,
html[data-skin="brutal"] .mockhub-tab,
html[data-skin="brutal"] input,
html[data-skin="brutal"] select,
html[data-skin="brutal"] textarea,
html[data-skin="brutal"] .search-input,
html[data-skin="brutal"] .os-input,
html[data-skin="brutal"] .os-bar,
html[data-skin="brutal"] .os-bar-fill,
html[data-skin="brutal"] .progress,
html[data-skin="brutal"] .progress-bar,
html[data-skin="brutal"] .bar,
html[data-skin="brutal"] .modal,
html[data-skin="brutal"] .dialog,
html[data-skin="brutal"] .sheet,
html[data-skin="brutal"] .os-sheet,
html[data-skin="brutal"] .hn-sheet,
html[data-skin="brutal"] .toast,
html[data-skin="brutal"] .os-toast,
html[data-skin="brutal"] .filter-btn,
html[data-skin="brutal"] .tool-btn,
html[data-skin="brutal"] .nb-chip,
html[data-skin="brutal"] .stat,
html[data-skin="brutal"] .stat-card,
html[data-skin="brutal"] .os-stat,
html[data-skin="brutal"] .hero,
html[data-skin="brutal"] .os-hero,
html[data-skin="brutal"] .mcc-hero,
html[data-skin="brutal"] .section-title,
html[data-skin="brutal"] .ex-qcard,
html[data-skin="brutal"] .ex-pal,
html[data-skin="brutal"] .ex-clock {
  border-radius: 0 !important;
}
/* ---------------- 2. CARDS: moti border + hard shadow ---------------- */html[data-skin="brutal"] .card,
html[data-skin="brutal"] .os-card {
  background: var(--br-s1) !important;
  border: 2px solid var(--br-line) !important;
  box-shadow: 4px 4px 0 var(--br-yellow) !important;
}
/* andar wale card zyada mota nahi honge */html[data-skin="brutal"] .card .card,
html[data-skin="brutal"] .os-card .os-card,
html[data-skin="brutal"] .card .os-card,
html[data-skin="brutal"] .os-card .card {
  border-width: 2px !important;
  box-shadow: 3px 3px 0 var(--br-red) !important;
}
/* ---------------- 3. BUTTONS: dabao to niche sarak jayein ---------------- */html[data-skin="brutal"] .btn,
html[data-skin="brutal"] .os-btn {
  background: var(--br-s2) !important;
  color: #f5f5f7 !important;
  border: 2px solid var(--br-line) !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--br-line) !important;
  transition: transform .06s linear, box-shadow .06s linear;
}
html[data-skin="brutal"] .btn:hover,
html[data-skin="brutal"] .os-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--br-yellow) !important;
}
html[data-skin="brutal"] .btn:active,
html[data-skin="brutal"] .os-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 transparent !important;
}
html[data-skin="brutal"] .btn-primary,
html[data-skin="brutal"] .os-btn--primary,
html[data-skin="brutal"] .btn.btn-primary {
  background: var(--br-yellow) !important;
  color: #111111 !important;
  border-color: #f2f2f5 !important;
  box-shadow: 4px 4px 0 var(--br-red) !important;
}
html[data-skin="brutal"] .btn-primary:active,
html[data-skin="brutal"] .os-btn--primary:active { box-shadow: 0 0 0 transparent !important; }
html[data-skin="brutal"] .btn-ghost,
html[data-skin="brutal"] .os-btn--ghost,
html[data-skin="brutal"] .btn-sm { box-shadow: 2px 2px 0 var(--br-line) !important; }
/* ---------------- 4. CHIPS / TABS ---------------- */html[data-skin="brutal"] .chip,
html[data-skin="brutal"] .os-chip,
html[data-skin="brutal"] .mockhub-tab,
html[data-skin="brutal"] .filter-btn,
html[data-skin="brutal"] .tool-btn,
html[data-skin="brutal"] .nb-chip {
  background: var(--br-s2) !important;
  border: 2px solid var(--br-line) !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
  box-shadow: 2px 2px 0 var(--br-line) !important;
}
html[data-skin="brutal"] .mockhub-tab.is-active,
html[data-skin="brutal"] .os-chip--accent,
html[data-skin="brutal"] .filter-btn.active,
html[data-skin="brutal"] .chip.active,
html[data-skin="brutal"] .os-chip.is-active {
  background: var(--br-yellow) !important;
  color: #111111 !important;
  border-color: #f2f2f5 !important;
  box-shadow: 3px 3px 0 var(--br-red) !important;
}
/* ---------------- 5. NAV / TOPBAR ---------------- */html[data-skin="brutal"] .sidebar,
html[data-skin="brutal"] .os-nav {
  background: #000000 !important;
  border-right: 3px solid var(--br-line) !important;
}
html[data-skin="brutal"] .nav-item {
  border: 2px solid transparent !important;
  font-weight: 700 !important;
}
html[data-skin="brutal"] .nav-item:hover {
  background: var(--br-s3) !important;
  border-color: var(--br-line) !important;
}
html[data-skin="brutal"] .nav-item.active,
html[data-skin="brutal"] .nav-item[aria-current="page"] {
  background: var(--br-yellow) !important;
  color: #111111 !important;
  border-color: #f2f2f5 !important;
  box-shadow: 3px 3px 0 var(--br-red) !important;
}
html[data-skin="brutal"] .nav-item.active *,
html[data-skin="brutal"] .nav-item[aria-current="page"] * { color: #111111 !important; }
html[data-skin="brutal"] .topbar,
html[data-skin="brutal"] .os-topbar {
  background: #000000 !important;
  border-bottom: 3px solid var(--br-line) !important;
}
/* ---------------- 6. HERO: sabse tez block ---------------- */html[data-skin="brutal"] .hero,
html[data-skin="brutal"] .os-hero,
html[data-skin="brutal"] .mcc-hero {
  background: var(--br-s1) !important;
  border: 3px solid var(--br-line) !important;
  box-shadow: 6px 6px 0 var(--br-yellow) !important;
}
html[data-skin="brutal"] .hero h1,
html[data-skin="brutal"] .hero h2,
html[data-skin="brutal"] .os-hero h1,
html[data-skin="brutal"] .mcc-hero h1,
html[data-skin="brutal"] .mcc-hero h2 {
  font-weight: 900 !important;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
html[data-skin="brutal"] .hero .btn,
html[data-skin="brutal"] .hero .os-btn,
html[data-skin="brutal"] .mcc-hero .os-btn,
html[data-skin="brutal"] .os-hero .os-btn {
  background: #0d0d0d !important;
  color: var(--br-yellow) !important;
  box-shadow: 3px 3px 0 #f2f2f5 !important;
}
/* ---------------- 7. HEADINGS / LABELS ---------------- */html[data-skin="brutal"] h1,
html[data-skin="brutal"] h2,
html[data-skin="brutal"] h3,
html[data-skin="brutal"] .page-title { font-weight: 900 !important; letter-spacing: -.02em; }
html[data-skin="brutal"] .section-title {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900 !important;
  border-bottom: 2px solid var(--br-line);
  padding-bottom: 6px;
}
html[data-skin="brutal"] .os-eyebrow,
html[data-skin="brutal"] .os-metric-l,
html[data-skin="brutal"] .os-card-label,
html[data-skin="brutal"] .page-sub {
  text-transform: uppercase;
  letter-spacing: .1em;
}
html[data-skin="brutal"] .os-metric-v,
html[data-skin="brutal"] .stat-v,
html[data-skin="brutal"] .big-num,
html[data-skin="brutal"] .mcc-ring-t { font-weight: 900 !important; }
/* ---------------- 8. PROGRESS BARS: solid block, gol nahi ---------------- */html[data-skin="brutal"] .os-bar,
html[data-skin="brutal"] .progress,
html[data-skin="brutal"] .bar,
html[data-skin="brutal"] .progress-bar {
  height: 12px !important;
  background: #141414 !important;
  border: 2px solid var(--br-line) !important;
  overflow: hidden;
}
html[data-skin="brutal"] .os-bar-fill,
html[data-skin="brutal"] .progress-bar > i,
html[data-skin="brutal"] .bar > i,
html[data-skin="brutal"] .progress > i {
  background: var(--br-yellow) !important;
  border-radius: 0 !important;
}
/* ---------------- 9. INPUTS ---------------- */html[data-skin="brutal"] input,
html[data-skin="brutal"] select,
html[data-skin="brutal"] textarea,
html[data-skin="brutal"] .search-input {
  background: #0d0d0d !important;
  color: #f5f5f7 !important;
  border: 2px solid var(--br-line) !important;
}
html[data-skin="brutal"] input:focus,
html[data-skin="brutal"] select:focus,
html[data-skin="brutal"] textarea:focus,
html[data-skin="brutal"] .search-input:focus {
  outline: 3px solid var(--br-yellow) !important;
  outline-offset: 0;
}
/* ---------------- 10. MODAL / SHEET / TOAST ---------------- */html[data-skin="brutal"] .modal,
html[data-skin="brutal"] .dialog,
html[data-skin="brutal"] .sheet,
html[data-skin="brutal"] .os-sheet,
html[data-skin="brutal"] .hn-sheet,
html[data-skin="brutal"] .toast,
html[data-skin="brutal"] .os-toast,
html[data-skin="brutal"] .os-palette {
  background: var(--br-s2) !important;
  border: 3px solid var(--br-line) !important;
  box-shadow: 7px 7px 0 var(--br-red) !important;
}
/* ---------------- 11. MOCK TEST UI (exam console) ---------------- */html[data-skin="brutal"] .ex-qcard {
  background: var(--br-s1) !important;
  border: 3px solid var(--br-line) !important;
  box-shadow: 5px 5px 0 var(--br-yellow) !important;
}
html[data-skin="brutal"] [class*="ex-opt"] {
  border: 2px solid var(--br-line) !important;
  border-radius: 0 !important;
  background: var(--br-s2) !important;
}
html[data-skin="brutal"] [class*="ex-opt"]:hover { background: var(--br-s3) !important; box-shadow: 3px 3px 0 var(--br-yellow) !important; }
html[data-skin="brutal"] [class*="ex-opt"].on,
html[data-skin="brutal"] [class*="ex-opt"].is-sel,
html[data-skin="brutal"] [class*="ex-opt"].sel,
html[data-skin="brutal"] [class*="ex-opt"][aria-checked="true"] {
  background: var(--br-yellow) !important;
  color: #111111 !important;
  box-shadow: 4px 4px 0 var(--br-red) !important;
}
html[data-skin="brutal"] [class*="ex-opt"].is-sel *,
html[data-skin="brutal"] [class*="ex-opt"].sel * { color: #111111 !important; }
html[data-skin="brutal"] .ex-radio,
html[data-skin="brutal"] .ex-radio-dot,
html[data-skin="brutal"] .ex-lg-box {
  border-radius: 0 !important;
  border: 2px solid var(--br-line) !important;
}
html[data-skin="brutal"] .ex-radio-dot { background: var(--br-yellow) !important; }
html[data-skin="brutal"] .ex-pal { border: 2px solid var(--br-line) !important; }
html[data-skin="brutal"] .ex-clock {
  background: var(--br-yellow) !important;
  color: #111111 !important;
  border: 2px solid #f2f2f5 !important;
  box-shadow: 4px 4px 0 var(--br-red) !important;
}
html[data-skin="brutal"] .ex-clock * { color: #111111 !important; }
html[data-skin="brutal"] .ex-strip,
html[data-skin="brutal"] .ex-head,
html[data-skin="brutal"] .ex-body { border-color: var(--br-line) !important; }
/* ---------------- 12. mobile: hard shadow se overflow na ho ---------------- */@media (max-width: 520px)  {html[data-skin="brutal"] .card,
html[data-skin="brutal"] .os-card { box-shadow: 3px 3px 0 var(--br-yellow) !important; }
html[data-skin="brutal"] .hero,
html[data-skin="brutal"] .os-hero,
html[data-skin="brutal"] .mcc-hero { box-shadow: 4px 4px 0 var(--br-yellow) !important; }
html[data-skin="brutal"] .ex-qcard { box-shadow: 3px 3px 0 var(--br-yellow) !important; }
html[data-skin="brutal"] .modal,
html[data-skin="brutal"] .dialog,
html[data-skin="brutal"] .sheet,
html[data-skin="brutal"] .os-sheet,
html[data-skin="brutal"] .hn-sheet,
html[data-skin="brutal"] .toast,
html[data-skin="brutal"] .os-toast {
    box-shadow: 5px 5px 0 var(--br-red) !important;
  }
}
/* ============================================================
   🖥️  DESKTOP LAYOUT  —  sirf 1100px se upar lagu hota hai
   Mobile (aapka phone) bilkul waise hi rahega.
   ============================================================ */@media (min-width: 1100px)  {html[data-skin="brutal"] { --sidebar-w: 252px; }
/* chaudi screen ka poora fayda */html[data-skin="brutal"] .os-page {
    max-width: 1400px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
html[data-skin="brutal"] .content {
    max-width: 1360px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
/* 2–3 column grids aur saaf */html[data-skin="brutal"] .os-grid { gap: 22px !important; }
html[data-skin="brutal"] .os-grid-main { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) !important; }
html[data-skin="brutal"] .os-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html[data-skin="brutal"] .two-col { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important; gap: 20px !important; }
/* hero bada, numbers bade */html[data-skin="brutal"] .os-greet { font-size: 40px !important; }
html[data-skin="brutal"] .os-metric-v { font-size: 27px !important; }
html[data-skin="brutal"] .page-title { font-size: 30px !important; }
/* desktop par hard shadow thoda bada (badi screen pe aur tez lagega) */html[data-skin="brutal"] .card,
html[data-skin="brutal"] .os-card { box-shadow: 6px 6px 0 var(--br-yellow) !important; }
html[data-skin="brutal"] .hero,
html[data-skin="brutal"] .os-hero,
html[data-skin="brutal"] .mcc-hero { box-shadow: 8px 8px 0 var(--br-yellow) !important; }
html[data-skin="brutal"] .ex-qcard { box-shadow: 6px 6px 0 var(--br-yellow) !important; }
/* listein 2 column me (mock papers, tests…) */html[data-skin="brutal"] .list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
}