/* ===================== A2 TUTION — CORE THEME ===================== */
:root{
  --red: #E8302A;
  --orange: #F7941D;
  --gradient: linear-gradient(135deg, var(--red), var(--orange));
  --bg: #FFFFFF;
  --bg-soft: #FFF7F2;
  --ink: #1E1E1E;
  --ink-soft: #6B6B6B;
  --line: #F0E3DC;
  --card: #FFFFFF;
  --shadow: 0 6px 20px rgba(232,48,42,0.08);
  --gold: #D4AF37;
  --gold-bg: linear-gradient(135deg,#FFF8DC,#FFE9A8);
  --green: #1FA25A;
  --danger: #E8302A;
  --radius: 18px;
  --radius-sm: 12px;
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; touch-action: manipulation; overscroll-behavior-y: none;}
/* Slightly smaller overall UI, per request — scales the whole app down a
   touch (fonts, paddings, icons, everything) without having to touch every
   rule individually. `zoom` reflows layout (unlike transform:scale, which
   would just distort/blur), so 100%/100vh containers still fill correctly. */
html{zoom:0.90;}
body{
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable="true"]{
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input, textarea, select{font-family:inherit; font-size:15px;}
a{color:inherit; text-decoration:none;}

#app{
  max-width:480px;
  margin:0 auto;
  /* Compensate for the 10% zoom-out below: without this, #app's real
     height stays 100vh while its *rendered* (zoomed) size shrinks to 90%
     of that, leaving an empty gap at the bottom of the screen. Scaling the
     target height up first cancels that out so it still fills the screen
     exactly after zooming. */
  min-height:calc(100vh / 0.90);
  position:relative;
  background:var(--bg);
  display:flex;
  flex-direction:column;
}

.screen{display:none; flex:1; flex-direction:column; min-height:calc(100vh / 0.90); animation:fadeIn .25s ease;}
.screen.active{display:flex;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Buttons ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px; border-radius:14px; font-weight:600; font-size:15px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:active{transform:scale(.97);}
.btn-primary{ background:var(--gradient); color:#fff; box-shadow:0 8px 18px rgba(232,48,42,.28);}
.btn-outline{ background:#fff; color:var(--ink); border:1.5px solid var(--line);}
.btn-google{ background:#fff; color:var(--ink); border:1.5px solid var(--line); }
.btn-block{width:100%;}
.btn-sm{padding:9px 14px; font-size:13px; border-radius:10px;}
.btn-danger{background:#FDEDEC; color:var(--danger);}
.btn-ghost{background:transparent; color:var(--red); font-weight:600;}

/* ---------- Auth Screens ---------- */
.auth-wrap{
  flex:1; display:flex; flex-direction:column; padding:0 26px 30px;
  position:relative; overflow:hidden;
}
.auth-curve-top{
  position:absolute; top:0; left:0; right:0; height:120px;
  background:var(--gradient); border-radius:0 0 50% 50%/0 0 40% 40%;
  opacity:.08; z-index:0;
}
.auth-curve-bottom{
  position:absolute; bottom:0; left:0; right:0; height:140px;
  background:var(--gradient); clip-path: ellipse(75% 100% at 50% 100%);
  opacity:.95; z-index:0;
}
.auth-content{position:relative; z-index:1; padding-top:50px;}
.auth-logo{width:96px; height:96px; margin:0 auto 14px; border-radius:24px; box-shadow:0 10px 24px rgba(232,48,42,.25);}
.auth-brand{text-align:center; font-size:26px; font-weight:800; letter-spacing:.3px;}
.auth-brand span{color:var(--red);}
.auth-tag{text-align:center; color:var(--ink-soft); font-size:13px; margin-bottom:28px;}
.auth-title{font-size:22px; font-weight:700; margin-bottom:4px;}
.auth-sub{color:var(--ink-soft); font-size:13.5px; margin-bottom:22px;}

.field{
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--line); border-radius:14px; padding:13px 16px; margin-bottom:14px;
  background:#fff;
}
.field input{flex:1; border:none; outline:none; background:transparent; font-size:14.5px;}
.field .icon{width:18px; height:18px; opacity:.55; flex-shrink:0;}
.field .toggle-eye{opacity:.5; cursor:pointer;}

.row-between{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; font-size:13px;}
.remember{display:flex; align-items:center; gap:7px; color:var(--ink-soft);}
.forgot{color:var(--red); font-weight:600;}

.divider{display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--ink-soft); font-size:12.5px;}
.divider::before, .divider::after{content:''; flex:1; height:1px; background:var(--line);}

.switch-line{text-align:center; margin-top:18px; font-size:13.5px; color:var(--ink-soft);}
.switch-line b{color:var(--red);}

/* ---------- Top Bar ---------- */
.topbar{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
}
.topbar-logo{width:38px; height:38px; border-radius:10px; flex-shrink:0;}
.topbar-title{font-weight:800; font-size:17px; flex:1;}
.topbar-title span{color:var(--red);}
.icon-btn{position:relative; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg-soft);}
.icon-btn svg{width:19px; height:19px;}
.badge-dot{position:absolute; top:5px; right:6px; width:9px; height:9px; border-radius:50%; background:var(--red); border:2px solid #fff;}

/* Small red "new activity" dot used on Home feature cards, Teacher Panel
   cards, and the Teacher Panel entry button — shown whenever there's a new
   message/upload the person hasn't opened yet, hidden otherwise. */
.card-dot{
  display:none; position:absolute; top:8px; right:8px; width:10px; height:10px;
  border-radius:50%; background:var(--red); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.05); z-index:2;
}
.card-dot.show{display:block;}

/* ---------- Poster Slider ---------- */
.slider-wrap{position:relative; overflow:hidden; background:#000;}
.slider-track{display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1);}
.slide{min-width:100%; aspect-ratio:16/9; position:relative;}
.slide img{width:100%; height:100%; object-fit:cover;}
.slide.clickable{cursor:pointer;}
.dots{display:flex; justify-content:center; gap:6px; padding:10px 0 4px;}
.dot{width:7px; height:7px; border-radius:50%; background:var(--line); transition:all .3s;}
.dot.active{width:20px; background:var(--gradient); border-radius:4px;}

.ticker-wrap{
  background:var(--bg-soft); border-bottom:1px solid var(--line); padding:9px 0; overflow:hidden; white-space:nowrap;
  display:flex; align-items:center; position:relative; isolation:isolate; contain:layout paint;
}
.ticker-icon{padding-left:14px; flex-shrink:0; position:relative; z-index:2; background:var(--bg-soft);}
.ticker-track{display:inline-block; flex-shrink:0; animation:ticker 15s linear infinite; font-size:13px; color:var(--ink); font-weight:500; position:relative; z-index:1;}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- Feature Grid ---------- */
.grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; padding:16px;}
.feature-card{
  position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:16px 8px; display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; box-shadow:var(--shadow); transition:transform .15s;
}
.feature-card:active{transform:scale(.95);}
.feature-icon{
  width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--gradient); color:#fff;
}
.feature-icon svg{width:22px; height:22px;}
.feature-label{font-size:12.5px; font-weight:600; line-height:1.3;}

/* ---------- Bottom Nav (Teacher) ---------- */
.bottom-space{height:20px;}

/* ---------- Generic List Screen Header ---------- */
.page-header{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:#fff; z-index:20;
}
.back-btn{width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--bg-soft);}
.page-title{font-weight:700; font-size:17px; flex:1;}

