@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── CSS Variables: Dark mode (default) ─────────────────────────────────────── */
:root {
  --bg:       #0d0d0d;
  --bg2:      #161616;
  --bg3:      #1f1f1f;
  --bg4:      #2a2a2a;
  --border:   #2e2e2e;
  --border2:  #3a3a3a;
  --text:     #e8e8e8;
  --text2:    #a0a0a0;
  --text3:    #666;
  --accent:   #3b82f6;
  --accent2:  #60a5fa;
  --accent-bg: rgba(59,130,246,.12);
  --success:  #22c55e;
  --danger:   #ef4444;
  --warning:  #f59e0b;
  --info:     #06b6d4;
  --verified: #f59e0b;
  --radius:   8px;
  --radius-lg:12px;
  --shadow:   0 2px 8px rgba(0,0,0,.4);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);
  --transition:.15s ease;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --nav-h: 56px;
  /* Alias variables used across templates */
  --bg-card:      var(--bg2);
  --bg-hover:     var(--bg3);
  --text-muted:   var(--text2);
  --surface:      var(--bg2);
  --surface-2:    var(--bg3);
  --surface-3:    var(--bg4);
  --accent-subtle: var(--accent-bg);
}

/* ── Color themes ────────────────────────────────────────────────────────────── */
[data-color="purple"] { --accent:#a855f7; --accent2:#c084fc; --accent-bg:rgba(168,85,247,.12); }
[data-color="green"]  { --accent:#22c55e; --accent2:#4ade80; --accent-bg:rgba(34,197,94,.12); }
[data-color="orange"] { --accent:#f97316; --accent2:#fb923c; --accent-bg:rgba(249,115,22,.12); }
[data-color="red"]    { --accent:#ef4444; --accent2:#f87171; --accent-bg:rgba(239,68,68,.12); }
[data-color="teal"]   { --accent:#14b8a6; --accent2:#2dd4bf; --accent-bg:rgba(20,184,166,.12); }
[data-color="pink"]   { --accent:#ec4899; --accent2:#f472b6; --accent-bg:rgba(236,72,153,.12); }
[data-color="indigo"] { --accent:#6366f1; --accent2:#818cf8; --accent-bg:rgba(99,102,241,.12); }
[data-color="amber"]  { --accent:#f59e0b; --accent2:#fbbf24; --accent-bg:rgba(245,158,11,.12); }
[data-color="lime"]   { --accent:#84cc16; --accent2:#a3e635; --accent-bg:rgba(132,204,22,.12); }
[data-color="rose"]   { --accent:#f43f5e; --accent2:#fb7185; --accent-bg:rgba(244,63,94,.12); }
[data-color="cyan"]   { --accent:#06b6d4; --accent2:#22d3ee; --accent-bg:rgba(6,182,212,.12); }

/* ── Light mode ──────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:       #ffffff;
  --bg2:      #f5f5f5;
  --bg3:      #ebebeb;
  --bg4:      #e0e0e0;
  --border:   #d4d4d4;
  --border2:  #bfbfbf;
  --text:     #111111;
  --text2:    #555555;
  --text3:    #999;
  --shadow:   0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.12);
}

/* ── Midnight mode (dark blue-black) ────────────────────────────────────────── */
[data-theme="midnight"] {
  --bg:       #050714;
  --bg2:      #0d1124;
  --bg3:      #141930;
  --bg4:      #1c2340;
  --border:   #252d4a;
  --border2:  #2e3a5e;
  --text:     #e2e8f0;
  --text2:    #8892b0;
  --text3:    #4a5580;
  --shadow:   0 2px 8px rgba(0,0,0,.6);
  --shadow-lg:0 8px 32px rgba(0,0,0,.7);
}

/* ── Dim mode (softer dark) ─────────────────────────────────────────────────── */
[data-theme="dim"] {
  --bg:       #1c1c1c;
  --bg2:      #262626;
  --bg3:      #303030;
  --bg4:      #3a3a3a;
  --border:   #404040;
  --border2:  #4e4e4e;
  --text:     #d8d8d8;
  --text2:    #909090;
  --text3:    #606060;
  --shadow:   0 2px 8px rgba(0,0,0,.4);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);
}

/* ── Sepia mode (warm cream) ────────────────────────────────────────────────── */
[data-theme="sepia"] {
  --bg:       #fdf6e3;
  --bg2:      #f4edd4;
  --bg3:      #ece4cb;
  --bg4:      #e3dbc2;
  --border:   #d5ccb3;
  --border2:  #c7be9e;
  --text:     #3a3226;
  --text2:    #6b5e47;
  --text3:    #9a8d76;
  --shadow:   0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.12);
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
  transition:background var(--transition),color var(--transition);
}
a{color:var(--accent2);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--text)}
img{max-width:100%}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}

/* ── Typography ──────────────────────────────────────────────────────────────── */
h1{font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
h2{font-size:1.4rem;font-weight:600;letter-spacing:-.01em}
h3{font-size:1.1rem;font-weight:600}
h4{font-size:.95rem;font-weight:600}
small{font-size:.8rem}
code{font-family:monospace;background:var(--bg3);padding:2px 6px;border-radius:4px;font-size:.85em}

/* ── Navbar ──────────────────────────────────────────────────────────────────── */
.navbar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:400;
  height:var(--nav-h);
}
.nav-inner{
  max-width:1200px;margin:0 auto;height:100%;
  display:flex;align-items:center;gap:.5rem;
  padding:0 1.25rem;
}
.nav-logo{
  font-weight:700;font-size:1.1rem;
  color:var(--text);white-space:nowrap;
  letter-spacing:-.02em;
  display:flex;align-items:center;gap:.4rem;
  flex-shrink:0;
}
.nav-logo span{color:var(--accent)}
.nav-links{
  display:flex;list-style:none;gap:2px;
  margin-left:.5rem;flex:1;
}
.nav-links a{
  color:var(--text2);padding:.4rem .75rem;
  border-radius:var(--radius);
  font-size:.875rem;font-weight:500;
  transition:all var(--transition);
  white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{
  color:var(--text);background:var(--bg3);
}
.nav-search{
  flex:0 1 240px;margin-left:auto;
}
.nav-search input{
  width:100%;padding:.4rem .8rem;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text);border-radius:var(--radius);
  font-size:.875rem;
  transition:border-color var(--transition);
}
.nav-search input:focus{outline:none;border-color:var(--accent)}
.nav-search input::placeholder{color:var(--text3)}
.nav-auth{display:flex;align-items:center;gap:.4rem;margin-left:.5rem;flex-shrink:0}
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  background:none;border:none;padding:.4rem;
  border-radius:var(--radius);transition:background var(--transition);
}
.hamburger:hover{background:var(--bg3)}
.hamburger span{
  display:block;width:20px;height:2px;
  background:var(--text);border-radius:2px;
  transition:transform .2s,opacity .2s;
}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;border-radius:var(--radius);
  font-size:.875rem;font-weight:500;
  border:1px solid transparent;
  transition:all var(--transition);cursor:pointer;
  white-space:nowrap;text-decoration:none;
  min-height:38px;
}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-sm{padding:.35rem .75rem;font-size:.82rem;min-height:32px;}
.btn-lg{padding:.65rem 1.4rem;font-size:.95rem}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border2)}
.btn-outline:hover{background:var(--bg3);border-color:var(--text3);color:var(--text)}
.btn-ghost{background:transparent;color:var(--text2);border-color:transparent}
.btn-ghost:hover{background:var(--bg3);color:var(--text)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{filter:brightness(1.1)}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-icon{padding:.4rem;min-width:32px;justify-content:center}

/* ── Forms ───────────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:1.1rem}
.form-group label{display:block;font-size:.85rem;font-weight:500;
  color:var(--text2);margin-bottom:.4rem}
.form-control{
  width:100%;padding:.65rem .9rem;
  background:var(--bg2);border:1px solid var(--border);
  color:var(--text);border-radius:var(--radius);font-size:.925rem;
  transition:border-color var(--transition), box-shadow var(--transition);
  min-height:42px;
}
.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.form-control::placeholder{color:var(--text3)}
textarea.form-control{resize:vertical;min-height:80px}
select.form-control{cursor:pointer}
.form-hint{font-size:.78rem;color:var(--text3);margin-top:.3rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.input-group{display:flex;gap:.5rem}
.input-group .form-control{flex:1}

/* ── Badges ──────────────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.15rem .5rem;border-radius:20px;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
}
.badge-accent{background:var(--accent-bg);color:var(--accent2)}
.badge-success{background:rgba(34,197,94,.12);color:var(--success)}
.badge-danger{background:rgba(239,68,68,.12);color:var(--danger)}
.badge-warning{background:rgba(245,158,11,.12);color:var(--warning)}
.badge-verified{background:rgba(245,158,11,.15);color:var(--verified)}
.badge-gray{background:var(--bg4);color:var(--text2)}

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.25rem;
  transition:border-color var(--transition);
}
.card:hover{border-color:var(--border2)}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;
  gap:.75rem;margin-bottom:.75rem}
.card-title{font-weight:600;font-size:.95rem}
.card-meta{font-size:.78rem;color:var(--text2)}

/* ── Flashes ─────────────────────────────────────────────────────────────────── */
.flash-container{max-width:1200px;margin:.75rem auto 0;padding:0 1.25rem}
.flash{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.7rem 1rem;border-radius:var(--radius);
  font-size:.875rem;margin-bottom:.5rem;
}
.flash-success{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:var(--success)}
.flash-danger {background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:var(--danger)}
.flash-warning{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);color:var(--warning)}
.flash-info   {background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.3);color:var(--info)}
.flash-close{background:none;border:none;color:inherit;opacity:.7;font-size:1.1rem;padding:0 .2rem;cursor:pointer}
.flash-close:hover{opacity:1}

/* ── Main layout ─────────────────────────────────────────────────────────────── */
.main-content{flex:1;padding:1.5rem 0}
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.page-header{margin-bottom:1.5rem}
.page-header h1{font-size:1.5rem;font-weight:700}
.page-header p{color:var(--text2);margin-top:.3rem;font-size:.9rem}

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.hero{
  padding:4rem 1.25rem 3rem;text-align:center;
  border-bottom:1px solid var(--border);
  max-width:1200px;margin:0 auto;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--accent-bg);color:var(--accent2);
  padding:.3rem .8rem;border-radius:20px;font-size:.8rem;
  font-weight:600;margin-bottom:1.25rem;letter-spacing:.02em;
}
.hero h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.75rem}
.hero h1 span{color:var(--accent)}
.hero p{font-size:1.05rem;color:var(--text2);max-width:520px;margin:0 auto 1.75rem}
.hero-btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ── Stats row ───────────────────────────────────────────────────────────────── */
.stats-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:var(--border);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.stat-card{
  background:var(--bg2);padding:1.25rem;text-align:center;
}
.stat-num{display:block;font-size:1.75rem;font-weight:700;color:var(--accent2);line-height:1}
.stat-lbl{display:block;font-size:.8rem;color:var(--text2);margin-top:.3rem}

