/* ═══════════════════════════════════════════
   VIDYA INSTITUTE — Premium Design System
   ═══════════════════════════════════════════ */

/* ─── Variables ───────────────────────────── */
:root {
  --pri: #0F172A;
  --pri-light: #1E293B;
  --sec: #2563EB;
  --sec-light: #3B82F6;
  --sec-dark: #1D4ED8;
  --acc: #F59E0B;
  --acc-light: #FBBF24;
  --bg: #F8FAFC;
  --bg-card: #FFFFFF;
  --text: #1E293B;
  --text-muted: #64748B;
  --text-light: #94A3B8;
  --border: #E2E8F0;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.05);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.04);
  --shadow-xl: 0 20px 25px -5px rgba(15,23,42,.1), 0 8px 10px -6px rgba(15,23,42,.05);
  --shadow-glow: 0 0 20px rgba(37,99,235,.15);
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;
  --transition: .3s cubic-bezier(.4,0,.2,1);
  --font-body: 'Outfit', sans-serif;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
}

/* ─── Reset / Base ────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; scroll-padding-top:5rem }
body { font-family:var(--font-body); color:var(--text); background:var(--bg); line-height:1.7; -webkit-font-smoothing:antialiased }
img { max-width:100%; height:auto; display:block }
a { color:var(--sec); text-decoration:none; transition:color var(--transition) }
a:hover { color:var(--sec-dark) }
::selection { background:var(--sec); color:#fff }

/* ─── Typography ──────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); font-weight:700; line-height:1.25; color:var(--pri) }
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 { font-family:var(--font-heading); font-weight:800 }
.lead { font-size:1.125rem; font-weight:400; color:var(--text-muted) }
.section-label { display:inline-block; font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sec); margin-bottom:.75rem; position:relative }
.section-label::after { content:''; display:block; width:2.5rem; height:2px; background:var(--sec); margin-top:.5rem; border-radius:2px }
.section-title { font-size:2.25rem; font-weight:800; margin-bottom:1rem; color:var(--pri) }
@media(max-width:767px){ .section-title { font-size:1.75rem } }

/* ─── Container ───────────────────────────── */
.container { max-width:1200px; padding-left:1.25rem; padding-right:1.25rem }

/* ─── Buttons ─────────────────────────────── */
.btn { position:relative; overflow:hidden; font-weight:600; font-size:.9375rem; padding:.625rem 1.5rem; border-radius:var(--radius-full); transition:all var(--transition); border:2px solid transparent; display:inline-flex; align-items:center; gap:.5rem; z-index:1 }
.btn::before { content:''; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity var(--transition); z-index:-1 }
.btn:hover::before { opacity:1 }
.btn-primary { background:var(--sec); color:#fff; border-color:var(--sec) }
.btn-primary::before { background:var(--sec-dark) }
.btn-primary:hover { border-color:var(--sec-dark); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-glow) }
.btn-outline-primary { background:transparent; color:var(--sec); border-color:var(--sec) }
.btn-outline-primary::before { background:var(--sec) }
.btn-outline-primary:hover { color:#fff; border-color:var(--sec); transform:translateY(-1px) }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--border) }
.btn-ghost::before { background:var(--bg) }
.btn-ghost:hover { border-color:var(--text-muted); transform:translateY(-1px) }
.btn-accent { background:var(--acc); color:var(--pri); border-color:var(--acc) }
.btn-accent::before { background:var(--acc-light) }
.btn-accent:hover { color:var(--pri); border-color:var(--acc-light); transform:translateY(-1px); box-shadow:0 0 20px rgba(245,158,11,.25) }
.btn-lg { padding:.875rem 2rem; font-size:1.0625rem }
.btn-sm { padding:.4375rem 1rem; font-size:.8125rem }
.btn .ripple { position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0); animation:rippleAnim .6s ease-out; pointer-events:none }

/* ─── Cards ───────────────────────────────── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); transition:all var(--transition); overflow:hidden }
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px) }
.card-img-top { width:100%; height:200px; object-fit:cover; transition:transform .5s ease }
.card:hover .card-img-top { transform:scale(1.05) }
.card-body { padding:1.5rem }
.card-lift { transition:all var(--transition) }
.card-lift:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl) }
.card-gradient-border { position:relative; background-clip:padding-box; border:1px solid transparent }
.card-gradient-border::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,var(--sec),var(--acc)); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none }

/* ─── Sections ────────────────────────────── */
section { position:relative }
.section-padding { padding:5rem 0 }
@media(max-width:767px){ .section-padding { padding:3rem 0 } }

/* ─── Hero ────────────────────────────────── */
.hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; background:var(--pri) }
.hero-bg { position:absolute; inset:0; background:linear-gradient(135deg,var(--pri) 0%,#1a2744 50%,var(--pri) 100%) }
.hero-bg::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity:.4 }
.hero-content { position:relative; z-index:2; padding:6rem 0 4rem }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.1); padding:.375rem 1rem .375rem .375rem; border-radius:var(--radius-full); font-size:.8125rem; color:rgba(255,255,255,.8); margin-bottom:1.5rem }
.hero-badge span { background:var(--sec); color:#fff; padding:.125rem .625rem; border-radius:var(--radius-full); font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em }
.hero h1 { font-size:clamp(2.25rem,5vw,4rem); font-weight:800; line-height:1.1; color:#fff; margin-bottom:1.25rem }
.hero p { font-size:1.125rem; color:rgba(255,255,255,.65); max-width:36rem; line-height:1.8; margin-bottom:2rem }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem }
.hero-stats { display:flex; flex-wrap:wrap; gap:2rem 3rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.08) }
.hero-stat h3 { font-size:2rem; font-weight:800; color:#fff; margin-bottom:.125rem }
.hero-stat p { font-size:.8125rem; color:rgba(255,255,255,.5); margin-bottom:0 }
.hero-visual { position:relative; z-index:2; display:flex; align-items:center; justify-content:center }
.hero-image-wrap { position:relative; width:100%; max-width:560px; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-xl) }
.hero-image-wrap img { width:100%; height:auto; display:block }
.hero-image-wrap::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
.floating-card { position:absolute; background:rgba(255,255,255,.95); backdrop-filter:blur(16px); border-radius:var(--radius-md); padding:1rem 1.25rem; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:.75rem; animation:float 3s ease-in-out infinite; z-index:3 }
.floating-card-1 { bottom:2rem; left:-1rem; animation-delay:0s }
.floating-card-2 { top:2rem; right:-1rem; animation-delay:1.5s }
.floating-card-icon { width:40px; height:40px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:#fff; flex-shrink:0 }
.floating-card-text small { font-size:.6875rem; color:var(--text-muted); display:block; line-height:1.2 }
.floating-card-text strong { font-size:.875rem; color:var(--text) }
.scroll-indicator { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:rgba(255,255,255,.3); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; animation:bounce 2s infinite }
.scroll-indicator i { font-size:1.25rem; animation:bounce 2s infinite }
@media(max-width:991px){ .hero { min-height:auto; text-align:center } .hero p { max-width:100% } .hero-actions { justify-content:center } .hero-stats { justify-content:center } .hero-visual { margin-top:3rem } .floating-card-1 { left:5% } .floating-card-2 { right:5%; top:auto; bottom:20% } .scroll-indicator { display:none } }

/* ─── Stats Bar ───────────────────────────── */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md) }
.stats-row .stat-item { background:var(--bg-card); padding:2rem 1.5rem; text-align:center; position:relative; transition:all var(--transition) }
.stats-row .stat-item:hover { background:var(--bg) }
.stats-row .stat-item h3 { font-size:2.25rem; font-weight:800; color:var(--sec); margin-bottom:.25rem }
.stats-row .stat-item p { font-size:.875rem; color:var(--text-muted); margin-bottom:0 }
@media(max-width:767px){ .stats-row { grid-template-columns:repeat(2,1fr) } }

/* ─── Features / Why Choose Us ────────────── */
.feature-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; transition:all var(--transition); position:relative; overflow:hidden }
.feature-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--sec),var(--acc)); transform:scaleX(0); transform-origin:left; transition:transform var(--transition) }
.feature-card:hover::after { transform:scaleX(1) }
.feature-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl) }
.feature-icon { width:56px; height:56px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff; margin-bottom:1.25rem; background:linear-gradient(135deg,var(--sec),var(--sec-light)) }
.feature-card h5 { font-size:1.125rem; font-weight:700; margin-bottom:.5rem }
.feature-card p { font-size:.875rem; color:var(--text-muted); line-height:1.7; margin-bottom:0 }

