/* =========================================================
   Djami Lessons — Shared design tokens & components
   Palette: Ink Navy / Paper / Folder Amber / Stamp Teal / Ink Gray
   Display: Fraunces · Body: Manrope · Utility: IBM Plex Mono
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #14213D;
  --ink-soft:   #253559;
  --dark-bg:    #14213D;
  --footer-bg:  var(--dark-bg);
  --footer-text: #F7F7F3;
  --paper:      #FFFFFF;
  --paper-2:    #F4F5F7;
  --paper-3:    #E9EAED;
  --amber:      #D98E3F;
  --amber-deep: #B96F26;
  --teal:       #2E6F6E;
  --teal-deep:  #1F4E4D;
  --gray:       #5B6472;
  --line:       #DDD9CB;
  --white:      #FFFFFF;
  --danger:     #B3432B;

  /* Unified button accent — admin-configurable from Sayt sozlamalari.
     Every filled/outline .btn variant reads from these two, so changing
     them from the settings form re-colors every button on the site. */
  --btn-color:      var(--amber);
  --btn-color-deep: var(--amber-deep);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 22px;
  --shadow-card: 0 1px 2px rgba(20,33,61,.06), 0 8px 24px -12px rgba(20,33,61,.18);
  --shadow-pop:  0 4px 10px rgba(20,33,61,.08), 0 20px 40px -16px rgba(20,33,61,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 .5em;
  color: var(--ink);
  letter-spacing: -.01em;
}
h1{ font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 600; }
h2{ font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
h3{ font-size: 1.3rem; font-weight: 600; }
p{ margin: 0 0 1em; color: var(--ink-soft); }
a{ color: inherit; }
img{ max-width:100%; display:block; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  display:flex; align-items:center; gap:.55em;
  margin-bottom: 1.1em;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--amber-deep);
  display:inline-block;
}

.container{
  width: min(1160px, 92%);
  margin: 0 auto;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  padding: .75em 1.6em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  line-height: 1;
}
.btn:focus-visible{ outline: 3px solid var(--teal); outline-offset: 2px; }
.btn-primary{ background: var(--btn-color); color: var(--white); border-color: var(--btn-color); }
.btn-primary:hover{ background: var(--btn-color-deep); border-color: var(--btn-color-deep); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn-amber{ background: var(--btn-color); color: var(--white); border-color: var(--btn-color); }
.btn-amber:hover{ background: var(--btn-color-deep); border-color: var(--btn-color-deep); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn-outline, .btn-outline-teal{ background: transparent; color: var(--btn-color); border-color: var(--btn-color); }
.btn-outline:hover, .btn-outline-teal:hover{ background: var(--btn-color); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--ink); }
.btn-teal{ background: var(--btn-color); color: var(--white); border-color: var(--btn-color); }
.btn-teal:hover{ background: var(--btn-color-deep); border-color: var(--btn-color-deep); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn-danger{ background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover{ background: var(--danger); color: var(--white); }
.btn-sm{ padding: .55em 1.2em; font-size: .82rem; }
.btn[disabled]{ opacity:.5; cursor: not-allowed; transform:none !important; }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; padding: 1.1em 0; }
.brand{ display:flex; align-items:center; gap:.6em; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-decoration:none; color: var(--ink);}
.brand-mark{
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(155deg, var(--amber), var(--amber-deep));
  position: relative; flex: none;
}
.brand-mark::after{
  content:""; position:absolute; left:6px; right:6px; top:12px; height:2px; background: rgba(20,33,61,.35);
  box-shadow: 0 6px 0 rgba(20,33,61,.35), 0 12px 0 rgba(20,33,61,.22);
}
.nav-links{ display:flex; gap: 2em; list-style:none; margin:0; padding:0; font-weight:600; font-size:.95rem;}
.nav-links a{ text-decoration:none; color: var(--ink-soft); transition: color .15s; }
.nav-links a:hover{ color: var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:1em; }
.nav-admin-link{ font-family: var(--font-mono); font-size:.78rem; color: var(--gray); text-decoration:none; letter-spacing:.04em;}
.nav-admin-link:hover{ color: var(--ink); }

/* ---------- Folder-tab signature component ---------- */
.folder{
  --tab-color: var(--amber);
  position: relative;
  margin-top: 26px;
}
.folder-tab{
  position: absolute;
  top: -18px; left: 22px;
  width: 46%;
  min-width: 120px;
  height: 26px;
  background: var(--tab-color);
  clip-path: polygon(0 100%, 0 30%, 10% 0, 90% 0, 100% 30%, 100% 100%);
}
.folder-body{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px var(--radius-m) var(--radius-m) var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 1.6em 1.5em 1.4em;
  position: relative;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.folder:hover .folder-body{ transform: translateY(-4px); box-shadow: var(--shadow-pop); }

/* ---------- Footer ---------- */
footer{ background: var(--dark-bg); color: rgba(247,247,243,.75); padding: 3.5em 0 2em; margin-top: 6em; }
footer .container{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2em; }
footer h4{ color: var(--paper); font-family: var(--font-body); font-size: .8rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1em; }
footer a{ color: rgba(247,247,243,.75); text-decoration:none; }
footer a:hover{ color: var(--amber); }
.footer-bottom{ border-top: 1px solid rgba(247,247,243,.14); margin-top: 2.5em; padding-top: 1.5em; font-size:.82rem; color: rgba(247,247,243,.5); display:flex; justify-content:space-between; flex-wrap:wrap; gap: .8em;}
.footer-admin-link{ font-family: var(--font-mono); margin-left: 1.2em; }

/* ---------- Utility ---------- */
.tag{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing:.04em;
  padding: .3em .7em; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft);
  display:inline-flex; align-items:center; gap:.4em;
}
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.5em; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.8em; }

/* The [hidden] attribute must always win, even over classes that set
   their own display (e.g. .loading-screen{display:flex}, .admin-shell{display:flex}).
   Without this, some browsers keep such elements visible despite [hidden]. */
[hidden]{ display: none !important; }

@media (max-width: 900px){
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
  .nav-links{ display:none; }
}

/* ============ Auth pages (admin + student login) ============ */
.auth-body{
  min-height: 100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(217,142,63,.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(46,111,110,.12), transparent 45%),
    var(--paper);
  padding: 2em 1em;
}
.auth-brand{ margin-bottom: 2.4em; text-decoration:none; }
.auth-wrap{ width: 100%; max-width: 440px; display:flex; flex-direction:column; align-items:center; }
.auth-folder{ width:100%; }
.auth-card{ padding: 2.4em 2.2em 2.2em; }
.auth-title{ margin-bottom: .3em; }
.auth-sub{ color: var(--gray); font-size:.92rem; margin-bottom: 1.8em; }
.auth-form{ display:flex; flex-direction:column; gap: 1.2em; }
.field{ display:flex; flex-direction:column; gap:.5em; font-weight:700; font-size:.85rem; }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size: 1rem; padding: .8em .9em;
  border-radius: var(--radius-s); border: 1.5px solid var(--line); background: var(--paper);
  color: var(--ink); width:100%;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(46,111,110,.15);
}
.password-field{ position:relative; }
.password-field input{ padding-right: 5.4em; }
.pw-toggle{
  position:absolute; right: .5em; top:50%; transform: translateY(-50%);
  background:none; border:none; font-family: var(--font-mono); font-size:.72rem;
  color: var(--teal-deep); cursor:pointer; padding: .3em .4em;
}
.form-error{
  background: #FBEAE4; color: var(--danger); border: 1px solid rgba(179,67,43,.3);
  padding: .8em 1em; border-radius: var(--radius-s); font-size: .85rem; margin:0;
}
.form-notice{
  background: #EAF2F1; color: var(--teal-deep); border: 1px solid rgba(46,111,110,.3);
  padding: .8em 1em; border-radius: var(--radius-s); font-size: .85rem; margin:0;
}
.auth-submit{ width:100%; margin-top:.4em; }
.auth-hint{ text-align:center; margin-top: 1.6em; font-size:.78rem; color: var(--gray); }
.auth-hint code{ background: var(--paper-2); padding: .15em .5em; border-radius: 4px; font-family: var(--font-mono); }
.auth-switch{ text-align:center; margin-top:1em; font-size:.85rem; }
.auth-switch a{ color: var(--teal-deep); font-weight:700; text-decoration:none; }
.auth-switch a:hover{ text-decoration:underline; }

/* ============ Split-screen auth layout (student login / register) ============ */
.auth-split-wrap{
  width:100%; max-width: 900px; margin:0 auto; min-height: 540px;
  display:flex; border-radius: var(--radius-l); overflow:hidden;
  box-shadow: var(--shadow-pop); background: var(--paper);
}
.auth-split-left{
  flex: 1 1 42%; padding: 2.6em 2.4em; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  background: linear-gradient(160deg, var(--ink), var(--teal-deep)); color: var(--paper);
}
.auth-split-left::before, .auth-split-left::after{
  content:''; position:absolute; border-radius:50%; background: rgba(247,247,243,.07);
}
.auth-split-left::before{ width:260px; height:260px; top:-90px; right:-90px; }
.auth-split-left::after{ width:180px; height:180px; bottom:-70px; left:-50px; }
.auth-split-left .brand{
  position:relative; z-index:1; color: var(--paper); text-decoration:none;
  display:inline-flex; align-items:center; gap:.6em; font-weight:800;
}
.auth-split-hero{ position:relative; z-index:1; margin: 2em 0; }
.auth-split-hero h2{ font-family: var(--font-display); font-size: 2rem; margin:0 0 .5em; color: var(--paper); }
.auth-split-hero p{ color: rgba(247,247,243,.75); font-size:.95rem; line-height:1.6; margin:0; max-width: 300px; }
.auth-split-switch{ position:relative; z-index:1; font-size:.9rem; color: rgba(247,247,243,.82); margin:0; }
.auth-split-switch a{ color: var(--amber); font-weight:700; text-decoration:none; }
.auth-split-switch a:hover{ text-decoration:underline; }
.auth-split-right{ flex: 1 1 58%; padding: 3em 3.1em; display:flex; flex-direction:column; justify-content:center; }
.auth-split-right .auth-title{ font-size:1.5rem; }

@media (max-width: 760px){
  .auth-split-wrap{ flex-direction:column; min-height:auto; }
  .auth-split-left, .auth-split-right{ padding: 2em 1.6em; }
  .auth-split-hero{ margin: 1.4em 0; }
}