/* ── Program grid ────────────────────────────────────────────────────────────── */
.programs-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1rem;padding:1.5rem 1.25rem;max-width:1200px;margin:0 auto;
}
.program-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.5rem;
  transition:all var(--transition);cursor:pointer;text-decoration:none;color:inherit;
  display:block;
}
.program-card:hover{border-color:var(--accent);background:var(--bg3);color:inherit;transform:translateY(-1px)}
.program-icon{font-size:2.5rem;margin-bottom:.75rem;display:block}
.program-card h3{font-size:1.1rem;margin-bottom:.4rem}
.program-card p{color:var(--text2);font-size:.875rem;line-height:1.5}
.program-types-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}

/* ── Program type section ────────────────────────────────────────────────────── */
.type-section{margin-bottom:1.5rem}
.type-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:.5rem;
}
.type-header h3{font-size:.95rem;font-weight:600}
.year-tabs{display:flex;gap:.4rem;flex-wrap:wrap}
.year-tab{
  padding:.35rem .8rem;border-radius:var(--radius);
  background:var(--bg3);color:var(--text2);
  font-size:.8rem;font-weight:500;border:1px solid var(--border);
  transition:all var(--transition);text-decoration:none;
}
.year-tab:hover,.year-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── Subject grid ────────────────────────────────────────────────────────────── */
.subject-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;
}
.subject-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:1rem;
  transition:all var(--transition);text-decoration:none;color:inherit;display:block;
}
.subject-card:hover{border-color:var(--accent);background:var(--bg3);color:inherit}
.subject-card h4{font-size:.9rem;margin-bottom:.4rem}
.subject-counts{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── Content tabs ────────────────────────────────────────────────────────────── */
.content-tabs{
  display:flex;border-bottom:1px solid var(--border);
  margin-bottom:1.25rem;gap:0;
}
.tab-link{
  padding:.65rem 1.1rem;font-size:.875rem;font-weight:500;
  color:var(--text2);border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:all var(--transition);text-decoration:none;
}
.tab-link:hover{color:var(--text)}
.tab-link.active{color:var(--accent2);border-bottom-color:var(--accent)}

/* ── File list ───────────────────────────────────────────────────────────────── */
.file-list{display:flex;flex-direction:column;gap:.5rem}
.file-item{
  display:flex;align-items:center;gap:1rem;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:.75rem 1rem;
  transition:border-color var(--transition);
}
.file-item:hover{border-color:var(--border2)}
.file-icon{font-size:1.4rem;flex-shrink:0;width:32px;text-align:center}
.file-info{flex:1;min-width:0}
.file-name{
  font-weight:500;font-size:.9rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--text);
}
.file-meta{font-size:.75rem;color:var(--text2);margin-top:.15rem;display:flex;gap:.6rem;flex-wrap:wrap}
.file-actions{display:flex;gap:.4rem;flex-shrink:0;align-items:center}

