:root{--brand:#0169d8;--brand2:#3498db;--ink:#0b2a44;--muted:#6b7a90;--bg:#eef3f7;--card:#fff;--border:#e4ecf5;--danger:#dc3545;--ok:#0f9f6e;--warn:#d97706;--shadow:0 18px 45px rgba(2,6,23,.08);--radius:20px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:linear-gradient(135deg,#eef3f7,#f0f8ff 55%,#fff)}a{color:inherit}.public-shell{min-height:100vh;padding:28px}.portal-shell{min-height:calc(100vh - 72px);padding:24px 24px 60px;margin-left:250px}.topbar{height:72px;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:44px;height:44px;border-radius:14px;background:#fff;color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 10px 22px rgba(13,110,253,.18);overflow:hidden}.brand-mark img{width:100%;height:100%;object-fit:contain}.logo-mark{padding:2px}.brand small{display:block;color:var(--muted);font-size:12px}.top-actions{display:flex;gap:12px;align-items:center}.user-chip{font-size:13px;color:var(--muted)}.sidebar{position:fixed;left:0;top:72px;bottom:0;width:250px;background:#fff;border-right:1px solid var(--border);padding:22px 16px;overflow:auto}.side-title{text-transform:uppercase;color:#9aa8ba;font-size:11px;font-weight:800;letter-spacing:.13em;padding:0 12px 12px}.sidebar nav{display:grid;gap:6px}.sidebar a{text-decoration:none;padding:11px 12px;border-radius:12px;color:#4b5f76;display:flex;gap:10px;align-items:center;font-weight:700;font-size:14px}.sidebar a:hover,.sidebar a.active{background:#eaf3ff;color:var(--brand)}.workspace{max-width:1350px;margin:0 auto}.hero-title{margin:0 0 20px}.hero-title h1{font-size:30px;margin:0 0 6px}.hero-title p{margin:0;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0 22px}.stat-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;display:flex;align-items:center;gap:14px;box-shadow:0 10px 25px rgba(2,6,23,.04)}.stat-icon{font-size:26px}.stat-card strong{display:block;font-size:24px}.stat-card small{color:var(--muted)}.panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.panel h2{margin:0;font-size:21px}.panel p{color:var(--muted);margin:5px 0 0}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card{border:1px solid var(--border);border-radius:16px;padding:16px;background:#fff}.card h3{margin:0 0 8px}.muted{color:var(--muted)}.btn{border:0;border-radius:11px;padding:10px 14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:800;cursor:pointer}.btn.small{padding:7px 10px;font-size:12px}.btn.ghost{background:#fff;color:var(--brand);border:1px solid #cfe1ff}.btn.danger{background:#fff0f1;color:var(--danger);border:1px solid #ffd4d8}.btn.ok{background:#e9fbf4;color:#087a55;border:1px solid #b9efdc}.btn.warn{background:#fff8ea;color:#9a5b06;border:1px solid #fde0a6}.actions{display:flex;gap:8px;flex-wrap:wrap}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}label{font-size:13px;font-weight:800;color:#38516a}input,select,textarea{width:100%;border:1px solid #d9e5f2;border-radius:11px;padding:11px 12px;font:inherit;background:#fff;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:#8dbdff;box-shadow:0 0 0 4px rgba(13,110,253,.09)}textarea{min-height:110px;resize:vertical}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:12px 13px;border-bottom:1px solid #edf2f7;font-size:13px;vertical-align:top}th{background:#f7faff;color:#466079;font-size:12px;text-transform:uppercase;letter-spacing:.03em}tr:last-child td{border-bottom:0}.badge{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900;background:#eaf3ff;color:#2563a8}.badge.ok{background:#e8f9f1;color:#087a55}.badge.warn{background:#fff5df;color:#9a5b06}.badge.danger{background:#fff0f1;color:#b42332}.alert{max-width:1350px;margin:0 auto 16px;padding:12px 14px;border-radius:12px;border:1px solid}.alert.success{background:#ecfdf5;border-color:#b7efd9;color:#087a55}.alert.error{background:#fff0f1;border-color:#ffd1d5;color:#a61d2d}.alert.info{background:#eef6ff;border-color:#cce2ff;color:#205c9e}.empty{padding:28px;text-align:center;color:var(--muted)}.auth-wrap{min-height:calc(100vh - 56px);display:grid;place-items:center;position:relative;overflow:hidden}.auth-card{width:min(760px,95vw);background:#fff;border-radius:26px;box-shadow:0 30px 80px rgba(2,6,23,.10);overflow:hidden}.auth-hero{height:185px;background:linear-gradient(180deg,#cceeff,#e7f6ff);display:grid;place-items:center;position:relative}.auth-hero:after{content:"";position:absolute;width:85%;height:85px;bottom:-50px;background:#fff;border-radius:50%}.auth-symbol{width:100px;height:100px;border-radius:30px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:grid;place-items:center;font-size:38px;font-weight:900;box-shadow:0 18px 36px rgba(13,110,253,.28);z-index:2;overflow:hidden}.auth-symbol.school-logo{background:#fff;padding:4px}.auth-symbol.school-logo img{width:100%;height:100%;object-fit:contain}.assessment-timer{position:sticky;top:82px;z-index:20;margin-bottom:14px;padding:12px 14px;border:1px solid #cfe1ff;background:#f6faff;border-radius:14px;font-weight:900;color:#205c9e;display:flex;justify-content:space-between;align-items:center}.assessment-timer.danger{background:#fff0f1;border-color:#ffd1d5;color:#a61d2d}.auth-body{padding:48px 28px 30px}.auth-body h1{text-align:center;margin:0 0 6px}.auth-body .lead{text-align:center;color:var(--muted);margin:0 0 24px}.registration-card{width:min(900px,96vw)}.footer-note{text-align:center;color:var(--muted);font-size:12px;margin-top:16px}.notice{background:#f8fbff;border:1px solid #dcecff;border-radius:14px;padding:13px;color:#466079;font-size:13px}.progress{height:8px;background:#edf2f7;border-radius:8px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2))}@media(max-width:980px){.sidebar{position:static;width:auto;border:0;border-bottom:1px solid var(--border);padding:10px 14px}.sidebar nav{display:flex;overflow:auto}.side-title{display:none}.portal-shell{margin:0;padding:18px}.topbar{position:static}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:1fr 1fr}}@media(max-width:650px){.public-shell{padding:12px}.topbar{height:auto;padding:12px;align-items:flex-start}.user-chip{display:none}.form-grid,.grid.two,.grid.three,.stats{grid-template-columns:1fr}.auth-body{padding:42px 18px 22px}.portal-shell{padding:14px}.hero-title h1{font-size:24px}}
.schedule-live-row td{background:#fffaf0}.schedule-live-row td:first-child{box-shadow:inset 4px 0 0 var(--warn)}.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}.class-live-global{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.class-live-global a{font-weight:800;text-decoration:none}


/* V2.7 desktop browser adaptation only. Tablet/mobile behavior remains unchanged. */
@media(min-width:981px){
  :root{--sidebar-w:clamp(210px,16vw,250px)}
  html{font-size:clamp(13px,.83vw,16px)}
  .sidebar{width:var(--sidebar-w);padding:clamp(14px,1.35vw,22px) clamp(11px,1vw,16px)}
  .portal-shell{margin-left:var(--sidebar-w);padding:clamp(16px,1.6vw,24px) clamp(16px,1.7vw,26px) 54px}
  .workspace{max-width:min(1350px,100%)}
  .topbar{height:clamp(62px,5vw,72px);padding:0 clamp(16px,1.7vw,24px)}
  .sidebar{top:clamp(62px,5vw,72px)}
  .brand-mark{width:clamp(38px,3.1vw,44px);height:clamp(38px,3.1vw,44px)}
  .hero-title h1{font-size:clamp(24px,2vw,30px)}
  .panel{padding:clamp(14px,1.45vw,20px);border-radius:clamp(15px,1.35vw,20px)}
  .card{padding:clamp(12px,1.15vw,16px)}
  .stat-card{padding:clamp(13px,1.25vw,18px)}
  th,td{padding:clamp(9px,.9vw,12px) clamp(9px,.95vw,13px);font-size:clamp(11px,.78vw,13px)}
  .btn{padding:clamp(8px,.72vw,10px) clamp(10px,1vw,14px)}
  input,select,textarea{padding:clamp(9px,.78vw,11px) clamp(10px,.85vw,12px)}
}
.schedule-conflict-row td{background:#fff1f2!important;border-top:2px solid #ef4444;border-bottom:2px solid #ef4444}.schedule-conflict-row td:first-child{box-shadow:inset 5px 0 0 #ef4444}.weekly-school-table table{min-width:980px}.weekly-school-table th,.weekly-school-table td{text-align:center;vertical-align:middle}.weekly-time{white-space:nowrap;background:#f8fbff}.weekly-class{display:grid;gap:3px;padding:7px 5px;border-radius:10px;background:#f4f9ff;margin:3px 0}.weekly-class small{color:var(--muted)}
.embedded-module-shell{width:100%;min-height:72vh}.embedded-module-frame{display:block;width:100%;height:78vh;border:0;border-radius:16px;background:#fff}.discussion-embedded-frame{min-height:720px}
.content-player{background:#0b1220;border-radius:14px;padding:10px;min-height:62vh;display:grid;place-items:center;overflow:hidden}.content-player iframe,.content-player video{width:100%;height:68vh;max-height:78vh;border:0;border-radius:10px;background:#000}.content-player img{max-width:100%;max-height:72vh;object-fit:contain;border-radius:10px}.content-player-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}


/* V2.7.3 Student timetable — all four columns always visible, no horizontal scrolling on any device. */
.student-timetable-fit{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
}
.student-timetable-fit table{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}
.student-timetable-fit th,
.student-timetable-fit td{
  min-width:0!important;
  max-width:none!important;
  padding:8px 5px!important;
  font-size:11px!important;
  line-height:1.15!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  vertical-align:middle!important;
}
.student-timetable-fit th:nth-child(1),.student-timetable-fit td:nth-child(1){width:17%!important}
.student-timetable-fit th:nth-child(2),.student-timetable-fit td:nth-child(2){width:28%!important}
.student-timetable-fit th:nth-child(3),.student-timetable-fit td:nth-child(3){width:26%!important}
.student-timetable-fit th:nth-child(4),.student-timetable-fit td:nth-child(4){width:29%!important}
.student-timetable-fit .schedule-join-form{width:100%!important;max-width:100%!important}
.student-timetable-fit .btn.small{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:5px 3px!important;
  font-size:10px!important;
  line-height:1.05!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  border-radius:8px!important;
}
@media(max-width:650px){
  .student-timetable-fit th,.student-timetable-fit td{
    padding:5px 2px!important;
    font-size:8.5px!important;
    line-height:1.08!important;
    letter-spacing:-.02em!important;
  }
  .student-timetable-fit th{font-size:7.8px!important}
  .student-timetable-fit th:nth-child(1),.student-timetable-fit td:nth-child(1){width:16%!important}
  .student-timetable-fit th:nth-child(2),.student-timetable-fit td:nth-child(2){width:29%!important}
  .student-timetable-fit th:nth-child(3),.student-timetable-fit td:nth-child(3){width:25%!important}
  .student-timetable-fit th:nth-child(4),.student-timetable-fit td:nth-child(4){width:30%!important}
  .student-timetable-fit .btn.small{
    padding:4px 1px!important;
    font-size:7.8px!important;
    line-height:1!important;
    border-radius:7px!important;
  }
}
@media(max-width:390px){
  .student-timetable-fit th,.student-timetable-fit td{
    padding:4px 1px!important;
    font-size:7.6px!important;
  }
  .student-timetable-fit th{font-size:7px!important}
  .student-timetable-fit .btn.small{font-size:7px!important;padding:3px 1px!important}
}

/* Version A.1 — student mobile visibility, attendance summary and subject analytics. */
.attendance-total{margin-top:12px;display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:#f7fbff;border:1px solid #dcecff}.attendance-total span{color:var(--muted);font-size:12px}
.student-results-intro{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;margin-bottom:16px}.student-results-intro strong{font-size:18px}.student-results-intro span{color:var(--muted);font-size:12px}
.student-subject-analytics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.subject-analysis-card{border:1px solid var(--border);border-top:4px solid var(--subject-accent);border-radius:16px;padding:16px;background:#fff}.subject-analysis-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.subject-analysis-head>div:first-child{display:flex;align-items:center;gap:9px}.subject-analysis-head h3{margin:0}.subject-color-dot{width:11px;height:11px;border-radius:50%;background:var(--subject-accent);flex:0 0 auto}.subject-score{font-weight:900;font-size:22px;text-align:right;color:var(--subject-accent)}.subject-score small{display:block;font-size:10px;color:var(--muted);font-weight:700}.metric-profile{display:grid;gap:11px}.metric-label{display:flex;justify-content:space-between;gap:8px;font-size:12px}.metric-label strong{color:var(--subject-accent)}.metric-track{height:8px;background:#edf2f7;border-radius:999px;overflow:hidden}.metric-track span{display:block;height:100%;border-radius:inherit;background:var(--subject-accent)}.metric-row small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.activity-context{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;background:#f8fbff;border:1px solid #e3edf8;border-radius:11px}.activity-context strong{font-size:18px;color:var(--subject-accent)}.activity-context small{grid-column:1/-1;color:var(--muted)}.subject-notes{margin-top:13px;padding-top:11px;border-top:1px solid #edf2f7}.subject-notes strong{font-size:12px}.subject-notes ul{margin:6px 0 0;padding-left:18px;color:#52677d;font-size:11px}.result-advice{margin-top:16px}.result-details-title{margin:22px 0 10px}
@media(max-width:650px){
  .student-dashboard-stats{display:none!important}
  .student-sidebar{padding:8px!important}
  .student-sidebar nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;overflow:visible!important}
  .student-sidebar nav a{min-width:0!important;padding:7px 4px!important;font-size:9px!important;line-height:1.1!important;justify-content:center!important;text-align:center!important;flex-direction:column!important;gap:3px!important;white-space:normal!important}
  .student-sidebar nav a span{font-size:16px}
  .student-attendance-summary{overflow:hidden!important}
  .student-attendance-summary table{min-width:0!important;width:100%!important;table-layout:fixed!important}
  .student-attendance-summary th,.student-attendance-summary td{padding:7px 3px!important;font-size:10px!important;text-align:center!important;overflow-wrap:anywhere!important}
  .student-attendance-summary th{font-size:8px!important}.student-attendance-summary th:first-child,.student-attendance-summary td:first-child{width:34%!important;text-align:left!important}.student-attendance-summary th:not(:first-child),.student-attendance-summary td:not(:first-child){width:22%!important}
  .attendance-total{align-items:flex-start;flex-direction:column}.student-results-intro{align-items:flex-start;flex-direction:column}.student-subject-analytics{grid-template-columns:1fr}.subject-analysis-card{padding:12px}.subject-analysis-head h3{font-size:16px}.subject-score{font-size:18px}
  .student-result-details{overflow:hidden!important}.student-result-details table{min-width:0!important;width:100%!important;table-layout:fixed!important}.student-result-details th,.student-result-details td{padding:6px 2px!important;font-size:8px!important;overflow-wrap:anywhere!important}.student-result-details th{font-size:7px!important}
}

/* Version A.2 — student-only premium mobile adaptation. Logic and tablet/desktop layouts are unchanged. */
@media(max-width:650px){
  body.student-portal{
    background:linear-gradient(180deg,#f4f8fd 0,#eef5fb 36%,#f8fbfe 100%);
    overflow-x:hidden;
  }
  body.student-portal .topbar{
    position:sticky;top:0;z-index:70;
    min-height:68px;height:auto;
    padding:10px 12px;
    align-items:center;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    border-bottom:1px solid #e4edf7;
    box-shadow:0 5px 18px rgba(14,52,88,.06);
  }
  body.student-portal .brand{gap:9px;min-width:0}
  body.student-portal .brand-mark{width:42px;height:42px;border-radius:13px;flex:0 0 42px;box-shadow:0 8px 20px rgba(1,105,216,.12)}
  body.student-portal .brand strong{font-size:16px;line-height:1.1;letter-spacing:-.01em}
  body.student-portal .brand small{font-size:10px;line-height:1.15;margin-top:3px;white-space:nowrap;max-width:205px;overflow:hidden;text-overflow:ellipsis}
  body.student-portal .top-actions{gap:6px;flex:0 0 auto}
  body.student-portal .top-actions .btn.small{padding:8px 10px;border-radius:10px;font-size:10px;background:#fff;box-shadow:none}

  body.student-portal .student-sidebar{
    border:0!important;
    padding:10px 10px 4px!important;
    background:transparent!important;
  }
  body.student-portal .student-sidebar nav{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
    padding:8px!important;
    background:rgba(255,255,255,.96);
    border:1px solid #e1ebf5;
    border-radius:18px;
    box-shadow:0 10px 28px rgba(18,60,96,.06);
  }
  body.student-portal .student-sidebar nav a{
    min-width:0!important;
    min-height:57px;
    padding:7px 3px!important;
    border-radius:13px!important;
    font-size:8.3px!important;
    font-weight:800!important;
    line-height:1.05!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
    flex-direction:column!important;
    gap:4px!important;
    white-space:normal!important;
    color:#526a82!important;
    background:#f8fbfe;
    border:1px solid transparent;
  }
  body.student-portal .student-sidebar nav a span{font-size:17px!important;line-height:1}
  body.student-portal .student-sidebar nav a.active{
    color:#075eae!important;
    background:linear-gradient(180deg,#edf6ff,#e7f2ff)!important;
    border-color:#cfe5fb!important;
    box-shadow:inset 0 0 0 1px rgba(1,105,216,.03);
  }

  body.student-portal .portal-shell{padding:8px 10px 28px!important;margin:0!important;max-width:100vw;overflow-x:hidden}
  body.student-portal .workspace{width:100%;max-width:100%;min-width:0}
  body.student-portal .hero-title{margin:10px 2px 14px}
  body.student-portal .hero-title h1{font-size:24px;line-height:1.05;letter-spacing:-.025em;margin-bottom:5px;color:#0a3152}
  body.student-portal .hero-title p{font-size:11px;line-height:1.35;color:#71849a}

  body.student-portal .panel{
    padding:14px!important;
    margin-bottom:13px!important;
    border-radius:20px!important;
    border:1px solid #e2ebf4!important;
    box-shadow:0 10px 26px rgba(12,54,90,.055)!important;
    background:rgba(255,255,255,.98);
  }
  body.student-portal .panel-head{margin-bottom:12px;align-items:flex-start}
  body.student-portal .panel h2{font-size:18px;line-height:1.15;letter-spacing:-.015em}
  body.student-portal .panel-head p{font-size:11px;line-height:1.4;margin-top:4px}
  body.student-portal .card{
    border-radius:16px;
    border-color:#e4edf6;
    padding:13px;
    box-shadow:none;
  }
  body.student-portal .card h3{font-size:14px;line-height:1.25}
  body.student-portal .card p{font-size:11px;line-height:1.45}
  body.student-portal .notice,body.student-portal .alert{border-radius:14px;font-size:11px;line-height:1.45;padding:11px 12px}
  body.student-portal .btn{border-radius:11px;min-height:38px;padding:9px 12px;font-size:11px}
  body.student-portal .btn.small{min-height:32px;padding:7px 9px;font-size:9.5px}
  body.student-portal input,body.student-portal select,body.student-portal textarea{border-radius:12px;padding:10px 11px;font-size:13px}
  body.student-portal label{font-size:11px}
  body.student-portal input[readonly]{background:#f4f7fa;color:#53677a;border-color:#dfe8f1;cursor:not-allowed}

  body.student-portal .student-quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  body.student-portal .student-quick-grid>a.card{
    min-height:92px;
    padding:13px 10px!important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(180deg,#fff,#f8fbff);
    border-color:#deebf7;
  }
  body.student-portal .student-quick-grid>a.card h3{font-size:12px;margin:0 0 5px;line-height:1.3}
  body.student-portal .student-quick-grid>a.card p{font-size:9px;margin:0;color:#8292a4}

  body.student-portal .grid.two{gap:10px}
  body.student-portal .actions{gap:6px}
  body.student-portal .empty{padding:20px 10px;font-size:11px}
  body.student-portal details{font-size:11px}
  body.student-portal summary{font-weight:800}

  body.student-portal .student-subject-analytics{gap:10px}
  body.student-portal .subject-analysis-card{border-radius:17px;padding:12px}
  body.student-portal .metric-track{height:7px}
  body.student-portal .attendance-total{border-radius:14px;padding:10px 11px}
}
@media(max-width:380px){
  body.student-portal .student-sidebar nav{gap:5px!important;padding:6px!important}
  body.student-portal .student-sidebar nav a{min-height:53px;font-size:7.6px!important;padding:6px 2px!important}
  body.student-portal .student-sidebar nav a span{font-size:16px!important}
  body.student-portal .portal-shell{padding-left:8px!important;padding-right:8px!important}
  body.student-portal .panel{padding:12px!important}
  body.student-portal .hero-title h1{font-size:22px}
}


/* Version A.3 — student mobile identity/notification bar. Student logic outside this header is unchanged. */
.student-mobile-subbar{display:none}
@media(max-width:650px){
  body.student-portal .student-mobile-subbar{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    position:sticky;top:68px;z-index:65;
    min-height:58px;padding:7px 11px;
    background:rgba(246,250,254,.97);backdrop-filter:blur(14px);
    border-bottom:1px solid #dfeaf5;box-shadow:0 5px 16px rgba(14,52,88,.045);
  }
  body.student-portal .student-mobile-identity{
    min-width:0;display:flex;align-items:center;gap:9px;text-decoration:none;color:#0b3558;flex:1 1 auto;
  }
  body.student-portal .student-mobile-avatar{
    width:39px;height:39px;flex:0 0 39px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
    background:linear-gradient(135deg,#1178d5,#41a4ef);color:#fff;font-weight:900;font-size:15px;
    border:2px solid #fff;box-shadow:0 5px 14px rgba(10,91,160,.18);
  }
  body.student-portal .student-mobile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
  body.student-portal .student-mobile-name{
    min-width:0;max-width:calc(100vw - 165px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:13px;font-weight:900;letter-spacing:-.01em;color:#103a5e;
  }
  body.student-portal .student-mobile-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
  body.student-portal .student-mobile-icon{
    position:relative;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;text-decoration:none;
    background:#fff;border:1px solid #dbe8f4;color:#1269ae;font-size:21px;line-height:1;
    box-shadow:0 5px 13px rgba(19,74,116,.055);
  }
  body.student-portal .student-mobile-icon:last-child{font-family:Arial,sans-serif;font-size:26px;font-weight:800;padding-bottom:3px}
  body.student-portal .student-mobile-bell em{
    position:absolute;right:-5px;top:-6px;min-width:19px;height:19px;padding:0 4px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;background:#e3273f;color:#fff;border:2px solid #f6fafe;
    font:900 9px/1 Arial,sans-serif;font-style:normal;box-shadow:0 3px 8px rgba(202,27,54,.22);
  }
  body.student-portal .student-mobile-bell.has-unread>span{
    transform-origin:50% 8%;animation:studentBellRing 1.45s ease-in-out infinite;
  }
  @keyframes studentBellRing{
    0%,55%,100%{transform:rotate(0)}
    5%{transform:rotate(13deg)}10%{transform:rotate(-12deg)}15%{transform:rotate(10deg)}20%{transform:rotate(-8deg)}25%{transform:rotate(5deg)}30%{transform:rotate(0)}
  }
  @media(prefers-reduced-motion:reduce){body.student-portal .student-mobile-bell.has-unread>span{animation:none}}
  /* The mobile student navigation exists once only. Dashboard + Notifications live in the subbar above. */
  body.student-portal .student-sidebar{padding-top:7px!important}
}
@media(max-width:380px){
  body.student-portal .student-mobile-subbar{padding-left:8px;padding-right:8px;gap:6px}
  body.student-portal .student-mobile-avatar{width:36px;height:36px;flex-basis:36px}
  body.student-portal .student-mobile-name{font-size:12px;max-width:calc(100vw - 153px)}
  body.student-portal .student-mobile-icon{width:35px;height:35px;border-radius:11px;font-size:19px}
}

/* Version A.4 — student mobile header interaction + dashboard-only menu. */
@media(max-width:650px){
  /* Keep the secondary header controls above neighboring layers and fully clickable. */
  body.student-portal .student-mobile-subbar{isolation:isolate}
  body.student-portal .student-mobile-identity{position:relative;z-index:1;max-width:calc(100% - 92px)}
  body.student-portal .student-mobile-tools{position:relative;z-index:5;pointer-events:auto}
  body.student-portal .student-mobile-icon{position:relative;z-index:6;pointer-events:auto;touch-action:manipulation}
  body.student-portal .student-mobile-icon *{pointer-events:none}

  /* Student menu is a Dashboard component on phones; it must not repeat on inner pages. */
  body.student-portal .student-sidebar:not(.student-sidebar-dashboard){display:none!important}
  body.student-portal .student-sidebar.student-sidebar-dashboard{display:block!important}
}

/* Version A.5 — mobile student navigation model: dashboard grid only + true notification center. */
.student-mobile-backbar{display:none}
@media(max-width:650px){
  /* The platform navigation never behaves as a persistent/mobile sidebar. */
  body.student-portal .student-sidebar{display:none!important}
  body.student-portal .student-sidebar.student-sidebar-dashboard{
    display:block!important;position:static!important;width:auto!important;
    margin:6px 10px 10px!important;padding:0!important;border:0!important;background:transparent!important;
  }
  body.student-portal .student-sidebar.student-sidebar-dashboard .side-title{display:none!important}
  body.student-portal .student-sidebar.student-sidebar-dashboard nav{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;padding:10px!important;overflow:visible!important;
    background:#fff!important;border:1px solid #e1ebf5!important;border-radius:18px!important;
    box-shadow:0 10px 28px rgba(18,60,96,.06)!important;
  }
  body.student-portal .student-sidebar.student-sidebar-dashboard nav a{
    min-width:0!important;min-height:64px!important;padding:8px 4px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:5px!important;text-align:center!important;white-space:normal!important;
    font-size:8.7px!important;line-height:1.08!important;font-weight:800!important;
    border-radius:13px!important;background:#f8fbfe!important;color:#526a82!important;border:1px solid #edf3f8!important;
  }
  body.student-portal .student-sidebar.student-sidebar-dashboard nav a span{font-size:18px!important;line-height:1!important}

  /* Every inner student module gets one clear way back to the Dashboard. */
  body.student-portal .student-mobile-backbar{
    display:flex!important;margin:8px 10px 2px!important;position:relative;z-index:20;
  }
  body.student-portal .student-mobile-backbar a{
    display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#0b65ae;
    background:#fff;border:1px solid #dbe8f4;border-radius:12px;padding:8px 11px;
    font-size:10px;font-weight:900;box-shadow:0 5px 13px rgba(19,74,116,.05);
  }
  body.student-portal .student-mobile-backbar a span{font:800 20px/1 Arial,sans-serif;margin-top:-2px}

  /* Notification center: card feed rather than the generic module list. */
  body.student-portal .student-notification-feed{display:grid;gap:9px}
  body.student-portal .student-notification-item{
    display:grid;grid-template-columns:42px minmax(0,1fr) 28px;align-items:center;gap:10px;
    padding:11px;border:1px solid #e1ebf4;border-radius:16px;background:linear-gradient(180deg,#fff,#f9fcff);
    box-shadow:0 6px 16px rgba(14,55,89,.035);
  }
  body.student-portal .student-notification-icon{
    width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:19px;
    background:#edf6ff;border:1px solid #d8eafa;
  }
  body.student-portal .student-notification-copy{min-width:0}
  body.student-portal .student-notification-copy strong{display:block;font-size:12px;color:#103a5e;line-height:1.25}
  body.student-portal .student-notification-copy p{margin:3px 0 4px!important;font-size:10px!important;line-height:1.35!important;color:#667b90!important}
  body.student-portal .student-notification-copy small{font-size:8.5px;color:#91a0ae}
  body.student-portal .student-notification-open{
    width:28px;height:28px;border-radius:9px;display:grid;place-items:center;text-decoration:none;
    background:#eef6ff;color:#0a69b7;font:700 24px/1 Arial,sans-serif;
  }
  body.student-portal .student-notification-empty{display:grid;justify-items:center;gap:5px;padding:28px 12px!important}
  body.student-portal .student-notification-empty>span{font-size:30px}
  body.student-portal .student-notification-empty strong{font-size:13px;color:#244965}
  body.student-portal .student-notification-empty p{font-size:10px;margin:0;color:#7d8da0}
}
@media(max-width:380px){
  body.student-portal .student-sidebar.student-sidebar-dashboard nav{gap:6px!important;padding:8px!important}
  body.student-portal .student-sidebar.student-sidebar-dashboard nav a{min-height:60px!important;font-size:8px!important;padding:7px 2px!important}
}

/* Version A.6 — phone Dashboard is grid-only; bell navigation hardened. */
@media(max-width:650px){
  /* On the student phone Dashboard, keep only the secondary header + 3-column module grid.
     The generic Dashboard heading, welcome cards, quick-action duplication and announcements are hidden as one unit. */
  body.student-portal.student-module-dashboard .portal-shell{display:none!important}

  body.student-portal .student-sidebar.student-sidebar-dashboard{
    margin:8px 8px 16px!important;
  }
  body.student-portal .student-sidebar.student-sidebar-dashboard nav{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:clamp(6px,2vw,10px)!important;
    padding:clamp(8px,2.6vw,12px)!important;
  }
  body.student-portal .student-sidebar.student-sidebar-dashboard nav a{
    min-height:clamp(62px,19vw,82px)!important;
    padding:clamp(6px,2vw,10px) 3px!important;
    font-size:clamp(7.8px,2.45vw,10.5px)!important;
    line-height:1.12!important;
  }
  body.student-portal .student-sidebar.student-sidebar-dashboard nav a span{
    font-size:clamp(17px,5.8vw,23px)!important;
  }

  /* Guarantee the bell/home controls own their whole tap area on iOS/Safari. */
  body.student-portal .student-mobile-subbar{position:relative!important;top:auto!important;z-index:200!important;overflow:visible!important}
  body.student-portal .student-mobile-identity{z-index:1!important}
  body.student-portal .student-mobile-tools{z-index:210!important;pointer-events:auto!important}
  body.student-portal .student-mobile-icon{
    z-index:220!important;pointer-events:auto!important;cursor:pointer!important;
    -webkit-tap-highlight-color:rgba(1,105,216,.12);
  }
}


/* Version A.7 ROOT FIX — actual mobile student structure, not a CSS illusion. */
.student-mobile-dashboard-grid{display:none}
@media(max-width:650px){
  /* The dashboard module grid is rendered OUTSIDE .portal-shell, so hiding the old dashboard can never hide the grid. */
  body.student-portal.student-module-dashboard .student-mobile-dashboard-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:clamp(7px,2.4vw,11px)!important;
    width:calc(100% - 16px)!important;
    max-width:100%!important;
    margin:8px auto 18px!important;
    padding:clamp(8px,2.5vw,12px)!important;
    background:#fff!important;
    border:1px solid #e5edf6!important;
    border-radius:16px!important;
    box-shadow:0 8px 24px rgba(20,63,104,.06)!important;
  }
  body.student-portal .student-mobile-dashboard-grid a{
    min-width:0!important;
    min-height:clamp(66px,20vw,86px)!important;
    padding:clamp(7px,2vw,11px) 3px!important;
    border:1px solid #e5edf6!important;
    border-radius:13px!important;
    background:#fff!important;
    text-decoration:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    color:#35516d!important;
    text-align:center!important;
    overflow:hidden!important;
  }
  body.student-portal .student-mobile-dashboard-grid a:active{transform:scale(.97)}
  body.student-portal .student-mobile-dashboard-grid a span{font-size:clamp(18px,5.8vw,25px)!important;line-height:1!important}
  body.student-portal .student-mobile-dashboard-grid a b{
    display:block!important;
    width:100%!important;
    font-size:clamp(7.5px,2.45vw,10.5px)!important;
    line-height:1.15!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  /* Old platform/sidebar menu is never used on phones. */
  body.student-portal .student-sidebar{display:none!important}
  /* On phone Dashboard, all generic dashboard content stays hidden. The standalone grid above remains visible. */
  body.student-portal.student-module-dashboard .portal-shell{display:none!important}
  /* Bell/home are real links. Keep their full tap targets above all decorative layers. */
  body.student-portal .student-mobile-subbar{position:relative!important;z-index:500!important}
  body.student-portal .student-mobile-tools{position:relative!important;z-index:520!important;pointer-events:auto!important}
  body.student-portal a.student-mobile-icon{position:relative!important;z-index:530!important;pointer-events:auto!important;touch-action:manipulation!important}
  body.student-portal a.student-mobile-icon span,body.student-portal a.student-mobile-icon em{pointer-events:none!important}
}
@media(max-width:360px){
  body.student-portal.student-module-dashboard .student-mobile-dashboard-grid{gap:6px!important;padding:7px!important}
  body.student-portal .student-mobile-dashboard-grid a{min-height:62px!important;padding:6px 2px!important}
  body.student-portal .student-mobile-dashboard-grid a b{font-size:7px!important}
}

/* Version A.8 — reuse the approved student phone layout for Teacher and Admin roles. */
@media(max-width:650px){
  body.student-portal .top-actions .language-switch{gap:3px}
  body.student-portal .top-actions .language-switch a{padding:6px 5px!important;font-size:9px!important;border-radius:8px!important}
}
@media(max-width:380px){
  body.student-portal .top-actions .language-switch a{padding:5px 4px!important;font-size:8px!important}
}