/* ---------- Split-panel auth design (student login / register) ---------- */
.auth-wrap-split{ max-width: 960px; }
.auth-split{
  display:flex; width:100%; min-height: 560px; background: var(--white);
  border-radius: var(--radius-l); overflow:hidden; box-shadow: var(--shadow-pop);
}
.auth-split-left{
  flex: 1 1 42%; position:relative; overflow:hidden; color: var(--paper);
  background: linear-gradient(155deg, var(--ink) 0%, var(--teal-deep) 100%);
  padding: 2.6em 2.4em; display:flex; flex-direction:column;
}
.auth-split-left::before, .auth-split-left::after{
  content:""; position:absolute; border-radius:50%; background: rgba(247,247,243,.08); pointer-events:none;
}
.auth-split-left::before{ width:260px; height:260px; top:-90px; right:-90px; }
.auth-split-left::after{ width:190px; height:190px; bottom:-70px; left:-50px; background: rgba(217,142,63,.16); }
.auth-split-left .brand{ color: var(--paper); position:relative; z-index:1; }
.auth-home-btn{
  align-self:flex-start; position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:.4em;
  color: rgba(247,247,243,.85); text-decoration:none;
  font-size:.82rem; font-weight:700;
  padding:.5em .9em; margin-bottom:1.6em;
  border-radius:999px; border:1.5px solid rgba(247,247,243,.3);
  transition: border-color .2s, background .2s, color .2s;
}
.auth-home-btn:hover{ border-color: rgba(247,247,243,.6); background: rgba(247,247,243,.1); color:#fff; }
.auth-split-hero{ margin: auto 0; position:relative; z-index:1; }
.auth-split-hero h2{ font-family: var(--font-display); font-size:2rem; margin: 0 0 .4em; color: var(--paper); }
.auth-split-hero p{ color: rgba(247,247,243,.75); font-size:.95rem; line-height:1.6; max-width: 320px; margin:0; }
.auth-split-foot{ position:relative; z-index:1; font-size:.88rem; color: rgba(247,247,243,.8); margin:0; }
.auth-split-foot a{ color: var(--paper); font-weight:700; text-decoration: underline; text-underline-offset: 2px; }
.auth-split-foot a:hover{ color: var(--amber); }
.auth-split-right{ flex: 1 1 58%; padding: 3em 3em; display:flex; flex-direction:column; justify-content:center; }
.auth-remember-row{ display:flex; align-items:center; justify-content:space-between; font-size:.82rem; margin-top:-.4em; flex-wrap:wrap; gap:.6em; }
.auth-remember-row label{ display:flex; align-items:center; gap:.5em; color: var(--gray); cursor:pointer; font-weight:600; }
.auth-remember-row input[type="checkbox"]{ width:16px; height:16px; accent-color: var(--teal); }
.auth-forgot{ color: var(--amber-deep); text-decoration:none; font-weight:700; }
.auth-forgot:hover{ text-decoration:underline; }

@media (max-width: 860px){
  .auth-split{ flex-direction:column; min-height:0; }
  .auth-split-left{ padding: 2em 1.6em; }
  .auth-split-left::before, .auth-split-left::after{ display:none; }
  .auth-split-hero{ margin: 1.2em 0; }
  .auth-split-right{ padding: 2em 1.6em 2.4em; }
}

/* ============ App shell (admin + student dashboards) ============ */
.admin-shell{ display:flex; min-height:100vh; }

.admin-sidebar{
  width: 260px; flex: none; background: var(--ink); color: rgba(247,247,243,.85);
  display:flex; flex-direction:column; padding: 1.8em 1.4em; position: sticky; top:0; height:100vh;
  overflow-y: auto;
}
.admin-sidebar::-webkit-scrollbar{ width: 4px; }
.admin-sidebar::-webkit-scrollbar-track{ background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius:4px; }
.admin-sidebar .brand{ color: var(--paper); text-decoration:none; margin-bottom: 2.4em; font-size: 1.1rem; }
.admin-nav{ list-style:none; margin:0; padding:0 0 1em; display:flex; flex-direction:column; gap:.3em; flex:1; min-height:0; overflow-y:auto; }
.admin-nav::-webkit-scrollbar{ width: 4px; }
.admin-nav::-webkit-scrollbar-track{ background: transparent; }
.admin-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius:4px; }
.admin-nav a{
  display:flex; align-items:center; gap:.7em; text-decoration:none; color: rgba(247,247,243,.7);
  padding:.75em .8em; border-radius: var(--radius-s); font-weight:600; font-size:.92rem;
  transition: background .15s, color .15s; cursor:pointer;
}
.admin-nav a:hover{ background: rgba(247,247,243,.08); color: var(--paper); }
.admin-nav a.active{ background: rgba(217,142,63,.16); color: var(--amber); }
.admin-user{
  border-top: 1px solid rgba(247,247,243,.14); padding-top: 1.2em; margin-top: 1.2em;
  display:flex; align-items:center; justify-content:space-between; gap: .6em;
}
.admin-user-name{ font-size:.85rem; font-weight:700; color: var(--paper); }
.admin-user-role{ font-family: var(--font-mono); font-size:.7rem; color: rgba(247,247,243,.5); }
.logout-btn{
  background:none; border: 1px solid rgba(247,247,243,.25); color: rgba(247,247,243,.75);
  padding:.5em .8em; border-radius: var(--radius-s); font-size:.75rem; cursor:pointer; font-family: var(--font-mono);
}
.logout-btn:hover{ border-color: var(--danger); color: var(--danger); }

.sidebar-avatar{
  flex: none; width:38px; height:38px; border-radius:50%;
  background: rgba(217,142,63,.16); border: 1.5px solid rgba(217,142,63,.35);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}

/* ---- Student profile page ---- */
.profile-card{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 1.8em 2em; max-width: 640px;
}
.profile-avatar-row{ display:flex; align-items:center; gap:1.3em; }
.profile-avatar-big{
  flex:none; width:76px; height:76px; border-radius:50%;
  background: var(--paper-2); border: 1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:2.4rem;
}
.emoji-picker-grid{
  margin-top:1.2em; padding:1em; background: var(--paper-2); border-radius: var(--radius-s);
  display:grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap:.4em;
}
.emoji-picker-btn{
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-s);
  font-size:1.3rem; padding:.4em 0; cursor:pointer; transition: all .15s var(--ease);
}
.emoji-picker-btn:hover{ border-color: var(--teal); transform: translateY(-1px); }

.admin-main{ flex:1; padding: 2.6em 3em 5em; max-width: 1180px; }
.admin-header{ display:flex; align-items:flex-end; justify-content:space-between; gap: 2em; flex-wrap:wrap; margin-bottom: 2em; }
.admin-header h1{ font-size: 2rem; margin-bottom:.2em; }
.admin-header p{ margin:0; color: var(--gray); }

.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.2em; margin-bottom: 2.6em; }
.stat-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.3em 1.4em; }
.stat-card strong{ display:block; font-family: var(--font-display); font-size: 1.8rem; }
.stat-card span{ font-size:.78rem; color: var(--gray); }

/* Folder grid on dashboard */
.folders-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:1em; margin-bottom: 1.4em; flex-wrap:wrap; }
.folders-toolbar h2{ margin:0; font-size:1.3rem; }
.folder-search{
  font-family: var(--font-body); padding:.6em .9em; border-radius: var(--radius-s); border: 1.5px solid var(--line);
  min-width: 220px; background: var(--white);
}
.folders-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 1.6em 1.4em; }
.folder-card-body{ cursor:pointer; }
.folder-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:.6em; }
.folder-progress-ring{ font-family: var(--font-mono); font-size:.72rem; color: var(--teal-deep); background: var(--paper-2); padding:.3em .6em; border-radius: 999px; }
.folder-name{ margin: .7em 0 .2em; font-size: 1.1rem; }
.folder-sub{ color: var(--gray); font-size:.82rem; margin-bottom: 1.1em; }
.folder-progress-bar{ height:6px; border-radius:999px; background: var(--paper-2); overflow:hidden; margin-bottom: 1em; }
.folder-progress-fill{ height:100%; background: var(--teal); border-radius: inherit; }
.folder-card-actions{ display:flex; gap:.5em; }
.empty-state{
  border: 1.5px dashed var(--line); border-radius: var(--radius-m); padding: 3em 2em; text-align:center; color: var(--gray);
  grid-column: 1 / -1;
}
.empty-state h3{ color: var(--ink); }

/* Lesson detail view */
.back-link{ display:inline-flex; align-items:center; gap:.5em; color: var(--gray); text-decoration:none; font-size:.85rem; font-weight:700; margin-bottom:1.4em; cursor:pointer; }
.back-link:hover{ color: var(--ink); }
.lesson-list{ display:flex; flex-direction:column; gap: .9em; }
.lesson-row{
  display:flex; gap: 1.1em; align-items:flex-start; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 1.1em 1.3em;
}
.lesson-index{
  font-family: var(--font-mono); font-weight:700; font-size:1rem; color: var(--amber-deep);
  width: 40px; flex:none; padding-top: .2em;
}
.lesson-main{ flex:1; min-width:0; }
.lesson-row-top{ display:flex; justify-content:space-between; align-items:center; gap:1em; flex-wrap:wrap; }
.lesson-title{ font-weight:700; font-size:1rem; }
.lesson-title.placeholder{ color: var(--gray); font-weight:600; font-style: italic; }
.lesson-meta{ display:flex; gap:.5em; margin-top:.4em; flex-wrap:wrap; }
.status-pill{ font-family: var(--font-mono); font-size:.68rem; padding:.28em .6em; border-radius: 999px; }
.status-kutilmoqda{ background: var(--paper-2); color: var(--gray); }
.status-tayyor{ background: rgba(217,142,63,.16); color: var(--amber-deep); }
.status-otildi{ background: rgba(46,111,110,.14); color: var(--teal-deep); }
.lesson-actions{ display:flex; gap:.5em; flex:none; }
.lesson-locked{ opacity:.55; }
.lesson-links{ display:flex; gap:.6em; margin-top:.7em; flex-wrap:wrap; }
.lesson-links a{ font-size:.82rem; font-weight:700; color: var(--teal-deep); text-decoration:none; }
.lesson-links a:hover{ text-decoration:underline; }
.lesson-homework{ margin-top:.6em; font-size:.85rem; background: var(--paper-2); padding:.8em 1em; border-radius: var(--radius-s); }

/* Nested folders inside admin lesson / topic lists */
.breadcrumb-trail{ display:flex; align-items:center; flex-wrap:wrap; gap:.45em; font-size:.85rem; margin-bottom:1.2em; }
.breadcrumb-trail a{ color: var(--gray); text-decoration:none; font-weight:700; cursor:pointer; }
.breadcrumb-trail a:hover{ color: var(--teal-deep); text-decoration:underline; }
.breadcrumb-trail .crumb-sep{ color: var(--line); }
.breadcrumb-trail .crumb-current{ color: var(--ink); font-weight:700; }
.folder-row{ cursor:pointer; border-color: rgba(46,111,110,.25); background: rgba(46,111,110,.04); }
.folder-row:hover{ border-color: var(--teal); }
.folder-row .lesson-index{ color: var(--teal-deep); font-size:1.35rem; padding-top:0; }
.folder-row .lesson-title{ cursor:pointer; }

/* Students table */
.table-wrap{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); overflow:hidden; }

.blog-admin-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4em;
}
.blog-admin-card{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m);
  overflow:hidden; box-shadow: var(--shadow-card); display:flex; flex-direction:column;
}
.blog-admin-thumb{ width:100%; height:150px; object-fit:cover; background: var(--paper-2); }
.blog-admin-card-body{ padding: 1em 1.1em; display:flex; flex-direction:column; gap:.8em; flex:1; }
.blog-admin-card-title{
  font-weight:700; font-size:.94rem; line-height:1.4; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-admin-card-actions{ display:flex; gap:.6em; margin-top:auto; }
table.data-table{ width:100%; border-collapse: collapse; font-size:.9rem; }
table.data-table th, table.data-table td{ padding: .9em 1.1em; text-align:left; border-bottom: 1px solid var(--line); }
table.data-table th{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--gray); background: var(--paper-2); }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table td .tag{ margin-right:.3em; }

/* Students list (admin panel) — compact scannable rows instead of a wide table */
.student-list{ display:flex; flex-direction:column; gap:.6em; }
.student-row{
  display:flex; align-items:center; gap:1em;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: .85em 1.2em; cursor:pointer; transition: all .15s var(--ease);
}
.student-row:hover{ border-color: var(--teal); box-shadow: 0 4px 14px rgba(20,33,61,.06); transform: translateY(-1px); }
.student-row-avatar{
  flex:none; width:42px; height:42px; border-radius:50%;
  background: rgba(46,111,110,.1); color: var(--teal-deep);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:700; font-size:.85rem;
}
.student-row-main{ flex:1; min-width:0; }
.student-row-name{ font-weight:700; font-size:.95rem; }
.student-row-sub{
  font-size:.8rem; color: var(--gray); margin-top:.15em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.student-row-chips{ display:flex; gap:.35em; flex:none; }
.course-chip{
  font-family: var(--font-mono); font-size:.68rem; font-weight:700;
  padding:.3em .5em; border-radius: 999px; letter-spacing:.02em;
  background: var(--paper-2); color: var(--gray);
}
.course-chip-approved{ background: rgba(46,111,110,.15); color: var(--teal-deep); }
.course-chip-pending{ background: rgba(217,142,63,.18); color: var(--amber-deep); }
.student-row-date{ flex:none; width:84px; text-align:right; font-size:.75rem; color: var(--gray); }
.student-row-arrow{ flex:none; font-size:1.3rem; color: var(--line); }
.student-row:hover .student-row-arrow{ color: var(--teal); }
@media (max-width: 700px){
  .student-row-chips, .student-row-date{ display:none; }
}

/* Modal */
.modal-overlay{
  position: fixed; inset:0; background: rgba(20,33,61,.5); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; padding: 2em; z-index: 100;
}
.modal-overlay[hidden]{ display:none; }
.modal-box{
  background: var(--white); border-radius: var(--radius-m); padding: 2em 2.1em; width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y:auto; box-shadow: var(--shadow-pop);
}
.modal-box h3{ margin-bottom: .3em; }
.modal-sub{ color: var(--gray); font-size:.85rem; margin-bottom: 1.6em; }
.modal-form{ display:flex; flex-direction:column; gap: 1.1em; }
.modal-actions{ display:flex; justify-content:flex-end; gap:.8em; margin-top: .6em; }

.toast{
  position: fixed; bottom: 1.6em; right: 1.6em; background: var(--ink); color: var(--paper);
  padding: .9em 1.3em; border-radius: var(--radius-s); font-size:.88rem; box-shadow: var(--shadow-pop);
  z-index: 200; transform: translateY(20px); opacity:0; transition: all .25s var(--ease); max-width: 320px;
}
.toast.show{ transform: translateY(0); opacity:1; }
.toast.toast-error{ background: var(--danger); }

.loading-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  color: var(--gray); font-family: var(--font-mono); font-size:.85rem;
}