/* ── Video grid ──────────────────────────────────────────────────────────────── */
.video-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;
}
.video-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:all var(--transition);text-decoration:none;color:inherit;
}
.video-card:hover{border-color:var(--border2);transform:translateY(-1px);color:inherit}
.video-thumb{
  aspect-ratio:16/9;background:var(--bg3);
  display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;overflow:hidden;position:relative;
}
.video-thumb img{width:100%;height:100%;object-fit:cover}
.video-thumb .play-icon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);font-size:2.5rem;
  opacity:0;transition:opacity var(--transition);
}
.video-card:hover .play-icon{opacity:1}
.video-card-body{padding:.85rem}
.video-card-title{font-weight:600;font-size:.9rem;margin-bottom:.3rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-card-meta{font-size:.75rem;color:var(--text2)}

/* ── Flashcard deck grid ─────────────────────────────────────────────────────── */
.deck-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;
}
.deck-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.1rem;
  transition:all var(--transition);text-decoration:none;color:inherit;display:block;
}
.deck-card:hover{border-color:var(--accent);color:inherit;transform:translateY(-1px)}
.deck-card-icon{font-size:1.6rem;margin-bottom:.5rem}
.deck-card h4{font-size:.9rem;margin-bottom:.3rem}
.deck-card p{font-size:.78rem;color:var(--text2);margin-bottom:.5rem}
.deck-card-count{font-size:.75rem;color:var(--accent2);font-weight:500}

/* ── Flashcard study ─────────────────────────────────────────────────────────── */
.study-container{max-width:700px;margin:0 auto;padding:1.5rem 1.25rem}
.card-display{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  min-height:260px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:2rem;
  perspective:1000px;
  position:relative;
}
.card-display .card-face{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:2rem;font-size:1.15rem;font-weight:500;
  backface-visibility:hidden;
  transition:transform .5s;
  border-radius:var(--radius-lg);
  background:var(--bg2);
}
.card-display .card-back{transform:rotateY(180deg)}
.card-display.flipped .card-front{transform:rotateY(-180deg)}
.card-display.flipped .card-back{transform:rotateY(0deg)}
.study-controls{display:flex;gap:.75rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.study-progress{
  display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;
}
.progress-bar{
  flex:1;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;
}
.progress-fill{height:100%;background:var(--accent);transition:width .3s}
.card-counter{font-size:.85rem;color:var(--text2);white-space:nowrap}

/* ── Video player ────────────────────────────────────────────────────────────── */
.video-player-container{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1rem;
}
.video-player-container video,.video-player-container iframe{
  width:100%;aspect-ratio:16/9;display:block;
}

/* ── File preview ────────────────────────────────────────────────────────────── */
.preview-container{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  margin-bottom:1rem;
}
.preview-pdf{width:100%;min-height:600px;display:block;border:none}
.preview-image{max-height:600px;margin:0 auto;display:block;padding:1rem}
.preview-text{
  padding:1.25rem;font-family:monospace;font-size:.85rem;
  white-space:pre-wrap;word-break:break-all;max-height:600px;
  overflow-y:auto;color:var(--text);
}

/* ── Like bar ────────────────────────────────────────────────────────────────── */
.like-bar{display:flex;align-items:center;gap:.5rem}
.like-btn{
  display:flex;align-items:center;gap:.35rem;
  padding:.3rem .7rem;border-radius:var(--radius);
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text2);font-size:.85rem;cursor:pointer;
  transition:all var(--transition);
}
.like-btn:hover{border-color:var(--accent);color:var(--accent)}
.like-btn.active-like{background:rgba(34,197,94,.15);border-color:var(--success);color:var(--success)}
.like-btn.active-dislike{background:rgba(239,68,68,.15);border-color:var(--danger);color:var(--danger)}

/* ── Comments ────────────────────────────────────────────────────────────────── */
.comments-section{margin-top:1.5rem}
.comments-section h3{margin-bottom:1rem;font-size:1rem}
.comment-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem}
.comment-item{
  display:flex;gap:.75rem;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:.8rem 1rem;
}
.comment-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--accent-bg);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:.8rem;font-weight:600;color:var(--accent2);
}
.comment-body{flex:1;min-width:0}
.comment-header{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.25rem;flex-wrap:wrap}
.comment-username{font-weight:600;font-size:.85rem}
.comment-time{font-size:.75rem;color:var(--text3)}
.comment-text{font-size:.875rem;color:var(--text2);word-break:break-word}
.comment-form{display:flex;gap:.5rem}
.comment-form textarea{flex:1;min-height:60px;resize:none}

/* ── Profile ─────────────────────────────────────────────────────────────────── */
.profile-header{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.5rem;
  display:flex;align-items:center;gap:1.25rem;
  margin-bottom:1.25rem;flex-wrap:wrap;
}
.profile-avatar{
  width:72px;height:72px;border-radius:50%;
  background:var(--accent-bg);
  display:flex;align-items:center;justify-content:center;
  font-size:1.75rem;font-weight:700;color:var(--accent2);
  flex-shrink:0;border:2px solid var(--border);
}
.profile-info{flex:1;min-width:0}
.profile-name{font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.profile-stats{display:flex;gap:1.25rem;margin-top:.5rem;flex-wrap:wrap}
.profile-stat{font-size:.85rem;color:var(--text2)}
.profile-stat strong{color:var(--text);font-weight:600}
.profile-meta{font-size:.8rem;color:var(--text3);margin-top:.3rem}

/* ── Upload form ─────────────────────────────────────────────────────────────── */
.upload-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem;flex-wrap:wrap}
.upload-tab{
  padding:.45rem 1rem;border-radius:var(--radius);
  background:var(--bg3);color:var(--text2);border:1px solid var(--border);
  font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition);
}
.upload-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.upload-pane{display:none}
.upload-pane.active{display:block}
.drop-zone{
  border:2px dashed var(--border2);border-radius:var(--radius-lg);
  padding:2.5rem;text-align:center;cursor:pointer;
  transition:all var(--transition);background:var(--bg2);
}
.drop-zone:hover,.drop-zone.dragover{
  border-color:var(--accent);background:var(--accent-bg);
}
.drop-zone-icon{font-size:2rem;margin-bottom:.75rem;display:block}
.drop-zone p{color:var(--text2);font-size:.9rem}
.drop-zone small{color:var(--text3);font-size:.78rem}
.file-queue{margin-top:.75rem;display:flex;flex-direction:column;gap:.35rem}
.file-queue-item{
  display:flex;align-items:center;gap:.75rem;
  background:var(--bg3);border-radius:var(--radius);padding:.5rem .75rem;
  font-size:.85rem;
}
.flashcard-builder{display:flex;flex-direction:column;gap:.5rem}
.flashcard-row{
  display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;align-items:center;
}

