:root{
      --bg:#070A12;
      --panel: rgba(255,255,255,0.06);
      --panel2: rgba(255,255,255,0.09);
      --stroke: rgba(255,255,255,0.12);
      --text: rgba(255,255,255,0.92);
      --muted: rgba(255,255,255,0.65);
      --good: #33d17a;
      --warn: #ffcc00;
      --bad: #ff4d6d;
      --accent: #7c5cff;
      --accent2:#2dd4bf;
      --shadow: 0 18px 55px rgba(0,0,0,0.45);
      --radius: 18px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:var(--sans);
      color:var(--text);
      background:
        radial-gradient(900px 500px at 20% 10%, rgba(124,92,255,0.35), transparent 55%),
        radial-gradient(700px 420px at 80% 30%, rgba(45,212,191,0.28), transparent 60%),
        radial-gradient(700px 520px at 45% 90%, rgba(255,77,109,0.12), transparent 60%),
        linear-gradient(180deg, #050712, #070A12 45%, #050712);
      overflow-x:hidden;
    }
    .wrap{max-width:none; width:100%; margin:0; padding:22px 18px 40px;}
    header{
      display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
      padding:16px 16px 10px;
      border:1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      position:sticky; top:14px; z-index:10;
      backdrop-filter: blur(10px);
    }
    .brand{
      display:flex; gap:12px; align-items:center;
      min-width:260px;
    }
    .logo{
      width:44px; height:44px; border-radius:14px;
      background: conic-gradient(from 210deg, var(--accent), var(--accent2), var(--accent), #ff4d6d, var(--accent));
      box-shadow: 0 10px 25px rgba(124,92,255,0.20);
      position:relative;
      overflow:hidden;
    }
    .logo:after{
      content:"";
      position:absolute; inset:-20px;
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.55), transparent 45%);
      transform: rotate(12deg);
      opacity:0.75;
    }
    h1{margin:0; font-size:18px; line-height:1.15; letter-spacing:0.2px;}
    .sub{margin:2px 0 0; color:var(--muted); font-size:13px}
    .right{
      display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; justify-content:flex-end;
    }
    .pill{
      border:1px solid var(--stroke);
      background: rgba(255,255,255,0.06);
      border-radius: 999px;
      padding:10px 12px;
      display:flex; align-items:center; gap:10px;
      min-width: 230px;
    }
    .pill input{
      width:100%; border:0; outline:0; background:transparent; color:var(--text);
      font-size:14px;
    }
    .btn{
      border:1px solid var(--stroke);
      background: rgba(255,255,255,0.06);
      color:var(--text);
      padding:10px 12px;
      border-radius: 12px;
      cursor:pointer;
      transition: transform .06s ease, background .2s ease, border-color .2s ease;
      user-select:none;
      display:flex; align-items:center; gap:8px;
      font-size:14px;
    }
    .btn:hover{ background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18);}
    .btn:active{ transform: translateY(1px) scale(0.99); }
    .btn.primary{
      background: linear-gradient(135deg, rgba(124,92,255,0.35), rgba(45,212,191,0.22));
      border-color: rgba(124,92,255,0.35);
    }
    .btn.danger{
      background: rgba(255,77,109,0.12);
      border-color: rgba(255,77,109,0.35);
    }
    .tabs{
      margin-top:14px;
      display:flex; gap:10px; flex-wrap:wrap;
    }
    .tab{
      padding:10px 12px;
      border-radius: 999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,0.05);
      cursor:pointer;
      font-size:14px;
      color: var(--muted);
      display:flex; align-items:center; gap:8px;
      transition: background .2s ease, color .2s ease, border-color .2s ease;
    }
    .tab.active{
      background: rgba(124,92,255,0.20);
      border-color: rgba(124,92,255,0.42);
      color: var(--text);
    }
    main{ margin-top:14px; }
    .grid{
      display:grid;
      grid-template-columns: 2fr 1fr;
      gap:14px;
    }
    @media (max-width: 980px){
      header{position:static}
      .grid{grid-template-columns:1fr}
      .pill{min-width: 180px}
    }
    .card{
      border:1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .card .hd{
      padding:14px 14px 10px;
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
      border-bottom:1px solid rgba(255,255,255,0.08);
    }
    .card h2{margin:0; font-size:16px}
    .card .desc{margin:4px 0 0; color:var(--muted); font-size:14px; line-height:1.35}
    .card .bd{padding:14px}
    .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
    label{font-size:13px; color:var(--muted)}
    .field{
      display:flex; flex-direction:column; gap:6px;
      min-width: 170px;
      flex: 1;
    }
    .field input, .field select{
      border:1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.20);
      color:var(--text);
      padding:10px 10px;
      border-radius:12px;
      outline: none;
      font-size:14px;
    }
    .field input:focus, .field select:focus{
      border-color: rgba(124,92,255,0.55);
      box-shadow: 0 0 0 3px rgba(124,92,255,0.18);
    }
    .tiny{
      font-size:13px; color:var(--muted);
      line-height:1.35;
    }
    .kpi{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top:10px;
    }
    .kpi .box{
      border:1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.05);
      border-radius: 14px;
      padding:10px 12px;
    }
    .kpi .v{font-size:18px; font-family:var(--mono)}
    .kpi .t{font-size:13px; color:var(--muted); margin-top:2px}
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      border:1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
      border-radius: 999px;
      padding:8px 10px;
      font-size:13px;
      color:var(--muted);
    }
    .badge i{width:8px; height:8px; border-radius:50%; background: var(--good)}
    .list{
      display:flex; flex-direction:column; gap:10px;
    }
    details{
      border:1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.04);
      border-radius: 14px;
      padding: 10px 12px;
    }
    summary{
      cursor:pointer;
      font-weight:600;
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      list-style:none;
    }
    summary::-webkit-details-marker{display:none}
    .tag{
      font-family: var(--mono);
      font-size:13px;
      padding:6px 8px;
      border-radius: 10px;
      border:1px solid rgba(255,255,255,0.14);
      background: rgba(0,0,0,0.18);
      color: rgba(255,255,255,0.74);
    }
    .formula{
      font-family: var(--mono);
      font-size: 13px;
      line-height:1.55;
      color: rgba(255,255,255,0.86);
      margin:10px 0 0;
      white-space: pre-wrap;
    }
    canvas{
      width:100%; height: 650px;
      background: radial-gradient(900px 420px at 50% 10%, rgba(255,255,255,0.07), rgba(0,0,0,0.18));
      border-radius: 16px;
      border:1px solid rgba(255,255,255,0.10);
      display:block;
    }
    .canvas-wrapper{
      display:flex; align-items:center; justify-content:center;
      width:100%; margin:0 auto;
    }
    .canvas-wrapper canvas{
      max-width:100%; height:auto;
    }
    .toolbar{
      display:flex; gap:10px; flex-wrap:wrap; align-items:center;
      margin-top:12px;
    }
    .toolbar .btn{border-radius: 999px}
    .split{
      display:grid;
      grid-template-columns: 2.5fr 1fr;
      gap:10px;
    }
    @media (max-width: 680px){ .split{grid-template-columns:1fr} }
    @media (max-width: 900px){
      .wrap{padding:18px 14px 32px;}
      header{flex-direction:column; align-items:stretch;}
      .brand{min-width:0;}
      .right{width:100%; justify-content:flex-start;}
      .pill{min-width:0; flex:1 1 100%;}
      .tabs{gap:8px;}
      .tab{font-size:13px; padding:8px 10px;}
      .card .hd{flex-direction:column; align-items:flex-start;}
      .kpi{grid-template-columns:1fr;}
      canvas{height:420px;}
      .modal-content{width:94%; padding:20px; max-height:90vh;}
      .teacher-header{flex-direction:column; align-items:flex-start;}
      .teacher-photo{width:120px; height:120px;}
      .teacher-actions{flex-direction:column; align-items:stretch;}
      .teacher-resource-grid,
      .teacher-document-grid,
      .teacher-project-grid{grid-template-columns:1fr;}
    }
    @media (max-width: 560px){
      h1{font-size:16px;}
      .sub{font-size:12px;}
      .btn{font-size:13px; padding:9px 10px;}
      .pill{padding:8px 10px;}
      .pill input{font-size:13px;}
      .field{min-width:140px;}
      .field input, .field select{font-size:13px; padding:9px;}
      .card .bd{padding:12px;}
      .modal-content{font-size:15px;}
      .teacher-card h2{font-size:20px;}
      .teacher-tab{font-size:13px; padding:8px 12px;}
      .teacher-content p{font-size:14px;}
      .teacher-item{font-size:13px;}
      canvas{height:340px;}
    }
    .notice{
      border:1px solid rgba(255,255,255,0.12);
      background: rgba(255,204,0,0.09);
      border-radius: 14px;
      padding:10px 12px;
      color: rgba(255,255,255,0.86);
    }
    .ok{
      border-color: rgba(51,209,122,0.35);
      background: rgba(51,209,122,0.10);
    }
    .bad{
      border-color: rgba(255,77,109,0.35);
      background: rgba(255,77,109,0.10);
    }
    .hr{
      height:1px; background: rgba(255,255,255,0.08); margin:12px 0;
    }
    .smallgrid{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
    }
    .footer{
      margin-top:18px;
      color: var(--muted);
      font-size: 12px;
      text-align:center;
      opacity: 0.9;
    }
    .toast{
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.45);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      padding: 10px 14px;
      color: rgba(255,255,255,0.9);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      opacity: 0;
      pointer-events:none;
      transition: opacity .18s ease, transform .18s ease;
      font-size: 13px;
      max-width: 92vw;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .toast.show{
      opacity:1;
      transform: translateX(-50%) translateY(-2px);
    }
    .kbd{
      font-family: var(--mono);
      font-size: 12px;
      border:1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      padding: 3px 7px;
      border-radius: 8px;
      color: rgba(255,255,255,0.78);
    }
    .modal{
      position:fixed; inset:0;
      background:rgba(0,0,0,0.6);
      display:none; align-items:center; justify-content:center;
      z-index:1000;
      backdrop-filter:blur(5px);
    }
    .modal.show{display:flex}
    .modal-content{
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      border:1px solid rgba(255,255,255,0.12);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      width:90%; max-width:900px;
      max-height:85vh;
      overflow:auto;
      padding:24px;
      position:relative;
      font-size:16px;
      line-height:1.6;
    }
    .modal-close{
      position:absolute; top:12px; right:12px;
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.12);
      color:var(--text);
      width:32px; height:32px;
      border-radius:50%;
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      font-size:18px;
      transition: background .2s;
    }
    .modal-close:hover{background:rgba(255,255,255,0.12)}
    .teacher-header{
      display:flex; gap:20px; align-items:flex-start; margin-bottom:20px;
    }
    .teacher-card{flex:1}
    .teacher-card h2{
      margin:0 0 8px;
      font-size:24px;
      line-height:1.2;
    }
    .teacher-card .info-line{
      color:var(--muted);
      margin:6px 0;
      font-size:15px;
    }
    .teacher-photo{
      width:140px; height:140px;
      border-radius:14px;
      border:2px solid rgba(124,92,255,0.3);
      object-fit:cover;
      flex-shrink:0;
    }
    .teacher-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }
    .teacher-resource-block{
      margin-top:32px;
      padding-top:20px;
      border-top:1px solid rgba(255,255,255,0.12);
    }
    .teacher-section-header{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:flex-end;
    }
    .teacher-section-header h3{
      margin:0;
      font-size:18px;
    }
    .teacher-section-header p{
      margin:0;
      color:var(--muted);
      font-size:13px;
    }
    .teacher-resource-grid{
      margin-top:18px;
      display:grid;
      gap:14px;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    }
    .teacher-resource{
      border:1px solid rgba(255,255,255,0.12);
      border-radius:12px;
      padding:14px;
      background:rgba(255,255,255,0.02);
      display:flex;
      flex-direction:column;
      min-height:180px;
    }
    .teacher-resource h4{
      margin:0 0 8px;
      font-size:16px;
      color:#fff;
    }
    .teacher-resource ul{
      margin:0;
      padding-left:18px;
      font-size:14px;
      flex:1;
    }
    .teacher-resource li + li{
      margin-top:6px;
    }
    .teacher-resource a{
      color:var(--accent);
      font-weight:600;
      text-decoration:none;
    }
    .teacher-resource small{
      margin-top:10px;
      color:var(--muted);
      font-size:12px;
    }
    .teacher-document-grid{
      margin-top:20px;
      display:grid;
      gap:12px;
      grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    }
    .teacher-document{
      border:1px solid rgba(255,255,255,0.15);
      border-radius:10px;
      padding:12px 14px;
      background:rgba(255,255,255,0.02);
      text-decoration:none;
      color:inherit;
      display:flex;
      flex-direction:column;
      gap:6px;
      transition: border-color .2s, box-shadow .2s;
    }
    .teacher-document strong{
      font-size:15px;
    }
    .teacher-document span{
      font-size:13px;
      color:var(--muted);
    }
    .teacher-document small{
      font-size:11px;
      color:var(--muted);
    }
    .teacher-document:hover{
      border-color:rgba(124,92,255,0.6);
      box-shadow:0 12px 24px rgba(0,0,0,0.25);
    }
    .teacher-project-grid{
      margin-top:14px;
      display:grid;
      gap:16px;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    }
    .teacher-project-card{
      border:1px solid rgba(255,255,255,0.14);
      border-radius:12px;
      padding:16px;
      background:rgba(255,255,255,0.02);
      display:flex;
      flex-direction:column;
      gap:10px;
      min-height:200px;
    }
    .teacher-project-card h4{
      margin:0;
      font-size:16px;
      color:#fff;
    }
    .teacher-project-card small{
      color:var(--muted);
      font-size:13px;
    }
    .teacher-project-card ul{
      margin:0;
      padding-left:18px;
      display:flex;
      flex-direction:column;
      gap:5px;
      font-size:14px;
      flex:1;
    }
    .teacher-project-card a{
      color:var(--accent);
      text-decoration:none;
    }
    .teacher-tabs{
      display:flex; gap:8px; margin-top:16px; border-top:1px solid rgba(255,255,255,0.08); padding-top:12px;
    }
    .teacher-tab{
      padding:10px 16px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,0.12);
      background:rgba(255,255,255,0.05);
      cursor:pointer;
      color:var(--muted);
      font-size:14px;
      transition: all .2s;
    }
    .teacher-tab.active{
      background:rgba(124,92,255,0.20);
      border-color:rgba(124,92,255,0.42);
      color:var(--text);
    }
    .teacher-tab:hover{background:rgba(255,255,255,0.08)}
    .teacher-content{
      margin-top:14px;
      display:none;
    }
    .teacher-content.active{display:block}
    .teacher-content p{
      color:var(--text);
      line-height:1.6;
      margin:0 0 12px;
      font-size:15px;
    }
    .teacher-list{
      display:flex; flex-direction:column; gap:10px;
      margin-top:10px;
    }
    .teacher-item{
      padding:10px 12px;
      border:1px solid rgba(255,255,255,0.10);
      background:rgba(255,255,255,0.04);
      border-radius:10px;
      color:var(--text);
      font-size:13px;
    }