@media (max-width: 900px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ width:100%; height:auto; position:relative; flex-direction:row; align-items:center; padding:1em 1.2em; flex-wrap:wrap; row-gap:.6em; }
  .admin-sidebar .brand{ margin:0; width:100%; }
  .admin-nav{ flex-direction:row; flex-wrap:wrap; flex:none; width:100%; gap:.5em; }
  .admin-user{ display:none; }
  .admin-main{ padding: 1.6em 1.2em 4em; }
  .stat-row{ grid-template-columns: repeat(2,1fr); }
  table.data-table{ font-size:.8rem; }
}

.brand-mark-custom{ background: none !important; }
.brand-mark-custom::after{ content: none !important; }

/* Djami Lessons logo mark — the artwork is white-on-transparent, so it
   sits inside a dark rounded chip (replacing the default amber icon)
   to stay visible on both light and dark headers. */
.brand-mark-logo{
  background: var(--ink) !important;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding: 4px; box-sizing: border-box;
}
.brand-mark-logo::after{ content:none !important; }
.brand-mark-logo img{ width:100%; height:100%; object-fit:contain; display:block; }

/* ============ Home page (marketing entry screen) ============ */
.home-body{
  min-height: 100vh; display:flex; flex-direction:column;
  background: var(--paper); color: var(--ink);
  position: relative; overflow-x: hidden;
}

/* ---- Top nav ---- */
.home-topbar{
  position: sticky; top:0; z-index: 60;
  display:flex; align-items:center; justify-content:space-between; gap: 1.4em;
  padding: 1.1em 2em;
  max-width: 1280px; width:100%; margin: 0 auto;
  background: rgba(255,255,255,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.home-nav-links{
  display:flex; align-items:center; gap: 2em;
  font-weight: 700; font-size: .92rem;
}
.home-nav-links a{
  text-decoration:none; color: var(--ink-soft); position:relative; padding: .3em 0;
  transition: color .15s var(--ease);
}
.home-nav-links a:hover{ color: var(--ink); }
.home-nav-links a.is-current{ color: var(--ink); }
.home-nav-links a.is-current::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--amber-deep); border-radius:2px;
}
.home-topbar-links{ display:flex; align-items:center; gap:.9em; }
.home-nav-cta{ padding:.65em 1.5em; font-size:.88rem; }

.home-nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border-radius: var(--radius-s); border: 1.5px solid var(--line);
  background: var(--paper); cursor:pointer; padding: 0; align-items:center;
}
.home-nav-toggle span{ width:18px; height:2px; background: var(--ink); border-radius:2px; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.home-nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.home-nav-toggle.is-open span:nth-child(2){ opacity:0; }
.home-nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
  .home-nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card);
    padding: 1em 1.6em 1.4em; gap: .3em;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition: max-height .25s var(--ease), opacity .2s var(--ease);
  }
  .home-nav-links a{ padding:.6em 0; width:100%; }
  .home-nav-links.is-open{ max-height: 320px; opacity:1; pointer-events:auto; }
  .home-nav-cta{ display:none; }
  .home-nav-toggle{ display:flex; }
}

/* ---- Layout shell ---- */
.home-main{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap: 4.4em; padding: 3.6em 1.4em 2em; max-width: 1200px; width:100%; margin:0 auto;
}

/* ---- Hero ---- */
.hero-section{
  display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap: 3.2em;
  width:100%; max-width: 1160px;
}
.hero-copy{ display:flex; flex-direction:column; align-items:flex-start; gap: 1.2em; text-align:left; }
.hero-copy .eyebrow{ margin-bottom:.2em; }
.home-hero-title{
  font-family: var(--font-display); font-weight:700; line-height:1.12;
  font-size: clamp(2.1rem, 4vw, 3.2rem); color: var(--ink); max-width: 560px; margin:0;
}
.home-hero-title .accent{ color: var(--amber-deep); }
.home-hero-lead{
  font-size: 1.08rem; color: var(--gray); max-width: 480px; line-height:1.65; margin:0;
}
.hero-copy .home-cta-row{ justify-content:flex-start; margin-top:.4em; }
.hero-mini-row{ display:flex; align-items:center; gap: 1em; margin-top: .6em; }
.hero-avatars{ display:flex; }
.hero-avatars span{
  width:36px; height:36px; border-radius:50%; background: var(--paper-2);
  border:2px solid var(--paper); margin-left:-11px; display:flex; align-items:center; justify-content:center;
  font-size:1rem; box-shadow: var(--shadow-card);
}
.hero-avatars span:first-child{ margin-left:0; }
.hero-mini-text{ display:flex; flex-direction:column; line-height:1.25; }
.hero-mini-text strong{ font-family: var(--font-display); font-size:1.1rem; }
.hero-mini-text small{ color: var(--gray); font-size:.8rem; }

.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height: 380px; }
.hero-visual-panel{
  width: 100%; max-width: 400px; aspect-ratio: 3 / 4; border-radius: var(--radius-l);
  background: linear-gradient(155deg, #3457AC, var(--dark-bg));
  box-shadow: var(--shadow-pop); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.hero-visual-panel::before{
  content:""; position:absolute; inset: -20% -20% auto auto; width:60%; aspect-ratio:1;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
  border-radius:50%;
}
.hero-visual-mark{
  font-size: 5.5rem; filter: drop-shadow(0 14px 26px rgba(0,0,0,.3)); position:relative; z-index:1;
}

/* Rotating certificate carousel (replaces single hero image when the
   admin has added certificate URLs) */
.cert-carousel{ position:absolute; inset:0; }
.cert-carousel-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 1s ease;
}
.cert-carousel-slide.is-active{ opacity:1; }
.cert-carousel-dots{
  position:absolute; left:0; right:0; bottom: 14px; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:.4em;
}
.cert-carousel-dot{
  width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,.4);
  transition: background .3s ease, transform .3s ease;
}
.cert-carousel-dot.is-active{ background: var(--white); transform: scale(1.25); }

.hero-float-card{
  position:absolute; background: var(--white); border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop); padding: .85em 1.1em; display:flex; align-items:center; gap:.7em;
}
.hero-float-top{ top: 4%; left: -6%; }
.hero-float-top .hero-avatars-sm span{ width:26px; height:26px; font-size:.75rem; margin-left:-9px; }
.hero-float-top div{ display:flex; flex-direction:column; line-height:1.2; }
.hero-float-top strong{ font-family: var(--font-display); font-size:.95rem; }
.hero-float-top small{ color: var(--gray); font-size:.72rem; }
.hero-float-stack{
  right: -8%; top: 52%; transform: translateY(-50%);
  flex-direction:column; align-items:stretch; gap: .9em; width: 232px; padding: 1.1em 1.15em;
}
.hero-float-item{ display:flex; align-items:flex-start; gap:.7em; }
.hero-float-icon{
  flex:none; width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.hero-float-icon.blue{ background: rgba(52,87,172,.14); }
.hero-float-icon.amber{ background: rgba(217,142,63,.16); }
.hero-float-icon.teal{ background: rgba(46,111,110,.16); }
.hero-float-title{ display:block; font-weight:700; font-size:.83rem; line-height:1.3; }
.hero-float-sub{ display:block; font-size:.72rem; color: var(--gray); }

@media (max-width: 980px){
  .hero-section{ grid-template-columns: 1fr; }
  .hero-copy{ align-items:center; text-align:center; }
  .hero-copy .home-cta-row{ justify-content:center; }
  .home-hero-title, .home-hero-lead{ max-width: 640px; }
  .hero-mini-row{ justify-content:center; }
  .hero-visual{ margin-top: 1.6em; min-height: 320px; }
  .hero-float-top{ left: 2%; }
  .hero-float-stack{ right: 2%; }
}
@media (max-width: 600px){
  .hero-float-card{ position:static; margin: .8em auto 0; width: 100%; max-width: 320px; }
  .hero-visual{ flex-direction:column; gap: .8em; }
  .hero-visual-panel{ max-width: 300px; }
}

/* ---- Feature strip (overlaps hero visual on desktop) ---- */
.home-features-box{
  width:100%; max-width: 1080px; background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--radius-l); box-shadow: var(--shadow-pop);
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.6em;
  padding: 1.8em 2em; margin-top: -3.2em; position: relative; z-index: 2;
}
.home-feature{ display:flex; align-items:flex-start; gap:.8em; text-align:left; }
.home-feature-icon{
  flex: none; width:42px; height:42px; border-radius: var(--radius-s);
  background: var(--paper-2); display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.home-feature-title{ font-weight:700; font-size:.92rem; margin-bottom:.2em; }
.home-feature-text{ font-size:.82rem; color: var(--gray); line-height:1.4; }
@media (max-width: 980px){ .home-features-box{ margin-top: .6em; } }

/* ---- Popular courses ---- */
.courses-section{
  width:100%; max-width: 1080px; display:flex; flex-direction:column; align-items:center; gap: 1.8em;
}
.courses-heading-wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.courses-eyebrow{ margin-bottom: .6em; }
.courses-heading{ margin:0; }
.home-cards-grid{
  display:grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 1.4em;
  width:100%;
}
.home-card{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  padding: 2em 1.8em; border-radius: var(--radius-l); color: var(--white);
  text-decoration:none; position:relative; overflow:hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow: var(--shadow-card);
}
.home-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-pop); }
.home-card-ge{ background: linear-gradient(160deg, #2C4FA0, var(--dark-bg)); }
.home-card-ielts{ background: linear-gradient(160deg, #7B5FD9, #4B3591); }
.home-card-cefr{ background: linear-gradient(160deg, var(--teal), var(--teal-deep)); }
.home-card-icon{
  width:52px; height:52px; border-radius: var(--radius-s); background: rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.2em;
}
.home-card-title{ font-family: var(--font-display); font-weight:700; font-size:1.4rem; margin-bottom:.4em; }
.home-card-sub{ font-size:.92rem; opacity:.9; line-height:1.5; margin-bottom:1.6em; }
.home-card-arrow{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  margin-top:auto; transition: background .2s var(--ease), transform .2s var(--ease);
}
.home-card:hover .home-card-arrow{ background: rgba(255,255,255,.32); transform: translateX(3px); }

.home-cta-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 1em;
}
.home-student-btn{
  font-size: 1rem; padding: .9em 2.1em; border-radius:999px;
  display:inline-flex; align-items:center; gap:.6em;
}
@media (max-width: 480px){
  .home-cta-row{ flex-direction:column; align-items:stretch; width:100%; max-width:360px; }
  .home-student-btn{ justify-content:center; }
}
@media (max-width: 900px){ .home-cards-grid{ grid-template-columns: 1fr; max-width: 460px; } }

/* ---- Stats bar ---- */
.stats-bar{
  width:100%; background: var(--dark-bg); border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
}
.stats-bar-inner{
  display:grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1080px; margin: 0 auto; padding: 2.2em 2em;
}
.stat-item{
  display:flex; align-items:center; gap: .9em; justify-content:center;
  border-left: 1px solid rgba(255,255,255,.14);
}
.stat-item:first-child{ border-left:none; }
.stat-icon{
  width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex:none;
}
.stat-item strong{
  display:block; font-family: var(--font-display); font-weight:700; color: var(--white); font-size:1.5rem; line-height:1.1;
}
.stat-item span{ display:block; color: rgba(255,255,255,.7); font-size:.8rem; margin-top:.15em; }
@media (max-width: 860px){
  .stats-bar-inner{ grid-template-columns: repeat(2, 1fr); gap: 1.6em 0; }
  .stat-item{ border-left:none; justify-content:flex-start; padding-left: 1em; }
}
@media (max-width: 480px){
  .stats-bar-inner{ grid-template-columns: 1fr; padding: 1.8em 1.6em; }
}

.home-rating-box{
  width:100%; max-width: 560px; background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--radius-l); box-shadow: var(--shadow-card);
  padding: 1.8em 2em; display:flex; flex-direction:column; align-items:center; gap: 1em;
  text-align:center; margin-top: .6em;
}
.rating-summary{ display:flex; flex-direction:column; align-items:center; gap:.35em; }
.rating-stars-display{ font-size:1.6rem; letter-spacing:.1em; line-height:1; }
.rating-stars-display .star{ color: var(--line); }
.rating-stars-display .star.full{ color: var(--amber); }
.rating-stars-display .star.half{
  background: linear-gradient(90deg, var(--amber) 50%, var(--line) 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rating-summary-text{ font-size:.9rem; color: var(--gray); margin:0; }

.rating-input{
  display:flex; flex-direction:column; align-items:center; gap:.7em;
  padding-top: 1em; border-top: 1px solid var(--line); width:100%;
}
.rating-input-label{ font-weight:700; font-size:.92rem; margin:0; }
.rating-stars-input{ display:flex; gap:.25em; }
.rating-star-btn{
  background:none; border:none; cursor:pointer; font-size:1.9rem; line-height:1; color: var(--line);
  padding:.1em .12em; transition: color .12s var(--ease), transform .12s var(--ease);
}
.rating-star-btn:hover, .rating-star-btn.is-hovered{ color: var(--amber); transform: translateY(-2px); }
.rating-star-btn:disabled{ cursor:default; transform:none; }
.rating-thanks{ font-size:.9rem; color: var(--amber-deep); font-weight:600; margin:0; }

@media (max-width: 640px){
  .home-rating-box{ padding: 1.4em 1.6em; }
  .rating-star-btn{ font-size:1.7rem; }
}

.home-blog-section{
  width:100%; max-width: 1080px; display:flex; flex-direction:column; align-items:center; gap:1.4em;
}
.home-blog-heading{
  font-family: var(--font-display); font-weight:700; font-size:1.7rem; color: var(--ink); margin:0;
}
.home-blog-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; width:100%;
}
.home-blog-card{
  display:flex; flex-direction:column; text-align:left; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-l);
  overflow:hidden; box-shadow: var(--shadow-card);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.home-blog-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-pop); }
.home-blog-card-link{ display:flex; flex-direction:column; text-decoration:none; color: inherit; }
.home-blog-card-img{ width:100%; height:170px; object-fit:cover; background: var(--paper-2); }
.home-blog-card-title{
  padding: 1.1em 1.3em 1.3em; font-weight:700; font-size:1rem; line-height:1.45; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.home-blog-vote-box{
  display:flex; gap:1em; padding: 0 1.3em 1.2em;
}
.blog-vote-btn-sm{ padding:.2em; font-size:.85rem; }

@media (max-width: 900px){
  .home-blog-grid{ grid-template-columns: 1fr; max-width: 460px; }
}

.blog-post-wrap{ max-width: 720px; width:100%; margin: 0 auto; }
.blog-post-loading{ text-align:center; color: var(--gray); padding: 3em 0; }
.blog-post-img{
  width:100%; max-height:420px; object-fit:cover; border-radius: var(--radius-l);
  box-shadow: var(--shadow-card); margin-bottom: 1.6em;
}
.blog-post-title{
  font-family: var(--font-display); font-weight:700; font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--ink); line-height:1.25; margin: 0 0 1.2em;
}
.blog-post-content{ font-size:1.05rem; }

.home-bottombar{ display:flex; flex-direction:column; align-items:center; gap:.8em; padding: 2.6em 1em 2.4em; }
.home-footer-note{ color: var(--gray); font-size:.82rem; }

/* ============================================================
   SITE FOOTER — brand / links / contact / rating, shared across
   the public pages (index, blog, blogs).
   ============================================================ */
.site-footer{ background: var(--footer-bg); color: color-mix(in srgb, var(--footer-text) 75%, transparent); margin-top: 5em; padding: 3.6em 1.5em 0; }
.site-footer-inner{ max-width: 1080px; margin: 0 auto; display:flex; flex-direction:column; gap: 2.6em; }
.site-footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: 2.6em 3.5em; }