/* ── Admin ───────────────────────────────────────────────────────────────────── */
.admin-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;
  margin-bottom:1.5rem;
}
.stat-tile{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.25rem;
  text-align:center;
}
.stat-tile .num{font-size:2rem;font-weight:700;color:var(--accent2)}
.stat-tile .lbl{font-size:.8rem;color:var(--text2);margin-top:.2rem}
.data-table{width:100%;border-collapse:collapse;font-size:.875rem}
.data-table th{
  padding:.65rem 1rem;text-align:left;
  background:var(--bg2);border-bottom:1px solid var(--border);
  font-weight:600;font-size:.8rem;color:var(--text2);white-space:nowrap;
}
.data-table td{
  padding:.65rem 1rem;border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.data-table tr:hover td{background:var(--bg2)}
.data-table tr:last-child td{border-bottom:none}
.table-responsive{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
.admin-nav{
  display:flex;gap:.5rem;margin-bottom:1.5rem;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:.5rem;flex-wrap:wrap;
}
.admin-nav a{
  padding:.4rem .8rem;border-radius:var(--radius);
  font-size:.85rem;font-weight:500;color:var(--text2);
  transition:all var(--transition);
}
.admin-nav a:hover,.admin-nav a.active{background:var(--bg3);color:var(--text)}

/* ── SOV (kept for legacy compat – real styles are below at line ~1085) ──────── */
.sov-author{font-size:.78rem;color:var(--text3);margin-top:.3rem}

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.footer{
  background:var(--bg2);border-top:1px solid var(--border);
  padding:1.25rem;text-align:center;
}
.footer-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.5rem;font-size:.8rem;color:var(--text2);
}
.footer-links{display:flex;gap:1rem}
.footer-links a{color:var(--text2);transition:color var(--transition)}
.footer-links a:hover{color:var(--text)}

/* ── Google Ad ───────────────────────────────────────────────────────────────── */
.ad-container{
  max-width:1200px;margin:1rem auto;padding:0 1.25rem;
}

/* ── Misc utilities ──────────────────────────────────────────────────────────── */
.divider{height:1px;background:var(--border);margin:1.25rem 0}
.text-muted{color:var(--text2)}
.text-sm{font-size:.85rem}
.text-xs{font-size:.75rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.flex{display:flex}.items-center{align-items:center}
.gap-1{gap:.5rem}.gap-2{gap:1rem}
.justify-between{justify-content:space-between}
.flex-wrap{flex-wrap:wrap}
.ml-auto{margin-left:auto}
.w-full{width:100%}
.empty-state{
  text-align:center;padding:3rem 1.25rem;
  color:var(--text2);
}
.empty-state .empty-icon{font-size:2.5rem;margin-bottom:.75rem;display:block}
.empty-state p{font-size:.9rem}
.breadcrumb{
  display:flex;align-items:center;gap:.4rem;
  font-size:.8rem;color:var(--text2);margin-bottom:1rem;
  flex-wrap:wrap;
}
.breadcrumb a{color:var(--text2);transition:color var(--transition)}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb span{color:var(--text3)}
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1rem;flex-wrap:wrap;gap:.5rem;
}
.search-bar{display:flex;gap:.5rem;margin-bottom:1rem}
.search-bar .form-control{flex:1}
.sort-bar{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.sort-btn{
  padding:.3rem .7rem;border-radius:var(--radius);
  background:var(--bg3);color:var(--text2);border:1px solid var(--border);
  font-size:.78rem;text-decoration:none;transition:all var(--transition);
}
.sort-btn:hover,.sort-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);
  z-index:500;align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.5rem;
  max-width:480px;width:100%;max-height:90vh;overflow-y:auto;
}
.modal-header{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.25rem}
.modal-close{background:none;border:none;color:var(--text2);font-size:1.3rem;cursor:pointer;padding:.2rem}

/* ── Scan status colors ──────────────────────────────────────────────────────── */
.scan-clean{color:var(--success)}
.scan-flagged{color:var(--danger)}
.scan-pending{color:var(--warning)}
.scan-approved{color:var(--info)}

/* ── Mobile Drawer ───────────────────────────────────────────────────────────── */
.mobile-drawer{
  position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
  background:var(--bg2);z-index:300;
  transform:translateY(-105%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,16px);
}
.mobile-drawer.open{transform:translateY(0)}
.mobile-drawer-inner{padding:1rem 1.1rem 2rem;display:flex;flex-direction:column;gap:1rem}

.drawer-backdrop{
  display:none;position:fixed;
  top:var(--nav-h);left:0;right:0;bottom:0;
  z-index:295;
  background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .25s;
}
.drawer-backdrop.open{display:block;opacity:1}

.mobile-search{display:flex;gap:.5rem}
.mobile-search input{flex:1;padding:.6rem 1rem;border-radius:var(--radius);
  background:var(--bg3);border:1px solid var(--border);color:var(--text);font-size:.95rem}
.mobile-search input:focus{outline:none;border-color:var(--accent)}

.mobile-nav{display:flex;flex-direction:column;gap:2px}
.mobile-nav-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.85rem 1rem;border-radius:var(--radius);
  color:var(--text);font-size:.95rem;font-weight:500;
  text-decoration:none;transition:background var(--transition);
}
.mobile-nav-item:hover,.mobile-nav-item.active{background:var(--bg3);color:var(--accent2)}
.mobile-nav-item.active{font-weight:600}
.mobile-nav-admin{color:var(--warning)}
.mobile-nav-danger{color:var(--danger)}
.mobile-nav-danger:hover{background:rgba(239,68,68,.08)}

.mobile-user-section{
  border-top:1px solid var(--border);padding-top:1rem;display:flex;flex-direction:column;gap:.75rem
}
.mobile-user-info{
  display:flex;align-items:center;gap:.85rem;
  padding:.75rem .85rem;background:var(--bg3);border-radius:var(--radius-lg);
}
.mobile-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:1.1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mobile-username{font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:.4rem}
.mobile-program{font-size:.78rem;color:var(--text2);margin-top:.15rem}
.mobile-user-links{display:flex;flex-direction:column;gap:2px}

.mobile-auth-btns{
  display:flex;flex-direction:column;gap:.6rem;
  padding-top:.5rem;border-top:1px solid var(--border);
}
.btn-full{width:100%;justify-content:center}