/* ─── Course Cards ────────────────────────── */
.course-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition) }
.course-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl) }
.course-card .card-img-wrap { position:relative; overflow:hidden; height:200px }
.course-card .card-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.course-card:hover .card-img-wrap img { transform:scale(1.06) }
.course-card .card-img-wrap .course-badge { position:absolute; top:1rem; left:1rem; background:rgba(15,23,42,.75); backdrop-filter:blur(8px); color:#fff; padding:.25rem .75rem; border-radius:var(--radius-full); font-size:.75rem; font-weight:500; border:1px solid rgba(255,255,255,.1) }
.course-card .card-body { padding:1.5rem }
.course-card .card-body h5 { font-size:1.125rem; font-weight:700; margin-bottom:.5rem; transition:color var(--transition) }
.course-card:hover .card-body h5 { color:var(--sec) }
.course-card .card-body p { font-size:.875rem; color:var(--text-muted); margin-bottom:1rem; line-height:1.6 }
.course-meta { display:flex; gap:1.5rem; padding-top:1rem; border-top:1px solid var(--border); font-size:.8125rem; color:var(--text-muted) }
.course-meta span { display:flex; align-items:center; gap:.375rem }
.course-meta strong { color:var(--text) }

/* ─── Faculty Cards ───────────────────────── */
.faculty-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition); text-align:center }
.faculty-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl) }
.faculty-card .faculty-img-wrap { width:120px; height:120px; border-radius:50%; overflow:hidden; margin:-60px auto 0; border:4px solid var(--bg-card); box-shadow:var(--shadow-md); position:relative; z-index:2; transition:all var(--transition) }
.faculty-card:hover .faculty-img-wrap { border-color:var(--sec); transform:scale(1.05) }
.faculty-card .faculty-img-wrap img { width:100%; height:100%; object-fit:cover }
.faculty-card .card-body { padding:1.25rem 1.5rem 1.5rem }
.faculty-card .card-body h5 { font-size:1.0625rem; font-weight:700; margin-bottom:.25rem }
.faculty-card .card-body .role { font-size:.8125rem; color:var(--sec); font-weight:600; display:block; margin-bottom:.5rem }
.faculty-card .card-body .meta { font-size:.75rem; color:var(--text-light); margin-bottom:.75rem }
.faculty-card .card-body .bio { font-size:.8125rem; color:var(--text-muted); line-height:1.6; margin-bottom:0 }
.faculty-card .card-header-bg { height:100px; background:linear-gradient(135deg,var(--pri),var(--sec-dark)); position:relative; overflow:hidden }
.faculty-card .card-header-bg::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='.05'%3E%3Cpath d='M20 0v40M0 20h40'/%3E%3C/g%3E%3C/svg%3E") }

/* ─── Gallery ─────────────────────────────── */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem }
.gallery-grid .gallery-item.featured { grid-column:span 2; grid-row:span 2 }
.gallery-item { position:relative; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; aspect-ratio:4/3 }
.gallery-item.featured { aspect-ratio:auto }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.gallery-item:hover img { transform:scale(1.06) }
.gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(15,23,42,.85) 0%,rgba(15,23,42,.1) 60%,transparent 100%); opacity:0; transition:opacity .3s ease; display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; color:#fff }
.gallery-item:hover .gallery-overlay { opacity:1 }
.gallery-overlay h6 { color:#fff; font-weight:700; font-size:1rem; margin-bottom:.25rem }
.gallery-overlay span { font-size:.75rem; color:rgba(255,255,255,.6) }
@media(max-width:767px){ .gallery-grid { grid-template-columns:repeat(2,1fr); gap:1rem } .gallery-grid .gallery-item.featured { grid-column:span 1; grid-row:span 1 } }
@media(max-width:575px){ .gallery-grid { grid-template-columns:1fr } }

/* ─── Testimonials ────────────────────────── */
.testimonial-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; transition:all var(--transition); position:relative }
.testimonial-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.testimonial-card .quote-icon { font-size:2rem; color:var(--sec); opacity:.15; position:absolute; top:1.5rem; right:1.5rem; line-height:1 }
.testimonial-card p { font-size:.9375rem; color:var(--text-muted); line-height:1.7; margin-bottom:1.5rem; font-style:italic }
.testimonial-author { display:flex; align-items:center; gap:.875rem }
.testimonial-author .avatar { width:44px; height:44px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--sec),var(--sec-light)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1rem; flex-shrink:0 }
.testimonial-author .avatar img { width:100%; height:100%; object-fit:cover }
.testimonial-author strong { display:block; font-size:.875rem; font-weight:600; color:var(--text) }
.testimonial-author small { font-size:.75rem; color:var(--text-muted) }