.site-footer-brand{ display:flex; flex-direction:column; gap:.9em; max-width: 320px; }
.site-footer-brand-row{ display:flex; align-items:center; gap:.6em; }
.site-footer-brand-row .brand-mark-logo{ background: transparent !important; padding: 0; }
.site-footer-brand-name{ font-family: var(--font-display); font-weight:700; font-size:1.15rem; color: var(--footer-text); }
.site-footer-tagline{ font-size:.88rem; line-height:1.65; margin:0; color: color-mix(in srgb, var(--footer-text) 60%, transparent); }

.site-footer-cols{ display:flex; gap: 3.2em; flex-wrap:wrap; }
.site-footer-col-title{ color: var(--footer-text); font-family: var(--font-body); font-size:.76rem; text-transform:uppercase; letter-spacing:.09em; font-weight:700; margin: 0 0 1.1em; }
.site-footer-col a{ display:block; color: color-mix(in srgb, var(--footer-text) 72%, transparent); text-decoration:none; font-size:.9rem; margin-bottom:.75em; transition: color .15s var(--ease); }
.site-footer-col a:hover{ color: var(--amber); }

.site-footer-rating-wrap{ display:flex; justify-content:flex-start; }
.site-footer-rating-wrap .home-rating-box{
  background: none; border: none; box-shadow: none; padding: 0; margin-top: 0;
  max-width: 340px; align-items: flex-start; text-align: left; gap: .7em;
}
.site-footer-rating-wrap .rating-summary{ align-items:flex-start; }
.site-footer-rating-wrap .rating-stars-display{ font-size: 1.15rem; }
.site-footer-rating-wrap .rating-summary-text{ color: color-mix(in srgb, var(--footer-text) 55%, transparent); font-size:.82rem; }
.site-footer-rating-wrap .rating-input{
  align-items:flex-start; border-top-color: color-mix(in srgb, var(--footer-text) 16%, transparent); padding-top:.8em; gap:.5em;
}
.site-footer-rating-wrap .rating-input-label{ color: var(--footer-text); font-size:.85rem; }
.site-footer-rating-wrap .rating-stars-input{ gap:.15em; }
.site-footer-rating-wrap .rating-star-btn{ font-size: 1.4rem; color: color-mix(in srgb, var(--footer-text) 28%, transparent); }
.site-footer-rating-wrap .rating-star-btn:hover, .site-footer-rating-wrap .rating-star-btn.is-hovered{ color: var(--amber); }
.site-footer-rating-wrap .rating-thanks{ color: var(--amber); font-size:.82rem; }

.site-footer-bottom{
  border-top: 1px solid color-mix(in srgb, var(--footer-text) 14%, transparent); padding: 1.5em 0 2.2em;
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.8em;
  font-size:.82rem; color: color-mix(in srgb, var(--footer-text) 50%, transparent);
}
.site-footer-bottom a{ color: color-mix(in srgb, var(--footer-text) 60%, transparent); text-decoration:none; font-family: var(--font-mono); }
.site-footer-bottom a:hover{ color: var(--amber); }
.site-footer-bottom .home-footer-note{ color: inherit; }

@media (max-width: 640px){
  .site-footer-rating-wrap .home-rating-box{ padding:0; }
}

@media (max-width: 700px){
  .site-footer-top{ flex-direction:column; gap: 2.2em; }
  .site-footer-cols{ gap: 2.2em; }
  .site-footer-bottom{ flex-direction:column; align-items:flex-start; }
}
.home-admin-link{
  color: var(--btn-color); font-size:.85rem; font-weight:700; text-decoration:none; font-family: var(--font-mono);
  border: 1.5px solid var(--btn-color); border-radius: 999px; padding: .5em 1.2em;
  transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.home-admin-link:hover{ background: var(--btn-color); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.home-topbar-links{ display:flex; align-items:center; gap:.8em; }

@media (max-width: 900px){
  .home-cards-grid{ grid-template-columns: 1fr; max-width: 460px; }
  .home-features-box{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .home-topbar{ padding: 1.2em 1.4em; }
  .home-topbar-links{ gap:.5em; }
  .home-admin-link{ padding:.5em .9em; font-size:.78rem; }
  .home-features-box{ grid-template-columns: 1fr; padding: 1.4em 1.6em; }
}

/* ============ Level / course card grids (student + admin) ============ */
.level-grid, .course-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 1.8em 1.5em; margin-top: .4em;
}
.level-card, .course-card{ cursor:pointer; }
.level-title, .course-title{ margin: .6em 0 .3em; font-size: 1.15rem; }
.level-sub, .course-sub{ color: var(--gray); font-size:.85rem; margin:0; }
.level-card.is-locked, .course-card.is-locked{ cursor: not-allowed; }
.level-card.is-locked .folder-body, .course-card.is-locked .folder-body{ opacity:.6; }
.level-card.is-locked:hover .folder-body, .course-card.is-locked:hover .folder-body{ transform:none; box-shadow: var(--shadow-card); }
.badge-soon{
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
  background: var(--paper-2); color: var(--gray); padding: .3em .65em; border-radius: 999px; display:inline-block;
}

/* ============ Lesson detail (student) ============ */
.lesson-detail-box{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 2.4em 2.6em; box-shadow: var(--shadow-card); max-width: 820px;
}
.lesson-detail-links{ display:flex; gap: .9em; margin: 1.5em 0; flex-wrap:wrap; }
.lesson-detail-links a{
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none; font-weight:700; font-size:.88rem;
  color: var(--teal-deep); background: rgba(46,111,110,.08); border: 1px solid rgba(46,111,110,.2);
  padding: .7em 1.1em; border-radius: var(--radius-s); transition: all .15s var(--ease);
}
.lesson-detail-links a:hover{ background: var(--teal); color: var(--white); transform: translateY(-1px); }
.lesson-score{
  display:inline-block; font-family: var(--font-mono); font-size:.74rem; color: var(--teal-deep);
  background: rgba(46,111,110,.12); padding:.3em .7em; border-radius: 999px;
}

/* ============ Rich text content (rendered lesson/homework HTML) ============ */
.rich-content{ font-size:1rem; line-height:1.7; color: var(--ink-soft); overflow-wrap: anywhere; word-break: break-word; }
.rich-content img, .rte-editor img{ max-width:100%; height:auto; border-radius: var(--radius-s); margin: .6em 0; display:block; }
.rich-content p{ margin: 0 0 .8em; }
.rich-content p:last-child{ margin-bottom:0; }
.rich-content strong, .rich-content b{ font-weight: 800; color: var(--ink); }
.rich-content em, .rich-content i{ font-style: italic; }
.rich-content ul, .rich-content ol{ margin: 0 0 .8em; padding-left: 1.4em; }
.rich-content li{ margin-bottom: .3em; }
.rich-content a{ color: var(--teal-deep); text-decoration: underline; }

/* ============ Rich text editor (admin: lesson content / homework) ============ */
.rte-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.25em;
  padding:.4em; background: var(--paper-2); border: 1.5px solid var(--line); border-bottom:none;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.rte-btn{
  width: 32px; height: 32px; display:flex; align-items:center; justify-content:center;
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--font-body); font-weight: 700; font-size:.85rem; color: var(--ink);
  cursor:pointer; transition: all .12s var(--ease); flex: none; padding:0;
}
.rte-btn:hover{ background: var(--paper-3); }
.rte-btn:active{ transform: scale(.94); }
.rte-sep{ width:1px; height:22px; background: var(--line); margin: 0 .3em; flex: none; }
.rte-editor{
  min-height: 110px; max-height: 300px; overflow-y:auto;
  padding: .9em 1em; border: 1.5px solid var(--line); border-radius: 0 0 var(--radius-s) var(--radius-s);
  background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height:1.6;
}
.rte-editor:focus{ outline:none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(46,111,110,.12); }
.rte-editor p{ margin: 0 0 .7em; }
.rte-editor ul, .rte-editor ol{ margin: 0 0 .7em; padding-left: 1.3em; }
.rte-editor[data-placeholder]:empty::before{ content: attr(data-placeholder); color: var(--gray); pointer-events:none; }

/* ============ Homework reveal + answers (student) ============ */
.homework-block{ margin-top: 1.8em; padding-top: 1.6em; border-top: 1px solid var(--line); }
.homework-content{
  margin-top: 1.1em; background: var(--paper-2); padding: 1.3em 1.5em; border-radius: var(--radius-m);
  border-left: 3px solid var(--amber);
}
.homework-answer-area{ margin-top: 1.3em; padding-top: 1.2em; border-top: 1px dashed var(--line); }
.homework-answer-content{
  margin-top: 1em; background: rgba(46,111,110,.08); padding: 1.2em 1.4em; border-radius: var(--radius-m);
  border-left: 3px solid var(--teal);
}

/* ============ Quiz editor (admin) ============ */
.quiz-editor{ display:flex; flex-direction:column; gap: 1.1em; margin-top:.5em; }
.quiz-question-block{ border: 1.5px solid var(--line); border-radius: var(--radius-m); padding: 1.1em 1.2em; background: var(--paper); }
.quiz-question-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.8em; }
.quiz-question-num{ font-family: var(--font-mono); font-size:.76rem; font-weight:700; color: var(--teal-deep); letter-spacing:.04em; }
.quiz-q-text{
  width:100%; padding:.75em .9em; margin-bottom:.8em; border: 1.5px solid var(--line); border-radius: var(--radius-s);
  font-family: var(--font-body); font-size:.95rem; background: var(--white);
}
.quiz-options{ display:flex; flex-direction:column; gap:.55em; }
.quiz-option-row{ display:flex; align-items:center; gap:.7em; }
.quiz-option-row input[type="radio"]{ width:19px; height:19px; accent-color: var(--teal); flex:none; }
.quiz-option-row input[type="text"]{
  flex:1; padding:.6em .85em; border: 1.5px solid var(--line); border-radius: var(--radius-s);
  font-family: var(--font-body); font-size:.9rem; background: var(--white);
}
.quiz-empty{ color: var(--gray); font-size:.88rem; padding: 1em 0; }