/* ── Ad placements ───────────────────────────────────────────────────────────── */
.ad-strip{
  max-width:100%;overflow:hidden;
  padding:.75rem 1.25rem;background:var(--bg2);
  border-top:1px solid var(--border);
}
.ad-inline{
  margin:1.5rem 0;padding:.5rem 0;
  border-radius:var(--radius);overflow:hidden;
}
/* Hide empty ad containers so they don't take space */
.ad-strip:empty,.ad-inline:empty{display:none}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .hamburger{display:flex}
  .nav-links,.nav-auth,.nav-search{display:none!important}

  h1{font-size:1.4rem}
  h2{font-size:1.2rem}
  .hero{padding:2rem 1rem 1.5rem}
  .hero p{font-size:.875rem}
  .page-header{padding:1rem}
  .main-content{padding:0}

  .form-row{grid-template-columns:1fr}
  .file-item{flex-wrap:wrap;gap:.5rem;padding:.75rem}
  .file-actions{width:100%;justify-content:flex-end;margin-top:.25rem}
  .file-ext-badge{font-size:.65rem;padding:.2rem .4rem}

  .profile-header{flex-direction:column;text-align:center}
  .profile-stats{justify-content:center}
  .profile-layout{grid-template-columns:1fr;gap:1rem}
  .profile-sidebar{padding:1.25rem}

  .settings-layout{grid-template-columns:1fr}
  .settings-nav{display:flex;overflow-x:auto;border-radius:10px;white-space:nowrap}
  .settings-nav-link{border-bottom:none;border-right:1px solid var(--border);padding:.7rem 1rem}

  .flashcard-row{grid-template-columns:1fr 1fr auto}
  .admin-grid{grid-template-columns:repeat(2,1fr)}
  .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .data-table th,.data-table td{padding:.5rem .6rem;font-size:.78rem;white-space:nowrap}

  .like-bar{gap:.3rem}
  .like-btn{padding:.3rem .6rem;font-size:.8rem}
  
  .card{padding:.85rem}
  .breadcrumb{font-size:.78rem;flex-wrap:wrap;gap:.2rem}
  .content-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;white-space:nowrap}
  .tab-btn{flex-shrink:0;padding:.5rem .85rem;font-size:.82rem}
  .sort-bar{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;gap:.3rem}
  .sort-btn{flex-shrink:0;font-size:.78rem;padding:.3rem .6rem}
  
  .comment-form textarea{font-size:.9rem}
  .comment-item{gap:.6rem}
  
  .footer-inner{flex-direction:column;gap:.5rem;text-align:center;font-size:.82rem}
}

