:root { font-family: "Microsoft YaHei", system-ui, sans-serif; color: #172033; background: #f3f6fa; }
* { box-sizing: border-box; } body { margin: 0; } header { display:flex; justify-content:space-between; align-items:center; padding:22px max(5vw,24px); color:#fff; background:linear-gradient(120deg,#102e59,#146eaa); } h1 { margin:4px 0 0; font-size:26px; } h2 { margin:0 0 16px; font-size:19px; } .eyebrow { font-size:12px; letter-spacing:1.4px; color:#a7dfff; } main { max-width:1280px; margin:0 auto; padding:25px; } .hidden { display:none !important; } .card { margin-bottom:20px; padding:22px; border:1px solid #dbe3ed; border-radius:12px; background:#fff; box-shadow:0 3px 14px rgba(22,38,65,.07); } .login-card { max-width:480px; margin:60px auto; } .login-card form { display:flex; gap:10px; } .login-card input { flex:1; } .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; } label { display:grid; gap:6px; color:#495568; font-size:14px; font-weight:700; } .wide { grid-column:1/-1; } .toggle { display:flex; align-items:center; gap:8px; } input, textarea { width:100%; padding:10px; border:1px solid #b8c5d3; border-radius:6px; font:inherit; color:#172033; } textarea { min-height:68px; resize:vertical; } button { border:0; border-radius:6px; padding:10px 15px; color:#fff; font:inherit; font-weight:700; background:#1169ac; cursor:pointer; } button:hover { filter:brightness(1.08); } button.secondary { color:#1b4d78; background:#e8f0f7; } button.warn { background:#ad4b23; } .notice { margin-bottom:20px; padding:13px 16px; border-left:4px solid #2282c1; border-radius:5px; background:#e8f5fd; color:#174b73; } .section-head { display:flex; justify-content:space-between; align-items:center; } .table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; min-width:750px; } th,td { padding:12px 10px; border-bottom:1px solid #e4eaf0; text-align:left; vertical-align:top; } th { color:#536174; font-size:13px; } .badge { display:inline-block; padding:3px 8px; border-radius:20px; font-size:12px; font-weight:700; } .good { color:#17653b; background:#dcf6e7; } .off { color:#8a3522; background:#fde3dc; } .error { margin-top:12px; color:#a52d1e; } code { display:block; overflow-wrap:anywhere; padding:10px; border-radius:5px; color:#0c426d; background:#eef5fb; } dialog { width:min(550px,90vw); border:0; border-radius:12px; box-shadow:0 18px 60px rgba(0,0,0,.3); } dialog div { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; } #toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); max-width:80vw; padding:10px 16px; border-radius:6px; color:white; background:#263a51; opacity:0; transition:.2s; pointer-events:none; } #toast.show { opacity:1; } @media(max-width:760px) { .grid,.form-grid { grid-template-columns:1fr; } .login-card form { flex-direction:column; } }