/* ─── CTA ─────────────────────────────────── */
.cta-section { background:linear-gradient(135deg,var(--pri) 0%,#1a2744 100%); border-radius:var(--radius-xl); padding:4rem; text-align:center; position:relative; overflow:hidden }
.cta-section::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity:.5 }
.cta-section h2 { color:#fff; font-size:2.25rem; font-weight:800; margin-bottom:.75rem; position:relative }
.cta-section p { color:rgba(255,255,255,.6); max-width:32rem; margin:0 auto 2rem; position:relative }
.cta-section .btn { position:relative }
@media(max-width:767px){ .cta-section { padding:3rem 1.5rem; border-radius:var(--radius-lg) } .cta-section h2 { font-size:1.5rem } }

/* ─── Page Header ─────────────────────────── */
.page-header { background:linear-gradient(135deg,var(--pri) 0%,#1a2744 100%); padding:7rem 0 4rem; position:relative; overflow:hidden }
.page-header::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity:.4 }
.page-header * { position:relative; z-index:1 }
.page-header h1 { color:#fff; font-size:2.75rem; font-weight:800; margin-bottom:.75rem }
.page-header p { color:rgba(255,255,255,.6); font-size:1.0625rem; max-width:32rem }
@media(max-width:767px){ .page-header { padding:6rem 0 3rem; text-align:center } .page-header h1 { font-size:2rem } .page-header p { max-width:100% } }

/* ─── Breadcrumb ──────────────────────────── */
.breadcrumb { background:transparent; padding:0; margin-bottom:1.5rem }
.breadcrumb-item { font-size:.8125rem }
.breadcrumb-item a { color:rgba(255,255,255,.5) }
.breadcrumb-item a:hover { color:#fff }
.breadcrumb-item.active { color:rgba(255,255,255,.7) }
.breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.3) }

/* ─── Filter Pills ────────────────────────── */
.filter-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem }
.filter-pills .pill { padding:.5rem 1.25rem; border-radius:var(--radius-full); font-size:.8125rem; font-weight:500; border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted); cursor:pointer; transition:all var(--transition) }
.filter-pills .pill:hover { border-color:var(--sec); color:var(--sec); background:rgba(37,99,235,.04) }
.filter-pills .pill.active { background:var(--sec); color:#fff; border-color:var(--sec) }

/* ─── Forms ───────────────────────────────── */
.form-floating { position:relative }
.form-floating>.form-control,.form-floating>.form-select { height:auto; min-height:3.5rem; padding:1.25rem .875rem .5rem; border-radius:var(--radius-md); border:1.5px solid var(--border); background:var(--bg-card); font-size:.9375rem; transition:all var(--transition) }
.form-floating>.form-control:focus { border-color:var(--sec); box-shadow:0 0 0 3px rgba(37,99,235,.1); outline:none }
.form-floating>label { position:absolute; top:0; left:0; width:100%; height:100%; padding:.875rem; pointer-events:none; border:1px solid transparent; transform-origin:0 0; transition:opacity .2s ease-in-out,transform .2s ease-in-out; color:var(--text-muted); font-size:.9375rem }
.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label { transform:scale(.8) translateY(-.5rem) translateX(.125rem); opacity:.7 }
.form-floating>.form-control::placeholder { color:transparent }
.form-control.is-valid { border-color:#10b981 }
.form-control.is-invalid { border-color:#ef4444 }
.form-control.is-valid:focus { box-shadow:0 0 0 3px rgba(16,185,129,.1) }
.form-control.is-invalid:focus { box-shadow:0 0 0 3px rgba(239,68,68,.1) }

/* ─── Accordion ───────────────────────────── */
.accordion-item { border:1px solid var(--border); border-radius:var(--radius-lg) !important; margin-bottom:.75rem; overflow:hidden }
.accordion-button { font-weight:600; color:var(--text); padding:1.25rem 1.5rem; font-size:1rem; background:var(--bg-card); box-shadow:none }
.accordion-button:not(.collapsed) { color:var(--sec); background:rgba(37,99,235,.03); box-shadow:none }
.accordion-button::after { background-size:1rem; transition:transform var(--transition) }
.accordion-button:focus { box-shadow:none; border-color:var(--border) }
.accordion-body { padding:1.25rem 1.5rem; color:var(--text-muted); line-height:1.7 }

/* ─── News / Notice Items ─────────────────── */
.news-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; transition:all var(--transition); cursor:pointer }
.news-item:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.news-item .news-meta { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-bottom:.75rem }
.news-item .news-meta .badge { padding:.375rem .75rem; border-radius:var(--radius-full); font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em }
.news-item h5 { font-size:1.125rem; font-weight:700; transition:color var(--transition) }
.news-item:hover h5 { color:var(--sec) }
.news-item p { font-size:.875rem; color:var(--text-muted); margin-bottom:0; line-height:1.6 }

/* ─── Contact Info Cards ──────────────────── */
.contact-info-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; transition:all var(--transition); display:flex; gap:1rem; align-items:flex-start }
.contact-info-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.contact-info-card .contact-icon { width:48px; height:48px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:var(--sec); background:rgba(37,99,235,.08); flex-shrink:0 }
.contact-info-card h6 { font-size:.8125rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-light); margin-bottom:.25rem }
.contact-info-card p { font-size:.9375rem; color:var(--text); margin-bottom:0; font-weight:500 }

/* ─── Navigation ──────────────────────────── */
.navbar-main { position:fixed; top:0; left:0; right:0; z-index:1030; padding:.75rem 0; transition:all var(--transition); background:transparent }
.navbar-main.scrolled { background:rgba(255,255,255,.85); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); box-shadow:0 1px 3px rgba(15,23,42,.06); padding:.5rem 0 }
.navbar-main .navbar-brand { display:flex; align-items:center; gap:.625rem }
.navbar-main .navbar-brand .brand-mark { width:36px; height:36px; background:var(--sec); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1rem; transition:all var(--transition) }
.navbar-main.scrolled .brand-mark { background:var(--pri) }
.navbar-main .navbar-brand span { font-family:var(--font-heading); font-weight:700; font-size:1.25rem; transition:color var(--transition) }
.navbar-main:not(.scrolled) .navbar-brand span { color:#fff }
.navbar-main.scrolled .navbar-brand span { color:var(--pri) }
.navbar-main .nav-link { font-size:.875rem; font-weight:500; padding:.5rem 1rem !important; border-radius:var(--radius-full); transition:all var(--transition); position:relative }
.navbar-main:not(.scrolled) .nav-link { color:rgba(255,255,255,.8) }
.navbar-main:not(.scrolled) .nav-link:hover,.navbar-main:not(.scrolled) .nav-link.active { color:#fff; background:rgba(255,255,255,.1) }
.navbar-main.scrolled .nav-link { color:var(--text) }
.navbar-main.scrolled .nav-link:hover,.navbar-main.scrolled .nav-link.active { color:var(--sec); background:rgba(37,99,235,.06) }
.navbar-main .navbar-toggler { border:none; padding:.375rem; color:var(--text) }
.navbar-main:not(.scrolled) .navbar-toggler { color:#fff }
.navbar-main .navbar-toggler:focus { box-shadow:none }
.navbar-main .navbar-toggler i { font-size:1.5rem; transition:color var(--transition) }
@media(max-width:991px){ .navbar-main { background:rgba(255,255,255,.95) !important; backdrop-filter:blur(20px) !important; box-shadow:0 1px 3px rgba(15,23,42,.06) !important } .navbar-main .navbar-brand span { color:var(--pri) !important } .navbar-main .nav-link { color:var(--text) !important } .navbar-main .navbar-toggler { color:var(--text) !important } }

/* ─── Footer ──────────────────────────────── */
.footer-premium { background:var(--pri); position:relative; overflow:hidden }
.footer-premium::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") }
.footer-premium h5 { color:#fff; font-weight:700; font-size:1rem; margin-bottom:1.25rem; letter-spacing:.03em }
.footer-premium p,.footer-premium a { color:rgba(255,255,255,.55); font-size:.875rem; line-height:1.7; transition:color var(--transition) }
.footer-premium a:hover { color:var(--acc) }
.footer-premium .social-links { display:flex; gap:.625rem; margin-top:1.25rem }
.footer-premium .social-links a { width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); transition:all var(--transition); font-size:1rem }
.footer-premium .social-links a:hover { border-color:var(--sec); background:var(--sec); color:#fff; transform:translateY(-2px) }
.footer-premium .footer-links { list-style:none; padding:0; margin:0 }
.footer-premium .footer-links li { margin-bottom:.625rem }
.footer-premium .footer-links a { text-decoration:none; display:inline-flex; align-items:center; gap:.5rem }
.footer-premium .footer-links a::before { content:'\203A'; color:var(--sec); font-weight:700; font-size:1.0625rem }
.footer-premium .footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding:1.5rem 0; margin-top:3rem }
.footer-premium .footer-bottom p { font-size:.8125rem; color:rgba(255,255,255,.3); margin:0 }

/* ─── Animations ──────────────────────────── */
@keyframes rippleAnim { to { transform:scale(4); opacity:0 } }
@keyframes float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-10px) } }
@keyframes bounce { 0%,20%,50%,80%,100% { transform:translateY(0) } 40% { transform:translateY(-8px) } 60% { transform:translateY(-4px) } }
@keyframes fadeUp { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-30px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeLeft { from { opacity:0; transform:translateX(-30px) } to { opacity:1; transform:translateX(0) } }
@keyframes fadeRight { from { opacity:0; transform:translateX(30px) } to { opacity:1; transform:translateX(0) } }
@keyframes scaleIn { from { opacity:0; transform:scale(.9) } to { opacity:1; transform:scale(1) } }

.reveal { opacity:0; transition:all .7s cubic-bezier(.4,0,.2,1) }
.reveal.revealed { opacity:1; transform:translateY(0) translateX(0) scale(1) }
.reveal-fade-up { transform:translateY(30px) }
.reveal-fade-down { transform:translateY(-30px) }
.reveal-fade-left { transform:translateX(-30px) }
.reveal-fade-right { transform:translateX(30px) }
.reveal-scale { transform:scale(.9) }

/* ════════════════ ADMIN LOGIN ════════════════ */
.admin-login { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0F172A 0%,#1e293b 50%,#0F172A 100%); position:relative; overflow:hidden }
.admin-login::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") }
.admin-login .login-card { background:rgba(255,255,255,.98); backdrop-filter:blur(24px) saturate(180%); border-radius:20px; padding:2.5rem; box-shadow:0 25px 60px rgba(15,23,42,.3); width:100%; max-width:420px; position:relative; animation:fadeUp .5s ease }
.admin-login .login-card h4 { font-weight:700; margin-bottom:.5rem; color:#0F172A }
.admin-login .login-card p { color:#64748b; font-size:.875rem; margin-bottom:1.5rem }
.admin-login .login-card .form-control:focus { border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.15) }
@media(max-width:575.98px){ .admin-login .login-card { padding:1.5rem; margin:0 .75rem; border-radius:16px } .admin-login .login-card h4 { font-size:1.125rem } .admin-login .login-card p { font-size:.8125rem } .admin-login .login-card .btn-lg { font-size:.875rem; padding:.625rem 1rem } }

/* ════════════════ ADMIN APP ═════════════════ */
:root { --sidebar-w:280px; --topbar-h:60px }
.admin-body { background:#F1F5F9; font-family:'Outfit',sans-serif; overflow:hidden; width:100%; height:100vh }
.admin-wrap { display:flex; height:100vh; width:100%; overflow:hidden; position:relative }

/* ════════════════ SIDEBAR ═══════════════════ */
.admin-sidebar { width:var(--sidebar-w); height:100vh; background:#0F172A; position:fixed; top:0; left:0; bottom:0; z-index:1050; display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.4,0,.2,1); will-change:transform; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent }
.sidebar-header { padding:.875rem 1rem; display:flex; align-items:center; gap:.75rem; border-bottom:1px solid rgba(255,255,255,.06); min-height:var(--topbar-h); flex-shrink:0 }
.sidebar-brand { display:flex; align-items:center; gap:.75rem; text-decoration:none }
.sidebar-brand-icon { width:34px; height:34px; background:linear-gradient(135deg,#2563EB,#1d4ed8); border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1rem; flex-shrink:0 }
.sidebar-brand-text { color:#fff; font-weight:700; font-size:1rem; letter-spacing:-.02em }
.sidebar-brand-sub { font-size:.625rem; color:rgba(255,255,255,.4); display:block; line-height:1.2; margin-top:-2px }
.sidebar-nav { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:.5rem .625rem .75rem; overscroll-behavior:contain; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent }
.sidebar-nav::-webkit-scrollbar { width:5px; height:5px }
.sidebar-nav::-webkit-scrollbar-track { background:transparent }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:999px; border:1px solid transparent; background-clip:padding-box }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.3) }
.sidebar-nav::-webkit-scrollbar-thumb:active { background:rgba(255,255,255,.38) }
.admin-sidebar::-webkit-scrollbar { width:5px; height:5px }
.admin-sidebar::-webkit-scrollbar-track { background:transparent }
.admin-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:999px; border:1px solid transparent; background-clip:padding-box }
.admin-sidebar::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.3) }
.sidebar-group-title { font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.25); padding:.375rem .625rem .25rem }
.sidebar-nav ul { list-style:none; padding:0; margin:0 0 .625rem }
.sidebar-nav li { margin-bottom:1px }
.sidebar-nav a { display:flex; align-items:center; gap:.5rem; padding:.4375rem .625rem; color:rgba(255,255,255,.5); text-decoration:none; border-radius:8px; font-size:.8125rem; font-weight:500; transition:all .2s ease; position:relative }
.sidebar-nav a:hover { color:#fff; background:rgba(255,255,255,.06) }
.sidebar-nav a.active { color:#fff; background:rgba(37,99,235,.2); font-weight:600 }
.sidebar-nav a.active::before { content:''; position:absolute; left:-.625rem; top:50%; transform:translateY(-50%); width:3px; height:16px; background:#2563EB; border-radius:0 3px 3px 0 }
.sidebar-nav a i { font-size:.9375rem; width:1rem; text-align:center; flex-shrink:0 }
.sidebar-nav .badge { margin-left:auto; font-size:.5625rem; padding:.125rem .4375rem; border-radius:20px; background:#2563EB; color:#fff; font-weight:600 }
.sidebar-footer { padding:.625rem 1rem; border-top:1px solid rgba(255,255,255,.06); margin-top:auto; flex-shrink:0 }
.sidebar-user { display:flex; align-items:center; gap:.625rem }
.sidebar-user-avatar { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#2563EB,#7C3AED); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.75rem; flex-shrink:0 }
.sidebar-user-info { flex:1; min-width:0 }
.sidebar-user-name { color:#fff; font-size:.75rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sidebar-user-role { color:rgba(255,255,255,.35); font-size:.625rem }
.sidebar-user-logout { color:rgba(255,255,255,.3); font-size:.875rem; transition:color .2s; flex-shrink:0 }
.sidebar-user-logout:hover { color:#EF4444 }

/* Sidebar overlay backdrop */
.sidebar-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1049; opacity:0; pointer-events:none; transition:opacity .3s ease }
.sidebar-backdrop.show { opacity:1; pointer-events:auto }

/* ════════════════ TOPBAR ════════════════════ */
.admin-topbar { position:sticky; top:0; z-index:1000; height:var(--topbar-h); flex-shrink:0; display:flex; align-items:center; padding:0 .75rem; background:rgba(255,255,255,.85); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border-bottom:1px solid rgba(226,232,240,.8); margin-bottom:0; gap:.375rem }
.topbar-left { display:flex; align-items:center; gap:.375rem; flex-shrink:0; min-width:0; overflow:hidden }
.sidebar-toggle-btn { width:32px; height:32px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; color:#64748b; font-size:.9375rem; flex-shrink:0 }
.sidebar-toggle-btn:hover { background:#f8fafc; border-color:#cbd5e1; color:#0F172A }
.topbar-breadcrumb { display:flex; align-items:center; gap:.3125rem; font-size:.75rem; color:#64748b; font-weight:500; white-space:nowrap; overflow:hidden; min-width:0 }
.topbar-breadcrumb a { color:#64748b; text-decoration:none; flex-shrink:0 }
.topbar-breadcrumb a:hover { color:#2563EB }
.topbar-breadcrumb .sep { color:#cbd5e1; flex-shrink:0 }
.topbar-breadcrumb .current { color:#0F172A; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:140px }
.topbar-center { flex:1; display:flex; align-items:center; justify-content:center; max-width:300px; margin:0 .5rem; width:100%; min-width:0 }
.topbar-search { width:100%; position:relative }
.topbar-search .form-control { height:34px; padding-left:2rem; border-radius:8px; border:1px solid #e2e8f0; background:#f8fafc; font-size:.75rem; transition:all .2s }
.topbar-search .form-control:focus { background:#fff; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.1) }
.topbar-search .search-icon { position:absolute; left:.625rem; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:.75rem; pointer-events:none }
.topbar-right { display:flex; align-items:center; gap:.3125rem; margin-left:auto; flex-shrink:0 }
.topbar-btn { width:32px; height:32px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; color:#64748b; font-size:.875rem; position:relative; flex-shrink:0 }
.topbar-btn:hover { background:#f8fafc; border-color:#cbd5e1; color:#0F172A }
.topbar-btn .badge-dot { position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background:#EF4444; border:2px solid #fff }
.topbar-user { display:flex; align-items:center; gap:.375rem; padding:.125rem .3125rem .125rem .125rem; border-radius:8px; cursor:pointer; transition:all .2s; text-decoration:none; flex-shrink:0 }
.topbar-user:hover { background:#f1f5f9 }
.topbar-user-avatar { width:28px; height:28px; border-radius:7px; background:linear-gradient(135deg,#2563EB,#7C3AED); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.625rem; flex-shrink:0 }
.topbar-user-name { font-size:.75rem; font-weight:600; color:#0F172A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px }
#topbarClock { font-size:.6875rem; color:#94a3b8; font-weight:500; white-space:nowrap; flex-shrink:0 }
.theme-toggle-btn { width:34px; height:34px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; color:#64748b; font-size:1rem; flex-shrink:0 }
.theme-toggle-btn:hover { background:#f8fafc; border-color:#cbd5e1; color:#0F172A }

/* ════════════════ NOTIFICATIONS ══════════════ */
.topbar-btn .notification-count { position:absolute; top:-4px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#EF4444; color:#fff; font-size:.5625rem; font-weight:700; line-height:16px; text-align:center; border:2px solid #fff; box-shadow:0 1px 3px rgba(239,68,68,.4) }
.notification-dropdown { width:360px; max-width:calc(100vw - 1rem); padding:0; margin-top:.5rem !important; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); overflow:hidden }
.notification-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--border); background:var(--bg-card) }
.notification-header h6 { font-size:.875rem; font-weight:700; color:var(--text) }
.notification-mark-all { border:0; background:transparent; color:var(--sec); font-size:.75rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; padding:0; transition:color .2s }
.notification-mark-all:hover { color:var(--sec-dark) }
.notification-list { max-height:360px; overflow-y:auto; background:var(--bg-card) }
.notification-list::-webkit-scrollbar { width:6px }
.notification-list::-webkit-scrollbar-track { background:transparent }
.notification-list::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:999px }
.notification-item { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem 1rem; text-decoration:none; border-bottom:1px solid var(--border); transition:background .2s; position:relative }
.notification-item:hover { background:var(--bg) }
.notification-item.unread { background:rgba(37,99,235,.05) }
.notification-icon { width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:.9375rem; flex-shrink:0 }
.notification-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.notification-title { font-size:.8125rem; font-weight:600; color:var(--text); line-height:1.35 }
.notification-message { font-size:.75rem; color:var(--text-muted); line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.notification-time { font-size:.6875rem; color:var(--text-light); display:inline-flex; align-items:center; gap:.25rem }
.notification-dot { width:8px; height:8px; border-radius:50%; background:transparent; flex-shrink:0; margin-top:5px }
.notification-item.unread .notification-dot { background:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.12) }
.notification-empty { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:2.5rem 1rem; color:var(--text-muted); font-size:.8125rem; text-align:center }
.notification-empty i { font-size:1.75rem; color:var(--text-light) }
.notification-footer { padding:.625rem 1rem; border-top:1px solid var(--border); text-align:center; background:var(--bg-card) }
.notification-footer a { font-size:.75rem; font-weight:600; color:var(--sec); text-decoration:none; transition:color .2s; display:inline-flex; align-items:center; gap:.25rem }
.notification-footer a:hover { color:var(--sec-dark); text-decoration:underline }

.status-badge.pending { background:rgba(245,158,11,.1); color:#d97706 }
.status-badge.pending::before { content:''; width:5px; height:5px; border-radius:50%; background:#d97706 }

[data-theme="dark"] .topbar-btn .notification-count { border-color:#0F172A }
[data-theme="dark"] .notification-dropdown { background:#1E293B; border-color:#334155 }
[data-theme="dark"] .notification-header { background:#1E293B; border-color:#334155 }
[data-theme="dark"] .notification-header h6 { color:#F1F5F9 }
[data-theme="dark"] .notification-list { background:#1E293B }
[data-theme="dark"] .notification-list::-webkit-scrollbar-thumb { background:#334155 }
[data-theme="dark"] .notification-item { border-color:#334155 }
[data-theme="dark"] .notification-item:hover { background:#0F172A }
[data-theme="dark"] .notification-item.unread { background:rgba(37,99,235,.1) }
[data-theme="dark"] .notification-title { color:#F1F5F9 }
[data-theme="dark"] .notification-message { color:#94A3B8 }
[data-theme="dark"] .notification-time { color:#64748B }
[data-theme="dark"] .notification-empty { color:#94A3B8 }
[data-theme="dark"] .notification-empty i { color:#64748B }
[data-theme="dark"] .notification-footer { background:#1E293B; border-color:#334155 }

/* ════════════════ ADMIN MAIN ════════════════ */
.admin-main { margin-left:var(--sidebar-w); height:100vh; padding:0; flex:1 1 auto; min-width:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; display:flex; flex-direction:column; transition:margin-left .3s cubic-bezier(.4,0,.2,1) }
.admin-main .admin-content { width:100%; min-width:0; flex:1 1 auto }
.admin-main::-webkit-scrollbar { width:8px; height:8px }
.admin-main::-webkit-scrollbar-track { background:transparent }
.admin-main::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:999px; border:2px solid transparent; background-clip:padding-box }
.admin-main::-webkit-scrollbar-thumb:hover { background:#94a3b8 }
[data-theme="dark"] .admin-main::-webkit-scrollbar-thumb { background:#334155 }
[data-theme="dark"] .admin-main::-webkit-scrollbar-thumb:hover { background:#475569 }

/* ─── Viewport height (mobile dynamic height fallback) ─── */
@supports (height:100dvh) {
  .admin-body, .admin-wrap, .admin-main, .admin-sidebar { height:100dvh }
}

/* ─── Desktop sidebar state ─── */
@media(min-width:1200px) {
  .admin-sidebar { transform:translateX(0) }
  .admin-sidebar.sidebar-hidden { transform:translateX(-100%) }
  .admin-sidebar.sidebar-hidden ~ .admin-main { margin-left:0 }
  .sidebar-backdrop { display:none }
}

/* ─── Tablet & Mobile sidebar state ─── */
@media(max-width:1199.98px) {
  .admin-sidebar { transform:translateX(-100%); box-shadow:none; width:280px }
  .admin-sidebar.sidebar-visible { transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.3) }
  .admin-main { margin-left:0 }
  .sidebar-backdrop { display:block }
}

/* ════════════════ KPI CARDS ═════════════════ */
.kpi-card { background:#fff; border-radius:16px; padding:1.5rem; border:1px solid #e2e8f0; transition:all .3s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden }
.kpi-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.08); border-color:#cbd5e1 }
.kpi-card .kpi-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1rem }
.kpi-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0 }
.kpi-icon-blue { background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(37,99,235,.06)); color:#2563EB }
.kpi-icon-green { background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.06)); color:#10B981 }
.kpi-icon-amber { background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(245,158,11,.06)); color:#F59E0B }
.kpi-icon-red { background:linear-gradient(135deg,rgba(239,68,68,.12),rgba(239,68,68,.06)); color:#EF4444 }
.kpi-icon-purple { background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(124,58,237,.06)); color:#7C3AED }
.kpi-icon-cyan { background:linear-gradient(135deg,rgba(8,145,178,.12),rgba(8,145,178,.06)); color:#0891B2 }
.kpi-icon-dark { background:linear-gradient(135deg,rgba(15,23,42,.1),rgba(15,23,42,.05)); color:#0F172A }
.kpi-growth { display:inline-flex; align-items:center; gap:2px; font-size:.6875rem; font-weight:600; padding:.125rem .5rem; border-radius:20px }
.kpi-growth.up { background:rgba(16,185,129,.1); color:#059669 }
.kpi-growth.down { background:rgba(239,68,68,.1); color:#dc2626 }
.kpi-value { font-size:1.75rem; font-weight:800; color:#0F172A; line-height:1.2; margin-bottom:.125rem }
.kpi-label { font-size:.8125rem; color:#64748b; font-weight:500 }

/* ════════════════ WIDGETS & CHARTS ══════════ */
.chart-widget { background:#fff; border-radius:16px; border:1px solid #e2e8f0; overflow:hidden; transition:all .3s ease }
.chart-widget:hover { box-shadow:0 8px 30px rgba(0,0,0,.06) }
.chart-widget .widget-header { padding:1.25rem 1.5rem; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap }
.chart-widget .widget-header h6 { font-weight:700; font-size:.9375rem; color:#0F172A; margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.chart-widget .widget-header .widget-action,
.chart-widget .widget-header .text-secondary { flex-shrink:0 }
.chart-widget .widget-body { padding:1.5rem }
.chart-placeholder { height:200px; background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:.875rem; overflow:hidden }
.chart-bars { display:flex; align-items:flex-end; gap:6px; height:100px; padding:0 20px }
.chart-bars .bar { width:16px; border-radius:4px 4px 0 0; background:linear-gradient(to top,#2563EB,rgba(37,99,235,.4)); animation:barGrow .8s ease forwards; opacity:0 }
.chart-bars .bar:nth-child(1) { height:40%; animation-delay:.1s }
.chart-bars .bar:nth-child(2) { height:65%; animation-delay:.2s }
.chart-bars .bar:nth-child(3) { height:45%; animation-delay:.3s }
.chart-bars .bar:nth-child(4) { height:80%; animation-delay:.4s }
.chart-bars .bar:nth-child(5) { height:55%; animation-delay:.5s }
.chart-bars .bar:nth-child(6) { height:90%; animation-delay:.6s }
.chart-bars .bar:nth-child(7) { height:60%; animation-delay:.7s }
@keyframes barGrow { to { opacity:1 } }
.activity-timeline { position:relative; padding-left:1.5rem }
.activity-timeline::before { content:''; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background:#e2e8f0; border-radius:1px }
.activity-item { position:relative; padding-bottom:1.25rem }
.activity-item:last-child { padding-bottom:0 }
.activity-dot { position:absolute; left:-1.5rem; top:4px; width:14px; height:14px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 2px #2563EB; background:#2563EB }
.activity-dot.green { box-shadow:0 0 0 2px #10B981; background:#10B981 }
.activity-dot.amber { box-shadow:0 0 0 2px #F59E0B; background:#F59E0B }
.activity-dot.red { box-shadow:0 0 0 2px #EF4444; background:#EF4444 }
.activity-text { font-size:.8125rem; color:#334155; font-weight:500 }
.activity-time { font-size:.6875rem; color:#94a3b8; margin-top:1px }

/* ════════════════ DATA TABLES ═══════════════ */
.admin-table-wrap { background:#fff; border-radius:16px; border:1px solid #e2e8f0; overflow:hidden }
.admin-table-wrap .table-toolbar { padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; border-bottom:1px solid #f1f5f9 }
.admin-table-wrap .table-search-wrap { position:relative }
.admin-table-wrap .table-search-wrap .search-icon { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:.8125rem; pointer-events:none }
.admin-table-wrap .table-search-input { max-width:260px; height:36px; padding-left:2.25rem; border-radius:10px; border:1px solid #e2e8f0; background:#f8fafc; font-size:.8125rem; transition:all .2s; min-width:180px }
.admin-table-wrap .table-search-input:focus { background:#fff; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.1) }
.admin-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.8125rem }
.admin-table thead th { background:#f8fafc; padding:.75rem 1rem; font-weight:600; font-size:.6875rem; text-transform:uppercase; letter-spacing:.05em; color:#64748b; border-bottom:1px solid #e2e8f0; position:sticky; top:0; z-index:1 }
.admin-table tbody tr { transition:all .2s ease }
.admin-table tbody tr:hover { background:rgba(37,99,235,.03) }
.admin-table tbody td { padding:.75rem 1rem; border-bottom:1px solid #f1f5f9; vertical-align:middle; color:#334155 }
.admin-table tbody tr:last-child td { border-bottom:none }
.admin-table .status-badge { padding:.25rem .75rem; border-radius:20px; font-size:.6875rem; font-weight:600; display:inline-flex; align-items:center; gap:4px }
.admin-table .status-badge.active { background:rgba(16,185,129,.1); color:#059669 }
.admin-table .status-badge.active::before { content:''; width:5px; height:5px; border-radius:50%; background:#059669 }
.admin-table .status-badge.inactive { background:rgba(239,68,68,.1); color:#dc2626 }
.admin-table .status-badge.inactive::before { content:''; width:5px; height:5px; border-radius:50%; background:#dc2626 }
.admin-table .row-actions { display:flex; gap:.25rem }
.admin-table .row-actions a { width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:all .2s; font-size:.8125rem }
.admin-table .row-actions .action-edit { color:#2563EB; background:rgba(37,99,235,.06) }
.admin-table .row-actions .action-edit:hover { background:rgba(37,99,235,.12) }
.admin-table .row-actions .action-delete { color:#EF4444; background:rgba(239,68,68,.06) }
.admin-table .row-actions .action-delete:hover { background:rgba(239,68,68,.12) }

/* ════════════════ ADMIN FORMS ═══════════════ */
.admin-form-card { background:#fff; border-radius:16px; border:1px solid #e2e8f0; padding:1.5rem; margin-bottom:1.5rem }
.admin-form-card .form-card-title { font-size:.9375rem; font-weight:700; color:#0F172A; margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:1px solid #f1f5f9 }
.admin-form-card .form-label { font-size:.8125rem; font-weight:600; color:#334155; margin-bottom:.375rem }
.admin-form-card .form-control, .admin-form-card .form-select { border-radius:10px; border:1px solid #e2e8f0; padding:.5rem .875rem; font-size:.8125rem; transition:all .2s; background:#fff }
.admin-form-card .form-control:focus, .admin-form-card .form-select:focus { border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.1) }
.admin-form-card .btn-accent { background:linear-gradient(135deg,#2563EB,#1d4ed8); border:none; color:#fff; border-radius:10px; font-weight:600; font-size:.8125rem; padding:.5rem 1.25rem; transition:all .2s }
.admin-form-card .btn-accent:hover { transform:translateY(-1px); box-shadow:0 4px 15px rgba(37,99,235,.3) }

/* ════════════════ ADMIN FOOTER ══════════════ */
.admin-footer { background:#fff; border-top:1px solid #e2e8f0; padding:.75rem 1.25rem; font-size:.8125rem; color:#64748b }
.admin-footer a { color:#2563EB; font-weight:600; text-decoration:none }
.admin-footer a:hover { text-decoration:underline }
[data-theme="dark"] .admin-footer { background:#0F172A; border-top-color:#334155; color:#94a3b8 }
[data-theme="dark"] .admin-footer a { color:#60a5fa }

/* ════════════════ ADMIN ABOUT MODAL ═════════ */
.about-brand { display:flex; align-items:center; gap:.875rem; padding-bottom:1rem; border-bottom:1px solid #f1f5f9 }
.about-logo { width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,#2563EB,#7C3AED); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1.25rem; flex-shrink:0 }
.about-table { margin-bottom:0 }
.about-table th { width:45%; font-size:.8125rem; font-weight:600; color:#64748b; padding:.625rem .75rem }
.about-table td { font-size:.8125rem; color:#0F172A; padding:.625rem .75rem }
.about-table td a { color:#2563EB; text-decoration:none; font-weight:600 }
.about-table td a:hover { text-decoration:underline }
.about-table th, .about-table td { background:transparent; border-bottom:1px solid #f1f5f9 }
[data-theme="dark"] .about-table th { color:#94a3b8 }
[data-theme="dark"] .about-table td { color:#F1F5F9 }
[data-theme="dark"] .about-table td a { color:#60a5fa }
[data-theme="dark"] .about-brand, [data-theme="dark"] .about-table th, [data-theme="dark"] .about-table td { border-bottom-color:#334155 }

/* ════════════════ ADMIN STAT CARD ═══════════ */
.admin-stat-card { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:1.5rem; transition:all .3s cubic-bezier(.4,0,.2,1); text-align:center }
.admin-stat-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.08); transform:translateY(-4px); border-color:#cbd5e1 }
.admin-stat-card i { font-size:1.75rem; display:block; margin-bottom:.75rem }
.admin-stat-card h3 { font-size:1.75rem; font-weight:800; margin-bottom:.125rem }
.admin-stat-card small { font-size:.8125rem; color:#64748b }

/* ════════════════ FILTER PILLS ══════════════ */
.filter-pills { display:flex; flex-wrap:wrap; gap:.5rem }
.filter-pills .btn { border-radius:20px; font-size:.75rem; font-weight:600; padding:.375rem 1rem }

/* ════════════════ UTILITY ═══════════════════ */
.glass { background:rgba(255,255,255,.7); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border:1px solid rgba(255,255,255,.2) }
.gradient-text { background:linear-gradient(135deg,#2563EB,#F59E0B); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.shadow-hover { transition:box-shadow var(--transition) }
.shadow-hover:hover { box-shadow:0 20px 60px rgba(0,0,0,.12) }
.rounded-xl { border-radius:16px }
.aspect-video { aspect-ratio:16/9 }
.aspect-square { aspect-ratio:1/1 }
.table-search { max-width:260px }

/* ════════════════ RESPONSIVE ════════════════ */

/* 1920px+ (Ultra-wide) */
@media(min-width:1920px) {
  .admin-topbar { padding:0 2rem }
  .kpi-value { font-size:2rem }
}

/* 1400px - 1599px */
@media(min-width:1400px) and (max-width:1599.98px) {
  .kpi-card { padding:1rem }
  .kpi-value { font-size:1.375rem }
  .kpi-icon { width:40px; height:40px; font-size:1.0625rem }
}

/* 1280px - 1365px */
@media(min-width:1280px) and (max-width:1365.98px) {
  .kpi-card { padding:1.125rem }
  .kpi-value { font-size:1.5rem }
  .kpi-icon { width:40px; height:40px; font-size:1.0625rem }
}

/* 1024px - 1279px (small desktop / large tablet landscape) */
@media(min-width:1024px) and (max-width:1279.98px) {
  .admin-topbar { padding:0 .625rem; gap:.375rem }
  .topbar-center { max-width:240px }
  .topbar-breadcrumb { font-size:.6875rem }
  .sidebar-nav a { padding:.4375rem .625rem; font-size:.75rem }
  .sidebar-nav a i { font-size:.875rem; width:1rem }
  .sidebar-header { padding:.75rem .875rem }
  .sidebar-brand-icon { width:32px; height:32px; font-size:.9375rem }
  .sidebar-brand-text { font-size:.9375rem }
  .sidebar-brand-sub { font-size:.6rem }
  .sidebar-footer { padding:.625rem .875rem }
  .kpi-card { padding:1rem }
  .kpi-value { font-size:1.375rem }
  .kpi-icon { width:38px; height:38px; font-size:1rem }
  #topbarClock { display:none }
}

/* 992px - 1023px (tablet landscape) */
@media(max-width:1023.98px) {
  .topbar-center { max-width:200px }
  .topbar-breadcrumb .current { max-width:120px }
  #topbarClock { display:none }
  .kpi-card { padding:.875rem }
  .kpi-value { font-size:1.25rem }
  .kpi-icon { width:36px; height:36px; font-size:.9375rem }
  .kpi-growth { font-size:.625rem; padding:.125rem .375rem }
  .chart-widget .widget-header { padding:1rem 1.125rem }
  .chart-widget .widget-header h6 { font-size:.8125rem }
  .chart-widget .widget-body { padding:1rem }
  .chart-placeholder { height:160px }
  .chart-bars { height:80px }
  .admin-table-wrap .table-toolbar { padding:.75rem 1rem }
  .admin-table thead th { padding:.5rem .625rem; font-size:.625rem }
  .admin-table tbody td { padding:.5rem .625rem; font-size:.75rem }
  .admin-form-card { padding:1.125rem }
  .admin-form-card .form-card-title { font-size:.8125rem }
  .admin-pagination { padding:.75rem 1rem }
  .pagination-links a, .pagination-links span { min-width:28px; height:28px; font-size:.75rem }
  .drag-drop-zone { padding:1.5rem 1rem }
  .drag-drop-zone .upload-icon { font-size:2rem }
  .activity-item { padding-bottom:.875rem }
}

/* 768px - 991px (tablet portrait) */
@media(max-width:991.98px) {
  .admin-topbar { padding:0 .625rem }
  .topbar-center { display:none }
  .topbar-user-name { display:none }
  .topbar-breadcrumb .current { max-width:100px }
  .admin-main .row.g-4 { --bs-gutter-y:1rem; --bs-gutter-x:1rem }
  .kpi-card { padding:.75rem }
  .kpi-value { font-size:1.125rem }
  .kpi-label { font-size:.6875rem }
  .kpi-icon { width:32px; height:32px; font-size:.8125rem; border-radius:10px }
  .kpi-top { margin-bottom:.5rem }
  .kpi-sparkline { height:24px; margin-top:.25rem }
  .kpi-sparkline .spk-bar { width:3px }
  .chart-widget { margin-bottom:0 }
  .admin-form-card { padding:1rem }
  .admin-form-card .form-card-title { font-size:.8125rem; margin-bottom:.875rem }
  .form-floating>.form-control, .form-floating>.form-select { min-height:3rem; padding:1rem .75rem .375rem; font-size:.8125rem }
  .form-floating>label { font-size:.8125rem; padding:.625rem .75rem }
  .admin-table-wrap { border-radius:12px }
  .admin-table-wrap .table-toolbar { flex-direction:column; align-items:stretch; gap:.5rem; padding:.625rem .75rem }
  .admin-table-wrap .table-toolbar .toolbar-left { width:100% }
  .admin-table-wrap .table-toolbar .toolbar-right { width:100% }
  .admin-table-wrap .table-search-input { max-width:100%; min-width:0 }
  .admin-pagination { flex-direction:column; align-items:flex-start; gap:.5rem; padding:.625rem .75rem }
  .pagination-info { font-size:.75rem }
  .activity-timeline { padding-left:1.25rem }
  .activity-dot { width:12px; height:12px; left:-1.25rem }
  .activity-item { padding-bottom:.75rem }
  .activity-text { font-size:.75rem }
  .admin-stat-card { padding:1rem }
  .admin-stat-card h3 { font-size:1.25rem }
  .admin-stat-card i { font-size:1.25rem; margin-bottom:.5rem }
  .drag-drop-zone { padding:1.25rem .875rem }
}

/* 576px - 767px (large mobile) */
@media(max-width:767.98px) {
  .admin-topbar { padding:0 .5rem; height:52px }
  :root { --topbar-h:52px }
  .sidebar-toggle-btn { width:30px; height:30px; font-size:.875rem }
  .topbar-breadcrumb { font-size:.6875rem }
  .topbar-breadcrumb .current { max-width:80px }
  .topbar-btn { width:30px; height:30px; font-size:.8125rem }
  .topbar-btn .badge-dot { width:6px; height:6px; top:4px; right:4px }
  .topbar-user-avatar { width:26px; height:26px; font-size:.625rem }
  .theme-toggle-btn { width:30px; height:30px; font-size:.8125rem }
  .admin-main .row.g-4 { --bs-gutter-y:.75rem; --bs-gutter-x:.75rem }
  .kpi-card { padding:.625rem; border-radius:12px }
  .kpi-value { font-size:1rem }
  .kpi-label { font-size:.625rem }
  .kpi-icon { width:28px; height:28px; font-size:.75rem; border-radius:8px }
  .kpi-growth { font-size:.5625rem; padding:0 .3125rem }
  .kpi-sparkline { display:none }
  .chart-widget { border-radius:12px }
  .chart-widget .widget-header { padding:.75rem 1rem }
  .chart-widget .widget-header h6 { font-size:.75rem }
  .chart-widget .widget-body { padding:.75rem }
  .chart-placeholder { height:120px; border-radius:8px }
  .chart-bars { height:60px; gap:4px; padding:0 12px }
  .chart-bars .bar { width:12px }
  .activity-timeline::before { left:4px }
  .activity-dot { width:10px; height:10px; left:-1.25rem; border-width:2px; top:3px }
  .admin-form-card { padding:.875rem; border-radius:12px }
  .admin-form-card .form-card-title { font-size:.75rem; margin-bottom:.75rem; padding-bottom:.5rem }
  .form-floating>.form-control, .form-floating>.form-select { min-height:2.75rem; padding:.875rem .625rem .3125rem; font-size:.75rem }
  .form-floating>label { font-size:.75rem; padding:.5rem .625rem }
  .admin-table-wrap { border-radius:12px }
  .admin-table-wrap .table-toolbar { padding:.5rem .625rem }
  .admin-table { font-size:.6875rem }
  .admin-table thead th { padding:.375rem .5rem; font-size:.5625rem }
  .admin-table tbody td { padding:.375rem .5rem; font-size:.6875rem }
  .admin-table .status-badge { padding:.125rem .5rem; font-size:.5625rem }
  .admin-table .row-actions a { width:26px; height:26px; font-size:.6875rem; border-radius:6px }
  .admin-pagination { padding:.5rem .625rem }
  .pagination-links a, .pagination-links span { min-width:26px; height:26px; font-size:.6875rem }
  .drag-drop-zone { padding:1rem .75rem }
  .drag-drop-zone .upload-icon { font-size:1.5rem; margin-bottom:.5rem }
  .drag-drop-zone .upload-text { font-size:.8125rem }
  .drag-drop-zone .upload-hint { font-size:.6875rem }
  .admin-stat-card { padding:.75rem; border-radius:10px }
  .admin-stat-card h3 { font-size:1rem }
  .admin-stat-card i { font-size:1rem }
  .admin-stat-card small { font-size:.6875rem }
  .filter-pills .btn { font-size:.6875rem; padding:.25rem .75rem }
  .admin-content .d-flex.align-items-center.gap-3 { flex-direction:column; align-items:flex-start !important }
  .widget-action { font-size:.6875rem }
  .sidebar-brand-sub { display:none }
}

/* 480px - 575px (small mobile) */
@media(max-width:575.98px) {
  .admin-topbar { padding:0 .375rem; gap:.25rem }
  .topbar-left { gap:.25rem }
  .topbar-breadcrumb .current { max-width:60px; font-size:.625rem }
  .topbar-breadcrumb a { font-size:.625rem }
  .topbar-center { display:none }
  .topbar-right { gap:.25rem }
  .topbar-btn { width:28px; height:28px; font-size:.75rem }
  .theme-toggle-btn { width:28px; height:28px; font-size:.75rem }
  .topbar-user { padding:.125rem .25rem .125rem .125rem }
  .topbar-user-avatar { width:24px; height:24px; font-size:.5625rem; border-radius:6px }
  .admin-main .row { --bs-gutter-x:.5rem }
  .admin-main .row.g-4 { --bs-gutter-y:.5rem; --bs-gutter-x:.5rem }
  .kpi-card { padding:.5rem; border-radius:10px }
  .kpi-value { font-size:.875rem }
  .kpi-label { font-size:.5625rem }
  .kpi-icon { width:24px; height:24px; font-size:.6875rem; border-radius:6px }
  .kpi-top { margin-bottom:.25rem }
  .chart-widget .widget-header { padding:.5rem .75rem; flex-wrap:wrap; gap:.25rem }
  .chart-widget .widget-body { padding:.625rem }
  .chart-placeholder { height:100px }
  .chart-bars { height:50px; gap:3px; padding:0 8px }
  .chart-bars .bar { width:10px }
  .admin-table-wrap { border-radius:10px }
  .admin-table thead th { padding:.25rem .375rem; font-size:.5rem }
  .admin-table tbody td { padding:.25rem .375rem; font-size:.625rem }
  .admin-form-card { padding:.75rem }
  .admin-form-card .form-card-title { font-size:.6875rem; margin-bottom:.5rem; padding-bottom:.375rem }
  .form-floating>.form-control, .form-floating>.form-select { min-height:2.5rem; padding:.75rem .5rem .25rem; font-size:.6875rem }
  .form-floating>label { font-size:.6875rem; padding:.4375rem .5rem }
  .admin-pagination { padding:.375rem .5rem }
  .pagination-info { font-size:.625rem }
  .pagination-links a, .pagination-links span { min-width:24px; height:24px; font-size:.625rem }
  .kpi-sparkline { display:none }
  .drag-drop-zone { padding:.75rem .5rem }
  .drag-drop-zone .upload-icon { font-size:1.25rem }
  .drag-drop-zone .upload-preview img { width:60px; height:60px }
  .admin-stat-card { padding:.5rem }
  .admin-stat-card h3 { font-size:.875rem }
  .admin-stat-card i { font-size:.875rem; margin-bottom:.25rem }
  .admin-stat-card small { font-size:.625rem }
  .row-actions a { width:24px; height:24px; font-size:.625rem }
  .btn { font-size:.8125rem; padding:.5rem 1rem }
  .btn-sm { font-size:.6875rem; padding:.3125rem .75rem }
}

/* Hero/Public page responsive overrides */
@media(max-width:991px){ .hero .container { padding-top:4rem } .hero-stats { gap:1.5rem 2rem } }
@media(max-width:575px){ .hero-stats { gap:1rem 1.5rem } .hero-stat h3 { font-size:1.5rem } }

/* ════════════════ DARK THEME ════════════════ */
[data-theme="dark"] {
  --bg: #0F172A;
  --bg-card: #1E293B;
  --text: #F1F5F9;
  --text-muted: #94A3B8;
  --text-light: #64748B;
  --border: #334155;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.5);
  --shadow-glow: 0 0 20px rgba(37,99,235,.25);
}
[data-theme="dark"] .admin-body { background:#0F172A }
[data-theme="dark"] .admin-topbar { background:rgba(30,41,59,.85); border-bottom-color:rgba(51,65,85,.8) }
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .chart-widget,
[data-theme="dark"] .admin-table-wrap,
[data-theme="dark"] .admin-form-card,
[data-theme="dark"] .admin-stat-card { background:#1E293B; border-color:#334155 }
[data-theme="dark"] .kpi-value,
[data-theme="dark"] .chart-widget .widget-header h6,
[data-theme="dark"] .admin-form-card .form-card-title { color:#F1F5F9 }
[data-theme="dark"] .kpi-label,
[data-theme="dark"] .chart-placeholder,
[data-theme="dark"] .admin-table thead th { color:#94A3B8 }
[data-theme="dark"] .admin-table thead th,
[data-theme="dark"] .admin-table tbody td { border-color:#334155 }
[data-theme="dark"] .admin-table tbody td { color:#CBD5E1 }
[data-theme="dark"] .admin-table tbody tr:hover { background:rgba(37,99,235,.06) }
[data-theme="dark"] .admin-table-wrap .table-search-input,
[data-theme="dark"] .topbar-search .form-control,
[data-theme="dark"] .admin-form-card .form-control { background:#0F172A; border-color:#334155; color:#F1F5F9 }
[data-theme="dark"] .admin-table-wrap .table-search-input:focus,
[data-theme="dark"] .admin-form-card .form-control:focus { background:#1E293B }
[data-theme="dark"] .sidebar-toggle-btn,
[data-theme="dark"] .topbar-btn { background:#0F172A; border-color:#334155; color:#94A3B8 }
[data-theme="dark"] .sidebar-toggle-btn:hover,
[data-theme="dark"] .topbar-btn:hover { background:#1E293B; color:#F1F5F9 }
[data-theme="dark"] .topbar-user:hover { background:rgba(255,255,255,.05) }
[data-theme="dark"] .topbar-user-name { color:#F1F5F9 }
[data-theme="dark"] .topbar-breadcrumb .current { color:#F1F5F9 }
[data-theme="dark"] .chart-widget .widget-header { border-color:#334155 }
[data-theme="dark"] .chart-placeholder { background:linear-gradient(180deg,#1E293B,#0F172A) }
[data-theme="dark"] .activity-timeline::before { background:#334155 }
[data-theme="dark"] .activity-text { color:#CBD5E1 }
[data-theme="dark"] .admin-form-card .form-label { color:#CBD5E1 }
[data-theme="dark"] .admin-form-card .form-select { background:#0F172A; border-color:#334155; color:#F1F5F9 }
.widget-action { font-size:.75rem; font-weight:600; color:var(--sec); text-decoration:none; transition:color .2s }
.widget-action:hover { color:var(--sec-dark); text-decoration:underline }

/* ════════════════ THEME TOGGLE ═══════════════ */
[data-theme="dark"] .theme-toggle-btn { background:#0F172A; border-color:#334155; color:#94A3B8 }
[data-theme="dark"] .theme-toggle-btn:hover { background:#1E293B; color:#F1F5F9 }

/* ════════════════ SPARKLINE ══════════════════ */
.kpi-sparkline { display:flex; align-items:flex-end; gap:2px; height:32px; margin-top:.5rem; opacity:.5 }
.kpi-sparkline .spk-bar { width:4px; border-radius:2px 2px 0 0; background:var(--sec); transition:height .4s ease }
.kpi-sparkline .spk-bar:nth-child(1) { height:20% }
.kpi-sparkline .spk-bar:nth-child(2) { height:45% }
.kpi-sparkline .spk-bar:nth-child(3) { height:30% }
.kpi-sparkline .spk-bar:nth-child(4) { height:65% }
.kpi-sparkline .spk-bar:nth-child(5) { height:40% }
.kpi-sparkline .spk-bar:nth-child(6) { height:75% }
.kpi-sparkline .spk-bar:nth-child(7) { height:50% }
.kpi-sparkline .spk-bar:nth-child(8) { height:85% }
.kpi-sparkline .spk-bar:nth-child(9) { height:55% }
.kpi-sparkline .spk-bar:nth-child(10) { height:70% }
.kpi-icon-blue .kpi-sparkline .spk-bar { background:#2563EB }
.kpi-icon-green .kpi-sparkline .spk-bar { background:#10B981 }
.kpi-icon-amber .kpi-sparkline .spk-bar { background:#F59E0B }
.kpi-icon-red .kpi-sparkline .spk-bar { background:#EF4444 }
.kpi-icon-purple .kpi-sparkline .spk-bar { background:#7C3AED }
.kpi-icon-cyan .kpi-sparkline .spk-bar { background:#0891B2 }
.kpi-icon-dark .kpi-sparkline .spk-bar { background:#0F172A }

/* ════════════════ SKELETON LOADING ═══════════ */
.skeleton { background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%); background-size:200% 100%; animation:skeletonShimmer 1.5s ease-in-out infinite; border-radius:6px }
[data-theme="dark"] .skeleton { background:linear-gradient(90deg,#1E293B 25%,#334155 50%,#1E293B 75%); background-size:200% 100% }
.skeleton-text { height:14px; width:100%; margin-bottom:.5rem }
.skeleton-text-sm { height:10px; width:60% }
.skeleton-heading { height:22px; width:70%; margin-bottom:1rem }
.skeleton-avatar { width:40px; height:40px; border-radius:50% }
.skeleton-thumb { width:100%; height:120px; border-radius:10px }
.skeleton-chart { height:160px; border-radius:12px; }
@keyframes skeletonShimmer { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } }

/* ════════════════ LOADING BUTTON ═════════════ */
.btn-loading { position:relative; pointer-events:none; color:transparent !important }
.btn-loading::after { content:''; position:absolute; inset:0; margin:auto; width:20px; height:20px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:btnSpin .6s linear infinite }
[data-theme="dark"] .btn-loading::after { border-color:rgba(255,255,255,.2); border-top-color:#fff }
@keyframes btnSpin { to { transform:rotate(360deg) } }

/* ════════════════ DRAG & DROP UPLOAD ═════════ */
.drag-drop-zone { position:relative; border:2px dashed var(--border); border-radius:var(--radius-lg); padding:2.5rem 1.5rem; text-align:center; cursor:pointer; transition:all .3s ease; background:var(--bg) }
.drag-drop-zone:hover,
.drag-drop-zone.dragover { border-color:var(--sec); background:rgba(37,99,235,.04) }
.drag-drop-zone .upload-icon { font-size:2.5rem; color:var(--text-light); margin-bottom:.75rem; display:block; transition:all .3s }
.drag-drop-zone:hover .upload-icon,
.drag-drop-zone.dragover .upload-icon { color:var(--sec); transform:translateY(-4px) }
.drag-drop-zone .upload-text { font-weight:600; color:var(--text); font-size:.9375rem }
.drag-drop-zone .upload-hint { font-size:.8125rem; color:var(--text-muted); margin-top:.25rem }
.drag-drop-zone .upload-preview { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem; justify-content:center }
.drag-drop-zone .upload-preview img { width:80px; height:80px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border) }
.drag-drop-zone .upload-preview .file-info { font-size:.75rem; color:var(--text-muted); padding:.25rem 0 }
.drag-drop-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer }

/* ════════════════ PAGINATION ═════════════════ */
.admin-pagination { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-top:1px solid var(--border); flex-wrap:wrap; gap:.75rem }
.admin-pagination .pagination-info { font-size:.8125rem; color:var(--text-muted) }
.admin-pagination .pagination-info strong { color:var(--text) }
.pagination-links { display:flex; gap:2px }
.pagination-links a,
.pagination-links span { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 .5rem; border-radius:8px; font-size:.8125rem; font-weight:500; text-decoration:none; transition:all .2s; color:var(--text); border:1px solid transparent }
.pagination-links a:hover { background:var(--bg); border-color:var(--border); color:var(--sec) }
.pagination-links .active { background:var(--sec); color:#fff; border-color:var(--sec) }
.pagination-links .disabled { opacity:.4; pointer-events:none }
[data-theme="dark"] .pagination-links a { color:#CBD5E1 }
[data-theme="dark"] .pagination-links a:hover { background:rgba(255,255,255,.05); color:var(--sec) }

[data-theme="dark"] .sidebar-backdrop { background:rgba(0,0,0,.7) }