/* ===== Placement test admin editor ===== */
.save-bar{ display:flex; align-items:center; gap:1em; margin-top:1.6em; }
.save-status{ font-size:.85rem; color: var(--gray); font-family: var(--font-mono); }
.placement-level-row{
  display:flex; align-items:center; gap:.7em; flex-wrap:wrap;
  background: var(--white); border:1.5px solid var(--line); border-radius: var(--radius-m);
  padding:.8em 1em; margin-bottom:.7em;
}
.placement-level-sep{ color: var(--gray); font-family: var(--font-mono); font-size:.78rem; white-space:nowrap; }
.placement-level-row input[type="number"]{
  width:72px; padding:.6em .5em; text-align:center; border-radius: var(--radius-s); border:1.5px solid var(--line);
  font-family: var(--font-body); background: var(--paper);
}
.placement-level-row input[type="text"]{
  flex:1; min-width:180px; padding:.6em .8em; border-radius: var(--radius-s); border:1.5px solid var(--line);
  font-family: var(--font-body); background: var(--paper);
}

/* Student-facing placement test */
.placement-intro-box{
  background: var(--white); border:1.5px solid var(--line); border-radius: var(--radius-m);
  padding: 2.2em 2.4em; text-align:center; max-width:620px; margin:0 auto;
}
.placement-prev-result{
  display:inline-flex; flex-direction:column; align-items:center; gap:.3em;
  background: var(--paper-2); border-radius: var(--radius-m); padding: 1em 1.6em; margin-top: 1.4em;
}
.placement-prev-result .placement-level-name{
  font-family: var(--font-display); font-weight:700; font-size:1.3rem; color: var(--teal-deep);
}
.placement-prev-result .placement-score-line{ font-size:.85rem; color: var(--gray); font-family: var(--font-mono); }
.placement-level-comment{
  background: var(--paper-2); border:1px solid var(--line); border-radius: var(--radius-s);
  padding: .9em 1.1em; margin-top: 1em; font-size:.9rem; line-height:1.6; color: var(--ink-soft);
  text-align:left; max-width: 480px; margin-left:auto; margin-right:auto;
}

/* ============ Quiz taking (student) ============ */
.quiz-box{ max-width: 720px; }
.quiz-progress{
  font-family: var(--font-mono); font-size:.8rem; color: var(--gray); margin-bottom: 1.6em;
}
.quiz-question{
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-m);
  padding: 1.7em 1.9em; margin-bottom: 1.3em; box-shadow: var(--shadow-card);
}
.quiz-question-title{ font-weight: 700; font-size: 1.05rem; margin-bottom: 1.1em; color: var(--ink); }
.quiz-option{
  display:flex; align-items:center; gap: .9em; padding: .95em 1.15em; margin-bottom:.7em;
  border: 1.5px solid var(--line); border-radius: var(--radius-s); cursor:pointer;
  transition: all .15s var(--ease); background: var(--paper);
}
.quiz-option:last-child{ margin-bottom:0; }
.quiz-option:hover{ border-color: var(--teal); background: rgba(46,111,110,.05); }
.quiz-option input[type="radio"]{ width:19px; height:19px; accent-color: var(--teal); flex:none; }
.quiz-option:has(input:checked){ border-color: var(--teal); background: rgba(46,111,110,.09); font-weight: 700; }
#submitQuizBtn{ margin-top: .6em; }

.quiz-result-box{
  max-width: 520px; margin: 3em auto 0; text-align:center; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-l); padding: 3.2em 2.6em; box-shadow: var(--shadow-pop);
}
.quiz-result-score{ font-family: var(--font-display); font-size: 4.2rem; font-weight: 700; margin: .3em 0 .5em; }
.quiz-result-pass{ color: var(--teal-deep); }
.quiz-result-fail{ color: var(--danger); }
.quiz-result-actions{ display:flex; gap: 1em; justify-content:center; margin-top: 1.8em; flex-wrap:wrap; }

