/* ============================================================ 成绩成长轨迹 · 视觉体系 ------------------------------------------------------------ 两套皮肤 × 两档明暗，共 4 种组合： formal 「学院」 —— 默认。教育机构正式风格：白底、深蓝主色、 小圆角、细边框、无发光、无动效装饰 stellar 「星轨」 —— 可选。高冲击力霓虹风：极光、粒子、玻璃拟态 明暗：light / dark 切换方式： ============================================================ */ /* ============ 基础令牌（与皮肤无关） ============ */ :root{ --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --mono:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace; --ease:cubic-bezier(.22,1,.36,1); --tl:1500px; } /* ============================================================ 皮肤 · 学院（正式）· 亮色 —— 默认 ============================================================ */ html[data-skin="formal"][data-mode="light"]{ --bg:#f5f7fb; --bg2:#eaedf5; --panel:#ffffff; --panel2:#f7f9fc; --line:#e3e8f0; --line2:#c9d2e0; --tx:#111a2e; --tx2:#4b5670; --tx3:#7e8899; --grid:#e6eaf2; --glass:rgba(255,255,255,.94); --dot:rgba(60,90,180,.18); --dotline:rgba(60,90,180,.07); --brand:#1d4ed8; --brand-soft:rgba(29,78,216,.09); --brand-line:rgba(29,78,216,.3); --on-brand:#ffffff; --grad-main:linear-gradient(118deg,#1b3fa8 0%,#2563eb 55%,#3b82f6 100%); --grad-cool:linear-gradient(118deg,#0e7490 0%,#0891b2 100%); --grad-warm:linear-gradient(118deg,#b45309 0%,#d97706 100%); --glow:none; --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.14); --shadow-lg:0 2px 4px rgba(16,24,40,.05),0 18px 44px -18px rgba(16,24,40,.22); --card-gloss:none; --ok:#0f7b52; --bad:#c02626; --c1:#1d4ed8; --c2:#7c3aed; --c3:#be185d; --c4:#047857; --c5:#b45309; --c6:#0e7490; --c7:#be123c; --c8:#4d7c0f; --c9:#c2410c; --radius:11px; --radius-sm:8px; --radius-lg:14px; color-scheme:light; } /* ============================================================ 皮肤 · 学院（正式）· 暗色 ============================================================ */ html[data-skin="formal"][data-mode="dark"]{ --bg:#0f1622; --bg2:#151e2d; --panel:#172132; --panel2:#1d2839; --line:#27334a; --line2:#3a4762; --tx:#e9eef7; --tx2:#a3b0c6; --tx3:#77849b; --grid:#222e42; --glass:rgba(18,25,38,.94); --dot:rgba(120,160,255,.16); --dotline:rgba(120,160,255,.06); --brand:#5b8def; --brand-soft:rgba(91,141,239,.14); --brand-line:rgba(91,141,239,.4); --on-brand:#0b1a35; --grad-main:linear-gradient(118deg,#3b6fd4 0%,#4f86e8 55%,#6ea1f5 100%); --grad-cool:linear-gradient(118deg,#0e7490 0%,#22a5c2 100%); --grad-warm:linear-gradient(118deg,#b45309 0%,#e0a03c 100%); --glow:none; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.6); --shadow-lg:0 2px 6px rgba(0,0,0,.45),0 20px 48px -20px rgba(0,0,0,.7); --card-gloss:none; --ok:#3fbd8b; --bad:#f2707c; --c1:#6ea1f5; --c2:#a78bfa; --c3:#f472b6; --c4:#3fbd8b; --c5:#e0a03c; --c6:#38bdd8; --c7:#f2707c; --c8:#a3d94a; --c9:#f08a3c; --radius:11px; --radius-sm:8px; --radius-lg:14px; color-scheme:dark; } /* ============================================================ 皮肤 · 星轨（霓虹）· 暗色 ============================================================ */ html[data-skin="stellar"][data-mode="dark"]{ --bg:#05060c; --bg2:#0a0e1c; --panel:rgba(255,255,255,.038); --panel2:rgba(255,255,255,.06); --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18); --tx:#eef2ff; --tx2:#a8b2d1; --tx3:#6b769a; --grid:rgba(255,255,255,.07); --glass:rgba(12,16,32,.72); --dot:rgba(140,180,255,.55); --dotline:rgba(120,160,255,.10); --brand:#a78bfa; --brand-soft:rgba(167,139,250,.14); --brand-line:rgba(167,139,250,.42); --on-brand:#06070d; --grad-main:linear-gradient(120deg,#22d3ee 0%,#a78bfa 45%,#f472b6 100%); --grad-cool:linear-gradient(120deg,#60a5fa 0%,#22d3ee 100%); --grad-warm:linear-gradient(120deg,#fbbf24 0%,#f472b6 100%); --glow:0 0 26px rgba(167,139,250,.45); --shadow:0 18px 50px -20px rgba(0,0,0,.85); --shadow-lg:0 30px 70px -28px rgba(0,0,0,.9); --card-gloss:linear-gradient(135deg,rgba(255,255,255,.07),transparent 40%); --ok:#34d399; --bad:#fb7185; --c1:#22d3ee; --c2:#a78bfa; --c3:#f472b6; --c4:#34d399; --c5:#fbbf24; --c6:#60a5fa; --c7:#fb7185; --c8:#a3e635; --c9:#f97316; --radius:20px; --radius-sm:12px; --radius-lg:24px; color-scheme:dark; } /* ============================================================ 皮肤 · 星轨（霓虹）· 亮色 ============================================================ */ html[data-skin="stellar"][data-mode="light"]{ --bg:#f3f5fb; --bg2:#e8ecf7; --panel:rgba(255,255,255,.78); --panel2:rgba(255,255,255,.95); --line:rgba(20,30,70,.10); --line2:rgba(20,30,70,.20); --tx:#121a33; --tx2:#4c577a; --tx3:#808aa8; --grid:rgba(20,30,70,.10); --glass:rgba(255,255,255,.86); --dot:rgba(60,90,180,.35); --dotline:rgba(60,90,180,.10); --brand:#7c3aed; --brand-soft:rgba(124,58,237,.1); --brand-line:rgba(124,58,237,.34); --on-brand:#06070d; --grad-main:linear-gradient(120deg,#22d3ee 0%,#a78bfa 45%,#f472b6 100%); --grad-cool:linear-gradient(120deg,#60a5fa 0%,#22d3ee 100%); --grad-warm:linear-gradient(120deg,#fbbf24 0%,#f472b6 100%); --glow:0 0 26px rgba(167,139,250,.3); --shadow:0 18px 44px -22px rgba(30,45,100,.35); --shadow-lg:0 26px 60px -26px rgba(30,45,100,.42); --card-gloss:linear-gradient(135deg,rgba(255,255,255,.9),transparent 45%); --ok:#059669; --bad:#e11d48; --c1:#0891b2; --c2:#7c3aed; --c3:#db2777; --c4:#059669; --c5:#d97706; --c6:#2563eb; --c7:#e11d48; --c8:#65a30d; --c9:#ea580c; --radius:20px; --radius-sm:12px; --radius-lg:24px; color-scheme:light; } /* ============ 基础 ============ */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--font); background:var(--bg); color:var(--tx); min-height:100%; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .3s var(--ease),color .3s var(--ease); } button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit} button{cursor:pointer;border:none;background:none} ::selection{background:var(--brand-soft)} .hidden{display:none !important} em{font-style:normal;color:var(--brand);font-weight:600} u{text-decoration:none;border-bottom:1px dashed var(--brand);cursor:pointer} hr{border:none;border-top:1px solid var(--line);margin:16px 0} .muted{color:var(--tx2);font-size:13px;line-height:1.7} a{color:var(--brand);text-decoration:none} /* ============ 背景装饰（仅星轨皮肤启用） ============ */ #fx{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85} .aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(90px);opacity:.5} .aurora span{position:absolute;display:block;border-radius:50%} .aurora span:nth-child(1){width:46vw;height:46vw;background:#2563eb;top:-8%;left:-6%;animation:float1 22s ease-in-out infinite} .aurora span:nth-child(2){width:40vw;height:40vw;background:#a855f7;top:6%;right:-8%;animation:float2 27s ease-in-out infinite} .aurora span:nth-child(3){width:38vw;height:38vw;background:#06b6d4;bottom:-12%;left:22%;animation:float3 24s ease-in-out infinite} .aurora span:nth-child(4){width:28vw;height:28vw;background:#ec4899;bottom:2%;right:14%;animation:float1 30s ease-in-out infinite reverse} @keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}} @keyframes float2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-7vw,6vh) scale(.92)}} @keyframes float3{0%,100%{transform:translate(0,0) scale(.95)}50%{transform:translate(5vw,-6vh) scale(1.15)}} .grid-overlay{ position:fixed;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 80%); opacity:.6; } html[data-skin="stellar"][data-mode="light"] .aurora{opacity:.42;filter:blur(80px)} /* 正式皮肤：关掉全部装饰性动效，保持克制 */ html[data-skin="formal"] #fx, html[data-skin="formal"] .aurora, html[data-skin="formal"] .grid-overlay{display:none} /* ============ 顶栏 ============ */ .topbar{ position:sticky;top:0;z-index:60; display:flex;align-items:center;gap:16px; padding:12px clamp(14px,3vw,32px); background:var(--glass); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } .brand{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;flex:0 0 auto} .logo{ width:38px;height:38px;border-radius:var(--radius-sm);display:grid;place-items:center; background:var(--grad-main);color:var(--on-brand);font-weight:800;font-size:18px; box-shadow:var(--glow);transition:.3s var(--ease); } html[data-skin="stellar"] .logo{animation:logoSpin 9s ease-in-out infinite;border-radius:13px} @keyframes logoSpin{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg) scale(1.06)}} .brand-text{display:flex;flex-direction:column;line-height:1.15} .brand-text b{font-size:15.5px;letter-spacing:.02em;white-space:nowrap} .brand-text i{font-size:9px;letter-spacing:.22em;color:var(--tx3);font-style:normal;font-family:var(--mono)} html[data-skin="stellar"] .brand-text b{letter-spacing:.14em;font-size:17px} html[data-skin="stellar"] .brand-text i{letter-spacing:.28em;font-size:9.5px} .nav{display:flex;gap:6px;margin-left:10px;flex:1;align-items:center} .navbtn{ position:relative;padding:9px 15px;border-radius:var(--radius-sm);font-size:14px;color:var(--tx2); transition:.22s var(--ease);font-weight:500;white-space:nowrap; } .navbtn:hover{color:var(--tx);background:var(--panel2)} .navbtn.active{color:var(--tx);background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line2)} html[data-skin="formal"] .navbtn.active:not(.navbtn-cta){color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand-line)} html[data-skin="stellar"] .navbtn{border-radius:11px} html[data-skin="stellar"] .navbtn.active::after{ content:"";position:absolute;left:50%;bottom:2px;translate:-50% 0;width:20px;height:2px; border-radius:2px;background:var(--grad-main);box-shadow:0 0 10px var(--c2); } /* 醒目主入口：学生登录查看 */ .navbtn-cta{ background:var(--grad-main);color:var(--on-brand) !important;font-weight:700; box-shadow:var(--glow);padding:10px 20px; } .navbtn-cta:hover{filter:brightness(1.06);transform:translateY(-1px);background:var(--grad-main)} .navbtn-cta.active{background:var(--grad-main);color:var(--on-brand);box-shadow:inset 0 0 0 1px var(--line2),var(--glow)} /* 弱化次级入口：数据管理 */ .navbtn-quiet{color:var(--tx3);font-size:13px;font-weight:400} .navbtn-quiet:hover{color:var(--tx2);background:var(--panel2)} .top-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto} .who{font-size:12.5px;color:var(--tx2);padding:5px 12px;border-radius:20px;background:var(--panel);border:1px solid var(--line);white-space:nowrap} .who:empty{display:none} .icon-btn{ width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:15px; background:var(--panel);border:1px solid var(--line);color:var(--tx2);transition:.22s var(--ease); } .icon-btn:hover{color:var(--tx);border-color:var(--line2);background:var(--panel2)} html[data-skin="stellar"] .icon-btn{border-radius:11px} html[data-skin="stellar"] .icon-btn:hover{transform:translateY(-2px)} .icon-btn.on{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)} .mask-chip{ display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.02em; padding:5px 11px;border-radius:20px;white-space:nowrap; color:#8a5a00;background:rgba(251,191,36,.16);border:1px solid rgba(251,191,36,.5); } html[data-mode="dark"] .mask-chip{color:#f4c86a;background:rgba(251,191,36,.13);border-color:rgba(251,191,36,.38)} /* ============ 布局 ============ */ main{position:relative;z-index:10;padding:clamp(16px,3vw,32px);max-width:var(--tl);margin:0 auto} .view{display:none;animation:viewIn .38s var(--ease)} .view.active{display:block} @keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} html[data-skin="formal"] .view{animation:none} /* ============ Hero ============ */ .hero{padding:clamp(22px,4.5vw,56px) 0 clamp(18px,3vw,36px);max-width:900px} .hero-badge{ display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em; padding:6px 14px;border-radius:24px;color:var(--tx2); background:var(--panel);border:1px solid var(--line); margin-bottom:20px; } html[data-skin="stellar"] .hero-badge{backdrop-filter:blur(10px);letter-spacing:.12em;padding:7px 15px;border-radius:30px} .pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:pulse 2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.7)}70%{box-shadow:0 0 0 11px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}} .hero-title{font-size:clamp(30px,5.6vw,60px);line-height:1.14;letter-spacing:-.02em;font-weight:800} html[data-skin="formal"] .hero-title{letter-spacing:-.01em;font-weight:800} .hero-title .line{display:block} .grad{ background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent; background-size:200% 100%; } html[data-skin="stellar"] .grad{animation:shine 6s linear infinite;filter:drop-shadow(0 0 26px rgba(167,139,250,.35))} @keyframes shine{to{background-position:200% 0}} .hero-sub{margin-top:18px;font-size:clamp(14px,1.6vw,16.5px);line-height:1.85;color:var(--tx2);max-width:640px} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center} .hero-admin-link{margin-top:18px;font-size:12.8px;color:var(--tx3)} .linkbtn{color:var(--tx2);cursor:pointer;border-bottom:1px dashed var(--line2);transition:.2s} .linkbtn:hover{color:var(--brand);border-bottom-color:var(--brand)} .btn{ position:relative;padding:11px 22px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:600; transition:.22s var(--ease);white-space:nowrap;display:inline-flex;align-items:center;gap:8px; border:1px solid transparent; } html[data-skin="stellar"] .btn{border-radius:13px;padding:12px 24px} .btn.sm{padding:7px 14px;font-size:13px;border-radius:var(--radius-sm)} .btn-lg{padding:15px 34px;font-size:16.5px;border-radius:var(--radius);font-weight:700} .btn-block{width:100%;justify-content:center;margin-top:6px} .btn-primary{background:var(--grad-main);color:var(--on-brand);box-shadow:var(--glow)} .btn-primary:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:var(--glow),var(--shadow)} .btn-ghost{background:var(--panel);border-color:var(--line);color:var(--tx)} .btn-ghost:hover{background:var(--panel2);border-color:var(--line2);transform:translateY(-2px)} .btn-danger{background:rgba(190,18,60,.09);border-color:rgba(190,18,60,.35);color:var(--bad)} .btn-danger:hover{background:rgba(190,18,60,.16);transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.99)} .btn[disabled]{opacity:.5;pointer-events:none} .hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:38px} .hstat{ padding:18px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line); transition:.3s var(--ease); } .hstat:hover{border-color:var(--line2);box-shadow:var(--shadow)} html[data-skin="stellar"] .hstat{backdrop-filter:blur(12px);border-radius:var(--radius-sm)} html[data-skin="stellar"] .hstat:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .hstat b{display:block;font-size:29px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em; background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent} .hstat span{font-size:12px;color:var(--tx3);letter-spacing:.04em} /* ============ 三步开始 ============ */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(256px,1fr));gap:16px;margin:34px 0 24px} .step{ position:relative;padding:22px;border-radius:var(--radius); background:var(--panel);border:1px solid var(--line); transition:.3s var(--ease);overflow:hidden; } html[data-skin="stellar"] .step{backdrop-filter:blur(12px);padding:24px 22px 22px} .step:hover{border-color:var(--brand-line);box-shadow:var(--shadow-lg)} html[data-skin="stellar"] .step:hover{transform:translateY(-5px)} .step > b{ position:absolute;top:12px;right:16px;font-family:var(--mono);font-size:38px;font-weight:800; color:color-mix(in srgb,var(--brand) 18%,transparent);letter-spacing:-.04em;line-height:1; } .step h4{font-size:15px;margin-bottom:10px;color:var(--brand);letter-spacing:.01em} .step p{font-size:13.3px;line-height:1.8;color:var(--tx2)} .step p b{color:var(--tx);font-weight:600} .step code{ font-family:var(--mono);font-size:12.4px;padding:2px 7px;border-radius:6px; background:var(--panel2);border:1px solid var(--line);color:var(--brand); } /* ============ 特性卡 ============ */ .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(264px,1fr));gap:16px;margin:30px 0 56px} .feature{ position:relative;padding:24px 22px;border-radius:var(--radius); background:var(--panel);border:1px solid var(--line);overflow:hidden; transition:.32s var(--ease); } html[data-skin="stellar"] .feature{backdrop-filter:blur(12px);padding:26px 22px} .feature::before{ content:"";position:absolute;inset:0;opacity:0;transition:.4s var(--ease); background:radial-gradient(420px 200px at 12% 0%,var(--brand-soft),transparent 70%); } html[data-skin="stellar"] .feature::after{ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.6;transform:scaleX(.3);transition:.5s var(--ease); } html[data-skin="formal"] .feature::after{ content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent); opacity:.85;transform:none; } .feature:hover{border-color:var(--brand-line);box-shadow:var(--shadow-lg)} html[data-skin="stellar"] .feature:hover{transform:translateY(-6px)} .feature:hover::before{opacity:1} html[data-skin="stellar"] .feature:hover::after{transform:scaleX(1);opacity:1} .f-ico{ width:42px;height:42px;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:19px; background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin-bottom:15px; } html[data-skin="stellar"] .f-ico{width:44px;height:44px;border-radius:13px;box-shadow:0 0 24px -6px var(--accent)} .feature h3{font-size:16px;margin-bottom:9px;letter-spacing:.01em} .feature p{font-size:13.4px;line-height:1.8;color:var(--tx2);position:relative;z-index:2} /* ============ 卡片 ============ */ .card{ position:relative;padding:22px;border-radius:var(--radius); background:var(--panel);border:1px solid var(--line); box-shadow:var(--shadow);margin-bottom:18px;transition:.3s var(--ease); } html[data-skin="stellar"] .card{backdrop-filter:blur(14px);box-shadow:none} html[data-skin="stellar"] .card::after{ content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none; background:var(--card-gloss);opacity:.7; } .card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px} .card-head h3{font-size:15.5px;letter-spacing:.01em;display:flex;align-items:center;gap:9px} .card-head h3::before{content:"";width:3px;height:15px;border-radius:3px;background:var(--brand)} html[data-skin="stellar"] .card-head h3::before{width:4px;height:16px;background:var(--grad-main);box-shadow:0 0 12px var(--c2)} .head-tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap} .head-tools input[type=search]{ padding:8px 13px;border-radius:var(--radius-sm);background:var(--panel2);border:1px solid var(--line); font-size:13px;min-width:200px;outline:none;transition:.2s } .head-tools input[type=search]:focus{border-color:var(--brand-line);box-shadow:0 0 0 3px var(--brand-soft)} .tag{ font-size:11.5px;padding:4px 11px;border-radius:20px;color:var(--tx2); background:var(--panel2);border:1px solid var(--line);font-family:var(--mono);letter-spacing:.03em; } .tag.warn{color:#8a5a00;border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.12)} html[data-mode="dark"] .tag.warn{color:#f4c86a} .tag.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent)} .tag.info{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)} .two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px;align-items:start} .panel-note{font-size:12.6px;line-height:1.8;color:var(--tx3);padding:11px 14px;border-radius:var(--radius-sm); background:var(--panel2);border:1px solid var(--line)} /* ============ 登录 ============ */ .login-stage{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,50px);align-items:center; min-height:calc(100vh - 230px);max-width:1120px;margin:0 auto} .login-art h2{font-size:clamp(28px,4.2vw,48px);line-height:1.18;font-weight:800;letter-spacing:-.02em;margin:24px 0 14px} .login-art p{color:var(--tx2);line-height:1.9;font-size:14.5px;max-width:430px} .orbit{position:relative;width:132px;height:132px} .orbit i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line2)} .orbit i:nth-child(1){animation:spin 12s linear infinite;border-color:var(--brand-line);border-top-color:transparent} .orbit i:nth-child(2){inset:17px;animation:spin 8s linear infinite reverse;border-color:var(--brand-line);border-left-color:transparent} .orbit i:nth-child(3){inset:34px;animation:spin 5s linear infinite;border-color:var(--line2);border-bottom-color:transparent} .orbit::after{ content:"";position:absolute;inset:47px;border-radius:50%;background:var(--grad-main); box-shadow:var(--glow);animation:pulse 3s ease-in-out infinite; } @keyframes spin{to{transform:rotate(360deg)}} .login-hint{margin-top:22px;font-size:12.5px;color:var(--tx3);font-family:var(--mono);line-height:1.9; padding:14px 16px;border-radius:var(--radius-sm);background:var(--panel);border:1px dashed var(--line2)} .login-card{ padding:clamp(24px,3vw,34px);border-radius:var(--radius-lg); background:var(--panel);border:1px solid var(--line); box-shadow:var(--shadow-lg); position:relative;overflow:hidden; } html[data-skin="stellar"] .login-card{background:var(--glass);border-color:var(--line2);backdrop-filter:blur(22px);border-radius:24px} html[data-skin="stellar"] .login-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-main); box-shadow:0 0 20px var(--c2); } html[data-skin="formal"] .login-card::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-main); } .login-card.center-card{max-width:420px;margin:7vh auto} .lc-title{font-size:20px;font-weight:700;margin-bottom:20px;letter-spacing:.01em} .lc-desc{font-size:13.4px;color:var(--tx2);line-height:1.8;margin:-10px 0 20px} .field{display:block;margin-bottom:15px} .field>span{display:block;font-size:12px;color:var(--tx3);margin-bottom:6px;letter-spacing:.06em} .field input,.field select,textarea,input[type=date],input[type=text],input[type=password],input[type=number]{ width:100%;padding:12px 14px;border-radius:var(--radius-sm); background:var(--panel2);border:1px solid var(--line);outline:none; font-size:14.5px;transition:.2s var(--ease); } html[data-skin="stellar"] .field input,html[data-skin="stellar"] .field select,html[data-skin="stellar"] textarea{ border-radius:13px;padding:13px 15px; } .field input:focus,textarea:focus,select:focus{ border-color:var(--brand-line);box-shadow:0 0 0 3px var(--brand-soft); } input::placeholder,textarea::placeholder{color:var(--tx3)} .lc-foot{margin-top:16px;font-size:12px;color:var(--tx3);text-align:center;line-height:1.8} /* ============ 学生台 ============ */ .id-banner{ position:relative;padding:26px clamp(20px,3vw,34px);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:18px; background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow); display:flex;align-items:center;gap:20px;flex-wrap:wrap; } html[data-skin="stellar"] .id-banner{ background:linear-gradient(120deg,rgba(34,211,238,.14),rgba(167,139,250,.14) 50%,rgba(244,114,182,.14)); border-color:var(--line2);backdrop-filter:blur(14px);border-radius:24px; } html[data-skin="stellar"] .id-banner::before{ content:"";position:absolute;inset:0;background: radial-gradient(400px 200px at 90% 10%,rgba(34,211,238,.28),transparent 65%), radial-gradient(400px 200px at 10% 90%,rgba(244,114,182,.24),transparent 65%); pointer-events:none; } html[data-skin="formal"] .id-banner::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-main); } .avatar{ width:68px;height:68px;border-radius:var(--radius);display:grid;place-items:center;flex:0 0 auto; font-size:28px;font-weight:800;color:var(--on-brand);background:var(--grad-main); box-shadow:var(--glow);position:relative;z-index:2; } html[data-skin="stellar"] .avatar{width:74px;height:74px;border-radius:22px;font-size:32px} .id-main{position:relative;z-index:2;flex:1;min-width:220px} .id-main h2{font-size:clamp(21px,2.8vw,30px);font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .id-main .meta{color:var(--tx2);font-size:13.5px;margin-top:8px;display:flex;gap:16px;flex-wrap:wrap} .id-main .meta b{color:var(--tx);font-family:var(--mono)} .id-rank-badge{ position:relative;z-index:2;text-align:center;padding:15px 24px;border-radius:var(--radius); background:var(--panel2);border:1px solid var(--line); } .id-rank-badge b{display:block;font-size:38px;font-weight:900;font-family:var(--mono);line-height:1; background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent} .id-rank-badge span{font-size:11.5px;color:var(--tx2);letter-spacing:.06em} .demo-bar{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:13px 18px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13.4px;line-height:1.65; background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.4);color:#8a5a00; } html[data-mode="dark"] .demo-bar{color:#f4c86a} .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:22px} .kpi{ position:relative;padding:17px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line); overflow:hidden;transition:.3s var(--ease); } html[data-skin="stellar"] .kpi{border-radius:18px;backdrop-filter:blur(10px)} .kpi:hover{border-color:var(--line2);box-shadow:var(--shadow)} html[data-skin="stellar"] .kpi:hover{transform:translateY(-4px)} .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--c1))} html[data-skin="stellar"] .kpi::before{box-shadow:0 0 18px var(--accent,var(--c1))} .kpi label{display:block;font-size:11.5px;color:var(--tx3);letter-spacing:.08em;margin-bottom:8px} .kpi b{font-size:26px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em;line-height:1.1} .kpi small{font-size:11.5px;color:var(--tx3);margin-left:5px;font-family:var(--font)} .kpi .delta{display:inline-flex;align-items:center;gap:4px;font-size:12px;margin-top:8px;padding:3px 9px;border-radius:20px;font-family:var(--mono)} .delta.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)} .delta.down{color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,transparent)} .delta.flat{color:var(--tx3);background:var(--panel2)} /* ============ Tabs ============ */ .tabs{display:flex;gap:5px;padding:5px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line); margin-bottom:18px;overflow-x:auto} html[data-skin="stellar"] .tabs{border-radius:16px;padding:6px;backdrop-filter:blur(10px)} .tab{ padding:9px 18px;border-radius:var(--radius-sm);font-size:13.6px;color:var(--tx2);font-weight:500; transition:.22s var(--ease);white-space:nowrap; } html[data-skin="stellar"] .tab{border-radius:12px;padding:10px 20px} .tab:hover{color:var(--tx);background:var(--panel2)} .tab.active{background:var(--brand);color:var(--on-brand);font-weight:700} html[data-skin="stellar"] .tab.active{background:var(--grad-main);box-shadow:0 8px 24px -10px rgba(167,139,250,.9)} .tabpane,.atabpane{display:none;animation:viewIn .35s var(--ease)} html[data-skin="formal"] .tabpane,html[data-skin="formal"] .atabpane{animation:none} .tabpane.active,.atabpane.active{display:block} /* ============ 图表 ============ */ .chart-wrap{position:relative;width:100%;min-height:280px} .chart-wrap svg{display:block;width:100%;height:auto;overflow:visible} .chart-note{font-size:12px;color:var(--tx3);margin-top:12px} .legend{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .legend.chips .lgchip{ display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:20px;cursor:pointer; background:var(--panel2);border:1px solid var(--line);font-size:12.2px;color:var(--tx2); transition:.2s var(--ease);user-select:none; } .legend.chips .lgchip:hover{border-color:var(--line2)} html[data-skin="stellar"] .legend.chips .lgchip:hover{transform:translateY(-1px)} .legend.chips .lgchip.off{opacity:.32} .legend.chips .lgchip i{width:9px;height:9px;border-radius:50%;flex:0 0 auto} .lgitem{display:inline-flex;align-items:center;gap:7px;font-size:12.2px;color:var(--tx2)} .lgitem i{width:16px;height:3px;border-radius:3px} .chart-tip{ position:absolute;pointer-events:none;z-index:20;opacity:0;transition:opacity .14s; padding:11px 14px;border-radius:var(--radius-sm);background:var(--glass);border:1px solid var(--line2); box-shadow:var(--shadow-lg);font-size:12.4px;min-width:132px;backdrop-filter:blur(12px); } .chart-tip .tt{font-weight:700;margin-bottom:7px;font-size:12.6px;color:var(--tx)} .chart-tip .tr{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px;color:var(--tx2)} .chart-tip .tr b{font-family:var(--mono);color:var(--tx);font-size:13px} .chart-tip .tr i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px} /* ============ 表格 ============ */ .table-scroll{overflow:auto;border-radius:var(--radius-sm);border:1px solid var(--line);max-height:560px} table{width:100%;border-collapse:collapse;font-size:13.2px;min-width:520px} thead th{ position:sticky;top:0;z-index:3;text-align:left;padding:11px 14px;font-weight:600;font-size:12.2px; letter-spacing:.04em;color:var(--tx2);background:var(--glass);backdrop-filter:blur(14px); border-bottom:1px solid var(--line2);white-space:nowrap; } tbody td{padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums} tbody tr{transition:.18s} tbody tr:hover{background:var(--panel2)} tbody tr:last-child td{border-bottom:none} td.num{font-family:var(--mono)} .rank-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-family:var(--mono);font-size:12px;background:var(--panel2);border:1px solid var(--line)} .rank-pill.top1{color:#8a5a00;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.14)} html[data-mode="dark"] .rank-pill.top1{color:#f4c86a} .rank-pill.top3{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft)} .arrow-up{color:var(--ok);font-weight:700} .arrow-down{color:var(--bad);font-weight:700} .score-bar{position:relative;display:inline-block;width:70px;height:5px;border-radius:4px;background:var(--panel2);vertical-align:middle;margin-left:9px;overflow:hidden} .score-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--grad-cool)} .stu-link{color:var(--brand);cursor:pointer;border-bottom:1px dashed transparent;transition:.18s} .stu-link:hover{border-bottom-color:var(--brand)} /* ============ 导入区 ============ */ .dropzone{ padding:34px 20px;border-radius:var(--radius);border:2px dashed var(--line2);text-align:center; transition:.25s var(--ease);background:var(--panel2);cursor:pointer; } .dropzone:hover,.dropzone.over{border-color:var(--brand);background:var(--brand-soft)} html[data-skin="stellar"] .dropzone:hover,html[data-skin="stellar"] .dropzone.over{transform:scale(1.005)} .dz-ico{font-size:30px;color:var(--brand);margin-bottom:12px} html[data-skin="stellar"] .dz-ico{animation:bob 2.6s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .dz-main{font-size:15px;margin-bottom:7px} .dz-sub{font-size:12.5px;color:var(--tx3)} .or-line{position:relative;text-align:center;margin:20px 0 16px} .or-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)} .or-line span{position:relative;padding:0 16px;background:var(--bg);font-size:12px;color:var(--tx3);letter-spacing:.08em} textarea{ width:100%;padding:14px;border-radius:var(--radius);background:var(--panel2);border:1px solid var(--line); outline:none;resize:vertical;font-family:var(--mono);font-size:12.8px;line-height:1.75; } .row-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px;align-items:center} .parse-msg{margin-top:15px;font-size:13.2px;line-height:1.85;display:none;padding:13px 16px;border-radius:var(--radius-sm)} .parse-msg.show{display:block;animation:viewIn .3s var(--ease)} .parse-msg.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)} .parse-msg.err{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent)} .parse-msg.info{color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-line)} .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px} .col-map-title{font-size:12.4px;color:var(--tx3);letter-spacing:.08em;margin-bottom:11px} .col-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:11px;margin-bottom:20px} .col-item{padding:13px;border-radius:var(--radius-sm);background:var(--panel2);border:1px solid var(--line);transition:.22s} .col-item.name{border-color:var(--brand-line);background:var(--brand-soft)} .col-item.subject{border-color:color-mix(in srgb,var(--c2) 45%,transparent)} .col-item.rank{border-color:color-mix(in srgb,var(--c5) 45%,transparent)} .col-item.total{border-color:color-mix(in srgb,var(--c4) 45%,transparent)} .col-item.ignore{opacity:.55} .col-item .ci-head{font-size:12.6px;font-weight:600;margin-bottom:9px;display:flex;justify-content:space-between;gap:8px;align-items:center} .col-item .ci-head em{font-size:11px;color:var(--tx3);font-weight:400;font-family:var(--mono)} .col-item select{width:100%;padding:8px 11px;border-radius:var(--radius-sm);font-size:12.6px;background:var(--panel);border:1px solid var(--line);outline:none} .col-item .fullmarks{margin-top:8px;display:flex;align-items:center;gap:8px;font-size:11.6px;color:var(--tx3)} .col-item .fullmarks input{width:74px;padding:6px 9px;border-radius:var(--radius-sm);font-size:12.4px} .preview-scroll{overflow:auto;border-radius:var(--radius-sm);border:1px solid var(--line);max-height:340px} /* ============ 科目分析卡 ============ */ .subject-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:14px} .subj-card{ padding:16px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line); position:relative;overflow:hidden;transition:.28s var(--ease); } html[data-skin="stellar"] .subj-card{background:var(--panel2);border-radius:16px} .subj-card:hover{box-shadow:var(--shadow)} html[data-skin="stellar"] .subj-card:hover{transform:translateY(-4px)} .subj-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)} .subj-card h4{font-size:13.6px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px} .subj-card .val{font-size:24px;font-weight:800;font-family:var(--mono);line-height:1} .subj-card .sub{font-size:11.6px;color:var(--tx3);margin-top:7px;line-height:1.75} .spark{height:38px;margin-top:12px} .spark svg{width:100%;height:38px;overflow:visible} /* ============ 外观 / 设置 ============ */ .set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px} .skin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px} .skin-opt{ position:relative;text-align:left;padding:16px;border-radius:var(--radius); background:var(--panel2);border:2px solid var(--line);transition:.25s var(--ease);cursor:pointer; } .skin-opt:hover{border-color:var(--line2)} .skin-opt.active{border-color:var(--brand);background:var(--brand-soft)} .skin-opt .so-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px} .skin-opt .so-head b{font-size:14.5px} .skin-opt p{font-size:12.4px;color:var(--tx2);line-height:1.75} .so-check{font-size:12px;color:var(--brand);font-weight:700;opacity:0;transition:.2s} .skin-opt.active .so-check{opacity:1} .skin-swatch{display:flex;gap:5px;margin-top:12px} .skin-swatch i{width:26px;height:26px;border-radius:6px;border:1px solid var(--line2)} .seg{display:inline-flex;padding:4px;border-radius:var(--radius-sm);background:var(--panel2);border:1px solid var(--line);gap:4px} .seg button{padding:7px 16px;border-radius:6px;font-size:13px;color:var(--tx2);transition:.2s} .seg button.active{background:var(--panel);color:var(--tx);font-weight:600;box-shadow:var(--shadow)} .switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:13.4px} .switch input{width:40px;height:22px;appearance:none;-webkit-appearance:none;background:var(--line2);border-radius:20px;position:relative;cursor:pointer;transition:.22s;flex:0 0 auto} .switch input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.22s;box-shadow:0 1px 3px rgba(0,0,0,.3)} .switch input:checked{background:var(--brand)} .switch input:checked::after{left:21px} .pass-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px} .field-hint{font-size:11.8px;color:var(--tx3);margin-top:6px;line-height:1.7} .strength{height:5px;border-radius:4px;background:var(--line);margin-top:9px;overflow:hidden} .strength i{display:block;height:100%;width:0;border-radius:4px;background:var(--grad-cool);transition:.28s var(--ease)} .cloud-state{font-size:12.4px;color:var(--tx3);line-height:1.8;font-family:var(--mono);word-break:break-all} /* ============ 模态 / 提示 ============ */ .modal-mask{ position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px; background:rgba(9,14,26,.56);backdrop-filter:blur(6px);animation:fadeIn .2s var(--ease); } @keyframes fadeIn{from{opacity:0}to{opacity:1}} .modal{ width:min(540px,100%);padding:26px;border-radius:var(--radius-lg);background:var(--panel); border:1px solid var(--line2);box-shadow:var(--shadow-lg); animation:modalIn .28s var(--ease);max-height:86vh;overflow:auto; } html[data-skin="stellar"] .modal{background:var(--glass);backdrop-filter:blur(22px);border-radius:22px} @keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}} .modal h3{font-size:18px;margin-bottom:13px} .modal p{color:var(--tx2);font-size:13.8px;line-height:1.85;margin-bottom:18px} .modal table{font-size:12.8px} .toasts{position:fixed;right:20px;bottom:20px;z-index:300;display:flex;flex-direction:column;gap:10px;align-items:flex-end} .toast{ padding:13px 19px;border-radius:var(--radius-sm);font-size:13.4px;background:var(--panel); border:1px solid var(--line2);box-shadow:var(--shadow-lg); animation:toastIn .32s var(--ease);max-width:340px;line-height:1.6;display:flex;gap:10px;align-items:center; } html[data-skin="stellar"] .toast{background:var(--glass);backdrop-filter:blur(18px);border-radius:13px} .toast.ok{border-color:color-mix(in srgb,var(--ok) 50%,transparent)} .toast.err{border-color:color-mix(in srgb,var(--bad) 50%,transparent)} .toast.out{animation:toastOut .26s var(--ease) forwards} @keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}} @keyframes toastOut{to{opacity:0;transform:translateX(24px)}} /* ============ 图表动画 ============ */ .line-path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.35s var(--ease) forwards} @keyframes draw{to{stroke-dashoffset:0}} .area-in{animation:areaIn 1s .25s var(--ease) both} @keyframes areaIn{from{opacity:0}to{opacity:1}} .dot-in{animation:dotIn .4s var(--ease) both;animation-delay:var(--d,0s)} @keyframes dotIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}} .radar-in{animation:radarIn .9s var(--ease) both;transform-origin:center} @keyframes radarIn{from{opacity:0;transform:scale(.25)}to{opacity:1;transform:scale(1)}} .bar-in{animation:barIn .7s var(--ease) both;transform-origin:bottom} @keyframes barIn{from{transform:scaleY(0);opacity:.2}to{transform:scaleY(1);opacity:1}} .chart-dot{cursor:pointer;transition:r .18s var(--ease)} .chart-dot:hover{r:7} /* 正式皮肤：图表动效收敛为淡入，不做绘制/缩放动画 */ html[data-skin="formal"] .area-in{animation:fadeIn .4s ease both} html[data-skin="formal"] .dot-in{animation:none;opacity:1} html[data-skin="formal"] .radar-in{animation:none} html[data-skin="formal"] .bar-in{animation:none} /* ============ 响应式 ============ */ @media (max-width:1000px){ .navbtn-cta{padding:9px 14px;font-size:13.5px} .brand-text i{display:none} } @media (max-width:880px){ .login-stage{grid-template-columns:1fr;min-height:auto;gap:26px} .login-art{text-align:center} .orbit{margin:0 auto} .login-art p{margin:0 auto} .nav{gap:2px} .navbtn{padding:8px 10px;font-size:13px} .who{display:none} .id-rank-badge{padding:12px 16px} .topbar{gap:10px} } @media (max-width:640px){ .brand-text{display:none} .hero-actions .btn{flex:1;justify-content:center} main{padding:13px} .card{padding:15px} .two-col{grid-template-columns:1fr} .mask-chip{display:none} /* 顶栏允许换行，保证「数据管理」在手机上仍然可达（不做功能隐身） */ .topbar{flex-wrap:wrap;row-gap:8px} .nav{flex-wrap:wrap;margin-left:0} .navbtn-quiet{font-size:12.5px;padding:7px 9px} .navbtn-cta{padding:8px 13px;font-size:13px} .brand{order:0} .nav{order:2;flex-basis:100%} .top-actions{order:1;margin-left:auto} } @media print{ .topbar,.toasts,.hero-actions,.nav{display:none} } /* ============================================================ 第二批：教师工作台扩展组件 ============================================================ */ /* 次醒目入口：教师工作台 */ .navbtn-teacher{ color:var(--tx);font-weight:600;border:1px solid var(--line2);background:var(--panel); } .navbtn-teacher:hover{background:var(--panel2);border-color:var(--brand-line);color:var(--brand)} .navbtn-teacher.active{color:var(--brand);background:var(--brand-soft);border-color:var(--brand-line)} /* 双入口登录 */ .gate-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:880px;margin:6vh auto} .gate-grid .login-card{margin:0;max-width:none} /* 当前工作范围条 */ .scope-bar{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:12px 16px;border-radius:var(--radius); background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow); margin-bottom:16px;font-size:13.4px; } .scope-bar .sb-label{color:var(--tx3);font-size:12px;letter-spacing:.06em} .scope-bar select{ padding:7px 12px;border-radius:var(--radius-sm);background:var(--panel2); border:1px solid var(--line);outline:none;font-size:13.4px; } .scope-bar .sb-who{margin-left:auto;color:var(--tx2);font-size:12.6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .scope-bar .sb-chip{ padding:4px 11px;border-radius:20px;background:var(--brand-soft); border:1px solid var(--brand-line);color:var(--brand);font-size:12px;font-weight:600; } .scope-bar .sb-chip.muted{background:var(--panel2);border-color:var(--line);color:var(--tx3);font-weight:400} /* 班级卡片 */ .class-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:14px} .class-card{ position:relative;padding:16px;border-radius:var(--radius); background:var(--panel2);border:1px solid var(--line);transition:.25s var(--ease); } .class-card:hover{border-color:var(--line2);box-shadow:var(--shadow)} .class-card::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--brand)} .class-card.inferred::before{background:var(--c5)} .class-card .cc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .class-card .cc-head b{font-size:15px} .class-card .cc-meta{font-size:12.4px;color:var(--tx3);line-height:1.9} .class-card .cc-meta b{color:var(--tx2);font-weight:600;font-family:var(--mono)} .class-card .cc-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .class-card .cc-stat{display:flex;gap:14px;margin-top:10px;font-size:12.2px;color:var(--tx3);flex-wrap:wrap} /* 成绩编辑器 */ .editor-scroll{overflow:auto;max-height:62vh;border-radius:var(--radius-sm);border:1px solid var(--line)} .editor-scroll table{min-width:720px} .editor-scroll th{font-size:11.8px} .editor-scroll td{padding:6px 8px} .editor-scroll input[type=number],.editor-scroll input[type=text]{ width:76px;padding:6px 8px;text-align:center;font-family:var(--mono); font-size:13px;border-radius:6px;background:var(--panel2);border:1px solid var(--line); } .editor-scroll input[type=text]{width:104px;text-align:left} .editor-scroll input.over{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)} .editor-scroll input.warn{border-color:var(--c5);background:color-mix(in srgb,var(--c5) 10%,transparent)} .editor-scroll .ed-new{background:color-mix(in srgb,var(--ok) 7%,transparent)} .editor-scroll tbody tr:hover{background:transparent} .editor-scroll td.ed-name{font-weight:600} .editor-scroll .ed-total{font-family:var(--mono);font-weight:700;color:var(--brand)} /* 设置控件 */ .accent-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center} .accent-dot{ width:30px;height:30px;border-radius:50%;border:2px solid var(--line2); cursor:pointer;transition:.2s var(--ease);position:relative; } .accent-dot:hover{transform:scale(1.1)} .accent-dot.active{border-color:var(--tx);box-shadow:0 0 0 3px var(--panel2)} .accent-dot .ad-none{ position:absolute;inset:0;display:grid;place-items:center;font-size:11px; color:var(--tx3);background:var(--panel);border-radius:50%; } .range-row{display:flex;align-items:center;gap:14px} .range-row input[type=range]{flex:1;accent-color:var(--brand);height:4px} .num-badge{ font-family:var(--mono);font-size:12.4px;padding:3px 10px;border-radius:20px; background:var(--panel2);border:1px solid var(--line);color:var(--tx2);min-width:52px;text-align:center; } /* 移动端卡片流（表格的替代呈现） */ .card-list{display:flex;flex-direction:column;gap:11px} .card-list .cl-item{ border:1px solid var(--line);border-radius:var(--radius);padding:14px; background:var(--panel2); } .card-list .cl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .card-list .cl-head b{font-size:14.6px} .card-list .cl-head .cl-rank{font-family:var(--mono);font-size:12.4px;color:var(--brand);font-weight:700} .card-list .cl-row{display:flex;justify-content:space-between;gap:12px;font-size:12.8px;padding:4px 0;border-bottom:1px dashed var(--line)} .card-list .cl-row:last-child{border-bottom:none} .card-list .cl-row span:first-child{color:var(--tx3)} .card-list .cl-row span:last-child{font-family:var(--mono);color:var(--tx)} .cl-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--tx3);margin-bottom:10px} /* 使用说明 */ .guide-layout{display:grid;grid-template-columns:238px 1fr;gap:26px;align-items:start} .guide-toc{ position:sticky;top:82px;padding:16px;border-radius:var(--radius); background:var(--panel);border:1px solid var(--line); } .guide-toc h4{font-size:12px;letter-spacing:.1em;color:var(--tx3);margin-bottom:12px} .guide-toc a{ display:block;padding:7px 10px;border-radius:var(--radius-sm);font-size:13.2px; color:var(--tx2);text-decoration:none;transition:.18s; } .guide-toc a:hover{background:var(--panel2);color:var(--tx)} .guide-toc a.active{background:var(--brand-soft);color:var(--brand);font-weight:600} .guide-body{max-width:none} .guide-body section{ padding:24px;border-radius:var(--radius);background:var(--panel); border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:18px;scroll-margin-top:84px; } .guide-body h2{font-size:20px;margin-bottom:6px;display:flex;align-items:center;gap:10px} .guide-body h2 .g-num{ display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px; background:var(--brand-soft);color:var(--brand);font-size:14px;font-family:var(--mono);font-weight:700; } .guide-body h3{font-size:15px;margin:20px 0 10px;color:var(--brand)} .guide-body p{font-size:13.8px;line-height:1.95;color:var(--tx2);margin-bottom:11px} .guide-body ul,.guide-body ol{margin:0 0 13px 20px} .guide-body li{font-size:13.8px;line-height:1.95;color:var(--tx2);margin-bottom:6px} .guide-body b{color:var(--tx)} .guide-body code{ font-family:var(--mono);font-size:12.6px;padding:2px 7px;border-radius:6px; background:var(--panel2);border:1px solid var(--line);color:var(--brand); } .guide-body table{min-width:0;width:100%;font-size:13px} .guide-body table th,.guide-body table td{padding:9px 12px;white-space:normal} .guide-body .g-tip{ padding:13px 16px;border-radius:var(--radius-sm);font-size:13.2px;line-height:1.9; background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--tx2);margin:14px 0; } .guide-body .g-warn{ padding:13px 16px;border-radius:var(--radius-sm);font-size:13.2px;line-height:1.9; background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.42);color:#8a5a00;margin:14px 0; } html[data-mode="dark"] .guide-body .g-warn{color:#f4c86a} .guide-body .g-kbd{ display:inline-block;padding:1px 7px;border-radius:5px;font-family:var(--mono);font-size:12px; background:var(--panel2);border:1px solid var(--line2);border-bottom-width:2px; } /* ============================================================ 教师可调：信息密度 / 字号 / 斑马纹 / 品牌色 ============================================================ */ html[data-density="compact"] main{padding:clamp(10px,2vw,20px)} html[data-density="compact"] .card{padding:15px;margin-bottom:12px} html[data-density="compact"] .kpi{padding:13px} html[data-density="compact"] .kpi b{font-size:22px} html[data-density="compact"] .hstat{padding:14px} html[data-density="compact"] .tab{padding:7px 14px;font-size:13px} html[data-density="compact"] .step,html[data-density="compact"] .feature{padding:17px} html[data-density="compact"] tbody td{padding:7px 12px} html[data-density="compact"] thead th{padding:8px 12px} html[data-density="compact"] .hero{padding:clamp(16px,3vw,34px) 0 clamp(12px,2vw,22px)} html[data-density="compact"] .feature-grid,html[data-density="compact"] .steps{margin:22px 0 30px} html[data-zebra="1"] tbody tr:nth-child(even){background:var(--panel2)} html[data-zebra="1"] .editor-scroll tbody tr:nth-child(even){background:var(--panel2)} /* 字号缩放：用 zoom 统一缩放整页，避免逐个改字号造成比例失调 */ html[data-fs] body{zoom:var(--fs,1)} /* ============================================================ 双端差异化：桌面端 / 移动端各用各的呈现方式 ============================================================ */ .desk-only{display:block} .mob-only{display:none} @media (max-width:760px){ .desk-only{display:none} .mob-only{display:block} .gate-grid{grid-template-columns:1fr;margin:22px auto;gap:14px} .guide-layout{grid-template-columns:1fr;gap:14px} .guide-toc{position:static;display:flex;gap:6px;overflow-x:auto;padding:10px} .guide-toc h4{display:none} .guide-toc a{white-space:nowrap;padding:6px 12px;background:var(--panel2)} .guide-toc a.active{background:var(--brand-soft)} .guide-body section{padding:17px} .guide-body{overflow-x:auto} .class-grid{grid-template-columns:1fr} .chart-wrap{min-height:220px} .scope-bar{padding:10px 12px;gap:8px} .scope-bar .sb-who{margin-left:0;width:100%} .editor-scroll{max-height:68vh} .accent-dot{width:28px;height:28px} } /* 强制视图模式（教师可在设置中切换，用于预览对端效果） */ html[data-view="mobile"] .desk-only{display:none !important} html[data-view="mobile"] .mob-only{display:block !important} html[data-view="mobile"] .gate-grid{grid-template-columns:1fr} html[data-view="mobile"] .two-col{grid-template-columns:1fr} html[data-view="mobile"] .guide-layout{grid-template-columns:1fr} html[data-view="mobile"] .login-stage{grid-template-columns:1fr} html[data-view="mobile"] .class-grid{grid-template-columns:1fr} html[data-view="mobile"] main{max-width:560px} html[data-view="mobile"] .brand-text{display:none} html[data-view="desktop"] .mob-only{display:none !important} html[data-view="desktop"] .desk-only{display:block !important} /* ============================================================ 第二阶段：双入口门户 / 去 emoji 图标 / 纵向对比 / 更新日志 ============================================================ */ /* ---------- 0. 门户可见性：学生入口不出现任何后台入口 ---------- */ html[data-portal="student"] [data-portal-only="admin"]{display:none !important} html[data-portal="admin"] [data-portal-only="student"]{display:none !important} /* ---------- 1. 背景效果层 ---------- 学院皮肤原本完全关闭 #fx。这里改为「克制地开启」： 降低透明度并缩小粒子尺寸，保持正式感。 */ html[data-skin="formal"] #fx{display:block;opacity:.75} html[data-skin="formal"][data-mode="dark"] #fx{opacity:.9} html[data-skin="stellar"] #fx{opacity:.95} #fx{transition:opacity .5s var(--ease)} #fx:not(.on){opacity:0 !important} /* 光标跟随光晕（由 pfx.js 驱动） */ /* 光标光晕：尺寸比最初缩小约一半。 原来 340px 的半径铺得太开，整屏都像蒙了一层；现在收到 168px， 光晕只是"贴着光标的一小团"，动效交给拖尾光束去表达。 */ .ptr-halo{ position:fixed;left:0;top:0;z-index:1;pointer-events:none; width:168px;height:168px;margin:-84px 0 0 -84px; transform:translate3d(var(--hx,0),var(--hy,0),0) scale(var(--hs,1)); background:radial-gradient(closest-side,rgba(var(--hc,29,78,216),.13),rgba(var(--hc,29,78,216),.05) 48%,transparent 74%); opacity:0;transition:opacity .3s var(--ease); mix-blend-mode:normal; } html[data-mode="dark"] .ptr-halo{ background:radial-gradient(closest-side,rgba(var(--hc,91,141,239),.17),rgba(var(--hc,91,141,239),.06) 48%,transparent 74%); } @media (max-width:899px),(hover:none),(pointer:coarse){.ptr-halo{display:none}} /* 卡片跟随高光：光标在哪，光就在哪 */ .card,.feature,.step,.class-card,.login-card,.kpi{position:relative} .card.has-spot::after,.feature.has-spot::after,.step.has-spot::after, .class-card.has-spot::after,.login-card.has-spot::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(300px 200px at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--brand) 12%,transparent),transparent 62%); opacity:1;transition:opacity .4s var(--ease); } html[data-mode="dark"] .card.has-spot::after, html[data-mode="dark"] .login-card.has-spot::after, html[data-mode="dark"] .kpi.has-spot::after{ background:radial-gradient(320px 220px at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--brand) 20%,transparent),transparent 64%); } .kpi.has-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(260px 180px at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--brand) 14%,transparent),transparent 62%)} /* ---------- 2. 图标层（替代 emoji） ---------- */ .icon-btn svg{display:block} .icon-btn{display:inline-flex;align-items:center;justify-content:center} .mi{ display:inline-block;width:9px;height:9px;border-radius:50%; margin-right:7px;vertical-align:middle;flex:none; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent); } .mi.ok{background:var(--ok)} .mi.bad{background:var(--bad)} .mi.warn{background:#d98214} html[data-mode="dark"] .mi.warn{background:#e0a03c} .mi::after{content:""} .mi-mode{width:15px;height:15px;border-radius:4px;margin:0;background:transparent; box-shadow:none; background-image:linear-gradient(90deg,currentColor 50%,transparent 50%); background-size:100% 100%; border:1.6px solid currentColor; border-radius:50%; background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%); opacity:.9; } html[data-mode="light"] .mi-mode{background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%)} /* 拖拽上传区的图标 */ .dz-ico{color:var(--brand);opacity:.85;display:flex;justify-content:center} /* ---------- 3. 同步状态胶囊 ---------- */ .sync-chip{ display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-family:var(--mono); padding:4px 10px;border-radius:20px;border:1px solid var(--line);color:var(--tx3); background:var(--panel2);white-space:nowrap; } .sync-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--tx3);flex:none} .sync-chip.ok{border-color:color-mix(in srgb,var(--ok) 42%,transparent);color:var(--ok)} .sync-chip.ok .dot{background:var(--ok)} .sync-chip.busy{border-color:var(--brand-line);color:var(--brand)} .sync-chip.busy .dot{background:var(--brand);animation:syncPulse 1.1s ease-in-out infinite} .sync-chip.warn{border-color:#d9821466;color:#b06a00} .sync-chip.warn .dot{background:#d98214} .sync-chip.err{border-color:color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad)} .sync-chip.err .dot{background:var(--bad)} @keyframes syncPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}} @media (max-width:900px){.sync-chip{display:none}} /* ---------- 4. 学生登录页 ---------- */ .art-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px} .art-list li{display:grid;gap:4px;padding-left:16px;position:relative} .art-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%; background:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)} .art-list b{font-size:14px;color:var(--tx);letter-spacing:.01em} .art-list span{font-size:12.8px;color:var(--tx3);line-height:1.7} .login-hint.info{border-color:var(--brand-line);color:var(--tx2)} .login-hint.err{border-color:color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad)} /* ---------- 5. 纵向对比 ---------- */ .cmp-layout{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:18px;align-items:start} .cmp-pick{position:sticky;top:78px} .cmp-main{display:grid;gap:18px} .cmp-list{ display:grid;gap:2px;max-height:460px;overflow:auto;padding-right:4px; border:1px solid var(--line);border-radius:var(--radius);background:var(--panel2); } .cmp-item{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px; padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line); transition:background .16s var(--ease); } .cmp-item:last-child{border-bottom:0} .cmp-item:hover{background:var(--panel)} .cmp-item.on{background:var(--brand-soft)} .cmp-item.dis{opacity:.45;cursor:not-allowed} .cmp-item input{accent-color:var(--brand);width:15px;height:15px;cursor:pointer} .cmp-item .ci-name{font-size:13.6px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmp-item .ci-meta{font-size:11.6px;color:var(--tx3);font-family:var(--mono);white-space:nowrap} /* 对比明细表 */ .cmp-table{font-size:12.6px} .cmp-table th{white-space:nowrap;text-align:center;font-size:11.5px;color:var(--tx2);padding:9px 10px} .cmp-table .th-sub{font-size:10.4px;color:var(--tx3);font-weight:400;font-family:var(--mono)} .cmp-table td{text-align:center} .cmp-table td.sticky-col,.cmp-table th.sticky-col{text-align:left;position:sticky;left:0; background:var(--panel);box-shadow:1px 0 0 var(--line);z-index:2;min-width:92px} .cmp-table .dlt{display:inline-block;font-size:10.6px;font-family:var(--mono);padding:1px 5px; border-radius:9px;margin-top:2px} .cmp-table .dlt.up{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)} .cmp-table .dlt.down{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)} .cmp-table .dlt:not(.up):not(.down){color:var(--tx3)} .chart-empty{ display:flex;align-items:center;justify-content:center;min-height:170px; color:var(--tx3);font-size:13.4px;text-align:center;padding:24px; border:1px dashed var(--line2);border-radius:var(--radius);background:var(--panel2); } /* ---------- 6. 云端状态卡 ---------- */ .cs-row{ display:flex;justify-content:space-between;gap:14px;padding:8px 0; border-bottom:1px dashed var(--line);font-size:12.8px; } .cs-row:last-child{border-bottom:0} .cs-row span{color:var(--tx3)} .cs-row b{font-family:var(--mono);color:var(--tx);font-weight:600;text-align:right} .cs-row.err b{color:var(--bad)} /* ---------- 7. 皮肤选择卡 ---------- */ .skin-card{ display:grid;gap:4px;width:100%;text-align:left;cursor:pointer; padding:12px 14px;border-radius:var(--radius);border:1px solid var(--line); background:var(--panel2);transition:all .18s var(--ease);font-family:inherit; } .skin-card:hover{border-color:var(--line2)} .skin-card.active{border-color:var(--brand-line);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand-line)} .skin-card b{font-size:13.6px;color:var(--tx)} .skin-card span{font-size:11.6px;color:var(--tx3);line-height:1.6} /* ---------- 8. 使用说明 / 更新日志 ---------- */ .guide-body h2{font-size:19px;margin:0 0 16px;padding-bottom:11px;border-bottom:1px solid var(--line); letter-spacing:.01em;scroll-margin-top:80px} .guide-body h4{font-size:14px;color:var(--tx);margin:20px 0 9px} .guide-body p{font-size:13.8px;line-height:1.95;color:var(--tx2);margin-bottom:13px} .guide-body ul,.guide-body ol{margin:0 0 16px;padding-left:22px} .guide-body li{font-size:13.6px;line-height:1.95;color:var(--tx2);margin-bottom:7px} .guide-body b{color:var(--tx);font-weight:600} .g-sec{padding:26px 0;border-bottom:1px solid var(--line)} .g-sec:last-child{border-bottom:0} .g-sec:first-child{padding-top:4px} .g-tip{ display:block;padding:12px 15px;border-radius:var(--radius);border:1px solid var(--brand-line); background:var(--brand-soft);color:var(--tx2);font-size:13.2px;line-height:1.85;margin:16px 0; } .g-tip b{color:var(--brand);margin-right:7px} .toc-title{font-size:11px;letter-spacing:.14em;color:var(--tx3);text-transform:uppercase; padding:0 12px 10px;font-family:var(--mono)} .toc-link{display:block;padding:7px 12px;border-radius:var(--radius-sm);font-size:13px; color:var(--tx2);border-left:2px solid transparent;transition:all .16s var(--ease)} .toc-link:hover{background:var(--panel2);color:var(--tx)} .toc-link.active{color:var(--brand);background:var(--brand-soft);border-left-color:var(--brand);font-weight:600} .log-list{display:grid;gap:16px} .log-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel2);padding:18px 20px} .log-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px} .log-ver{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--on-brand); background:var(--brand);padding:3px 10px;border-radius:20px;letter-spacing:.02em} .log-date{font-family:var(--mono);font-size:12px;color:var(--tx3)} .log-tag{font-size:11.6px;color:var(--tx2);border:1px solid var(--line);border-radius:20px;padding:2px 10px} .log-title{font-size:14.6px;color:var(--tx);margin:0 0 12px;font-weight:700} .log-items{list-style:none;margin:0;padding:0;display:grid;gap:9px} .log-items li{display:grid;grid-template-columns:56px 1fr;gap:11px;align-items:start;font-size:13.2px; line-height:1.85;color:var(--tx2)} .log-kind{ font-size:11px;text-align:center;padding:2px 0;border-radius:5px;font-weight:600; border:1px solid currentColor;line-height:1.6; } .log-kind.k-new{color:var(--brand)} .log-kind.k-fix{color:var(--ok)} .log-kind.k-sec{color:#b45309} .log-kind.k-ui{color:#7c3aed} .log-kind.k-del{color:var(--bad)} .log-kind.k-opt{color:#0e7490} .log-kind.k-other{color:var(--tx3)} /* ---------- 9. 页脚 ---------- */ .site-foot{ position:relative;z-index:2;max-width:1180px;margin:40px auto 0;padding:22px 24px 34px; display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; border-top:1px solid var(--line); } .foot-note{font-size:12px;color:var(--tx3)} .foot-links{display:flex;gap:18px;align-items:center} .foot-links a{font-size:12px;color:var(--tx3);border-bottom:1px dashed transparent} .foot-links a:hover{color:var(--tx2);border-bottom-color:var(--line2)} .foot-admin{opacity:.62;font-size:11.5px} .foot-admin:hover{opacity:1} /* ---------- 10. 响应式微调 ---------- */ @media (max-width:980px){ .cmp-layout{grid-template-columns:1fr} .cmp-pick{position:static} .cmp-list{max-height:300px} } @media (max-width:760px){ .art-list{display:none} .site-foot{flex-direction:column;align-items:flex-start;gap:10px} .log-items li{grid-template-columns:1fr;gap:5px} .cmp-table th,.cmp-table td{padding:7px 8px} .guide-body h2{font-size:17px} } /* ---------- 11. 门户可见性（硬隔离）---------- 同一个 index.html 承载 / 与 /admin 两套界面， 靠 在 CSS 层就隔绝，避免任何脚本时序问题导致的串台。 */ html[data-portal="admin"] #loginWrap, html[data-portal="admin"] #studentDash{display:none !important} html[data-portal="student"] #adminGate, html[data-portal="student"] #adminDash{display:none !important} /* 顶栏按钮：学生门户看不到工作台，教师门户看不到「我的成绩」 */ html[data-portal="student"] [data-portal-only="admin"]{display:none !important} html[data-portal="admin"] [data-portal-only="student"]{display:none !important} /* ============================================================ 12. 角色体系：头像 / 昵称 / 授权 / 视角切换 ============================================================ */ /* ---------- 顶栏身份胶囊（带头像） ---------- */ .top-actions .who{ display:inline-flex;align-items:center;gap:8px; padding:3px 11px 3px 3px;border-radius:22px; border:1px solid var(--line);background:var(--panel2); max-width:280px; } .top-actions .who:empty{display:none} .top-actions .who b{font-size:12.6px;font-weight:600;color:var(--tx); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px} .who-role{font-size:10.6px;color:var(--brand);background:var(--brand-soft); border:1px solid var(--brand-line);border-radius:20px;padding:1px 7px;white-space:nowrap} .who-av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none; border:1.5px solid var(--brand-line)} i.who-av{display:flex;align-items:center;justify-content:center;font-style:normal; background:var(--grad-main);color:var(--on-brand);font-size:12px;font-weight:700;border:0} /* ---------- 头像块（账号页 / 学生页共用） ---------- */ .acc-head{display:flex;align-items:center;gap:16px} .acc-av{width:64px;height:64px;border-radius:18px;object-fit:cover;flex:none; border:1px solid var(--line);box-shadow:var(--shadow)} i.acc-av{display:flex;align-items:center;justify-content:center;font-style:normal; background:var(--grad-main);color:var(--on-brand);font-size:26px;font-weight:700;border:0} .acc-meta{display:grid;gap:3px;min-width:0} .acc-meta b{font-size:17px;color:var(--tx);letter-spacing:.01em} .acc-sub{font-size:12.6px;color:var(--tx3)} .acc-line{font-size:13px;color:var(--tx2);margin-top:10px} /* ---------- 角色徽章 ---------- */ .role-badge{ display:inline-block;font-size:11.4px;font-weight:600;line-height:1.7; padding:1px 9px;border-radius:20px;border:1px solid currentColor;white-space:nowrap; } .role-badge.head{color:var(--brand)} .role-badge.subject{color:#0e7490} html[data-mode="dark"] .role-badge.subject{color:#38bdf8} /* ---------- 科目 / 授权标签 ---------- */ .subj-chip{ display:inline-flex;align-items:center;gap:5px;margin:0 6px 6px 0; font-size:11.8px;padding:2px 9px;border-radius:20px; border:1px solid var(--line);background:var(--panel);color:var(--tx2); } .subj-chip i{font-style:normal;font-family:var(--mono);font-size:10.6px;color:var(--tx3)} .grant-chip{ display:block;font-size:11.8px;color:var(--tx2);margin-bottom:4px; font-family:var(--mono);letter-spacing:.01em; } .cc-subs{margin:12px 0 0;display:flex;flex-wrap:wrap} .cc-teacher-line{width:100%;font-size:11.8px;color:var(--tx3);margin-top:2px} /* ---------- 表单：按班级分组的授权矩阵 ---------- */ .fld-hint{font-size:12px;color:var(--tx3);line-height:1.7;margin:-2px 0 8px} .grant-grid{display:grid;gap:8px;max-height:280px;overflow:auto; border:1px solid var(--line);border-radius:var(--radius);padding:10px;background:var(--panel2)} .grant-row{padding:8px 10px;border-radius:var(--radius-sm);background:var(--panel); border:1px solid var(--line)} .grant-row b{display:block;font-size:12.8px;color:var(--tx);margin-bottom:7px} .grant-subjs{display:flex;flex-wrap:wrap;gap:12px} .grant-subjs .switch{margin:0 !important;font-size:12.4px} /* ---------- 超管视角切换条 ---------- */ .view-as-bar{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:9px 14px;margin:0 0 12px;border-radius:var(--radius); border:1px dashed var(--brand-line);background:var(--brand-soft); } .va-label{font-size:11.4px;letter-spacing:.12em;color:var(--tx3);text-transform:uppercase; font-family:var(--mono)} .view-as-bar select{ font-size:12.6px;padding:4px 9px;border-radius:20px; border:1px solid var(--brand-line);background:var(--panel);color:var(--tx); } .va-note{font-size:11.8px;color:var(--tx3)} @media (max-width:760px){ .top-actions .who{max-width:150px} .top-actions .who b{max-width:70px} .acc-av{width:52px;height:52px;border-radius:14px} .grant-subjs{gap:8px} .view-as-bar{padding:8px 11px} } /* ---------- 使用说明里的表格 ---------- */ .guide-body .guide-table{font-size:13.2px} .guide-body .guide-table th{text-align:left;font-size:12px;color:var(--tx2);padding:9px 11px; white-space:nowrap;border-bottom:1px solid var(--line2)} .guide-body .guide-table td{padding:9px 11px;line-height:1.8;color:var(--tx2); border-bottom:1px solid var(--line);vertical-align:top} .guide-body .guide-table tr:last-child td{border-bottom:0} .guide-body .guide-table td b{color:var(--tx)}