@media(max-width:480px){
  :root{--nav-h:52px}
  .nav-logo{font-size:1rem}
  
  .programs-grid{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr}
  .deck-grid{grid-template-columns:1fr 1fr}
  .subject-grid{grid-template-columns:1fr 1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{justify-content:center}
  
  .card-display{min-height:190px}
  .flashcard-row{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .admin-grid{grid-template-columns:1fr 1fr}
  
  .file-item{padding:.6rem}
  .file-name{font-size:.85rem}
  .file-meta{font-size:.72rem;flex-wrap:wrap;gap:.25rem}
  
  .modal-box{margin:1rem;padding:1.25rem}
  .like-bar{gap:.2rem}
  .btn-sm{padding:.25rem .55rem;font-size:.75rem}
  
  .auth-box{padding:1.5rem 1.1rem}
  .profile-stats{grid-template-columns:1fr 1fr}
  .stat-num{font-size:1.1rem}
}

/* Touch targets – minimum 44×44 px on mobile */
@media(hover:none){
  .btn,.mobile-nav-item,.nav-links a,.like-btn{min-height:44px}
  .mobile-nav-item{padding:.9rem 1rem}
  select.form-control,input.form-control{font-size:16px} /* prevents iOS zoom */
}

/* ── Additional Styles ─────────────────────────────────────────────── */

/* Auth */
.auth-container { display:flex; justify-content:center; align-items:center; min-height:70vh; padding:2rem 1rem; }
.auth-box { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:2.5rem; width:100%; max-width:420px; }
.auth-box.wide { max-width:560px; }
.auth-logo { font-size:2rem; font-weight:900; color:var(--accent); text-align:center; margin-bottom:0.5rem; letter-spacing:-1px; }
.auth-note { background:rgba(var(--accent-rgb),0.1); border-left:3px solid var(--accent); padding:0.75rem 1rem; border-radius:0 6px 6px 0; font-size:0.9rem; margin-bottom:1.5rem; }
.auth-links { text-align:center; margin-top:1.5rem; font-size:0.9rem; color:var(--text-muted); }
.auth-links a, .auth-links .btn-link { color:var(--accent); text-decoration:none; }
.code-input { font-size:1.8rem; letter-spacing:0.5rem; text-align:center; font-weight:700; }
.checkbox-label { display:flex; align-items:center; gap:0.5rem; cursor:pointer; }

/* Profile layout */
.profile-layout { display:grid; grid-template-columns:280px 1fr; gap:2rem; align-items:start; }
.profile-sidebar { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:2rem; text-align:center; }
.profile-avatar-lg { width:90px; height:90px; border-radius:50%; background:var(--accent); color:#fff; font-size:2.2rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.profile-username { font-size:1.25rem; font-weight:700; margin-bottom:0.25rem; }
.profile-program { color:var(--text-muted); font-size:0.88rem; margin-bottom:0.25rem; }
.profile-bio { font-size:.88rem; opacity:.8; margin:.5rem 0; text-align:center; line-height:1.5; color:var(--text2); }
.profile-joined { color:var(--text-muted); font-size:0.82rem; margin-bottom:1rem; }
.profile-stats { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin:1rem 0; }
.stat-box { background:var(--bg-hover); border-radius:8px; padding:0.65rem 0.5rem; }
.stat-num { display:block; font-size:1.3rem; font-weight:700; color:var(--accent); }
.stat-label { font-size:0.72rem; color:var(--text-muted); }
.admin-badge { background:#e74c3c; color:#fff; font-size:0.7rem; padding:2px 6px; border-radius:4px; margin-left:4px; }
/* File description line */
.file-description { font-size:.8rem; color:var(--text2); margin:.15rem 0 .1rem; line-height:1.4; }
/* Meta link */
.meta-link { color:var(--accent2); text-decoration:none; }
.meta-link:hover { text-decoration:underline; }
/* Tab count badge */
.tab-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; background:var(--bg-hover); border-radius:9px; font-size:.7rem; font-weight:600; margin-left:3px; }
.tab-btn.active .tab-count { background:rgba(var(--accent-rgb),.18); color:var(--accent); }
/* Deck grid improvements */
.deck-title { font-size:.95rem; font-weight:600; margin-bottom:.2rem; }
.deck-meta { font-size:.8rem; color:var(--text2); }
.deck-subject { font-size:.75rem; color:var(--accent2); margin-top:.2rem; }
/* File-ext-badge border */
.file-ext-badge { border:1px solid var(--border); }
@media(max-width:768px){ .profile-layout { grid-template-columns:1fr; } }

/* Settings */
.settings-layout { display:grid; grid-template-columns:200px 1fr; gap:2rem; align-items:start; }
.settings-nav { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.settings-nav-link { display:block; padding:0.85rem 1.25rem; color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); font-size:0.95rem; transition:background 0.2s; }
.settings-nav-link:last-child { border-bottom:none; }
.settings-nav-link:hover, .settings-nav-link.active { background:var(--accent); color:#fff; }
.settings-section { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:1.5rem; margin-bottom:1.5rem; }
.settings-section h2 { margin-bottom:1.25rem; font-size:1.1rem; }
.theme-toggle-group { display:flex; gap:1rem; }
.theme-option { display:flex; align-items:center; gap:0.5rem; padding:0.75rem 1.25rem; border:2px solid var(--border); border-radius:8px; cursor:pointer; transition:border-color 0.2s; }
.theme-option.active, .theme-option:has(input:checked) { border-color:var(--accent); background:rgba(var(--accent-rgb),0.1); }
.theme-option input { display:none; }
.color-picker-group { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:0.5rem; }
.color-dot { width:36px; height:36px; border-radius:50%; border:3px solid transparent; cursor:pointer; transition:transform 0.2s, border-color 0.2s; }
.color-dot.active { border-color:var(--text); transform:scale(1.15); }
.color-blue  { background:#3b82f6; }
.color-purple{ background:#8b5cf6; }
.color-green { background:#10b981; }
.color-orange{ background:#f59e0b; }
.color-red   { background:#ef4444; }
.color-teal  { background:#14b8a6; }
.color-pink  { background:#ec4899; }
.color-indigo{ background:#6366f1; }
.color-amber { background:#f59e0b; }
.color-lime  { background:#84cc16; }
.color-rose  { background:#f43f5e; }
.color-cyan  { background:#06b6d4; }
@media(max-width:768px){ .settings-layout { grid-template-columns:1fr; } .settings-nav { display:flex; overflow-x:auto; border-radius:10px; } .settings-nav-link { border-bottom:none; border-right:1px solid var(--border); white-space:nowrap; } }

/* Upload */
.upload-tabs { display:flex; gap:0.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.upload-tab-btn { padding:0.6rem 1.25rem; border:2px solid var(--border); background:var(--bg-card); color:var(--text); border-radius:8px; cursor:pointer; font-weight:600; transition:all 0.2s; }
.upload-tab-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.upload-panel { display:none; }
.upload-panel.active { display:block; }
.form-section { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:1.5rem; margin-bottom:1.25rem; }
.form-section h3 { margin-bottom:1rem; font-size:1rem; color:var(--text-muted); }
.cascading-select { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:600px){ .cascading-select { grid-template-columns:1fr; } }
.drop-zone { border:2px dashed var(--border); border-radius:10px; padding:2.5rem; text-align:center; cursor:pointer; transition:border-color 0.2s; }
.drop-zone:hover, .drop-zone.dragging { border-color:var(--accent); }
.drop-zone-icon { font-size:2.5rem; margin-bottom:0.5rem; }
.drop-zone .link { color:var(--accent); cursor:pointer; text-decoration:underline; }
.hint { font-size:0.85rem; color:var(--text-muted); margin-top:0.5rem; }
.file-preview-list { margin-top:1rem; }
.file-preview-item { display:flex; align-items:center; justify-content:space-between; padding:0.5rem; background:var(--bg-hover); border-radius:6px; margin-bottom:0.5rem; font-size:0.9rem; }
.video-source-tabs, .deck-input-tabs { display:flex; gap:0.5rem; margin-bottom:1rem; }
.yt-preview { aspect-ratio:16/9; max-width:500px; }
.yt-preview iframe { width:100%; height:100%; border-radius:8px; }
.flashcard-row { display:grid; grid-template-columns:1fr 1fr auto; gap:0.75rem; margin-bottom:0.75rem; }
@media(max-width:600px){ .flashcard-row { grid-template-columns:1fr; } }

/* Year nav */
.year-nav { display:flex; gap:0.5rem; margin-bottom:2rem; flex-wrap:wrap; }
.year-tab { padding:0.5rem 1.25rem; border:2px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text); font-weight:600; transition:all 0.2s; }
.year-tab.active, .year-tab:hover { background:var(--accent); border-color:var(--accent); color:#fff; }

/* Subjects grid */
.subjects-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1rem; }
.subject-card { display:flex; align-items:center; gap:1rem; padding:1.25rem; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; text-decoration:none; color:var(--text); transition:border-color 0.2s, transform 0.15s; }
.subject-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.subject-icon { font-size:1.8rem; }
.subject-info { flex:1; }
.subject-info h3 { font-size:1rem; font-weight:600; margin-bottom:0.25rem; }
.subject-meta { display:flex; gap:0.75rem; font-size:0.8rem; color:var(--text-muted); }
.subject-arrow { color:var(--text-muted); font-size:1.2rem; }

/* Video grid */
.video-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:1.25rem; }
.video-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.video-thumb { display:block; aspect-ratio:16/9; background:var(--bg-hover); overflow:hidden; position:relative; }
.video-thumb img { width:100%; height:100%; object-fit:cover; }
.local-video-thumb { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:2.5rem; }
.yt-badge { position:absolute; top:8px; right:8px; background:#e74c3c; color:#fff; font-size:0.7rem; font-weight:700; padding:2px 6px; border-radius:4px; }
.video-info { padding:0.75rem; }
.video-title { display:block; font-weight:600; text-decoration:none; color:var(--text); margin-bottom:0.25rem; font-size:0.95rem; }
.video-layout { max-width:900px; margin:0 auto; }
.video-player-wrap { aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; margin-bottom:1rem; }
.video-iframe, .video-element { width:100%; height:100%; }
.video-info-bar { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--border); margin-bottom:1rem; }
.video-description { color:var(--text-muted); font-size:0.95rem; margin-bottom:1.5rem; }

/* Deck grid */
.deck-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:1rem; }
.deck-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:border-color .2s, transform .15s; }
.deck-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.deck-link { display:flex; flex-direction:column; align-items:center; padding:1.5rem 1rem 1.25rem; text-decoration:none; color:var(--text); text-align:center; }
.deck-link:hover { color:var(--text); }
.deck-icon { font-size:2rem; margin-bottom:0.75rem; color:var(--accent); }
/* class-based (profile.html) */
.deck-title { font-size:.92rem; font-weight:600; margin-bottom:.2rem; }
.deck-meta  { font-size:.8rem; color:var(--text-muted); }
.deck-subject { font-size:.75rem; color:var(--accent2); margin-top:.3rem; }
/* element-based backward compat (subject_detail, search, vse) */
.deck-link h3 { font-size:.92rem; font-weight:600; text-align:center; margin-bottom:.2rem; }
.deck-link p  { font-size:.8rem; color:var(--text-muted); text-align:center; margin-bottom:.2rem; }

/* Flashcard study */
.study-area { max-width:700px; margin:0 auto 2rem; }
.study-controls-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.card-counter { font-size:0.9rem; color:var(--text-muted); font-weight:600; }
.flashcard-study { cursor:pointer; perspective:1000px; }
.flashcard-inner { position:relative; width:100%; padding-top:55%; transform-style:preserve-3d; transition:transform 0.5s; border-radius:16px; }
.flashcard-inner.flipped { transform:rotateY(180deg); }
.flashcard-front, .flashcard-back { position:absolute; inset:0; backface-visibility:hidden; background:var(--bg-card); border:2px solid var(--accent); border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; text-align:center; }
.flashcard-back { transform:rotateY(180deg); background:rgba(var(--accent-rgb),0.08); }
.card-side-label { font-size:0.75rem; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:1rem; }
.card-text { font-size:1.3rem; font-weight:600; line-height:1.4; }
.flip-hint { text-align:center; font-size:0.8rem; color:var(--text-muted); margin-top:0.75rem; }
.study-nav { display:flex; align-items:center; gap:1rem; margin-top:1.5rem; }
.study-progress { flex:1; }
.progress-bar { background:var(--border); border-radius:99px; height:6px; }
.progress-fill { background:var(--accent); border-radius:99px; height:100%; transition:width 0.3s; }
.all-cards-toggle { text-align:center; margin-bottom:1rem; }
.all-cards { margin-top:1rem; }
.all-cards.hidden { display:none; }
.card-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:0.75rem; border-bottom:1px solid var(--border); }
.card-col { font-size:0.95rem; }

/* Preview */
.preview-container { margin:1.5rem 0; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.preview-iframe { width:100%; height:70vh; display:block; border:none; }
.preview-image-wrap { text-align:center; padding:1rem; background:var(--bg-card); }
.preview-image { max-width:100%; max-height:70vh; border-radius:8px; }
.preview-text { background:var(--bg-card); padding:1.5rem; max-height:70vh; overflow-y:auto; }
.preview-text pre { font-family:monospace; font-size:0.9rem; white-space:pre-wrap; word-break:break-all; }
.preview-unsupported { text-align:center; padding:3rem; background:var(--bg-card); }
.preview-office-wrap { display:flex; flex-direction:column; background:var(--bg-card); }
.preview-office-frame { width:100%; height:75vh; display:block; border:none; }
.preview-office-hint { padding:.45rem .9rem; font-size:.78rem; color:var(--text2); border-top:1px solid var(--border); background:var(--bg-card); }
.preview-office-hint a { color:var(--accent); }

/* Comments */
.comments-section { margin-top:2rem; padding-top:2rem; border-top:1px solid var(--border); }
.comments-section.no-border { border-top:none; padding-top:0; }
.comment-form { margin-bottom:1.5rem; }
.comment-form textarea { margin-bottom:0.75rem; }
.comment-list { display:flex; flex-direction:column; gap:1rem; }
.comment-item { display:flex; gap:1rem; }
.comment-avatar { width:40px; height:40px; min-width:40px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; }
.comment-body { flex:1; }
.comment-header { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.25rem; flex-wrap:wrap; }
.comment-author { font-weight:600; text-decoration:none; color:var(--text); }
.comment-time { font-size:0.8rem; color:var(--text-muted); }
.no-comments, .login-prompt { color:var(--text-muted); font-size:0.9rem; }

/* Sort bar */
.sort-bar { display:flex; align-items:center; gap:0.5rem; margin-bottom:1.5rem; flex-wrap:wrap; font-size:0.9rem; }
.sort-btn { padding:0.35rem 0.85rem; border:1px solid var(--border); border-radius:6px; text-decoration:none; color:var(--text-muted); transition:all 0.2s; }
.sort-btn.active, .sort-btn:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.search-inline { display:flex; gap:0.5rem; margin-left:auto; }
.form-control-sm { padding:0.3rem 0.75rem; font-size:0.9rem; border-radius:6px; border:1px solid var(--border); background:var(--bg-input); color:var(--text); }

/* Search */
.search-form-big { display:flex; gap:0.75rem; margin-bottom:2rem; }
.search-input-big { flex:1; font-size:1.1rem; padding:0.75rem 1rem; }
.user-list { display:flex; flex-direction:column; gap:0.75rem; }
.user-result-item { display:flex; align-items:center; gap:1rem; padding:1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text); transition:border-color 0.2s; }
.user-result-item:hover { border-color:var(--accent); }
.user-avatar-sm { width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* SOV */
.sov-form-box { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:1.5rem; margin-bottom:2rem; }
.sov-list { display:flex; flex-direction:column; gap:1rem; }
.sov-item { display:flex; gap:1.25rem; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:1.25rem; }
.sov-vote { display:flex; flex-direction:column; align-items:center; gap:0.25rem; min-width:40px; }
.sov-upvote-btn { background:none; border:2px solid var(--border); border-radius:6px; width:36px; height:36px; font-size:1rem; cursor:pointer; color:var(--text-muted); transition:all 0.2s; }
.sov-upvote-btn.can-vote:hover { border-color:var(--accent); color:var(--accent); }
.sov-upvote-btn.voted { background:var(--accent); border-color:var(--accent); color:#fff; }
.sov-count { font-weight:700; font-size:1rem; color:var(--accent); }
.sov-content p { margin-bottom:0.5rem; }
.sov-meta { font-size:0.82rem; color:var(--text-muted); display:flex; gap:1rem; flex-wrap:wrap; }
.anon-badge { background:var(--bg-hover); border-radius:4px; padding:1px 8px; font-size:0.8rem; }
.info-banner { background:rgba(var(--accent-rgb),0.1); border:1px solid var(--accent); border-radius:8px; padding:1rem; margin-bottom:2rem; }
.info-banner a { color:var(--accent); font-weight:600; }

/* Admin */
.admin-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; margin-bottom:2rem; }
.admin-stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:1.25rem; text-align:center; }
.admin-stat-card.warning { border-color:#f59e0b; }
.admin-stat-num { display:block; font-size:2rem; font-weight:800; color:var(--accent); }
.admin-quick-links { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.admin-quick-btn { padding:0.75rem 1.5rem; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text); font-weight:600; transition:border-color 0.2s; display:flex; align-items:center; gap:0.5rem; }
.admin-quick-btn:hover { border-color:var(--accent); }
.admin-quick-btn.attention { border-color:#f59e0b; }
.admin-section { margin-top:2rem; }
.admin-table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.admin-table th { background:var(--bg-hover); padding:0.6rem 0.75rem; text-align:left; font-weight:600; border-bottom:2px solid var(--border); }
.admin-table td { padding:0.6rem 0.75rem; border-bottom:1px solid var(--border); }
.admin-table tr:hover td { background:var(--bg-hover); }
.admin-search-form { display:flex; gap:0.75rem; margin-bottom:1.25rem; }
.admin-actions { display:flex; gap:0.5rem; flex-wrap:wrap; }
.admin-program-section { margin-bottom:2rem; }
.btn-xs { padding:0.25rem 0.6rem; font-size:0.78rem; border-radius:4px; }
.btn-warning { background:#f59e0b; color:#fff; border:none; }
.section-title { margin:1.5rem 0 0.75rem; font-size:1rem; }
.section-title.danger { color:#ef4444; }
.badge.ok { background:#10b981; color:#fff; font-size:0.75rem; padding:2px 8px; border-radius:99px; }
.badge.warning { background:#f59e0b; color:#fff; font-size:0.75rem; padding:2px 8px; border-radius:99px; }
.badge.danger { background:#ef4444; color:#fff; font-size:0.75rem; padding:2px 8px; border-radius:99px; }

/* Error page */
.error-page { text-align:center; padding:5rem 2rem; }
.error-code { font-size:7rem; font-weight:900; color:var(--accent); line-height:1; margin-bottom:1rem; }

/* Privacy */
.prose-content { max-width:800px; }
.prose-content section { margin-bottom:2rem; }
.prose-content h2 { font-size:1.2rem; margin-bottom:0.75rem; color:var(--accent); }
.prose-content ul { padding-left:1.5rem; line-height:1.8; }

/* File actions */
.file-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.file-action-btns { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }

/* Modal */
.modal { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; }
.modal.open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.6); }
.modal-box { position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:2rem; width:100%; max-width:480px; z-index:1; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.modal-header h3 { font-size:1.15rem; font-weight:700; }
.modal-close { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--text-muted); }
.btn-full { width:100%; }

/* Like bar */
.like-bar { display:flex; gap:0.5rem; align-items:center; }
.like-btn { display:flex; align-items:center; gap:0.35rem; padding:0.35rem 0.85rem; border:1px solid var(--border); background:var(--bg-card); color:var(--text); border-radius:6px; cursor:pointer; font-size:0.9rem; transition:all 0.2s; }
.like-btn:hover { border-color:var(--accent); }
.like-btn.liked { background:rgba(16,185,129,0.15); border-color:#10b981; color:#10b981; }
.like-btn.disliked { background:rgba(239,68,68,0.15); border-color:#ef4444; color:#ef4444; }

/* Follow btn */
.follow-btn { margin:0.75rem 0; }

/* Breadcrumb */
.breadcrumb { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:var(--text-muted); margin-bottom:0.75rem; flex-wrap:wrap; }
.breadcrumb a { color:var(--accent); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

/* Verified badge */
.verified-badge { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:var(--accent); color:#fff; border-radius:50%; font-size:0.7rem; font-weight:700; margin-left:3px; }

/* Uploader link */
.uploader-link { text-decoration:none; color:var(--accent); font-size:0.85rem; }

/* Upload CTA */
.upload-cta { margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--border); text-align:center; }

/* Content tabs */
.content-tabs { display:flex; gap:0; margin-bottom:1.5rem; border-bottom:2px solid var(--border); padding-bottom:0; flex-wrap:wrap; overflow-x:auto; }
.tab-btn { display:inline-flex; align-items:center; gap:.35rem; padding:0.65rem 1.1rem; border:none; background:transparent; color:var(--text-muted); cursor:pointer; font-size:.9rem; font-weight:600; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.2s; white-space:nowrap; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }


/* Empty states */
.empty-state { text-align:center; padding:3rem; }
.empty-state.small { padding:2rem; }
.empty-icon { font-size:3rem; margin-bottom:1rem; }
.empty-state h3 { margin-bottom:0.5rem; }
.empty-state p { color:var(--text-muted); margin-bottom:1.25rem; }

/* File list */
.file-list { display:flex; flex-direction:column; gap:0.75rem; }
.file-item { display:flex; align-items:center; gap:1rem; padding:1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; transition:border-color 0.2s; }
.file-item:hover { border-color:var(--accent); }
.file-ext-badge { min-width:50px; padding:0.25rem 0.5rem; border-radius:6px; text-align:center; font-size:0.75rem; font-weight:700; background:var(--bg-hover); color:var(--text-muted); }
.file-info { flex:1; min-width:0; }
.file-name { font-weight:600; text-decoration:none; color:var(--text); display:block; margin-bottom:0.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-name:hover { color:var(--accent); }
.file-meta { display:flex; gap:0.75rem; font-size:0.82rem; color:var(--text-muted); flex-wrap:wrap; }
.file-actions { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
@media(max-width:600px){ .file-item { flex-wrap:wrap; } .file-actions { width:100%; justify-content:flex-end; } }

/* btn-link */
.btn-link { background:none; border:none; color:var(--accent); cursor:pointer; font-size:inherit; padding:0; text-decoration:underline; }
.btn-link.danger { color:#ef4444; }

/* Page header */
.page-header { margin-bottom:2rem; }
.page-header h1 { font-size:1.8rem; font-weight:800; }
.subtitle { color:var(--text-muted); margin-top:0.25rem; }

/* Section header */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.section-header h2 { font-size:1.2rem; font-weight:700; }

/* text-center */
.text-center { text-align:center; }


/* ── NOVO! Marquee strip ──────────────────────────────────────────────────── */
.novo-marquee-wrap{
  width:100%;
  overflow:hidden;
  background:var(--accent);
  border-bottom:1px solid rgba(255,255,255,.15);
  padding:.45rem 0;
  user-select:none;
}
.novo-marquee-track{
  display:flex;
  gap:0;
  width:max-content;
  will-change:transform;
  animation:novoScroll 35s linear infinite;
}
.novo-item{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:0 1.2rem;
  white-space:nowrap;
}
.novo-badge{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  color:#fff;
  text-transform:uppercase;
}
.novo-sep{
  font-size:.6rem;
  color:rgba(255,255,255,.6);
}
@keyframes novoScroll{
  0%  { transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@media(prefers-reduced-motion:reduce){
  .novo-marquee-track{ animation:none; }
}
/* Pause marquee on hover */
.novo-marquee-wrap:hover .novo-marquee-track{ animation-play-state:paused; }

/* ── Mobile-safe fixes ──────────────────────────────────────────────────────── */
@media(max-width:480px){
  .container,.nav-inner,.flash-container,.footer-inner{
    padding-left:.85rem !important;
    padding-right:.85rem !important;
  }
  .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .file-actions{flex-wrap:wrap;}
  .card{padding:.9rem !important;}
  .site-quick-stats{grid-template-columns:1fr 1fr !important;}
  /* Prevent wide tables / pre from breaking layout */
  pre,table,iframe{max-width:100%;overflow-x:auto;}
}