.content-scroll{flex:1; overflow-y:auto; padding:14px 16px 30px;}

/* ---------- Cards (Notes/Photos list) ---------- */
.item-card{
  display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow);
}
.item-thumb{width:46px; height:46px; border-radius:10px; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;}
.item-thumb svg{width:22px; height:22px;}
.item-thumb img{width:100%; height:100%; object-fit:cover; border-radius:10px;}
.item-info{flex:1; min-width:0;}
.item-title{font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.item-sub{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.item-arrow{opacity:.35;}

/* ---------- Status chip (Attempt / Not Attempt) ---------- */
.status-chip{font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap; flex-shrink:0;}
.status-chip.attempt{background:#E8F8EE; color:var(--green);}
.status-chip.not-attempt{background:#FDEDEC; color:var(--danger);}
.status-chip.active{background:#E8F8EE; color:var(--green);}
.status-chip.banned{background:#FDEDEC; color:var(--danger);}
.item-card.clickable{cursor:pointer;}

.empty-state{text-align:center; padding:60px 20px; color:var(--ink-soft);}
.empty-state svg{width:56px; height:56px; opacity:.25; margin-bottom:12px;}
.empty-state p{font-size:14px;}

/* ---------- Modal / Popup ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,10,8,.5); display:none; align-items:center; justify-content:center;
  z-index:200; padding:24px; backdrop-filter:blur(2px);
}
.modal-overlay.active{display:flex; animation:fadeIn .2s ease;}
.modal-box{
  background:#fff; border-radius:22px; padding:26px 22px; max-width:360px; width:100%;
  text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.25); animation:popIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn{from{transform:scale(.85); opacity:0;} to{transform:scale(1); opacity:1;}}
.modal-icon{width:64px; height:64px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center;}
.modal-icon.success{background:#E8F8EE; color:var(--green);}
.modal-icon.error{background:#FDEDEC; color:var(--danger);}
.modal-icon.info{background:#EAF2FF; color:#2F6FE4;}
.modal-icon.warn{background:#FFF4E0; color:#E29B0E;}
.modal-icon svg{width:32px; height:32px;}
.modal-title{font-weight:700; font-size:17px; margin-bottom:6px;}
.modal-msg{font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:20px;}
.modal-actions{display:flex; gap:10px;}

/* Result popup */
.result-modal{padding:30px 24px;}
.result-badge{
  width:100px; height:100px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:800; color:#fff; position:relative;
}
.result-badge.gold{background:var(--gold-bg); color:#8a6d00; box-shadow:0 0 0 6px #FFF3C4, 0 10px 30px rgba(212,175,55,.4);}
.result-badge.good{background:#E8F8EE; color:var(--green); box-shadow:0 0 0 6px #d3f5e0;}
.result-badge.avg{background:#EAF2FF; color:#2F6FE4; box-shadow:0 0 0 6px #d9e9ff;}
.result-badge.low{background:#FDEDEC; color:var(--danger); box-shadow:0 0 0 6px #fbdad8;}
.result-tag{font-size:20px; font-weight:800; margin-bottom:4px;}
.result-tag.gold{color:#B8860B;}
.result-tag.good{color:var(--green);}
.result-tag.avg{color:#2F6FE4;}
.result-tag.low{color:var(--danger);}
.result-score{font-size:14px; color:var(--ink-soft); margin-bottom:20px;}
.confetti{position:absolute; inset:0; pointer-events:none; overflow:hidden;}

/* ---------- Loader ---------- */
.loader-overlay{position:fixed; inset:0; background:rgba(255,255,255,.85); display:none; align-items:center; justify-content:center; z-index:300; flex-direction:column; gap:14px;}
.loader-overlay.active{display:flex;}
.spinner{width:42px; height:42px; border:4px solid #F5D9D7; border-top-color:var(--red); border-radius:50%; animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loader-text{font-size:13px; color:var(--ink-soft); font-weight:500;}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:#1E1E1E; color:#fff; padding:12px 20px; border-radius:12px; font-size:13.5px;
  z-index:400; opacity:0; transition:all .3s; max-width:90%; text-align:center; pointer-events:none;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Teacher Panel ---------- */
.teacher-lock-wrap{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 30px; text-align:center;}
.lock-icon{width:80px; height:80px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; margin-bottom:22px; color:#fff;}
.lock-icon svg{width:36px; height:36px;}

.teacher-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px;}
.teacher-card{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 14px;
  display:flex; flex-direction:column; align-items:center; gap:10px; box-shadow:var(--shadow); text-align:center;
}
.teacher-card:active{transform:scale(.96);}
.teacher-icon{width:52px; height:52px; border-radius:16px; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff;}
.teacher-icon svg{width:24px; height:24px;}
.teacher-card-label{font-weight:700; font-size:13.5px;}
.teacher-card-desc{font-size:11px; color:var(--ink-soft);}

.fab{
  position:fixed; bottom:24px; right:calc(50% - 240px + 20px); max-width:480px;
  width:56px; height:56px; border-radius:50%; background:var(--gradient); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(232,48,42,.35); z-index:50;
}
@media (max-width:520px){ .fab{right:20px;} }
.fab svg{width:26px; height:26px;}

/* Upload option sheet */
.sheet-overlay{position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; align-items:flex-end; justify-content:center; z-index:150;}
.sheet-overlay.active{display:flex; animation:fadeIn .2s;}
.sheet{
  background:#fff; width:100%; max-width:480px; border-radius:24px 24px 0 0; padding:20px;
  animation:slideUp .25s cubic-bezier(.34,1.2,.64,1);
}
@keyframes slideUp{from{transform:translateY(100%);} to{transform:translateY(0);}}
.sheet-handle{width:40px; height:4px; background:var(--line); border-radius:4px; margin:0 auto 16px;}
.sheet-option{display:flex; align-items:center; gap:14px; padding:14px 8px; border-bottom:1px solid var(--line);}
.sheet-option:last-child{border-bottom:none;}
.sheet-option-icon{width:42px; height:42px; border-radius:12px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--red); flex-shrink:0;}
.sheet-option-text b{display:block; font-size:14.5px;}
.sheet-option-text span{font-size:12px; color:var(--ink-soft);}

/* Image picker grid (still used by IMP Photos multi-select preview) */
.imgpick-header{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line);}
.add-slide-btn{display:flex; align-items:center; gap:6px; background:var(--gradient); color:#fff; border:none; padding:9px 14px; border-radius:20px; font-size:13px; font-weight:700; flex-shrink:0;}
.imgpick-grid{display:flex; flex-direction:column; gap:12px; padding:14px; overflow-y:auto; flex:1;}
.imgpick-item{position:relative; width:100%; border-radius:10px; overflow:hidden; background:var(--bg-soft);}
.imgpick-item img{width:100%; height:auto; display:block; object-fit:contain;}
.imgpick-remove{position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px;}
.imgpick-order{position:absolute; bottom:4px; left:4px; background:rgba(0,0,0,.55); color:#fff; font-size:10px; padding:1px 6px; border-radius:6px;}

/* ===================== PDF SLIDE BUILDER ===================== */
.slides-scroll{flex:1; overflow-y:auto; padding:18px 16px 20px; display:flex; flex-direction:column; align-items:center; gap:22px; background:var(--bg-soft);}
.pdf-slide{
  position:relative; width:78%; max-width:320px; aspect-ratio:210/297;
  background:#fff; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.12); overflow:hidden;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pdf-slide-badge{
  position:absolute; top:8px; left:8px; background:var(--gradient); color:#fff; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:20px; z-index:3;
}
.pdf-slide-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  width:100%; height:100%; border:2px dashed var(--line); box-sizing:border-box; cursor:pointer; color:var(--ink-soft);
}
.pdf-slide-empty .plus-circle{
  width:44px; height:44px; border-radius:50%; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--red);
}
.pdf-slide-empty span{font-size:13px; font-weight:600;}
.pdf-slide img{width:100%; height:100%; object-fit:contain;}
.pdf-slide-remove{
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,.6);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; z-index:3;
}
.pdf-slide-overlay{
  position:absolute; inset:0; background:rgba(255,255,255,.9); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; z-index:4;
}
.pdf-slide-overlay .spinner{width:28px; height:28px; border-width:3px;}
.pdf-slide-overlay span{font-size:11.5px; font-weight:600; color:var(--ink); text-align:center; padding:0 10px;}
.pdf-slide-error-badge{
  position:absolute; bottom:8px; left:8px; right:8px; background:#FDEDEC; color:var(--danger); font-size:10.5px;
  font-weight:600; padding:5px 8px; border-radius:8px; text-align:center; z-index:3;
}
.pdf-bottom-bar{padding:14px 16px; border-top:1px solid var(--line); background:#fff; flex-shrink:0;}

/* Progress bar */
.progress-wrap{background:var(--line); border-radius:8px; height:8px; overflow:hidden; margin:10px 0;}
.progress-bar{height:100%; background:var(--gradient); width:0%; transition:width .2s;}

/* Form styling reused in teacher forms */
.form-group{margin-bottom:14px;}
.form-label{font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; display:block;}
.form-input, .form-select, .form-textarea{
  width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; font-size:14px; outline:none;
}
.form-textarea{resize:vertical; min-height:70px;}

/* MCQ builder */
.mcq-item{border:1.5px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px; position:relative;}
.mcq-item-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.mcq-num{font-weight:700; font-size:13px; color:var(--red);}
.opt-row{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.opt-radio{width:20px; height:20px; border-radius:50%; border:2px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.opt-radio.checked{border-color:var(--green); background:var(--green);}
.opt-radio.checked::after{content:''; width:8px; height:8px; border-radius:50%; background:#fff;}
.opt-row input{flex:1; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:13.5px;}
.remove-q{position:absolute; top:12px; right:14px; color:var(--danger); font-size:12px; font-weight:600;}

/* ---------- Chat ---------- */
.chat-list-item{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); position:relative;}
.chat-avatar{width:46px; height:46px; border-radius:50%; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0;}
.chat-list-name{font-weight:600; font-size:14.5px;}
.chat-list-preview{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;}
.chat-list-meta{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.chat-list-time{font-size:11px; color:var(--ink-soft);}
.unread-dot{width:10px; height:10px; border-radius:50%; background:var(--red);}

.chat-screen{display:flex; flex-direction:column; height:calc(100vh / 0.90);}
.chat-messages{flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:2px; background:var(--bg-soft);}
.msg-row{display:flex; margin-bottom:4px;}
.msg-row.me{justify-content:flex-end;}
.msg-row.them{justify-content:flex-start;}
.msg-bubble-wrap{max-width:75%;}
.msg-name{font-size:11px; font-weight:700; color:var(--red); margin-bottom:2px; margin-left:4px;}
.msg-bubble{padding:9px 13px; border-radius:16px; font-size:14px; line-height:1.4; word-wrap:break-word;}
.msg-row.me .msg-bubble{background:var(--gradient); color:#fff; border-bottom-right-radius:4px;}
.msg-row.them .msg-bubble{background:#fff; color:var(--ink); border-bottom-left-radius:4px; box-shadow:0 2px 6px rgba(0,0,0,.06);}
.msg-time{font-size:10px; color:var(--ink-soft); margin-top:3px; text-align:right;}
.msg-row.them .msg-time{text-align:left; margin-left:4px;}
.msg-time.me-time{color:#fff; opacity:.75;}

.chat-input-bar{display:flex; align-items:flex-end; gap:8px; padding:10px 12px; background:#fff; border-top:1px solid var(--line);}
.chat-input-bar input{flex:1; min-width:0; border:1.5px solid var(--line); border-radius:22px; padding:11px 16px; font-size:14px; outline:none;}
.chat-input-bar textarea{flex:1; min-width:0; border:1.5px solid var(--line); border-radius:22px; padding:11px 16px; font-size:14px; outline:none; resize:none; max-height:110px; overflow-y:auto; line-height:1.35; font-family:inherit; box-sizing:border-box; scrollbar-width:none; -ms-overflow-style:none;}
.chat-input-bar textarea::-webkit-scrollbar{display:none; width:0; height:0;}
.chat-input-bar textarea:focus{border-color:var(--red, #E8302A);}
.chat-send-btn{width:42px; height:42px; border-radius:50%; background:var(--gradient); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.chat-send-btn svg{width:19px; height:19px;}
.chat-attach-btn{width:40px; height:40px; border-radius:50%; background:var(--cream); border:1.5px solid var(--line); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.chat-attach-btn svg{width:19px; height:19px;}
.msg-bubble img{max-width:100%; border-radius:10px; display:block; margin-top:4px;}

.chat-topbar{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:#fff;}

/* ---------- Ask Doubts: markdown-lite rendering ---------- */
.msg-bubble strong{font-weight:700; background:rgba(124,58,237,.12); padding:0 3px; border-radius:4px;}
.msg-row.me .msg-bubble strong{background:rgba(255,255,255,.28);}
.msg-bubble .md-heading{display:block; font-weight:700; font-size:14.5px; margin:6px 0 2px; color:#7C3AED;}
.msg-row.me .msg-bubble .md-heading{color:#fff;}
.msg-bubble .md-li{display:block; margin:2px 0 2px 2px;}
.msg-bubble .md-li:before{content:"• "; opacity:.7;}
.msg-bubble br{content:"";}

/* ---------- Ask Doubts: online status + thinking indicator ---------- */
.ai-status-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#2ECC71; margin-right:5px; box-shadow:0 0 0 rgba(46,204,113,.5); animation:aiPulse 1.8s infinite;}
.ai-status-dot.thinking{background:#D4AF37; animation:aiPulseAmber 1s infinite;}
@keyframes aiPulse{
  0%{box-shadow:0 0 0 0 rgba(46,204,113,.5);}
  70%{box-shadow:0 0 0 5px rgba(46,204,113,0);}
  100%{box-shadow:0 0 0 0 rgba(46,204,113,0);}
}
@keyframes aiPulseAmber{
  0%{box-shadow:0 0 0 0 rgba(212,175,55,.6);}
  70%{box-shadow:0 0 0 5px rgba(212,175,55,0);}
  100%{box-shadow:0 0 0 0 rgba(212,175,55,0);}
}
.thinking-bubble{display:flex; align-items:center; gap:9px; padding:11px 16px !important;}
.thinking-spinner{width:18px; height:18px; flex-shrink:0; position:relative;}
.thinking-spinner svg{width:100%; height:100%; animation:spinnerRotate 1s linear infinite;}
@keyframes spinnerRotate{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
.thinking-label{font-size:13.5px; font-weight:600; background:linear-gradient(90deg, var(--ink-soft) 0%, var(--red) 50%, var(--ink-soft) 100%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:thinkingShimmer 1.6s linear infinite;}
@keyframes thinkingShimmer{
  0%{background-position:200% center;}
  100%{background-position:-200% center;}
}

.timeout-banner{background:#FDEDEC; color:var(--danger); padding:12px 16px; font-size:13px; text-align:center; font-weight:600;}

/* ---------- Test Screens ---------- */
.timer-pill{display:flex; align-items:center; gap:6px; background:var(--bg-soft); padding:8px 16px; border-radius:20px; font-weight:700; color:var(--red); font-size:15px;}
.q-progress{font-size:12.5px; color:var(--ink-soft); margin-bottom:6px;}
.q-text{font-size:16px; font-weight:600; margin-bottom:18px; line-height:1.5;}
.q-option{display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px;}
.q-option.selected{border-color:var(--red); background:var(--bg-soft);}
.opt-letter{width:28px; height:28px; border-radius:50%; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;}
.q-option.selected .opt-letter{background:var(--gradient); color:#fff;}
.test-nav{display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--line); background:#fff;}

/* Notice edit */
.textarea-notice{width:100%; border:1.5px solid var(--line); border-radius:14px; padding:14px; font-size:14px; min-height:100px;}

/* Search bar */
.search-bar{display:flex; align-items:center; gap:10px; background:var(--bg-soft); border-radius:14px; padding:11px 16px; margin-bottom:14px;}
.search-bar input{flex:1; border:none; background:transparent; outline:none; font-size:14px;}

/* Student data card */
.student-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:10px; box-shadow:var(--shadow);}
.student-card-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.student-card-name{font-weight:700; font-size:14.5px;}
.student-card-detail{font-size:12.5px; color:var(--ink-soft); margin-bottom:2px;}
.status-chip.active{background:#E8F8EE; color:var(--green);}
.status-chip.banned{background:#FDEDEC; color:var(--danger);}
.student-actions{display:flex; gap:8px; margin-top:10px;}

/* countdown live */
.countdown-live{font-weight:700; color:var(--danger); font-variant-numeric:tabular-nums;}

/* Developer card */
.dev-card{background:#000; border-radius:20px; overflow:hidden; margin-top:10px;}
.dev-card img{width:100%; display:block;}
.dev-info{padding:18px; text-align:center; background:linear-gradient(135deg,#0b0b0b,#1a1a2e); color:#fff;}
.dev-info h3{font-size:18px; margin-bottom:4px;}
.dev-info p{font-size:12.5px; color:#aab; margin-bottom:14px;}
.dev-btns{display:flex; gap:10px;}
.dev-btn{flex:1; padding:11px; border-radius:12px; font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px;}
.dev-btn.wa{background:#25D366; color:#fff;}
.dev-btn.insta{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af); color:#fff;}

/* PDF Viewer */
.pdf-viewer-wrap{flex:1; overflow-y:auto; background:#525659; padding:10px;}
.pdf-page-canvas{margin:0 auto 10px; display:block; box-shadow:0 4px 14px rgba(0,0,0,.3); max-width:100%;}
.pdf-controls{display:flex; justify-content:center; align-items:center; gap:16px; padding:10px; background:#fff; border-top:1px solid var(--line);}

.img-viewer-wrap{flex:1; display:flex; align-items:center; justify-content:center; background:#000; overflow:hidden;}
.img-viewer-wrap img{max-width:100%; max-height:calc(100vh / 0.90); object-fit:contain;}

/* Utility */
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-20{margin-top:20px;}
.flex-1{flex:1;}
.text-center{text-align:center;}
.hidden{display:none !important;}