:root{ /* 2026-09-19 全新浅色现代设计：主色由商务蓝 #4472C4 换为青碧色（teal）。 变量名保留 --blue 以免全站替换引入风险，语义即「主色」。 */ --blue:#0E8074; --blue-d:#0B6B61; --blue-l:#e4f4f1; --red:#C0392B; --red-l:#fdecea; --orange:#D97706; --orange-l:#fef3e2; --green:#1E8E3E; --green-l:#e6f4ea; /* --text-3 是「次要说明文字」，白底对比度须 ≥4.5:1（WCAG AA）。 原值 #78838f 只有 3.86:1，11px 小字读起来发虚；改为 #656f7d = 白底 5.09:1、灰底 4.63:1。 */ --text:#1c2b2a; --text-2:#52646b; --text-3:#5f6f77; --bg:#f3f6f5; --panel:#ffffff; --line:#e3e8e7; --line-2:#eef2f1; --radius:14px; --shadow:0 1px 2px rgba(12,50,46,.04),0 8px 24px rgba(12,50,46,.06); --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --w-med:500; --w-semi:600; --w-bold:700; --dur:.15s; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} [hidden]{display:none!important} html,body{margin:0;padding:0;height:100%} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{background:#0E8074;color:#fff} /* 内容区滚动条：浏览器默认粗灰条在浅灰背景上很突兀，统一为细圆角 */ *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-thumb{background:#c3cecb;border-radius:5px;border:2px solid transparent;background-clip:content-box} *::-webkit-scrollbar-thumb:hover{background:#a8b8b5;border:2px solid transparent;background-clip:content-box} *::-webkit-scrollbar-track{background:transparent} *{scrollbar-width:thin;scrollbar-color:#c3cecb transparent} #app{display:flex;min-height:100vh} .cloud-auth{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef8f6,#f3f6f5);padding:20px} .cloud-auth-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 55px rgba(12,50,46,.14);padding:28px} .cloud-auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}.cloud-auth-brand .brand-logo{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--blue);color:#fff;font-weight:700;font-size:18px}.cloud-auth-brand strong{display:block;color:var(--text);font-size:16px}.cloud-auth-brand small{display:block;color:var(--text-3);font-size:12px} .cloud-auth-card h2{margin:0 0 8px}.cloud-auth-tip{color:var(--text-2);font-size:13px;margin:0 0 18px}.cloud-auth-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}.cloud-auth-tabs button{border:0;background:none;padding:8px 12px;color:var(--text-3);cursor:pointer}.cloud-auth-tabs button.active{color:var(--blue);font-weight:600;border-bottom:2px solid var(--blue)} .cloud-auth-form{display:grid;gap:12px}.cloud-auth-form label{display:grid;gap:5px;color:var(--text-2);font-size:13px}.cloud-auth-form input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;color:var(--text);background:#fff}.cloud-auth-form input:focus{outline:2px solid var(--blue-l);border-color:var(--blue)}.otp-row{display:grid;grid-template-columns:1fr auto;gap:8px}.link-btn{border:0;background:none;color:var(--blue);cursor:pointer;text-align:left;padding:0}.cloud-auth-error{min-height:24px;margin-top:12px;color:var(--red);font-size:13px;line-height:1.5}.cloud-auth-actions{display:flex;gap:10px} /* ---------- 侧边栏（浅色现代导航） ---------- */ .sidebar{ width:236px;flex:0 0 236px;background:#fbfdfc;color:var(--text-2); border-right:1px solid var(--line); display:flex;flex-direction:column;position:sticky;top:0;height:100vh; } .brand{display:flex;gap:10px;align-items:center;padding:20px 16px;border-bottom:1px solid var(--line-2)} .brand-logo{ width:36px;height:36px;border-radius:11px;background:var(--blue);color:#fff; display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700; box-shadow:0 2px 10px rgba(14,128,116,.32); } .brand-text{flex:1;min-width:0} .brand-text strong{display:block;font-size:14px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)} /* 副标题必须单行省略：216px 宽的侧栏里「Safety Workbench · 技能包驱动」放不下， 不处理会折成两行、末尾孤零零挂一个「动」字，看着像布局坏了 */ .brand-text span{display:block;font-size:9.5px;color:var(--text-3);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 导航过长时在侧栏内部滚动。 * 注意 `.nav` 必须同时有 min-height:0 —— flex 子项默认 min-height:auto， * 内容再长也不收缩，溢出部分会被 .sidebar（无 overflow）直接裁掉， * 表现就是「底部模块看不到、也滚不动」。 */ .nav{ padding:8px 10px 14px;flex:1;min-height:0; overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; display:flex;flex-direction:column;gap:1px; } .nav::-webkit-scrollbar{width:6px} .nav::-webkit-scrollbar-thumb{background:#d4ddd9;border-radius:3px} .nav::-webkit-scrollbar-thumb:hover{background:#bccac5} .nav::-webkit-scrollbar-track{background:transparent} .nav-empty{font-size:12px;color:var(--text-3);padding:18px 10px;text-align:center;line-height:1.8} /* ---------- 导航分组（可折叠） ---------- */ .nav-group{display:flex;flex-direction:column;gap:1px} .nav-group-head{ display:flex;align-items:center;gap:5px;width:100%; border:0;background:none;font:inherit;text-align:left;cursor:pointer;user-select:none; padding:12px 10px 6px;border-radius:8px; font-size:var(--fs-sm);font-weight:var(--w-semi);color:var(--text-3);letter-spacing:.6px;transition:var(--dur); } .nav-group-head:hover{color:var(--text-2);background:var(--line-2)} .nav-group-head .chev{ font-style:normal;font-size:8px;line-height:1;color:var(--text-3); transition:transform var(--dur) ease;transform:rotate(90deg); } .nav-group.collapsed .nav-group-head .chev{transform:rotate(0deg)} .nav-group-head .cnt{margin-left:auto;font-size:var(--fs-sm);font-weight:var(--w-med);color:var(--text-3);opacity:.7} .nav-group-head .cnt.on{color:var(--blue);opacity:1} .nav-group-body{display:flex;flex-direction:column;gap:1px} .nav-group.collapsed .nav-group-body{display:none} /* 导航条目用