*{ box-sizing:border-box; } html, body{ margin:0; min-height:100%; font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; background:#f4f7fb; color:#1f2937; } body::before{ content:""; position:fixed; left:0; top:0; bottom:0; width:250px; background:#C4D8E5; z-index:-1; } .page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px; } .container{ max-width:1200px; margin:40px auto; padding:20px; } .card,.login-card{ background:#ffffff; border-radius:20px; padding:35px; box-shadow:0 12px 35px rgba(0,0,0,.08); margin-bottom:25px; } .login-card{ width:420px; text-align:center; } h1{ font-size:28px; margin-bottom:10px; } .subtitle{ color:#6b7280; margin-bottom:25px; } input{ width:100%; height:46px; padding:0 16px; margin:10px 0; border:1px solid #d1d5db; border-radius:14px; font-size:15px; outline:none; transition:.2s; } input:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); } .btn,button{ display:inline-block; border:none; cursor:pointer; background:#E9F2FB; color:#3d3a4a; padding:12px 24px; border-radius:14px; font-size:15px; transition:.2s; text-decoration:none; } .btn:hover,button:hover{ opacity:.9; transform:translateY(-1px); } .layout{ display:flex; align-items:stretch; min-height:100vh; } body:has(#teacherSidebar)::before{ background:#E5EEFE; } #teacherSidebar{ position:fixed; left:0; top:0; bottom:0; z-index:30; flex:0 0 250px; width:250px; overflow:auto; background:#E5EEFE !important; } #teacherSidebar .sidebar{ background:#E5EEFE !important; color:#273142 !important; } #teacherSidebar .sidebar h2{ color:#273142; font-weight:700; } #teacherSidebar .sidebar a{ color:#273142; } #teacherSidebar .sidebar a:hover{ background:rgba(39,49,66,.08); } body:has(aside.sidebar){ background:#F4F7F8; } body:has(aside.sidebar)::before{ background:#EAF1FA; } aside.sidebar{ position:fixed; left:0; top:0; bottom:0; z-index:30; width:250px; overflow:hidden; background:#EAF1FA; padding:28px 18px; color:#3E4A59; } .sidebar{ width:250px; min-height:100%; background:#E5EEFE; padding:30px 20px; color:#273142; } .sidebar h2{ margin-bottom:30px; color:#273142; } .sidebar a{ display:block; position:relative; color:#273142; text-decoration:none; padding:14px; border-radius:12px; margin-bottom:8px; } .sidebar a .nav-badge{ position:absolute; top:6px; right:8px; min-width:18px; padding:1px 6px; border-radius:999px; background:#FAEACF; color:#3d3a4a; font-size:13px; line-height:19px; font-family:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Arial Rounded MT Bold",sans-serif; white-space:nowrap; } .sidebar a .nav-badge .nav-badge-num{ font-family:YouYuan,"YouYuan","幼圆",sans-serif; font-weight:700; } .sidebar a:hover{ background:rgba(39,49,66,.08); } aside.sidebar, aside.sidebar h2, aside.sidebar a{ font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; font-weight:400; } aside.sidebar h2{ margin:8px 0 28px; font-size:16px; font-weight:400; line-height:1.25; letter-spacing:0.02em; text-align:center; color:#3E4A59; word-break:break-word; } aside.sidebar h2 .student-greeting-line, aside.sidebar h2 .student-greeting-name{ display:block; padding-left:0; } aside.sidebar a{ box-sizing:border-box; display:flex; align-items:center; height:44px; margin-bottom:6px; padding:0 14px; border:1px solid transparent; border-radius:12px; color:#3E4A59; font-size:14px; font-weight:500; line-height:1.2; transition:background .15s ease,border-color .15s ease,box-shadow .15s ease; } aside.sidebar a:hover{ background:rgba(255,255,255,.42); transform:none; } aside.sidebar a.active, aside.sidebar a.active:hover{ background:rgba(255,255,255,.72) !important; border:1px solid rgba(255,255,255,.9); border-radius:12px; box-shadow:0 4px 14px rgba(62,74,89,.06); color:#3E4A59; transform:none; } aside.sidebar a.has-unread, aside.sidebar a.active.has-unread, aside.sidebar a.has-unread:hover, aside.sidebar a.active.has-unread:hover{ background:#FFF6CC !important; } aside.sidebar a[href="profile.html"]{ margin-top:14px; } aside.sidebar a[href="profile.html"]::before{ content:""; position:absolute; top:-10px; left:10px; right:10px; height:1px; background:rgba(62,74,89,.1); pointer-events:none; } aside.sidebar a[href="login.html"]{ color:#2C3644; } aside.sidebar::before{ content:""; position:absolute; right:-62px; bottom:-78px; z-index:0; width:148px; height:148px; border-radius:50%; background:rgba(188,180,198,.16); pointer-events:none; } aside.sidebar::after{ content:"SMALL PROGRESS\A LEADS TO\A BIG CHANGES."; position:absolute; left:20px; bottom:26px; z-index:1; margin:0; padding:20px 0 0; width:max-content; max-width:calc(100% - 92px); background-image:linear-gradient(#c4a39c,#c4a39c); background-repeat:no-repeat; background-position:left top; background-size:32px 1.75px; color:#5a6878; font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; font-size:10.5px; font-weight:400; letter-spacing:.14em; line-height:1.38; white-space:pre; pointer-events:none; } @media (max-height:700px){ aside.sidebar::before, aside.sidebar::after{ display:none; } } #teacherSidebar .sidebar, #teacherSidebar .sidebar a{ font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; font-weight:400; } #teacherSidebar .sidebar a.active{ background:linear-gradient( 180deg, rgba(255,255,255,.34) 0%, rgba(229,238,254,.18) 100% ) !important; border:1px solid rgba(255,255,255,.7); box-shadow: 0 8px 18px rgba(39,49,66,.1), inset 0 1px 0 rgba(255,255,255,.85); border-radius:14px; color:#273142; } #teacherSidebar .sidebar a.active:hover{ background:linear-gradient( 180deg, rgba(255,255,255,.34) 0%, rgba(229,238,254,.18) 100% ) !important; } #teacherSidebar .sidebar-logout{ background:#CDC7E3; color:#3d3a4a; } .content{ flex:1; min-width:0; margin-left:250px; padding:40px; } .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .stats div{ background:#f8fafc; padding:25px; border-radius:16px; text-align:center; } table{ width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px; } th{ background:#f1f5f9; padding:14px; text-align:left; } td{ padding:14px; border-bottom:1px solid #e5e7eb; } @media(max-width:800px){ .layout{ flex-direction:column; } #teacherSidebar, aside.sidebar{ position:static; width:100%; height:auto; } .sidebar{ width:100%; } .content{ margin-left:0; } .stats{ grid-template-columns:1fr; } }