:root {
  --navy:#062f63; --blue:#0786bc; --cyan:#12bfd0; --coral:#ff6243; --orange:#ff8a35;
  --yellow:#ffc928; --mist:#effaff; --line:#cbeaf4; --text:#0b315d; --muted:#5f7690;
  --display:"Baloo Bhaijaan 2","Noto Kufi Arabic",sans-serif; --body:"Tajawal",Tahoma,sans-serif;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { min-height:100%; background:#dff7ff; }
body { min-height:100vh; margin:0; color:var(--text); font-family:var(--body); line-height:1.6; background:#dff7ff url('./assets/busaiteen-portal-bg.png') center/cover fixed no-repeat; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(230,249,255,.1),rgba(255,255,255,.16)); }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:4px solid rgba(255,201,40,.9); outline-offset:3px; }
.portal-header { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:9px max(4vw,calc((100vw - 1380px)/2)); border-bottom:1px solid rgba(139,203,226,.7); background:rgba(255,255,255,.94); backdrop-filter:blur(14px); }
.portal-logo img { display:block; width:205px; height:66px; object-fit:contain; }
.portal-header-actions { display:flex; align-items:center; gap:10px; }
.portal-header-actions a { min-height:43px; display:grid; place-items:center; padding:8px 15px; border-radius:13px; text-decoration:none; font-weight:900; }
.staff-link { color:#fff; background:var(--navy); }
.back-link { color:var(--navy); background:#e9f8fc; }
.portal-main { min-height:calc(100vh - 86px); padding:35px 20px 55px; }
.portal-screen { min-height:calc(100vh - 176px); display:none; place-items:center; }
.portal-screen.active { display:grid; }
.glass-card { width:min(560px,100%); position:relative; padding:46px 50px 38px; border:1px solid rgba(255,255,255,.9); border-radius:34px; background:rgba(255,255,255,.94); box-shadow:0 28px 80px rgba(3,76,123,.2); backdrop-filter:blur(16px); text-align:center; }
.lock-badge { width:100px; height:100px; display:grid; place-items:center; margin:-95px auto 20px; border:10px solid rgba(255,255,255,.92); border-radius:50%; background:linear-gradient(145deg,#fff2af,var(--yellow)); font-size:3rem; box-shadow:0 15px 30px rgba(184,128,0,.2); }
.portal-eyebrow { margin:0; color:var(--blue); font-weight:900; }
h1,h2 { font-family:var(--display); line-height:1.2; }
.glass-card h1 { margin:7px 0 8px; color:var(--navy); font-size:clamp(2.2rem,6vw,3.5rem); }
.lead { margin:0 0 24px; color:var(--muted); font-weight:700; font-size:1.08rem; }
.portal-form { display:grid; gap:12px; text-align:right; }
.portal-form label { color:var(--navy); font-weight:900; }
.code-field { display:grid; grid-template-columns:48px 1fr; align-items:center; min-height:58px; overflow:hidden; border:2px solid #b8dfea; border-radius:16px; background:#fbfeff; }
.code-field span { display:grid; place-items:center; color:#8ca3b9; font-size:1.25rem; }
.code-field input { min-width:0; height:56px; padding:8px 5px 8px 14px; border:0; outline:0; background:transparent; color:var(--text); font-size:1.1rem; }
.portal-form select { width:100%; min-height:56px; padding:10px 14px; border:2px solid #b8dfea; border-radius:16px; background:#fbfeff; color:var(--text); }
.primary-action { min-height:58px; display:flex; align-items:center; justify-content:center; gap:14px; margin-top:7px; border:0; border-radius:17px; background:linear-gradient(135deg,var(--coral),var(--orange)); color:#fff; font-weight:900; font-size:1.18rem; cursor:pointer; box-shadow:0 14px 28px rgba(255,98,67,.25); }
.primary-action:disabled { opacity:.55; cursor:wait; }
.secondary-action { min-height:46px; border:1px solid #b8dfea; border-radius:14px; background:#effaff; color:var(--navy); font-weight:800; cursor:pointer; }
.form-message { min-height:23px; margin:0; color:#b33021; font-weight:800; text-align:center; }
.privacy-note { display:block; margin-top:12px; color:#698097; }
.welcome-star { width:88px; height:88px; display:grid; place-items:center; margin:-82px auto 14px; border-radius:28px; background:#fff5c8; font-size:3.1rem; transform:rotate(-5deg); box-shadow:0 14px 25px rgba(184,128,0,.14); }
.dashboard-screen,.activity-screen { place-items:start center; }
.dashboard-shell,.activity-shell { width:min(1160px,100%); }
.student-welcome { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:22px 26px; border:1px solid rgba(255,255,255,.8); border-radius:26px; background:rgba(255,255,255,.93); box-shadow:0 20px 55px rgba(3,76,123,.14); }
.student-avatar { width:76px; height:76px; display:grid; place-items:center; border-radius:24px; background:linear-gradient(145deg,#fff6c1,var(--yellow)); font-size:2.7rem; }
.student-welcome p { margin:0; color:var(--blue); font-weight:900; }
.student-welcome h1 { margin:-4px 0 0; font-size:clamp(1.9rem,4vw,3rem); }
.student-welcome span { color:var(--muted); font-weight:700; }
.small-button,.back-activities { min-height:43px; padding:8px 14px; border:0; border-radius:13px; background:#e8f7fb; color:var(--navy); font-weight:900; cursor:pointer; }
.activities-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:28px 0 14px; padding:0 8px; }
.activities-heading h2 { margin:0; font-size:2.2rem; }
#activity-count { padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.9); color:var(--blue); font-weight:900; }
.student-activities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.activity-card { min-height:280px; display:flex; flex-direction:column; padding:22px; border:1px solid rgba(255,255,255,.9); border-radius:25px; background:rgba(255,255,255,.95); box-shadow:0 16px 38px rgba(3,76,123,.13); }
.activity-card .activity-art { width:86px; height:86px; display:grid; place-items:center; border-radius:25px; background:linear-gradient(145deg,#ddf8fc,#fff2bf); font-size:3.2rem; }
.activity-card .status { align-self:flex-start; margin-top:-28px; padding:6px 10px; border-radius:999px; background:#eef8fc; color:var(--blue); font-size:.78rem; font-weight:900; }
.activity-card .status.done { background:#dcf7e9; color:#167b56; }
.activity-card h3 { margin:16px 0 6px; font-family:var(--display); font-size:1.28rem; }
.activity-card p { margin:0 0 18px; color:var(--muted); }
.activity-card button { min-height:49px; margin-top:auto; border:0; border-radius:14px; background:linear-gradient(135deg,var(--coral),var(--orange)); color:#fff; font-weight:900; cursor:pointer; }
.activity-card button.done { background:var(--navy); }
.loading-card,.empty-card { grid-column:1/-1; padding:50px 20px; border:2px dashed rgba(255,255,255,.9); border-radius:24px; background:rgba(255,255,255,.82); color:var(--muted); text-align:center; font-weight:800; }
.activity-shell { padding:25px; border-radius:30px; background:rgba(255,255,255,.96); box-shadow:0 24px 70px rgba(3,76,123,.18); }
.back-activities { margin-bottom:18px; }
.activity-intro { padding:22px; border-radius:22px; background:linear-gradient(135deg,#e1f8fc,#fff6ce); }
.activity-intro p { margin:0; color:var(--blue); font-weight:900; }
.activity-intro h1 { margin:2px 0; font-size:clamp(2rem,5vw,3.1rem); }
.activity-intro span { color:var(--muted); }
.questions-list { display:grid; gap:16px; margin-top:18px; }
.activity-workspace.with-pdf{margin-top:18px}.activity-workspace.with-pdf .questions-list{margin-top:0}.worksheet-pdf{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#f4fbfe}.worksheet-pdf>div:first-child{display:flex;justify-content:space-between;gap:10px;padding:10px 14px}.worksheet-pdf a{color:var(--blue);font-weight:900}.worksheet-pages{display:grid!important;gap:18px!important;padding:12px!important;background:#dcebf0}.worksheet-page{position:relative;width:min(100%,900px);margin:auto;background:#fff;box-shadow:0 6px 22px rgba(4,60,96,.15)}.worksheet-page canvas{display:block;width:100%;height:auto}.worksheet-answer{position:absolute;z-index:3;display:flex;align-items:center;padding:3px;border:2px solid #10a9bd;border-radius:8px;background:rgba(255,255,255,.94);transition:.2s}.worksheet-answer input,.worksheet-answer select{width:100%;height:100%;min-height:32px;padding:4px 7px;border:0;background:transparent;font:700 clamp(.7rem,1.4vw,1rem) Tajawal}.worksheet-answer.correct{border-color:#21a05a;background:rgba(225,250,234,.96)}.worksheet-answer.wrong{border-color:#db4b3f;background:rgba(255,232,228,.96)}.match-lines{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none}.match-lines line{stroke:#148fbd;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 1px 1px #fff)}.match-lines line.correct{stroke:#20a35b}.match-lines line.wrong{stroke:#dc4b3f}.match-node{position:absolute;z-index:4;display:grid;place-items:center;min-width:28px;min-height:28px;padding:2px;border:3px solid #0ca9bd;border-radius:10px;background:rgba(222,249,252,.82);color:#075c78;font:900 clamp(.56rem,1.2vw,.86rem) Tajawal;cursor:pointer;touch-action:manipulation}.match-node.match-target{border-color:#7659d1;background:rgba(239,234,255,.84);color:#483193}.match-node.selected{outline:5px solid rgba(255,195,28,.78);transform:scale(1.04)}.match-node.correct{border-color:#20a35b;background:rgba(225,250,234,.9)}.match-node.wrong{border-color:#dc4b3f;background:rgba(255,232,228,.92)}#regular-questions{display:grid;gap:16px}.question-card.correct{border-color:#21a05a;background:#eefbf3}.question-card.wrong{border-color:#db4b3f;background:#fff0ed}
.question-card { padding:20px; border:1px solid var(--line); border-radius:20px; background:#fbfeff; }
.question-card legend { width:100%; margin-bottom:12px; font-family:var(--display); font-size:1.15rem; font-weight:800; }
.question-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.question-option { min-height:49px; display:flex; align-items:center; gap:9px; padding:10px 13px; border:1px solid #c9e5ef; border-radius:14px; background:#fff; cursor:pointer; }
.question-option:has(input:checked) { border-color:var(--cyan); background:#e7fbfd; }
.short-answer { width:100%; min-height:52px; padding:10px 13px; border:2px solid #c9e5ef; border-radius:14px; }
.submit-answers { min-height:56px; border:0; border-radius:16px; background:linear-gradient(135deg,var(--coral),var(--orange)); color:#fff; font-weight:900; font-size:1.1rem; cursor:pointer; }
.result-card { margin-top:18px; padding:28px; border-radius:24px; background:linear-gradient(135deg,#daf8ee,#e8f8ff); text-align:center; }
.result-card strong { display:block; font-family:var(--display); font-size:3rem; color:#16815c; }
@media (max-width:900px) { .student-activities { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) {
  body { background-position:58% center; }
  .portal-header { min-height:72px; padding:6px 10px; }
  .portal-logo img { width:145px; height:56px; }
  .portal-header-actions { gap:5px; }
  .portal-header-actions a { min-height:38px; padding:6px 9px; font-size:.78rem; }
  .portal-main { min-height:calc(100vh - 72px); padding:55px 10px 30px; }
  .portal-screen { min-height:calc(100vh - 157px); }
  .glass-card { padding:38px 20px 26px; border-radius:25px; }
  .lock-badge { width:82px; height:82px; margin-top:-80px; border-width:7px; font-size:2.35rem; }
  .glass-card h1 { font-size:2.15rem; }
  .lead { font-size:.98rem; }
  .student-welcome { grid-template-columns:auto 1fr; padding:16px; }
  .student-avatar { width:60px; height:60px; border-radius:19px; font-size:2rem; }
  .student-welcome .small-button { grid-column:1/-1; }
  .student-activities { grid-template-columns:1fr; }
  .activities-heading { align-items:start; }
  .activity-card { min-height:250px; }
  .activity-shell { padding:14px; border-radius:22px; }
  .question-options { grid-template-columns:1fr; }
}