:root { --navy:#0D3B66; --blue:#0B62A4; --orange:#FF6B00; --bg:#F4F7FB; --line:#DCE5F0; --muted:#64748B; --green:#14804A; }
    html, body {
      width: 100%; max-width: 100%; min-width: 0;
      overflow-x: hidden; overflow-x: clip;
      -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    }
    *, *::before, *::after { box-sizing: border-box; }
    img, svg, video, canvas { max-width: 100%; height: auto; }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--bg); color:#0F172A; font:14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
    button, input { font:inherit; }
    .topbar { position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 1px 3px rgba(0,0,0,.04); }
    .topbar-inner { max-width:1180px; margin:auto; min-height:72px; padding:12px 22px; display:flex; gap:18px; align-items:center; justify-content:space-between; }
    .brand { display:flex; align-items:center; gap:10px; color:var(--navy); text-decoration:none; font-size:20px; font-weight:900; white-space:nowrap; }
    .brand-mark { width:40px; height:40px; border-radius:8px; object-fit:cover; }
    .nav-actions { display:flex; align-items:center; gap:10px; }
    .student-pill { padding:9px 13px; border-radius:999px; background:#EFF6FF; color:var(--navy); font-weight:800; }
    .btn { border:0; border-radius:8px; padding:10px 15px; cursor:pointer; font-weight:800; }
    .btn-primary { color:#fff; background:var(--navy); }
    .btn-orange { color:#fff; background:var(--orange); }
    .btn-ghost { color:var(--navy); background:#EFF6FF; }
    .page { max-width:1180px; margin:0 auto; padding:28px 22px 56px; max-width:100vw; }
    .hero { background:linear-gradient(135deg,#0D3B66,#0B62A4); color:#fff; border-radius:10px; padding:28px 30px; display:flex; justify-content:space-between; gap:20px; align-items:center; border:1px solid rgba(255,255,255,0.15); box-shadow:0 2px 6px rgba(13,59,102,.12); }
    .hero h1 { margin:0 0 5px; font-size:28px; }
    .hero p { margin:0; color:#DDEBFA; }
    .hero-code { text-align:right; font-weight:800; color:#fff; }
    .section { margin-top:26px; }
    .section-head { display:flex; justify-content:space-between; align-items:end; gap:14px; margin-bottom:12px; }
    .section-head h2 { margin:0; color:var(--navy); font-size:20px; }
    .section-note { color:var(--muted); font-size:13px; }
    .grid { display:grid; gap:14px; }
    .stats-grid { grid-template-columns:repeat(3,1fr); }
    .skill-grid { grid-template-columns:repeat(4,1fr); }
    .profile-grid { grid-template-columns:1fr 1fr; }
    .card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:19px; box-shadow:0 1px 3px rgba(0,0,0,.04); min-width:0; }
    .stat-label { color:var(--muted); font-weight:700; font-size:13px; }
    .stat-value { margin-top:6px; color:var(--navy); font-size:32px; font-weight:900; }
    .stat-sub { color:var(--muted); font-size:12px; }
    .skill-card { padding:15px; border-top:4px solid var(--blue); }
    .skill-name { color:var(--navy); font-weight:900; }
    .skill-score { font-size:22px; font-weight:900; color:var(--blue); margin-top:5px; }
    .info-title { color:var(--navy); font-size:16px; font-weight:900; margin:0 0 12px; }
    .info-row { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid #EEF2F7; padding:9px 0; }
    .info-row:last-child { border-bottom:0; }
    .info-row span { color:var(--muted); }
    .info-row strong { text-align:right; overflow-wrap:anywhere; }
    .attendance { display:flex; align-items:center; gap:22px; }
    .ring { width:94px; height:94px; flex:none; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--orange) 0%,#E2E8F0 0%); position:relative; }
    .ring::after { content:""; position:absolute; inset:9px; background:#fff; border-radius:50%; }
    .ring b { position:relative; z-index:1; color:var(--navy); font-size:20px; }
    .class-list, .schedule-list { display:grid; gap:10px; }
    .class-item { border-left:4px solid var(--orange); background:#FFF8F2; border-radius:8px; padding:12px 14px; }
    .class-item b { color:var(--navy); display:block; }
    .class-item small { display:block; color:var(--muted); margin-top:3px; }
    .schedule-item { display:grid; grid-template-columns:120px 1fr; gap:15px; align-items:start; padding:13px 0; border-bottom:1px solid #EEF2F7; }
    .schedule-day { color:var(--navy); font-weight:900; }
    .schedule-detail { color:var(--muted); }
    .weekly-schedule { display:grid; grid-template-columns:repeat(7, 1fr); gap:9px; width:100%; }
    .week-day { min-height:120px; border:1px solid var(--line); border-radius:8px; padding:12px; background:#FFFFFF; display:flex; flex-direction:column; transition:transform 0.15s ease, box-shadow 0.15s ease; min-width:0; overflow-wrap:anywhere; }
    .week-day.today { border-color:#0B42A1; background:#F8FAFC; border-width:2px; box-shadow:0 3px 10px rgba(11,66,161,0.08); }
    .week-day-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid #EEF2F7; }
    .week-day-title { color:var(--navy); font-size:13px; font-weight:800; }
    .today-tag { background:#0B42A1; color:#fff; font-size:10px; font-weight:800; padding:2px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:0.3px; }
    .week-day small.no-class { color:var(--muted); display:block; margin:auto 0; text-align:center; padding:12px 0; font-size:12px; }
    .week-class { margin-top:6px; padding:8px; border-left:3px solid var(--orange); background:#F8FAFC; border-radius:6px; color:var(--navy); font-size:11px; font-weight:800; line-height:1.45; }
    .schedule-class-card { transition:transform 0.15s ease, box-shadow 0.15s ease; }
    .schedule-class-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.08) !important; }
    .assignment-grid { grid-template-columns:repeat(3,1fr); }
    .assignment {
      content-visibility: auto;
      contain-intrinsic-size: 0 130px;
      display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:10px; padding:16px; background:#fff; min-width:0; overflow-wrap:anywhere;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
      transition: transform 0.15s ease;
    }
    .assignment:hover { transform: translateY(-2px); }
    .assignment.r2-assignment { border:1.5px solid #FFB36F; box-shadow:0 1px 3px rgba(255,107,0,.08); }
    .assignment h3 { margin:0; color:var(--navy); font-size:16px; }
    .assignment p { margin:0; color:var(--muted); font-size:13px; }
    .assignment-footer { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:9px; border-top:1px solid #EEF2F7; }
    .practice-grid { grid-template-columns:repeat(4,1fr); }
    .practice-card { min-height:190px; color:#fff; border:0; border-radius:10px; padding:20px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .15s ease; min-width:0; overflow-wrap:anywhere; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
    .practice-card:hover { transform:translateY(-2px); }
    .practice-card h3 { margin:0; font-size:21px; }
    .practice-card p { margin:8px 0 14px; color:rgba(255,255,255,.86); font-size:12px; }
    .practice-card a { display:block; padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.22); color:#fff; text-align:center; text-decoration:none; font-size:12px; font-weight:900; }
    .practice-reading { background:#2563EB; } .practice-listening { background:#0F9D92; } .practice-writing { background:#166534; } .practice-speaking { background:#6D28D9; }
    .empty { color:var(--muted); text-align:center; padding:22px; background:#F8FAFC; border-radius:8px; border:1px solid var(--line); }
    .notice { margin-bottom:18px; padding:12px 15px; border-radius:8px; background:#FFF7ED; border:1px solid #FED7AA; color:#9A3412; }
    .loading { color:var(--muted); padding:25px; text-align:center; }
    .portal-shell { width:100%; margin:0; padding:28px 30px 56px 0; display:grid; grid-template-columns:292px minmax(0,1fr); gap:26px; }
    .student-sidebar { position:sticky; top:73px; align-self:start; min-height:calc(100vh - 73px); background:linear-gradient(180deg,#073b7a,#06285d); padding:27px 20px; border-radius:0 10px 10px 0; box-shadow:2px 0 8px rgba(5,36,102,.08); color:#fff; }
    .sidebar-label { font-size:12px; font-weight:900; letter-spacing:.12em; color:#a9c8ef; padding:7px 12px 14px; text-transform:uppercase; }
    .side-link { width:100%; display:flex; gap:12px; align-items:center; border:0; background:transparent; color:#d7e8ff; border-radius:8px; padding:14px 12px; text-align:left; font-size:15px; font-weight:800; cursor:pointer; transition:transform .15s ease, background .15s ease; }
    .side-link:hover { background:rgba(255,255,255,.1); color:#fff; transform:translateX(2px); }.side-link.active { background:#fff; color:#0b42a1; box-shadow:0 1px 3px rgba(0,0,0,.08); }.side-icon { width:24px; text-align:center; font-size:17px; }
    .page { max-width:none; margin:0; padding:0; min-width:0; }.portal-view { display:none; animation:fadeIn .15s ease; }.portal-view.active { display:block; }@keyframes fadeIn { from { opacity:0; transform:translateY(3px) } to { opacity:1; transform:none } }
    .notification-list { display:grid; gap:11px; }.notification { border-left:4px solid var(--orange); background:#fff8f2; padding:14px 16px; border-radius:8px; border:1px solid #FED7AA; }.notification b{display:block;color:var(--navy)}.notification small{color:var(--muted)}
    /* Mobile Menu Drawer & Toggle */
    .menu-toggle-btn {
      display: none;
      background: #EFF6FF;
      border: 1px solid #BFDBFE;
      color: var(--navy);
      width: 40px;
      height: 40px;
      border-radius: 8px;
      cursor: pointer;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4.5px;
      padding: 0;
      transition: transform 0.15s ease;
      flex-shrink: 0;
    }
    .menu-toggle-btn:hover { background: #DBEAFE; transform: scale(1.02); }
    .menu-toggle-btn span {
      display: block; width: 20px; height: 2.2px; background: var(--navy); border-radius: 2px;
      transition: transform 0.15s, opacity 0.15s;
    }
    .sidebar-backdrop {
      display: none; position: fixed; inset: 0; background: rgba(5, 36, 102, 0.75);
      z-index: 999; opacity: 0; transition: opacity 0.2s ease;
    }
    .sidebar-backdrop.active { display: block; opacity: 1; }
    .sidebar-close-btn {
      display: none; background: rgba(255,255,255,0.15); border: none; color: #fff;
      width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer;
      align-items: center; justify-content: center; margin-left: auto;
    }

    /* Laptops with Windows display scaling often expose a 900–1200px CSS
       viewport.  Let content wrap before the fixed sidebar can crush it. */
    @media (max-width:1200px) {
      .portal-shell { grid-template-columns:240px minmax(0,1fr); gap:16px; padding-right:20px; }
      .student-sidebar { padding:22px 15px; }
      .side-link { font-size:14px; padding:12px 10px; }
      .weekly-schedule { grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
      .stats-grid { grid-template-columns:repeat(auto-fit, minmax(175px, 1fr)); }
      .skill-grid { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
      .assignment-grid { grid-template-columns:repeat(auto-fit, minmax(245px, 1fr)); }
      .practice-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width:1024px) {
      .menu-toggle-btn { display: flex; }
      .sidebar-close-btn { display: inline-flex; }
      .portal-shell { grid-template-columns: 1fr; padding: 20px 18px 44px; }
      .student-sidebar {
        position: fixed !important; top: 0; bottom: 0; left: 0; width: 285px; max-width: 85vw;
        height: 100vh !important; min-height: 100vh !important; z-index: 1000;
        transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0 20px 20px 0; overflow-y: auto; box-shadow: 10px 0 35px rgba(5,36,102,.45);
        padding: 20px 16px; display: flex; flex-direction: column; gap: 4px;
      }
      .student-sidebar.drawer-open { transform: translateX(0); }
      .sidebar-label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
      .side-link { width: 100%; white-space: normal; padding: 12px 14px; font-size: 14px; border-radius: 10px; }
      .side-icon { display: inline-block; width: 22px; }
      .student-pill { display:none; }
    }
    @media (max-width:800px) {
      .weekly-schedule { display: flex; flex-direction: column; gap: 8px; width: 100%; }
      .week-day { min-height: auto; padding: 10px 14px; }
      .week-day-header { margin-bottom: 4px; padding-bottom: 4px; }
      .week-day small.no-class { text-align: left; padding: 2px 0; font-size: 11.5px; }
      .stats-grid, .skill-grid, .profile-grid, .assignment-grid, .practice-grid { grid-template-columns: 1fr; }
      .hero { align-items: flex-start; flex-direction: column; padding: 20px; }
      .hero-code { text-align: left; margin-top: 10px; }
    }
    @media (max-width:560px) {
      .topbar-inner { padding: 10px 12px; gap: 8px; }
      .brand { font-size: 15px; gap: 6px; }
      .brand-mark { width: 34px; height: 34px; border-radius: 8px; }
      .nav-actions { gap: 6px; }
      .nav-actions .btn { padding: 8px 10px; font-size: 11.5px; border-radius: 8px; }
      .student-pill { display: none; }
      .hero h1 { font-size: 20px; }
      .schedule-item { grid-template-columns: 1fr; gap: 3px; }
      /* Compact dashboard: preserve readable text and tap targets while
         removing desktop-density spacing from the one-column layout. */
      .portal-shell { padding: 10px 10px 24px; gap: 10px; }
      .hero { padding: 12px; border-radius: 14px; gap: 8px; }
      .hero h1 { font-size: 18px; line-height: 1.25; }
      .hero p { font-size: 12px; line-height: 1.35; }
      .section { margin-top: 14px; }
      .section-head { margin-bottom: 7px; }
      .section-head h2 { font-size: 16px; }
      .card { padding: 12px; border-radius: 12px; }
      .stat-value { font-size: 24px; margin-top: 3px; }
      .week-day { min-height: auto; padding: 8px 10px; }
      .assignment { padding: 12px; gap: 7px; }
      .practice-card { min-height: 132px; padding: 13px; }
      .practice-card h3 { font-size: 17px; }
      .practice-card p { margin: 5px 0 8px; }
    }

    /* Skill Library Modal */
    .skill-modal-backdrop {
      position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
      background: rgba(13, 59, 102, 0.82);
      z-index: 10000; display: none; align-items: center; justify-content: center;
      padding: 16px;
    }
    .skill-modal-backdrop.active { display: flex; }
    .skill-modal-dialog {
      background: #FFFFFF; width: 100%; max-width: 1040px; max-height: 90vh;
      border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
      display: flex; flex-direction: column; overflow: hidden; border: 1px solid #CBD5E1;
      animation: modalPop .18s ease;
    }
    @keyframes modalPop {
      from { transform: translateY(20px) scale(0.97); opacity: 0; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }
    .skill-modal-header {
      padding: 20px 28px; background: linear-gradient(135deg, #06245F, #0B42A1);
      color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    }
    .skill-modal-title { font-size: 20px; font-weight: 900; margin: 0; color: #FFFFFF; }
    .skill-modal-close-btn {
      background: rgba(255, 255, 255, 0.16); border: none; color: #FFFFFF;
      width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer;
      display: flex; align-items: center; justify-content: center; transition: all 0.2s;
    }
    .skill-modal-close-btn:hover { background: #FF6B00; transform: scale(1.1); }
    .skill-modal-subbar {
      padding: 14px 28px; background: #F8FAFC; border-bottom: 1px solid #E2E8F0;
      display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    }
    .skill-tabs-nav { display: flex; gap: 8px; flex-wrap: wrap; }
    .skill-tab-item {
      padding: 6px 16px; border-radius: 999px; font-size: 12px; font-weight: 800;
      border: 1.5px solid #CBD5E1; background: #FFFFFF; color: #334155; cursor: pointer;
      transition: all 0.18s ease;
    }
    .skill-tab-item:hover { background: #F1F5F9; }
    .skill-tab-item.active { background: #0B42A1; color: #FFFFFF; border-color: #0B42A1; }
    .skill-modal-search {
      padding: 12px 28px; background: #FFFFFF; border-bottom: 1px solid #E8EEF5;
      display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    }
    .skill-modal-search input {
      border: 1.5px solid #CBD5E1; border-radius: 999px; padding: 7px 18px;
      font-size: 13px; outline: none; width: 320px; max-width: 100%; transition: border-color 0.2s;
    }
    .skill-modal-search input:focus { border-color: #0B42A1; }
    .skill-modal-body {
      padding: 24px 28px; overflow-y: auto; flex: 1; min-height: 280px;
    }
    .skill-modal-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px;
    }
    .skill-item-card {
      background: #FFFFFF; border: 1.5px solid #E2E8F0; border-radius: 16px; padding: 18px;
      display: flex; flex-direction: column; gap: 10px; transition: all 0.2s ease;
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    }
    .skill-item-card:hover {
      border-color: #0B42A1; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11, 66, 161, 0.12);
    }
    .skill-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
    .skill-pill-tag {
      font-size: 10px; font-weight: 900; padding: 4px 8px; border-radius: 6px;
      text-transform: uppercase; letter-spacing: 0.4px;
    }
    .tag-single { background: #E0F2FE; color: #0369A1; }
    .tag-skill-reading { background: #EFF6FF; color: #1D4ED8; }
    .tag-skill-listening { background: #F0FDFA; color: #0F766E; }
    .tag-skill-writing { background: #F0FDF4; color: #15803D; }
    .tag-skill-speaking { background: #FAF5FF; color: #6B21A8; }
    .tag-level { background: #FFF7ED; color: #C2410C; }
    .tag-duration { background: #F1F5F9; color: #475569; }
    .skill-item-title { font-size: 15.5px; font-weight: 800; color: #082B63; margin: 0; line-height: 1.35; }
    .skill-item-desc { font-size: 12.5px; color: #64748B; margin: 0; line-height: 1.5; }
    .skill-item-actions { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 6px; }
    .btn-skill-do {
      background: #FF6B00; color: #FFFFFF; text-decoration: none; border-radius: 999px;
      padding: 7px 18px; font-size: 12px; font-weight: 800; border: none; cursor: pointer;
      transition: background 0.18s ease; display: inline-flex; align-items: center;
    }
    .btn-skill-do:hover { background: #E05D00; }
    .practice-card .btn { margin-top: 10px; background: rgba(255,255,255,.22); color: #fff; font-size: 12px; font-weight: 900; width: 100%; text-align: center; }
    .practice-card .btn:hover { background: rgba(255,255,255,.35); }
    .video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; align-items:start; }
    .lecture-video-card { overflow:hidden; padding:0; border:1px solid #D9E5F5; }
    .lecture-video-card.is-open { grid-column:1/-1; }
    .lecture-video-thumb { position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#EAF4FF,#FFFFFF); overflow:hidden; cursor:pointer; }
    .lecture-video-thumb img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.98); transform:scale(1.01); transition:transform .2s ease, filter .2s ease; }
    .lecture-video-card:hover .lecture-video-thumb img { transform:scale(1.035); filter:saturate(1.08); }
    .lecture-video-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,43,99,.05),rgba(8,43,99,.42)); }
    .lecture-play-badge { position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-50%); width:64px; height:46px; border-radius:14px; border:0; background:#FF0033; color:#fff; font-size:22px; display:grid; place-items:center; box-shadow:0 12px 30px rgba(0,0,0,.22); cursor:pointer; }
    .lecture-chip { position:absolute; left:12px; top:12px; z-index:2; background:rgba(255,255,255,.92); color:var(--navy); border-radius:999px; padding:6px 10px; font-size:11px; font-weight:900; box-shadow:0 8px 22px rgba(8,43,99,.12); }
    .lecture-video-frame { position:relative; aspect-ratio:16/9; background:#0F172A; display:none; }
    .lecture-video-card.is-open .lecture-video-frame { display:block; }
    .lecture-video-card.is-open .lecture-video-thumb { display:none; }
    .lecture-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
    .lecture-watermark { position:absolute; right:10px; bottom:10px; z-index:2; background:rgba(15,23,42,.85); color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:5px 10px; font-size:11px; font-weight:800; pointer-events:none; }
    .lecture-video-body { padding:16px; }
    .lecture-video-body h3 { margin:0 0 8px; color:var(--navy); font-size:18px; }
    .lecture-video-body p { margin:0; color:var(--muted); line-height:1.55; font-size:13px; }
    .lecture-video-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
    .lecture-action-btn { border:0; border-radius:999px; padding:10px 16px; font-size:12px; font-weight:900; cursor:pointer; background:var(--orange); color:#fff; box-shadow:0 10px 22px rgba(255,107,0,.18); }
    .lecture-action-btn.secondary { background:#EEF5FF; color:var(--navy); box-shadow:none; }