:root{--navy:#12315b;--navy-soft:#26456f;--blue:#2b7fe0;--blue-600:#1c6ad0;--ink:#1f2a37;--muted:#667283;--line:#e3e8ef;--bg:#eef3f8;--danger:#c0392b;--radius:12px;--shadow:0 18px 45px #12315b24;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;margin:0}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}.field{flex-direction:column;gap:6px;margin-bottom:18px;display:flex}.field label{color:var(--ink);font-size:14px;font-weight:500}.input{border:1px solid var(--line);background:#fff;border-radius:10px;outline:none;width:100%;padding:12px 14px;font-size:15px;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2b7fe026}textarea.input{resize:vertical;min-height:56px;font-family:inherit}.btn{letter-spacing:.3px;color:#fff;background:var(--blue);cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;padding:13px 18px;font-size:15px;font-weight:600;transition:background .15s,transform 50ms;display:inline-flex}.btn:hover:not(:disabled){background:var(--blue-600)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.6;cursor:not-allowed}.form-error{color:var(--danger);background:#fdecea;border:1px solid #f5c6c0;border-radius:8px;margin-bottom:16px;padding:10px 12px;font-size:14px}.auth-wrap{background:linear-gradient(135deg,#e9f2fb 0%,#d3e6f7 100%);justify-content:center;align-items:center;min-height:100%;padding:24px;display:flex}.auth-card{width:100%;max-width:960px;min-height:560px;box-shadow:var(--shadow);background:#fff;border-radius:20px;display:flex;overflow:hidden}.auth-left{color:var(--navy);background:linear-gradient(165deg,#dcecfb 0%,#6fb0e8 120%);flex-direction:column;flex:1;padding:40px 44px;display:flex}.auth-brand{color:var(--navy);font-size:30px;font-weight:700}.auth-left h1{margin:0 0 8px;font-size:34px}.auth-welcome{margin-top:auto}.auth-sub{color:var(--navy-soft);margin:0 0 26px;font-size:15px}.auth-points{gap:16px;margin:0 0 8px;padding:0;list-style:none;display:grid}.auth-points li{color:var(--navy);align-items:center;gap:12px;font-size:15px;display:flex}.auth-points svg{flex:none}.auth-right{flex-direction:column;flex:1;align-items:center;padding:40px 46px;display:flex}.auth-logo{width:118px;height:auto;margin-bottom:8px}.auth-right h2{margin:4px 0 26px;font-size:26px}.auth-form{width:100%;max-width:340px}.pw-wrap{position:relative}.pw-toggle{cursor:pointer;color:var(--muted);background:0 0;border:none;padding:4px;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.auth-hint{color:var(--muted);text-align:center;margin-top:18px;font-size:13px;line-height:1.6}.auth-hint code{color:var(--navy);background:#f1f5f9;border-radius:5px;padding:1px 6px}@media (width<=780px){.auth-left{display:none}.auth-card{max-width:440px}}.topbar{border-bottom:1px solid var(--line);background:#fff;align-items:center;gap:12px;height:62px;padding:0 22px;display:flex}.topbar-brand{align-items:center;gap:12px;text-decoration:none;display:inline-flex}.topbar-brand:hover{text-decoration:none}.topbar-logo{width:auto;height:34px}.topbar-title{color:var(--navy);font-size:18px;font-weight:700}.topbar-spacer{margin-left:auto}.user-chip{color:var(--ink);border:1px solid var(--line);background:#f4f7fb;border-radius:999px;align-items:center;gap:8px;padding:5px 12px;font-size:14px;display:inline-flex}.user-chip .role{color:var(--muted);text-transform:capitalize;font-size:12px}.btn-link{color:var(--blue);cursor:pointer;background:0 0;border:none;padding:6px 8px;font-size:14px}.btn-link:hover{text-decoration:underline}.page{max-width:1100px;margin:0 auto;padding:28px 22px}.page h1{color:var(--navy);margin:0 0 4px;font-size:24px}.page .lede{color:var(--muted);margin:0 0 22px}.card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:20px}.course-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;display:grid}.course-card{border:1px solid var(--line);border-radius:var(--radius);color:inherit;background:#fff;padding:18px 20px;transition:box-shadow .15s,border-color .15s;display:block}.course-card:hover{border-color:var(--blue);text-decoration:none;box-shadow:0 6px 18px #12315b14}.course-subject{color:var(--navy);font-size:17px;font-weight:600}.course-section{color:var(--muted);margin-top:2px;font-size:14px}.crumbs{flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:16px;font-size:14px;display:flex}.crumb{color:var(--blue);cursor:pointer;background:0 0;border:none;padding:2px 4px;font-size:14px}.crumb:hover{text-decoration:underline}.crumb-sep{color:var(--muted)}.toolbar{flex-wrap:wrap;gap:8px;margin-bottom:18px;display:flex}.btn-sm{width:auto;padding:9px 16px;font-size:14px}.btn-ghost{color:var(--blue);border:1px solid var(--line);background:#fff}.btn-ghost:hover:not(:disabled){border-color:var(--blue);background:#f4f7fb}.tool{text-align:center;width:84px;height:82px;color:var(--navy);border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:8px;font-size:12px;font-weight:500;line-height:1.25;transition:border-color .12s,background .12s,transform .1s,box-shadow .12s;display:inline-flex}.tool svg{color:var(--blue);flex:none}.tool:hover:not(:disabled){border-color:var(--blue);background:#f4f9ff;box-shadow:0 4px 12px #2b7fe024}.tool:active:not(:disabled){box-shadow:none;transform:translateY(1px)}.tool:disabled{opacity:.6;cursor:not-allowed}.back-btn{color:var(--navy);border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:8px;align-items:center;gap:5px;margin-right:10px;padding:5px 11px;font-size:13px;transition:border-color .12s,background .12s;display:inline-flex}.back-btn:hover{border-color:var(--blue);background:#f4f9ff}.spinner-dark{border-color:#2b7fe040;border-top-color:var(--blue)}.res-list{border:1px solid var(--line);border-radius:var(--radius);background:#fff;flex-direction:column;display:flex;overflow:hidden}.res-row{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:12px 16px;display:flex}.res-row:last-child{border-bottom:none}.res-main{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.res-main>div{min-width:0}.res-title{color:var(--ink);white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.res-meta{color:var(--muted);margin-top:2px;font-size:12px}.res-actions{align-items:center;gap:4px;display:flex}.btn-link.danger{color:var(--danger)}.list-head{align-items:center;gap:12px;margin-bottom:12px;display:flex}.list-count{color:var(--muted);font-size:13px}.list-head{flex-wrap:wrap}.head-right{flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;display:flex}.sort-select{color:var(--ink);border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:8px;outline:none;padding:8px 10px;font-size:13px}.sort-select:focus{border-color:var(--blue)}.search{border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667283' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M15 15l-3.5-3.5'/%3E%3C/svg%3E") 11px no-repeat;border-radius:8px;outline:none;width:240px;max-width:60vw;padding:8px 12px 8px 34px;font-size:14px;transition:border-color .12s,box-shadow .12s}.search:focus{border-color:var(--blue);box-shadow:0 0 0 3px #2b7fe01f}.badge{letter-spacing:.3px;text-transform:uppercase;border-radius:5px;padding:2px 7px;font-size:10.5px;font-weight:700;display:inline-block}.badge-folder{color:#55627a;background:#eef2f7}.badge-link{color:#6b3fce;background:#efe7fb}.badge-pdf{color:#c0392b;background:#fdeaea}.badge-doc{color:#1a63d6;background:#e8f0fe}.badge-ppt{color:#c8681a;background:#fdefe3}.badge-img{color:#1f9d55;background:#e7f6ec}.badge-file{color:#55627a;background:#eef2f7}.tag{white-space:nowrap;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:600;display:inline-block}.tag-green{color:#1f9d55;background:#e7f6ec}.tag-blue{color:#1a63d6;background:#e8f0fe}.tag-grey{color:#6b7280;background:#eef2f7}.recent{margin-bottom:22px}.recent-title{color:var(--navy);margin-bottom:10px;font-size:13px;font-weight:600}.recent-grid{flex-wrap:wrap;gap:12px;display:flex}.recent-card{border:1px solid var(--line);background:#fff;border-radius:10px;flex:0 200px;padding:12px 14px;transition:box-shadow .12s,border-color .12s}.recent-card:hover{border-color:var(--blue);box-shadow:0 4px 12px #2b7fe01f}.recent-card .rc-title{white-space:nowrap;text-overflow:ellipsis;margin:8px 0 6px;font-size:13.5px;font-weight:500;overflow:hidden}.recent-card .rc-actions{gap:12px;display:flex}.drop-zone{position:relative}.drop-overlay{z-index:20;border:2px dashed var(--blue);border-radius:var(--radius);color:var(--blue);pointer-events:none;background:#2b7fe014;justify-content:center;align-items:center;font-size:15px;font-weight:600;display:flex;position:absolute;inset:0}.modal-backdrop{z-index:50;background:#12315b59;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{border-radius:var(--radius);width:100%;max-width:380px;box-shadow:var(--shadow);background:#fff;padding:22px}.modal-head{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.modal-head h3{color:var(--navy);margin:0;font-size:18px}select.input{appearance:auto}.share-toggle{border:1px solid var(--line);cursor:pointer;background:#f4f9ff;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;font-size:14px;display:flex}.share-toggle input{width:16px;height:16px}.share-section-label{color:var(--muted);margin:16px 0 8px;font-size:13px}.student-list{border:1px solid var(--line);border-radius:10px;max-height:220px;overflow-y:auto}.student-row{border-bottom:1px solid var(--line);cursor:pointer;align-items:center;gap:10px;padding:9px 12px;font-size:14px;display:flex}.student-row:last-child{border-bottom:none}.student-row:hover{background:#f7fbff}.student-row input{width:16px;height:16px}.share-toggle+.share-section-label{margin-top:18px}.student-list+.btn{margin-top:16px}.send-row{gap:8px;display:flex}.send-row .input{flex:1}.send-btn{flex:none;width:auto;padding:10px 18px}.tabs{border-bottom:1px solid var(--line);gap:6px;margin-bottom:18px;display:flex}.tab{cursor:pointer;color:var(--muted);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 16px;font-size:14px;font-weight:500}.tab:hover{color:var(--navy)}.tab.active{color:var(--navy);border-bottom-color:var(--blue)}.shared-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;display:flex}.shared-row:last-child{border-bottom:none}.shared-when{color:var(--muted);font-size:13px}.top-nav{gap:4px;margin-left:20px;display:flex}.top-nav a{color:var(--ink-soft,#524c43);border-radius:8px;padding:6px 12px;font-size:14px}.top-nav a:hover{background:#f4f7fb;text-decoration:none}.top-nav a.active{color:var(--blue);background:#eaf2fd}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes scaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes toastIn{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:none}}@keyframes shimmer{to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}.page{animation:.38s both fadeInUp}.auth-card{animation:.5s both fadeInUp}.course-card{animation:.4s both fadeInUp}.btn{transition:background .15s,transform .12s,box-shadow .15s}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 18px #2b7fe047}.btn:active:not(:disabled){box-shadow:none;transform:translateY(0)}.res-row{transition:background .12s}.res-row:hover{background:#f7fbff}.res-actions .btn-link{opacity:.55;transition:opacity .12s}.res-row:hover .res-actions .btn-link{opacity:1}.modal{animation:.18s both scaleIn}.modal-backdrop{animation:.18s both fadeInUp}.skel{background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%) 0 0/200% 100%;border-radius:8px;animation:1.3s linear infinite shimmer}.skel-row{height:58px;margin-bottom:1px}.skel-card{height:78px}.spinner{border:2px solid #ffffff80;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin;display:inline-block}.toast-wrap{z-index:100;flex-direction:column;gap:10px;display:flex;position:fixed;top:18px;right:18px}.toast{color:#fff;border-radius:10px;min-width:200px;max-width:340px;padding:12px 16px;font-size:14px;font-weight:500;animation:.22s both toastIn;box-shadow:0 10px 30px #12315b38}.toast-success{background:#1f9d55}.toast-error{background:#c0392b}.toast-info{background:var(--navy)}.empty{text-align:center;color:var(--muted);border:1px dashed var(--line-strong,#d9d0bf);border-radius:var(--radius);background:#fff;flex-direction:column;align-items:center;gap:10px;padding:44px 20px;display:flex}.empty svg{color:#b9c4d4}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}