@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#0F1115;
  --surface:#171A21;
  --surface-2:#1E2230;
  --surface-3:#252A3A;
  --border:#2A2F3D;
  --text:#ECEDF2;
  --text-dim:#9BA0AF;
  --text-faint:#5C6272;
  --teal:#45D6B5;
  --coral:#FF7A59;
  --indigo:#8B90FF;
  --danger:#FF6B6B;
  --radius-pill: 999px;
  --radius-card: 18px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{ height:100%; }
body{
  font-family:'Tajawal', sans-serif;
  background: radial-gradient(1200px 600px at 15% -10%, #171B2A 0%, var(--bg) 55%);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em; }

.boot-loader{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--text-faint); }

.capsule-mark{
  width:34px; height:16px; border-radius:var(--radius-pill);
  display:inline-block; position:relative; overflow:hidden;
  background:linear-gradient(90deg, var(--teal) 50%, var(--coral) 50%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
  flex-shrink:0;
}

.app{ display:flex; min-height:100vh; }
.sidebar{
  width:280px; flex-shrink:0; background:var(--surface);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:22px 16px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{ display:flex; align-items:center; gap:10px; padding:0 6px 22px 6px; }
.brand h1{ font-size:22px; font-weight:900; letter-spacing:-0.01em; }
.brand span{ display:block; font-size:11px; color:var(--text-faint); font-family:'IBM Plex Mono',monospace; }

.subject-list{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.subject-item{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:14px; cursor:pointer;
  border:1px solid transparent; transition:.15s;
  color:var(--text-dim);
}
.subject-item:hover{ background:var(--surface-2); color:var(--text); }
.subject-item.active{ background:var(--surface-2); border-color:var(--border); color:var(--text); }
.subject-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.subject-item .name{ flex:1; font-weight:500; font-size:14.5px; }

.nav-section-label{ font-size:10.5px; color:var(--text-faint); font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.06em; margin:16px 6px 6px; }

.add-subject-btn{
  margin-top:10px; padding:11px; border-radius:14px;
  border:1px dashed var(--border); background:transparent; color:var(--text-faint);
  cursor:pointer; font-family:'Tajawal'; font-size:13.5px; transition:.15s; width:100%;
}
.add-subject-btn:hover{ border-color:var(--teal); color:var(--teal); }

.sidebar-spacer{ flex:1; }
.user-card{
  border-top:1px solid var(--border); padding-top:14px; margin-top:14px;
  display:flex; align-items:center; gap:10px;
}
.avatar{
  width:36px; height:36px; border-radius:50%; background:var(--surface-3); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:var(--teal); flex-shrink:0; border:1px solid var(--border);
}
.user-meta{ flex:1; min-width:0; }
.user-meta .uname{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.role-badge{ font-size:10px; font-family:'IBM Plex Mono',monospace; padding:2px 8px; border-radius:var(--radius-pill); display:inline-block; margin-top:3px; }
.role-primary_admin{ background:rgba(255,122,89,0.16); color:var(--coral); }
.role-admin{ background:rgba(139,144,255,0.16); color:var(--indigo); }
.role-student{ background:rgba(69,214,181,0.16); color:var(--teal); }
.logout-btn{ background:transparent; border:none; color:var(--text-faint); cursor:pointer; font-size:16px; padding:4px; }
.logout-btn:hover{ color:var(--danger); }

.main{ flex:1; padding:34px 40px; max-width:980px; margin:0 auto; width:100%; }
.empty-state{ text-align:center; padding:120px 20px; color:var(--text-faint); }
.empty-state .capsule-mark{ width:60px; height:28px; margin-bottom:18px; }

.subject-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:16px;}
.subject-header h2{ font-size:28px; font-weight:900; display:flex; align-items:center; gap:12px; }
.subject-header .sub{ color:var(--text-faint); font-size:13px; margin-top:4px; }
.icon-btn{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
  width:34px; height:34px; border-radius:10px; cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.icon-btn:hover{ color:var(--danger); border-color:var(--danger); }

.tabs{
  display:flex; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:5px; gap:4px; margin-bottom:28px;
  overflow-x:auto;
}
.tab-btn{
  flex:1; white-space:nowrap; text-align:center; padding:10px 16px; border-radius:var(--radius-pill);
  border:none; background:transparent; color:var(--text-faint); cursor:pointer;
  font-family:'Tajawal'; font-size:13.5px; font-weight:500; transition:.15s;
}
.tab-btn.active{ background:var(--surface-3); color:var(--text); box-shadow: inset 0 0 0 1px var(--border);}

.panel{ display:none; }
.panel.active{ display:block; animation: fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:20px; margin-bottom:14px;
}
.card-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.card h3{ font-size:16px; font-weight:700; margin-bottom:4px; }
.card p{ color:var(--text-dim); font-size:13.5px; line-height:1.6; direction:ltr; text-align:left; }
.tag{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-family:'IBM Plex Mono',monospace;
  color:var(--text-faint); background:var(--surface-2); padding:4px 10px; border-radius:var(--radius-pill);
  margin-top:8px;
}

.btn{
  padding:10px 18px; border-radius:var(--radius-pill); border:none; cursor:pointer;
  font-family:'Tajawal'; font-weight:700; font-size:13.5px; transition:.15s; display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{ background:linear-gradient(90deg, var(--teal), #38C4A6); color:#06251E; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ background:var(--surface-2); border:1px solid var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text-faint); }
.btn-ai{ background:linear-gradient(90deg, var(--indigo), #6A6FE0); color:#0C0D1F; }
.btn-ai:hover{ filter:brightness(1.08); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-sm{ padding:7px 13px; font-size:12.5px; }
.btn-block{ width:100%; justify-content:center; }

textarea, input[type=text], input[type=url], input[type=password], input[type=email]{
  width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:12px; padding:11px 14px; font-family:'Tajawal'; font-size:14px; resize:vertical;
  outline:none; transition:.15s;
}
textarea{ direction:ltr; text-align:left; }
textarea:focus, input:focus{ border-color:var(--teal); }
label{ display:block; font-size:12px; color:var(--text-faint); margin-bottom:6px; font-family:'IBM Plex Mono',monospace; }
.field{ margin-bottom:14px; }

.form-modal-bg{
  position:fixed; inset:0; background:rgba(8,9,13,0.72); display:flex; align-items:center; justify-content:center;
  z-index:50; padding:20px; backdrop-filter: blur(2px);
}
.form-modal{
  background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:26px;
  width:100%; max-width:440px; max-height:88vh; overflow-y:auto;
}
.form-modal h3{ font-size:18px; margin-bottom:16px; font-weight:800; }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }

.empty-mini{ color:var(--text-faint); font-size:13.5px; text-align:center; padding:40px 10px; border:1px dashed var(--border); border-radius:16px; }

.swatches{ display:flex; gap:8px; flex-wrap:wrap; }
.swatch{ width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.swatch.selected{ border-color:#fff; }

.quiz-q{ margin-bottom:18px; }
.quiz-q .qtext{ font-weight:700; margin-bottom:10px; font-size:14.5px; direction:ltr; text-align:left; }
.opt{
  display:block; width:100%; text-align:left; direction:ltr; padding:11px 14px; margin-bottom:8px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text); cursor:pointer; font-family:'Tajawal'; font-size:13.5px;
  transition:.15s;
}
.opt:hover{ border-color:var(--indigo); }
.opt.correct{ border-color:var(--teal); background:rgba(69,214,181,0.12); }
.opt.wrong{ border-color:var(--danger); background:rgba(255,107,107,0.12); }
.opt.disabled{ pointer-events:none; }
.explain{ font-size:12.5px; color:var(--text-dim); background:var(--surface-2); padding:10px 12px; border-radius:10px; margin-top:4px; line-height:1.6;}

.spinner{
  width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,0.25); border-top-color:currentColor;
  animation: spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.score-badge{
  display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:13px;
  padding:6px 12px; border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--border);
}
.section-title{ font-size:13px; color:var(--text-faint); font-family:'IBM Plex Mono',monospace; margin-bottom:12px; text-transform:uppercase; letter-spacing:.05em; }

.auth-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card{ width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:32px; }
.auth-brand{ text-align:center; margin-bottom:24px; }
.auth-brand .capsule-mark{ width:44px; height:20px; margin-bottom:10px; }
.auth-brand h1{ font-size:24px; font-weight:900; }
.auth-brand p{ color:var(--text-faint); font-size:12.5px; margin-top:4px; }
.auth-toggle{ text-align:center; margin-top:16px; font-size:13px; color:var(--text-faint); }
.auth-toggle a{ color:var(--teal); cursor:pointer; font-weight:700; text-decoration:none; }
.auth-error{ background:rgba(255,107,107,0.12); border:1px solid var(--danger); color:var(--danger); padding:10px 14px; border-radius:12px; font-size:12.5px; margin-bottom:14px; }
.auth-note{ background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); padding:10px 14px; border-radius:12px; font-size:11.5px; margin-bottom:14px; line-height:1.6; }

.members-table{ display:flex; flex-direction:column; gap:8px; }
.member-row{ display:flex; align-items:center; gap:12px; padding:13px 16px; background:var(--surface); border:1px solid var(--border); border-radius:14px; flex-wrap:wrap; }
.member-row .avatar{ width:32px; height:32px; font-size:12px; }
.member-row .uname{ font-weight:700; font-size:13.5px; }
.member-row select{ background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:6px 10px; font-family:'Tajawal'; font-size:12.5px; }

.settings-btn{ background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); border-radius:12px; padding:8px 12px; font-size:12px; cursor:pointer; font-family:'Tajawal'; margin-top:8px; width:100%; }
.settings-btn:hover{ color:var(--text); border-color:var(--text-faint); }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:6px; }

@media(max-width:820px){
  .app{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:relative; border-left:none; border-bottom:1px solid var(--border); }
  .main{ padding:22px 16px; }
}