:root{
    --bg:#0b1120;
    --panel:#111a2e;
    --panel-2:#0e1626;
    --line:#1f2b45;
    --text:#e7ebf5;
    --muted:#7c8aad;
    --accent:#8b7cf6;
    --accent-soft:rgba(139,124,246,.14);
    --good:#4ade80;
    --warn:#fbbf24;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,-apple-system,sans-serif;}
  a{color:inherit;text-decoration:none;}

  .shell{display:flex;min-height:100vh;}

  /* Sidebar */
  .sidebar{
    width:250px;flex:none;background:var(--panel-2);
    border-right:1px solid var(--line);
    display:flex;flex-direction:column;
    padding:22px 16px;
  }
  .brand{display:flex;align-items:center;gap:10px;padding:4px 6px 22px;}
  .brand .mark{
    width:34px;height:34px;border-radius:9px;
    background:linear-gradient(155deg,var(--accent),#5b4fd8);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:13px;letter-spacing:.02em;color:#fff;
  }
  .brand .name{font-weight:700;font-size:15px;}
  .brand .sub{font-size:11px;color:var(--muted);letter-spacing:.04em;}

  .nav-group{margin-top:18px;}
  .nav-label{
    font-size:11px;color:var(--muted);letter-spacing:.06em;
    padding:0 10px 8px;
  }
  .nav-item{
    display:flex;align-items:center;gap:10px;
    padding:9px 10px;border-radius:9px;margin-bottom:2px;
    font-size:14px;color:#b7c0d6;cursor:pointer;
  }
  .nav-item:hover{background:#141f38;color:var(--text);}
  .nav-item.active{background:var(--accent-soft);color:#fff;font-weight:600;}
  .nav-item .icon{
    width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;
    color:inherit;opacity:.9;
  }
  .badge{
    margin-left:auto;font-size:11px;background:#1f2b45;color:var(--muted);
    padding:1px 7px;border-radius:20px;
  }
  .nav-item.parent{cursor:pointer;}
  .nav-item .chev{margin-left:auto;font-size:10px;color:var(--muted);transition:transform .15s ease;}
  .nav-item.parent.collapsed .chev{transform:rotate(-90deg);}
  .sub-list{margin:2px 0 6px 32px;border-left:1px solid var(--line);padding-left:10px;overflow:hidden;}
  .sub-list.collapsed{display:none;}
  .sub-item{
    display:flex;align-items:center;gap:6px;
    padding:7px 10px;border-radius:8px;margin-bottom:1px;
    font-size:13px;color:#98a3c0;cursor:pointer;
  }
  .sub-item:hover{background:#141f38;color:var(--text);}
  .sub-item.active{background:var(--accent-soft);color:#fff;font-weight:600;}
  .sub-item .chev2{margin-left:auto;font-size:9px;color:var(--muted);transition:transform .15s ease;}
  .sub-item.collapsed .chev2{transform:rotate(-90deg);}
  .prog-list{margin:1px 0 4px 14px;border-left:1px solid var(--line);padding-left:10px;overflow:hidden;}
  .prog-list.collapsed{display:none;}
  .prog-item{
    padding:6px 10px;border-radius:7px;margin-bottom:1px;
    font-size:12.5px;color:#7f8bad;cursor:pointer;
  }
  .prog-item:hover{background:#141f38;color:var(--text);}
  .prog-item.active{background:var(--accent-soft);color:#fff;font-weight:600;}

  .back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--accent);cursor:pointer;margin-bottom:14px;}
  .students-view{display:none;}
  .student-list{list-style:none;margin:0;padding:0;}
  .student-list li{
    padding:11px 14px;border-top:1px solid var(--line);font-size:14px;
    display:flex;align-items:center;gap:12px;
  }
  .student-list li:first-child{border-top:none;}
  .s-num{color:var(--muted);font-size:12px;width:20px;flex:none;}

  .sidebar-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);}
  .theme-row{
    display:flex;align-items:center;justify-content:space-between;
    font-size:13px;color:#b7c0d6;padding:8px 10px;
  }
  .switch{width:34px;height:19px;border-radius:20px;background:#1f2b45;position:relative;}
  .switch::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--accent);}

  /* Main */
  .main{flex:1;min-width:0;}
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 32px;border-bottom:1px solid var(--line);
  }
  .topbar h1{font-size:19px;margin:0;font-weight:600;}
  .topbar .date{color:var(--muted);font-size:13px;margin-top:2px;}
  .avatar{width:36px;height:36px;border-radius:50%;background:#1f2b45;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);}

  .content{padding:28px 32px 60px;}

  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
  .stat-card{
    background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;
  }
  .stat-card .label{font-size:12.5px;color:var(--muted);margin-bottom:10px;}
  .stat-card .value{font-size:26px;font-weight:700;}
  .stat-card .delta{font-size:12px;margin-top:6px;}
  .delta.up{color:var(--good);}
  .delta.warn{color:var(--warn);}

  .grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;}

  .card{
    background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
  }
  .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .card-head h2{font-size:15px;margin:0;font-weight:600;}
  .card-head .link{font-size:12.5px;color:var(--accent);}

  table{width:100%;border-collapse:collapse;font-size:13.5px;}
  th{text-align:left;color:var(--muted);font-weight:500;font-size:12px;padding:0 10px 10px;}
  td{padding:11px 10px;border-top:1px solid var(--line);}
  tr:hover td{background:#0f1830;}
  .pill{
    display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;
  }
  .pill.good{background:rgba(74,222,128,.12);color:var(--good);}
  .pill.warn{background:rgba(251,191,36,.12);color:var(--warn);}

  .teacher-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);}
  .teacher-row:first-child{border-top:none;}
  .t-avatar{width:34px;height:34px;border-radius:50%;background:#1f2b45;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);flex:none;}
  .t-name{font-size:13.5px;font-weight:600;}
  .t-role{font-size:12px;color:var(--muted);}
  .t-load{margin-left:auto;font-size:12.5px;color:var(--muted);}

  @media(max-width:900px){
    .sidebar{display:none;}
    .stats{grid-template-columns:repeat(2,1fr);}
    .grid-2{grid-template-columns:1fr;}
  }