/* ================================================================
   SHADEVAULT – RESPONSIVE STYLES
================================================================ */

/* ── 1400px ── */
@media (max-width:1400px){
  .grid-5{grid-template-columns:repeat(4,1fr)}
}

/* ── 1200px ── */
@media (max-width:1200px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .grid-5{grid-template-columns:repeat(3,1fr)}
  .auth-page{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-form-panel{padding:48px 32px}
}

/* ── 1024px ── */
@media (max-width:1024px){
  :root{--sidebar-w:220px}
  .sv-content{padding:20px 20px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .welcome-banner-stats{display:none}
}

/* ── 768px ── */
@media (max-width:768px){
  .sv-sidebar{transform:translateX(-100%);width:var(--sidebar-w) !important;z-index:1100}
  .sv-sidebar.mobile-open{transform:translateX(0)}
  .sv-main{margin-left:0 !important}
  .topbar-mobile-toggle{display:flex}
  .topbar-search{max-width:180px}
  .sv-content{padding:16px}
  .welcome-banner{padding:24px 22px}
  .welcome-title{font-size:1.2rem}
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
  .auth-form-panel{padding:40px 20px}
  .auth-form-title{font-size:1.4rem}
  .compare-layout{flex-direction:column}
  .sv-tabs{flex-wrap:wrap}
  .section-header{flex-wrap:wrap}
  .stat-value{font-size:1.3rem}
  .sv-table-wrap{font-size:.78rem}
  .sv-table thead th,.sv-table tbody td{padding:10px 12px}
  .page-header h1{font-size:1.2rem}
}

/* ── 576px ── */
@media (max-width:576px){
  .topbar-search{display:none}
  .welcome-actions{flex-direction:column}
  .auth-form-panel{padding:28px 16px}
  .auth-form-title{font-size:1.2rem}
  .auth-socials-row{flex-direction:column}
  .sv-modal{border-radius:var(--radius-lg)}
  .sv-modal-header,.sv-modal-body,.sv-modal-footer{padding-left:18px;padding-right:18px}
  .sv-toast-container{right:12px;left:12px}
  .sv-toast{min-width:unset}
  .shade-cards-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* ── 400px ── */
@media (max-width:400px){
  .shade-cards-grid{grid-template-columns:1fr}
}

/* ── MOBILE OVERLAY ── */
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(7,23,57,.5);backdrop-filter:blur(2px);z-index:1050}
.mobile-overlay.show{display:block}

/* ── DARK MODE ── */
body.dark-mode{
  --bg:#0D1117;--card:#161B22;--text:#E6EDF3;--text-mid:#8B949E;
  --text-light:#6E7681;--border:#30363D;
}
body.dark-mode .sv-topbar{background:var(--card);border-color:var(--border)}
body.dark-mode .topbar-search{background:var(--bg)}
body.dark-mode .topbar-icon-btn{background:var(--bg);border-color:var(--border)}
body.dark-mode .sv-card,.body.dark-mode .shade-card,body.dark-mode .stat-card{background:var(--card);border-color:var(--border)}
body.dark-mode .form-control,.body.dark-mode .input-group{background:var(--bg);border-color:var(--border);color:var(--text)}
body.dark-mode .sv-table{background:var(--card)}
body.dark-mode .sv-table thead th{background:#0D1117}
body.dark-mode .sv-dropdown-menu,.body.dark-mode .sv-modal{background:var(--card);border-color:var(--border)}
body.dark-mode .auth-form-panel{background:var(--bg)}
body.dark-mode .sv-toast,.body.dark-mode .auth-success-card{background:var(--card)}
body.dark-mode .btn-sv-ghost{background:var(--bg);border-color:var(--border);color:var(--text-mid)}
body.dark-mode .sv-tabs{background:var(--bg)}
body.dark-mode .sv-tab.active{background:var(--card)}
body.dark-mode .page-btn{background:var(--card);border-color:var(--border)}
body.dark-mode .quick-search-bar{background:var(--card);border-color:var(--border)}
body.dark-mode .brand-card,.body.dark-mode .skin-tone-card,.body.dark-mode .color-family-card .cf-body{background:var(--card);border-color:var(--border)}
body.dark-mode .compare-slot{background:var(--card);border-color:var(--border)}
body.dark-mode .welcome-banner{background:linear-gradient(135deg,#2A0820 0%,#6D2057 55%,#9C3375 100%)}

/* Auth pages dark mode */
body.dark-mode .auth-form-panel{background:var(--bg)}
body.dark-mode .auth-form-box{background:transparent}
body.dark-mode .input-group{background:var(--card) !important;border-color:var(--border) !important}
body.dark-mode .input-group input,
body.dark-mode .input-group select,
body.dark-mode .input-group textarea{color:var(--text) !important;background:transparent !important}
body.dark-mode .input-group input::placeholder{color:var(--text-light) !important}
body.dark-mode .input-group:focus-within{border-color:var(--primary) !important;background:var(--card) !important}
body.dark-mode .form-control{background:var(--card) !important;border-color:var(--border) !important;color:var(--text) !important}
body.dark-mode .form-control::placeholder{color:var(--text-light) !important}
body.dark-mode .auth-visual-card{background:rgba(255,255,255,.06)}
body.dark-mode .auth-success-card{background:var(--card)}
body.dark-mode .auth-social-btn{background:var(--card);border-color:var(--border);color:var(--text)}
body.dark-mode .sv-modal{background:var(--card);border-color:var(--border)}
body.dark-mode .sv-modal-header{background:var(--card)}
body.dark-mode select option{background:var(--card);color:var(--text)}