/* ============ Payment gate (student) ============ */
.payment-box{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 2.6em 2.4em; max-width: 540px; box-shadow: var(--shadow-card);
}
.payment-price{ font-family: var(--font-display); font-size: 2.7rem; font-weight: 700; color: var(--amber-deep); margin: .2em 0 .7em; }
.payment-steps{ padding-left: 1.3em; color: var(--ink-soft); margin: 1.2em 0; }
.payment-steps li{ margin-bottom: .55em; }
.payment-card-box{
  background: var(--paper-2); border: 1.5px dashed var(--teal); border-radius: var(--radius-m);
  padding: 1.2em 1.4em; margin: 0 0 1.4em;
}
.payment-card-label{
  margin:0 0 .5em; font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color: var(--gray);
}
.payment-card-number-row{ display:flex; align-items:center; gap:1em; flex-wrap:wrap; }
.payment-card-number{
  font-family: var(--font-mono); font-size:1.3rem; font-weight:700; letter-spacing:.03em; color: var(--teal-deep);
}
.payment-card-holder{ margin:.5em 0 0; color: var(--ink-soft); font-weight:600; }
.payment-tg-link{
  display:inline-flex; align-items:center; gap:.5em; font-weight: 700; color: var(--white);
  background: #229ED9; padding: .8em 1.3em; border-radius: var(--radius-s); text-decoration:none;
  transition: all .15s var(--ease);
}
.payment-tg-link:hover{ background:#1c85ba; transform: translateY(-1px); }
.payment-pending-box{
  background: rgba(217,142,63,.12); border: 1px solid rgba(217,142,63,.35); color: var(--amber-deep);
  font-weight: 600; padding: 1.1em 1.3em; border-radius: var(--radius-s); margin:0;
}

@media (max-width: 640px){
  .lesson-detail-box{ padding: 1.6em 1.4em; }
  .quiz-question{ padding: 1.3em 1.4em; }
  .payment-box{ padding: 1.8em 1.5em; }
}

/* ===== Blog post — like/dislike + share ===== */
.blog-actions{
  margin-top: 2.2em; padding-top: 1.8em; border-top: 1.5px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 1.4em;
}
.blog-vote-box{ display:flex; gap:1.2em; }
.blog-vote-btn{
  display:flex; align-items:center; gap:.4em; padding:.3em .2em; border-radius: var(--radius-s);
  border:none; background: transparent; color: var(--ink);
  font-weight:700; font-size:.95rem; font-family: var(--font-body); cursor:pointer;
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.blog-vote-btn:hover:not(:disabled){ color: var(--teal); transform: translateY(-1px); }
.blog-vote-btn.is-active{ color: var(--teal); }
.blog-vote-btn:disabled{ cursor:default; }
.blog-vote-btn:disabled:not(.is-active){ opacity:.55; }

.blog-share-box{ display:flex; align-items:center; gap:.6em; flex-wrap:wrap; }
.blog-share-btn{
  display:inline-flex; align-items:center; gap:.4em; padding:.55em 1.05em; border-radius:999px;
  font-size:.85rem; font-weight:700; font-family: var(--font-body); text-decoration:none; border:1.5px solid var(--line); cursor:pointer;
  background: var(--paper-2); color: var(--ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.blog-share-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-card); }
.blog-share-btn.is-copied{ background: var(--teal); color: var(--white); border-color: var(--teal); }

@media (max-width: 560px){
  .blog-actions{ flex-direction:column; align-items:flex-start; }
}

/* ===== Blog post — izohlar (comments) ===== */
.blog-comments-section{ margin-top: 2em; }
.blog-comments-heading-row{
  display:flex; align-items:center; justify-content:space-between; gap:1em; flex-wrap:wrap; margin-bottom: .8em;
}
.blog-comments-heading{
  font-family: var(--font-display); font-weight:700; font-size:1.05rem; color: var(--ink); margin: 0;
}
.blog-comment-form{
  display:flex; flex-direction:column; gap:.55em; background: var(--paper-2); border:none;
  border-radius: var(--radius-m); padding: .9em 1em; margin-bottom: 1.2em;
}
.blog-comment-form input, .blog-comment-form textarea{
  font-family: var(--font-body); padding:.55em .8em; border-radius: var(--radius-s); border: 1.5px solid var(--line);
  background: var(--white); color: var(--ink); resize: vertical;
}
.blog-comment-form input:focus-visible, .blog-comment-form textarea:focus-visible{ outline: 2px solid var(--teal); outline-offset:1px; }
.blog-comment-form-row{ display:flex; justify-content:space-between; align-items:center; gap:1em; }
.blog-comment-error{
  color: var(--danger); font-size:.85rem; margin:0;
}

.blog-comment-list{ display:flex; flex-direction:column; }
.blog-comment-item{
  display:flex; align-items:flex-start; gap:.7em;
  padding: .8em 0; border-bottom: 1px solid var(--line);
}
.blog-comment-list > .blog-comment-item:last-child{ border-bottom: none; }
.blog-comment-avatar{
  flex: 0 0 auto; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:.74rem; font-family: var(--font-body);
}
.blog-comment-body{ flex:1; min-width:0; }
.blog-comment-item-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1em; margin-bottom:.2em; }
.blog-comment-author{ font-weight:700; font-size:.86rem; }
.blog-comment-date{ font-size:.7rem; color: var(--gray); font-family: var(--font-mono); white-space:nowrap; }
.blog-comment-text{ margin:0; font-size:.89rem; line-height:1.48; white-space:pre-wrap; word-break:break-word; color: var(--ink-soft); }
.blog-comment-text.is-clamped{
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-comment-more{
  background:none; border:none; padding:.35em 0 0; margin:0; color: var(--teal); font-weight:700;
  font-size:.8rem; font-family: var(--font-body); cursor:pointer;
}
.blog-comment-more:hover{ text-decoration:underline; }
.blog-comments-empty{ color: var(--gray); font-size:.9rem; }

.blog-post-date{
  font-family: var(--font-mono); font-size:.8rem; color: var(--gray); margin: -.6em 0 1.4em;
}

.blog-comment-votes{ display:flex; align-items:center; gap:1em; margin-top:.5em; }
.comment-vote-btn{
  display:flex; align-items:center; gap:.3em; padding:.1em; border-radius: var(--radius-s);
  border:none; background: transparent; color: var(--gray);
  font-weight:700; font-size:.78rem; font-family: var(--font-body); cursor:pointer;
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.comment-vote-btn:hover:not(:disabled){ color: var(--teal); transform: translateY(-1px); }
.comment-vote-btn.is-active{ color: var(--teal); }
.comment-vote-btn:disabled{ cursor:default; }
.comment-vote-btn:disabled:not(.is-active){ opacity:.55; }
.comment-reply-btn{
  border:none; background:transparent; padding:.1em; margin-left:auto;
  color: var(--gray); font-weight:700; font-size:.78rem; font-family: var(--font-body); cursor:pointer;
  transition: color .15s var(--ease);
}
.comment-reply-btn:hover{ color: var(--teal); text-decoration:underline; }

.blog-reply-form{
  display:flex; flex-direction:column; gap:.45em; background: var(--paper-2); border:none;
  border-radius: var(--radius-s); padding: .7em .8em; margin-top: .6em;
}
.blog-reply-form input, .blog-reply-form textarea{
  font-family: var(--font-body); padding:.5em .7em; border-radius: var(--radius-s); border: 1.5px solid var(--line);
  background: var(--white); color: var(--ink); resize: vertical;
}
.blog-reply-form input:focus-visible, .blog-reply-form textarea:focus-visible{ outline: 2px solid var(--teal); outline-offset:1px; }

.blog-comment-replies{
  display:flex; flex-direction:column; margin: .5em 0 0 1em;
  padding-left: .9em; border-left: 2px solid var(--line);
}
.blog-comment-item.is-reply{ padding: .6em 0; }
.blog-comment-replies > .blog-comment-item:last-child{ border-bottom: none; }
.blog-comment-item.is-reply .blog-comment-avatar{ width:26px; height:26px; font-size:.66rem; }

/* ===== Global loading overlay — shown briefly on every page load,
   covers the page until the site's Firestore branding settings are
   applied (either from cache almost instantly, or after the first
   network fetch), so visitors never see default colors/text flash
   before switching to the real branding. ===== */
#siteLoadingOverlay{
  position: fixed; inset: 0; z-index: 99999;
  display:flex; align-items:center; justify-content:center;
  background: var(--paper, #faf6ef);
  transition: opacity .35s ease;
}
#siteLoadingOverlay.is-hidden{ opacity: 0; pointer-events: none; }
.site-loading-inner{ display:flex; flex-direction:column; align-items:center; gap:1.1em; }
.site-loading-spinner{
  width: 40px; height:40px; border-radius:50%;
  border: 3.5px solid var(--line, #e4ddce);
  border-top-color: var(--amber, #d98e3f);
  animation: siteLoadingSpin .8s linear infinite;
}
.site-loading-text{
  font-family: var(--font-display, Georgia, serif); font-weight:700; font-size:1.35rem;
  color: var(--ink, #1c1c1c); letter-spacing:.01em; margin:0;
}
@keyframes siteLoadingSpin{ to{ transform: rotate(360deg); } }

/* ===== Admin — comment moderation modal ===== */
.comment-admin-list{ display:flex; flex-direction:column; gap: .9em; max-height: 52vh; overflow-y:auto; }
.comment-admin-item{
  display:flex; justify-content:space-between; gap:1em; background: var(--paper-2); border-radius: var(--radius-s);
  padding: .9em 1em;
}
.comment-admin-item-body{ flex:1; min-width:0; }
.comment-admin-item-head{ display:flex; gap:.7em; align-items:baseline; margin-bottom:.25em; }
.comment-admin-author{ font-weight:700; font-size:.88rem; }
.comment-admin-date{ font-size:.72rem; color: var(--gray); font-family: var(--font-mono); }
.comment-admin-text{ font-size:.88rem; line-height:1.45; white-space:pre-wrap; word-break:break-word; margin:0; }

/* =========================================================
   Admin panel — blue dashboard theme
   Scoped entirely to body.admin-theme (used only on
   dashboard_a.html) so nothing else on the site — including
   the student dashboard, which shares the same .admin-shell/
   .admin-nav/.stat-card/.level-card markup — is affected.
   Pure re-skin: no selector here changes structure, only look.
   ========================================================= */
body.admin-theme{
  --adm-bg:        #F3F6FC;
  --adm-navy:       #0E1836;
  --adm-navy-2:     #0A1228;
  --adm-blue:       #2F6FED;
  --adm-blue-deep:  #1E54C4;
  --adm-purple:     #7C5CFC;
  --adm-green:      #1FAE7A;
  --adm-orange:     #F0923D;
  --adm-ink:        #101B3D;
  --adm-gray:       #8892A6;
  --adm-line:       #E7EBF4;
  background: var(--adm-bg);
}

/* ---- Sidebar ---- */
body.admin-theme .admin-sidebar{
  background: linear-gradient(180deg, var(--adm-navy), var(--adm-navy-2));
  width: 272px; padding: 1.8em 1.3em;
  overflow-y: auto;
}
body.admin-theme .admin-sidebar::-webkit-scrollbar{ width: 4px; }
body.admin-theme .admin-sidebar::-webkit-scrollbar-track{ background: transparent; }
body.admin-theme .admin-sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius:4px; }
body.admin-theme .admin-sidebar .brand{
  display:flex; align-items:center; gap:.7em; margin-bottom: 2.2em; padding: 0 .3em;
}
body.admin-theme .admin-nav a{
  border-radius: 12px; padding: .8em 1em; font-size: .89rem; color: rgba(255,255,255,.62);
}
body.admin-theme .admin-nav a:hover{ background: rgba(255,255,255,.07); color: #fff; }
body.admin-theme .admin-nav a.active{
  background: var(--adm-blue); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(47,111,237,.65);
}
body.admin-theme .admin-user{
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: .8em 1em; justify-content:flex-start; gap:.7em;
}
body.admin-theme .admin-user::before{
  content: "🧑‍💼"; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--adm-blue); display:flex; align-items:center; justify-content:center;
  font-size: .95rem;
}
body.admin-theme .admin-user-name{ font-size: .78rem; word-break: break-all; }
body.admin-theme .admin-user-role{ color: rgba(255,255,255,.45); }
body.admin-theme .logout-btn{
  margin-left: auto; flex: none; border-radius: 8px; border-color: rgba(255,255,255,.18);
}
body.admin-theme .logout-btn:hover{ border-color: #E8604A; color: #E8604A; }

/* ---- Main area ---- */
body.admin-theme .admin-main{ background: var(--adm-bg); }
body.admin-theme .admin-header h1{ color: var(--adm-ink); }
body.admin-theme .admin-header p{ color: var(--adm-gray); }

/* ---- Buttons re-skinned blue ---- */
body.admin-theme .btn-amber, body.admin-theme .btn-primary, body.admin-theme .btn-teal{
  background: var(--adm-blue); border-color: var(--adm-blue);
}
body.admin-theme .btn-amber:hover, body.admin-theme .btn-primary:hover, body.admin-theme .btn-teal:hover{
  background: var(--adm-blue-deep); border-color: var(--adm-blue-deep);
}
body.admin-theme .btn-outline, body.admin-theme .btn-outline-teal{
  color: var(--adm-blue); border-color: var(--adm-blue);
}
body.admin-theme .btn-outline:hover, body.admin-theme .btn-outline-teal:hover{
  background: var(--adm-blue); color: #fff;
}
body.admin-theme .btn-ghost:hover{ border-color: var(--adm-blue); color: var(--adm-blue); }
body.admin-theme .btn:focus-visible{ outline-color: var(--adm-blue); }

/* ---- Stat cards (icon + number) ---- */
body.admin-theme .stat-card{
  position: relative; background: #fff; border: 1px solid var(--adm-line);
  border-radius: 18px; padding: 1.5em 1.4em 1.5em 5.6em;
  box-shadow: 0 10px 26px -18px rgba(16,27,61,.35);
}
body.admin-theme .stat-card::before{
  content: "📘"; position: absolute; left: 1.3em; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; font-size: 1.35rem;
  display:flex; align-items:center; justify-content:center;
  background: rgba(47,111,237,.12); color: var(--adm-blue);
}
body.admin-theme .stat-card:nth-child(2)::before{ content:"📝"; background: rgba(124,92,252,.12); color: var(--adm-purple); }
body.admin-theme .stat-card:nth-child(3)::before{ content:"👥"; background: rgba(31,174,122,.12); color: var(--adm-green); }
body.admin-theme .stat-card:nth-child(4)::before{ content:"🔒"; background: rgba(240,146,61,.14); color: var(--adm-orange); }
body.admin-theme .stat-card strong{ color: var(--adm-ink); font-size: 1.85rem; }
body.admin-theme .stat-card span{ color: var(--adm-gray); font-weight: 600; }

/* ---- Level / course / writing-track cards ---- */
body.admin-theme .level-card{ margin-top: 8px; }
body.admin-theme .level-card .folder-tab{
  position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 6px;
  clip-path: none; border-radius: var(--radius-m) var(--radius-m) 0 0;
  background: var(--adm-blue);
}
body.admin-theme .level-card:nth-of-type(4n+2) .folder-tab{ background: var(--adm-purple); }
body.admin-theme .level-card:nth-of-type(4n+3) .folder-tab{ background: var(--adm-green); }
body.admin-theme .level-card:nth-of-type(4n+4) .folder-tab{ background: var(--adm-orange); }
body.admin-theme .level-card:has(.badge-soon) .folder-tab{ background: #A6AFC2; }
body.admin-theme .level-card .folder-body{
  border-radius: var(--radius-m); border-color: var(--adm-line); padding-top: 1.9em;
}
body.admin-theme .level-card .folder-body::before{
  content: "📘"; display:flex; align-items:center; justify-content:center;
  width: 50px; height: 50px; border-radius: 50%; font-size: 1.3rem; margin-bottom: .8em;
  background: rgba(47,111,237,.12); color: var(--adm-blue);
}
body.admin-theme .level-card:nth-of-type(4n+2) .folder-body::before{ content:"🎓"; background: rgba(124,92,252,.12); color: var(--adm-purple); }
body.admin-theme .level-card:nth-of-type(4n+3) .folder-body::before{ content:"📈"; background: rgba(31,174,122,.12); color: var(--adm-green); }
body.admin-theme .level-card:nth-of-type(4n+4) .folder-body::before{ content:"🏅"; background: rgba(240,146,61,.14); color: var(--adm-orange); }
body.admin-theme .level-card:has(.badge-soon) .folder-body::before{ content:"🔒"; background: rgba(166,175,194,.18); color: #7C8698; }
body.admin-theme .level-title, body.admin-theme .course-title{ color: var(--adm-ink); }
body.admin-theme [data-toggle-lock]{
  width: 100%; justify-content:center; margin-top: 1em;
  background: var(--adm-blue); color:#fff; border-color: var(--adm-blue);
  border-radius: 10px; font-weight: 700;
}
body.admin-theme [data-toggle-lock]::before{ content:"🔒 "; }
body.admin-theme [data-toggle-lock]:hover{ background: var(--adm-blue-deep); border-color: var(--adm-blue-deep); color:#fff; }

/* ---- Tables, rows, chips ---- */
body.admin-theme table.data-table th{ background: var(--adm-bg); color: var(--adm-gray); }
body.admin-theme .table-wrap, body.admin-theme .lesson-row, body.admin-theme .blog-admin-card,
body.admin-theme .student-row{ border-color: var(--adm-line); border-radius: 16px; }
body.admin-theme .student-row:hover{ border-color: var(--adm-blue); box-shadow: 0 6px 16px -10px rgba(47,111,237,.35); }
body.admin-theme .student-row-avatar{ background: rgba(47,111,237,.12); color: var(--adm-blue); }
body.admin-theme .course-chip-approved{ background: rgba(31,174,122,.15); color: #128A5C; }
body.admin-theme .course-chip-pending{ background: rgba(240,146,61,.18); color: #C96F1F; }
body.admin-theme .student-row:hover .student-row-arrow{ color: var(--adm-blue); }
body.admin-theme .folder-row{ border-color: rgba(47,111,237,.25); background: rgba(47,111,237,.045); }
body.admin-theme .folder-row:hover{ border-color: var(--adm-blue); }
body.admin-theme .folder-row .lesson-index{ color: var(--adm-blue-deep); }
body.admin-theme .lesson-index{ color: var(--adm-blue-deep); }
body.admin-theme .lesson-links a{ color: var(--adm-blue-deep); }
body.admin-theme .breadcrumb-trail a:hover{ color: var(--adm-blue-deep); }
body.admin-theme .back-link:hover{ color: var(--adm-blue-deep); }
body.admin-theme .status-otildi{ background: rgba(47,111,237,.12); color: var(--adm-blue-deep); }
body.admin-theme .status-tayyor{ background: rgba(240,146,61,.16); color: #C96F1F; }

/* ---- Inputs / focus ---- */
body.admin-theme input:focus-visible, body.admin-theme textarea:focus-visible,
body.admin-theme select:focus-visible, body.admin-theme .folder-search:focus{
  border-color: var(--adm-blue); box-shadow: 0 0 0 3px rgba(47,111,237,.15);
}
body.admin-theme .field input:focus, body.admin-theme .field textarea:focus, body.admin-theme .field select:focus{
  border-color: var(--adm-blue); box-shadow: 0 0 0 3px rgba(47,111,237,.15);
}

/* ---- Toast / modal accents ---- */
body.admin-theme .toast{ background: var(--adm-ink); }
body.admin-theme .modal-box{ border-radius: 18px; }

@media (max-width: 900px){
  body.admin-theme .stat-card{ padding-left: 4.6em; }
  body.admin-theme .stat-card::before{ width:44px; height:44px; font-size:1.1rem; left:1em; }

  /* The unconditional "width:272px; padding:1.8em 1.3em" sidebar rule above
     has higher CSS specificity than the plain ".admin-sidebar" mobile rule,
     so without this override it wins even on phones and the sidebar stays
     stuck at a fixed 272px column instead of collapsing into the full-width
     mobile bar — that's the broken/cut-off top area on phones. Re-apply the
     mobile sizing here, scoped to admin-theme, so it actually takes over. */
  body.admin-theme .admin-sidebar{
    width:100%; padding:.9em 1.1em; height:auto; position:relative;
  }
  body.admin-theme .admin-sidebar .brand{ margin-bottom:0; }

  /* admin-user (avatar + logout) was fully hidden on mobile (display:none),
     which meant there was no way to log out from a phone. Show it as a
     compact row instead of hiding it. */
  body.admin-theme .admin-user{
    display:flex; width:100%; margin-top:.4em; padding:.7em .9em;
  }

  /* "Xabar yuborish" (Broadcast) and "Chatlar" (Chats) — move them out of
     the left-hand wrapping nav list on mobile and pin them as small
     icon-only buttons at the top right, in line with the brand row,
     instead of the left. Leave padding-right room on the brand so its
     text never runs under them. */
  body.admin-theme .admin-sidebar .brand{ padding-right: 5.6em; box-sizing: border-box; }

  body.admin-theme #navBroadcast,
  body.admin-theme #navChats{
    position: absolute; top: .9em; z-index: 2;
    width: 38px; height: 38px; padding: 0;
    border-radius: 50%; display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,.08); font-size: 1.05rem;
  }
  body.admin-theme #navBroadcast{ right: 3.5em; }
  body.admin-theme #navChats{ right: .9em; }
  body.admin-theme #navBroadcast:hover, body.admin-theme #navChats:hover{
    background: rgba(255,255,255,.16);
  }
  body.admin-theme #navBroadcast.active, body.admin-theme #navChats.active{
    background: var(--adm-blue); box-shadow: 0 6px 14px -6px rgba(47,111,237,.65);
  }
  body.admin-theme #navBroadcast .nav-label,
  body.admin-theme #navChats .nav-label{ display:none; }
}

/* ---- Student dashboard specifics (dashboard.html shares body.admin-theme
   with the admin panel, but already renders its own real avatar emoji and
   uses .is-locked instead of a "🔒 Qulflangan" badge — handle both. ---- */
body.admin-theme .admin-user:has(.sidebar-avatar)::before{ content: none; }
body.admin-theme .sidebar-avatar{
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff;
}
body.admin-theme .level-card.is-locked .folder-tab{ background: #A6AFC2 !important; }
body.admin-theme .level-card.is-locked .folder-body::before{
  content: "🔒" !important; background: rgba(166,175,194,.18) !important; color: #7C8698 !important;
}
body.admin-theme .level-card.is-locked .level-title{ color: var(--adm-gray); }

/* ---- Student "Mening profilim" page ---- */
body.admin-theme .profile-card{
  background: #fff; border: 1px solid var(--adm-line); border-radius: 18px;
  padding: 2em 2.2em; box-shadow: 0 10px 26px -18px rgba(16,27,61,.35);
}
body.admin-theme .profile-avatar-big{
  background: rgba(47,111,237,.12); border: 1.5px solid rgba(47,111,237,.25);
}
body.admin-theme .emoji-picker-grid{ background: var(--adm-bg); }
body.admin-theme .emoji-picker-btn:hover{ border-color: var(--adm-blue); }
body.admin-theme .field input:focus-visible, body.admin-theme .field textarea:focus-visible{
  border-color: var(--adm-blue);
}

/* ---- Student home page: "latest homework" highlight box ---- */
body.admin-theme .latest-hw-box{
  background: linear-gradient(155deg, var(--adm-blue), var(--adm-blue-deep));
  color: #fff; border-radius: 18px; padding: 1.6em 1.8em;
  margin-bottom: 2em; box-shadow: 0 14px 30px -16px rgba(47,111,237,.55);
}
body.admin-theme .latest-hw-head{
  display:flex; align-items:center; justify-content:space-between; gap:1em; flex-wrap:wrap;
  margin-bottom:.6em;
}
body.admin-theme .latest-hw-eyebrow{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  background: rgba(255,255,255,.16); padding:.35em .8em; border-radius:999px;
}
body.admin-theme .latest-hw-date{ font-size:.8rem; color: rgba(255,255,255,.75); font-family: var(--font-mono); }
body.admin-theme .latest-hw-title{ margin:.2em 0 .35em; color:#fff; font-size:1.3rem; }
body.admin-theme .latest-hw-preview{
  color: rgba(255,255,255,.85); margin:0 0 1.1em; font-size:.92rem;
  white-space: pre-line; /* keep the line breaks inserted by loadLatestHomework() */
}
body.admin-theme .latest-hw-box .btn-amber{
  background:#fff; color: var(--adm-blue-deep); border-color:#fff;
}
body.admin-theme .latest-hw-box .btn-amber:hover{ background: rgba(255,255,255,.9); }

/* ---- Optional "did you do the homework?" status buttons ----
   Purely a self-reported, client-side toggle (same "remember in this
   browser" pattern already used for blog likes) — nothing is required,
   nothing is sent anywhere, a student can leave both unselected. */
.hw-status-row{ display:flex; gap:.6em; flex-wrap:wrap; margin-top:1em; }
.hw-status-btn{
  font-family: var(--font-body); font-size:.85rem; font-weight:700; cursor:pointer;
  border-radius: 999px; padding:.55em 1.1em; border:1.5px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.08); color:#fff; transition: all .15s var(--ease);
}
.hw-status-btn:hover{ background: rgba(255,255,255,.18); }
.hw-status-btn.is-active{ background:#fff; color: var(--adm-blue-deep); border-color:#fff; }
.hw-status-btn.is-active[data-status="undone"]{ background:#FFE3D6; color:#A63A1F; border-color:#FFE3D6; }

/* Same buttons, used on the plain-white kundalik.html modal (not inside
   the blue admin-theme card), so give them a light-surface variant too. */
.hw-status-btn-light{
  font-family: var(--font-body); font-size:.85rem; font-weight:700; cursor:pointer;
  border-radius: 999px; padding:.55em 1.1em; border:1.5px solid var(--line);
  background: var(--paper-2); color: var(--ink); transition: all .15s var(--ease);
}
.hw-status-btn-light:hover{ border-color: var(--teal); }
.hw-status-btn-light.is-active{ background: var(--teal); color:#fff; border-color: var(--teal); }
.hw-status-btn-light.is-active[data-status="undone"]{ background:#E8604A; border-color:#E8604A; color:#fff; }

/* ---- Student home page: menu cards (Homework / Test natijalar /
   Darajani bilish testi / Kurslarim / Insholarim) ---- */
body.admin-theme .home-menu-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
  gap: 1.3em; margin-top: .4em;
}
body.admin-theme .home-menu-card{
  display:flex; flex-direction:column; text-decoration:none; cursor:pointer;
  background:#fff; border:1px solid var(--adm-line); border-radius: 20px;
  padding: 1.5em 1.5em 1.6em; box-shadow: 0 10px 26px -20px rgba(16,27,61,.35);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
body.admin-theme .home-menu-card:hover{
  transform: translateY(-5px); border-color: transparent;
  box-shadow: 0 18px 34px -16px rgba(16,27,61,.28);
}
body.admin-theme .home-menu-top{
  display:flex; align-items:center; justify-content:space-between; margin-bottom: 1.1em;
}
body.admin-theme .home-menu-icon{
  width: 52px; height: 52px; border-radius: 15px; font-size: 1.5rem;
  display:flex; align-items:center; justify-content:center; flex:none;
}
body.admin-theme .home-menu-icon-blue{   background: rgba(47,111,237,.12); color: var(--adm-blue); }
body.admin-theme .home-menu-icon-orange{ background: rgba(240,146,61,.14); color: var(--adm-orange); }
body.admin-theme .home-menu-icon-purple{ background: rgba(124,92,252,.14); color: var(--adm-purple); }
body.admin-theme .home-menu-icon-green{  background: rgba(31,174,122,.14); color: var(--adm-green); }
body.admin-theme .home-menu-icon-teal{   background: rgba(20,156,140,.14); color: #149C8C; }
body.admin-theme .home-menu-arrow{
  width: 30px; height: 30px; border-radius: 50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--adm-bg); color: var(--adm-gray); font-size: 1rem;
  transition: all .2s var(--ease);
}
body.admin-theme .home-menu-card:hover .home-menu-arrow{
  background: var(--adm-blue); color:#fff; transform: translateX(3px);
}
body.admin-theme .home-menu-title{
  margin: 0 0 .35em; font-size: 1.12rem; color: var(--adm-ink);
}
body.admin-theme .home-menu-desc{
  margin:0; font-size: .85rem; color: var(--adm-gray); line-height:1.5;
}

@media (max-width: 640px){
  body.admin-theme .home-menu-grid{ grid-template-columns: 1fr 1fr; gap:.9em; }
  body.admin-theme .home-menu-card{ padding: 1.2em 1.2em 1.3em; border-radius:16px; }
  body.admin-theme .home-menu-icon{ width:44px; height:44px; font-size:1.25rem; border-radius:12px; }
}

/* ============ Test natijalar (gradebook) — admin panel section ============ */
.gb-stats-row{ display:flex; gap:1em; flex-wrap:wrap; margin-bottom:1.4em; }
.gb-stats-box{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-m);
  padding: 1em 1.3em; min-width:180px;
}
.gb-stats-label{ display:block; font-size:.78rem; color: var(--gray); margin-bottom:.3em; }
.gb-stats-value{ font-family: var(--font-display); font-size:1.6rem; }
.gb-stats-value-sm{ font-family: var(--font-mono); font-size:.85rem; }

.gb-chip-list{ display:flex; flex-wrap:wrap; gap:.5em; }
.gb-chip{
  display:flex; align-items:center; gap:.5em; background: var(--paper-2);
  border:1.5px solid var(--line); border-radius:999px; padding:.4em .5em .4em 1em;
  font-size:.85rem; font-weight:600;
}
.gb-chip button{
  background:none; border:none; color: var(--gray); cursor:pointer; font-size:.85rem;
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.gb-chip button:hover{ background: var(--danger); color:#fff; }

.gb-group-folders{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:.8em; }
.gb-group-folder{
  display:flex; align-items:center; gap:.6em; background: var(--paper-2);
  border:1.5px solid var(--line); border-radius: var(--radius-s); padding:.9em 1em;
  cursor:pointer; font-family: inherit; transition: all .15s var(--ease);
}
.gb-group-folder:hover{ border-color: var(--teal); }

.gb-grades-table{ width:100%; border-collapse:collapse; min-width:520px; }
.gb-grades-table th, .gb-grades-table td{
  padding:.6em .7em; border-bottom:1px solid var(--line); text-align:left; font-size:.88rem;
}
.gb-grades-table th{ color: var(--gray); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.gb-grades-table input[type="number"]{
  width:64px; padding:.4em .5em; border:1.5px solid var(--line); border-radius: var(--radius-s);
  font-family: inherit; text-align:center;
}

body.admin-theme .gb-stats-box{ border-color: var(--adm-line); border-radius:16px; }
body.admin-theme .gb-stats-value{ color: var(--adm-ink); }
body.admin-theme .gb-chip{ background: var(--adm-bg); border-color: var(--adm-line); }
body.admin-theme .gb-group-folder{ background: var(--adm-bg); border-color: var(--adm-line); }
body.admin-theme .gb-group-folder:hover{ border-color: var(--adm-blue); }
body.admin-theme .gb-grades-table input:focus-visible{ border-color: var(--adm-blue); }

/* ============================================================
   NOTIFICATIONS + CHAT + ACHIEVEMENTS LABEL
   ============================================================ */

/* Notification badge on bell icon */
.notif-badge{
  display:inline-flex; align-items:center; justify-content:center;
  background: #e53e3e; color:#fff; border-radius:50%;
  min-width:18px; height:18px; font-size:.72rem; font-weight:700;
  padding:0 4px; line-height:1;
}

/* Notification card */
.notif-card{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-s);
  padding:.9em 1.1em; cursor:pointer; transition: border-color .15s;
}
.notif-card:hover{ border-color: var(--teal); }
.notif-card.notif-read{ opacity:.6; }
.notif-card-head{ display:flex; justify-content:space-between; align-items:center; gap:.5em; flex-wrap:wrap; }
.notif-card-title{ font-weight:700; }
.notif-card-date{ font-size:.8rem; color:var(--gray); }
.notif-card-body{ margin:.4em 0 0; color:var(--gray); font-size:.92rem; }

body.admin-theme .notif-card{ background:var(--adm-bg); border-color:var(--adm-line); }

/* Chat box (student side) */
.chat-box{
  display:flex; flex-direction:column;
  border:1.5px solid var(--line); border-radius:var(--radius-s);
  overflow:hidden; max-width:720px; height:520px;
}
.chat-messages{
  flex:1; overflow-y:auto; padding:1.1em 1.2em;
  display:flex; flex-direction:column; gap:.7em;
  background:#f9fafb;
}
.chat-msg{ display:flex; flex-direction:column; max-width:76%; }
.chat-msg-row{ display:flex; align-items:flex-end; gap:.5em; }
.chat-msg-row.is-mine{ justify-content:flex-end; }
.chat-msg-avatar{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:#fff;
}
.chat-msg-student{ align-self:flex-end; align-items:flex-end; }
.chat-msg-teacher{ align-self:flex-start; align-items:flex-start; }
.chat-msg-bubble{
  padding:.55em .9em; border-radius:14px; font-size:.95rem; line-height:1.45;
  word-break:break-word; white-space:pre-wrap;
}
.chat-msg-student .chat-msg-bubble{ background:var(--amber); color:#fff; border-bottom-right-radius:4px; }
.chat-msg-teacher .chat-msg-bubble{ background:#fff; border:1.5px solid var(--line); border-bottom-left-radius:4px; }
.chat-msg-meta{ font-size:.75rem; color:var(--gray); margin-top:.2em; display:flex; align-items:center; gap:.35em; }
.chat-msg-ticks{ letter-spacing:-2px; font-size:.9em; color:var(--gray); }
.chat-msg-ticks.is-read{ color:#34b7f1; }
.chat-date-sep{ display:flex; justify-content:center; margin:.4em 0 1em; }
.chat-date-sep span{
  background:var(--paper-2); color:var(--gray); font-size:.75rem; font-weight:700;
  padding:.4em 1em; border-radius:999px;
}
.chat-input-row{ display:flex; align-items:center; gap:.6em; padding:.8em; border-top:1.5px solid var(--line); background:#fff; }
.chat-textarea{ flex:1; font-family:inherit; font-size:.95rem; padding:.6em .8em; border:1.5px solid var(--line); border-radius:var(--radius-s); resize:none; }
.chat-textarea:focus{ outline:none; border-color:var(--teal); }
.chat-send-btn{
  flex:none; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; line-height:1;
  background:var(--amber); color:#fff; transition:transform .15s, background .15s, opacity .15s;
}
.chat-send-btn:hover{ transform:translateY(-1px); background:var(--amber-deep); }
.chat-send-btn:disabled{ opacity:.5; cursor:default; transform:none; }

body.admin-theme .chat-msg-teacher .chat-msg-bubble{ background:var(--adm-bg); border-color:var(--adm-line); }
body.admin-theme .chat-msg-student .chat-msg-bubble{ background:var(--adm-blue); }
body.admin-theme .chat-date-sep span{ background:var(--adm-bg); color:var(--adm-gray); }
body.admin-theme .chat-input-row{ background:var(--adm-bg); border-color:var(--adm-line); }
body.admin-theme .chat-textarea{ background:#fff; border-color:var(--adm-line); color:var(--adm-ink); }
body.admin-theme .chat-send-btn{ background:var(--adm-blue); }
body.admin-theme .chat-send-btn:hover{ background:var(--adm-blue-deep); }

/* ===== Xabarlar (admin chat inbox) — full re-design ===== */
.chat-page-header{ align-items:center; }
.chat-header-actions{ display:flex; align-items:center; gap:.8em; flex-wrap:wrap; }
.chat-search-box{
  display:flex; align-items:center; gap:.5em; background:var(--white);
  border:1.5px solid var(--line); border-radius:999px; padding:.55em 1.1em;
  min-width:220px;
}
.chat-search-box-icon{ color:var(--gray); font-size:.85rem; }
.chat-search-box input{
  border:none; outline:none; background:transparent; font-family:inherit;
  font-size:.88rem; flex:1; min-width:0; color:var(--ink);
}
.chat-grid{
  display:grid; grid-template-columns:300px 1fr; gap:1.2em;
  height:calc(100vh - 220px); min-height:440px;
}
.chat-panel{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-l);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 10px 26px -20px rgba(20,33,61,.25);
}
.chat-panel-list{ padding:0; }
.chat-list-header{ padding:1em 1.2em .9em; border-bottom:1px solid var(--line); flex:none; }
.chat-list-tab{
  display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:.85rem;
  background:var(--paper-2); padding:.5em 1em; border-radius:999px; color:var(--ink);
}
.chat-list-count{ background:var(--white); border-radius:999px; padding:.05em .55em; font-size:.76rem; }
.chat-list{ flex:1; overflow-y:auto; }
.chat-student-item{ border-bottom:1px solid var(--line); }
.chat-student-item:last-child{ border-bottom:none; }
.chat-item-body{
  display:flex; align-items:center; gap:.8em; padding:.85em 1.1em; cursor:pointer;
  transition:background .15s;
}
.chat-item-body:hover{ background:var(--paper-2); }
.chat-student-item.is-active .chat-item-body{ background:var(--paper-2); }
.chat-item-avatar{
  flex:none; width:42px; height:42px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-weight:700; font-size:1rem; color:#fff;
}
.chat-item-main{ flex:1; min-width:0; }
.chat-item-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.5em; }
.chat-item-name{ font-weight:700; font-size:.92rem; }
.chat-item-time{ flex:none; font-size:.72rem; color:var(--gray); }
.chat-item-bottom{ display:flex; align-items:center; justify-content:space-between; gap:.5em; margin-top:.2em; }
.chat-item-preview{ font-size:.82rem; color:var(--gray); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item-unread{
  flex:none; background:#E53E3E; color:#fff; border-radius:999px; min-width:20px; height:20px;
  padding:0 .35em; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700;
}
.chat-item-del{
  flex:none; opacity:0; transition:opacity .15s; background:none; border:none; cursor:pointer;
  font-size:.85rem; padding:.2em; line-height:1;
}
.chat-item-body:hover .chat-item-del{ opacity:.55; }
.chat-item-del:hover{ opacity:1 !important; }
.chat-panel-detail{ padding:0; }
.chat-detail-header{
  display:flex; align-items:center; gap:.8em; padding:1em 1.3em; border-bottom:1px solid var(--line); flex:none;
}
.chat-detail-avatar{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:.9rem; flex:none; background:var(--gray);
}
.chat-detail-name{ font-weight:700; font-size:1rem; }
.chat-detail-name.chat-detail-empty{ color:var(--gray); font-weight:600; }
.chat-panel-detail .chat-messages{ flex:1; }
.chat-panel-detail .chat-input-row{ flex:none; }

body.admin-theme .chat-search-box{ border-color:var(--adm-line); }
body.admin-theme .chat-search-box input{ color:var(--adm-ink); }
body.admin-theme .chat-panel{ border-color:var(--adm-line); box-shadow:0 12px 30px -22px rgba(16,27,61,.3); }
body.admin-theme .chat-list-header, body.admin-theme .chat-detail-header{ border-color:var(--adm-line); }
body.admin-theme .chat-list-tab{ background:var(--adm-bg); color:var(--adm-ink); }
body.admin-theme .chat-student-item{ border-color:var(--adm-line); }
body.admin-theme .chat-item-body:hover,
body.admin-theme .chat-student-item.is-active .chat-item-body{ background:var(--adm-bg); }
body.admin-theme .chat-item-preview, body.admin-theme .chat-item-time{ color:var(--adm-gray); }
body.admin-theme .chat-detail-name{ color:var(--adm-ink); }

/* Student's single-conversation chat view — reuses the admin chat-panel/
   chat-detail-header look, but full width and full height since there's
   no side list (a student only ever has one conversation: the teacher). */
.chat-panel-solo{ height:calc(100vh - 220px); min-height:440px; }
.chat-detail-avatar-teacher{ background:var(--teal); }
body.admin-theme .chat-detail-avatar-teacher{ background:var(--adm-blue); }

/* Admin "Chatlar" view — the student-list + conversation panel was a fixed
   280px / 1fr grid. On a phone that left almost no width for the message
   textarea (it only got the leftover sliver after the 280px column), so
   typing was effectively impossible. Stack it into one column instead. */
@media (max-width: 760px){
  .chat-grid{
    grid-template-columns: 1fr !important;
    height: auto !important; min-height: 0 !important;
  }
  .chat-panel-list{ max-height: 260px; }
  .chat-panel-detail{ height: 62vh; min-height: 380px; }
  .chat-textarea{ font-size: 16px; min-height: 44px; } /* 16px avoids iOS auto-zoom on focus */
  .chat-header-actions{ width:100%; }
  .chat-search-box{ flex:1; min-width:0; }
}

/* Hero achievements overlay — sits at the TOP of the certificate panel */
.hero-achievements-overlay{
  position:absolute; top:0; left:0; right:0; z-index:3;
  font-family:'Manrope', sans-serif; font-weight:800; font-size:.95rem;
  color:#fff; background:var(--amber, #D98E3F);
  text-align:center; padding:.5em 1em;
  letter-spacing:.03em;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* Top-right notification + chat icon buttons (student dashboard) */
.student-topbar-icons{
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 18px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: .5em;
}
.topbar-icon-btn{
  position: relative;
  background: var(--surface, #fff);
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 50%;
  width: 42px; height: 42px;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: box-shadow .15s, border-color .15s;
}
.topbar-icon-btn:hover{ border-color: var(--teal, #2E6F6E); box-shadow: 0 4px 14px rgba(0,0,0,.13); }
.topbar-icon-btn .notif-badge{
  position: absolute;
  top: -4px; right: -4px;
  min-width: 17px; height: 17px;
  font-size: .68rem;
  padding: 0 3px;
}
body.admin-theme .topbar-icon-btn{
  background: var(--adm-bg, #1e293b);
  border-color: var(--adm-line, #334155);
  color: #fff;
}