:root {
  --ink: #172b3a;
  --muted: #6d7f8d;
  --line: #dfe8ed;
  --bg: #f3f6f8;
  --surface: #fff;
  --cyan: #0e9fb1;
  --cyan-2: #18bdc9;
  --navy: #132837;
  --green: #138a64;
  --amber: #a96c0e;
  --red: #bc3c48;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: var(--ink); background: var(--bg); }
button, input { font: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .58; }
.app-loading { min-height: 100vh; display: grid; place-content: center; gap: 12px; color: var(--muted); text-align: center; }.boot-mark, .brand-mark { display: grid; width: 45px; height: 45px; margin: auto; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #29cbd4, #197ab8); box-shadow: 0 10px 23px rgba(16,155,183,.25); font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 470px); }.login-aside { padding: clamp(36px, 8vw, 105px); display: flex; flex-direction: column; justify-content: space-between; color: #eef8fa; background: radial-gradient(circle at 23% 12%, #1a6578 0, #132b3b 42%, #10212e 100%); }.login-brand { display: flex; align-items: center; gap: 12px; }.login-brand .brand-mark { width: 41px; height: 41px; margin: 0; border-radius: 11px; font-size: 12px; }.login-brand strong { display: block; font-size: 16px; }.login-brand small { display: block; margin-top: 4px; color: #9bb8c3; font-size: 12px; }.login-copy { max-width: 480px; padding: 70px 0; }.login-copy h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.045em; line-height: 1.18; }.login-copy p { max-width: 410px; margin: 19px 0 0; color: #b7cdd4; font-size: 15px; line-height: 1.8; }.login-points { display: grid; gap: 13px; margin: 38px 0 0; color: #c9dce2; font-size: 13px; }.login-points span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--cyan-2); box-shadow: 0 0 0 4px rgba(24,189,201,.12); }.aside-foot { color: #91aeb8; font-size: 12px; }.login-panel { padding: 40px; display: grid; place-items: center; background: #fff; }.auth-card { width: min(350px, 100%); }.auth-card h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }.auth-card .intro { margin: 9px 0 25px; color: var(--muted); font-size: 13px; line-height: 1.6; }.field { display: grid; gap: 7px; margin: 15px 0; }.field label { color: #4e6573; font-size: 12px; font-weight: 700; }input { width: 100%; height: 42px; padding: 9px 11px; border: 1px solid #cad8df; border-radius: 8px; outline: none; color: var(--ink); background: #fff; font-size: 14px; transition: border-color .15s, box-shadow .15s; }input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(14,159,177,.13); }.primary, .secondary, .danger, .link-button { font-weight: 700; }.primary { width: 100%; min-height: 42px; margin-top: 8px; border: 1px solid #0d8c9e; border-radius: 8px; color: #fff; background: #0e9fb1; box-shadow: 0 5px 12px rgba(14,159,177,.17); }.primary:hover { background: #0a8c9c; }.secondary { min-height: 37px; padding: 7px 12px; border: 1px solid #c7d5dc; border-radius: 7px; color: #31515f; background: #fff; }.secondary:hover { background: #f8fbfb; }.danger { min-height: 36px; padding: 7px 11px; border: 1px solid #e9bec3; border-radius: 7px; color: #b43843; background: #fff; }.danger:hover { background: #fff4f4; }.link-button { padding: 0; border: 0; color: #0d8c9e; background: transparent; }.form-error { min-height: 18px; margin-top: 9px; color: var(--red); font-size: 12px; line-height: 1.5; }.auth-note { margin: 20px 0 0; color: #8798a3; font-size: 11px; line-height: 1.65; }.account-shell { min-height: 100vh; }.header { height: 68px; padding: 0 max(24px, calc((100% - 1170px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: #fff; }.header-brand { display: flex; align-items: center; gap: 10px; }.header-brand .brand-mark { width: 35px; height: 35px; margin: 0; border-radius: 10px; font-size: 11px; }.header-brand strong { font-size: 15px; }.header-brand span { margin-left: 5px; color: var(--muted); font-size: 12px; }.header-user { display: flex; align-items: center; gap: 12px; }.avatar { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 50%; color: #087787; background: #def5f7; font-size: 12px; font-weight: 800; }.user-meta { text-align: right; }.user-meta strong { display: block; font-size: 12px; }.user-meta span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }.main { width: min(1170px, calc(100% - 40px)); margin: 0 auto; padding: 30px 0 50px; }.warning { display: none; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 12px 14px; border: 1px solid #f0c987; border-radius: 9px; color: #87560b; background: #fff6e3; font-size: 13px; line-height: 1.6; }.warning.show { display: flex; }.warning.error { border-color: #edb6bb; color: #aa3540; background: #fff1f2; }.warning.success { border-color: #b7e3d2; color: #137454; background: #edfaf4; }.intro-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 7px 0 21px; }.intro-row h1 { margin: 0; font-size: 25px; letter-spacing: -.03em; }.intro-row p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }.pill { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 9px; border-radius: 20px; color: #087356; background: #e4f7ef; font-size: 11px; font-weight: 700; white-space: nowrap; }.pill.amber { color: #946113; background: #fff2d8; }.pill.red { color: #ac3340; background: #fff0f1; }.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }.access-card { min-height: 168px; padding: 22px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; color: #effcff; background: linear-gradient(135deg, #17394a, #174e63); box-shadow: 0 8px 18px rgba(16,52,73,.08); }.access-card.ds { background: linear-gradient(135deg, #243454, #285878); }.access-card::after { content: ""; position: absolute; width: 165px; height: 165px; right: -55px; bottom: -72px; border: 25px solid rgba(48,208,219,.11); border-radius: 50%; }.access-card .eyebrow { color: #8edfe6; font-size: 11px; font-weight: 800; letter-spacing: .12em; }.access-card h2 { margin: 10px 0 7px; font-size: 21px; }.access-card p { max-width: 330px; margin: 0; color: #bfd7df; font-size: 12px; line-height: 1.6; }.access-card a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 32px; margin-top: 16px; padding: 6px 11px; border-radius: 6px; color: #123546; background: #ddfbfc; font-size: 12px; font-weight: 800; text-decoration: none; }.overview-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 18px; }.card { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 3px 10px rgba(21,54,72,.025); }.card-head { min-height: 58px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }.card-title { font-size: 14px; font-weight: 800; }.card-subtitle { color: var(--muted); font-size: 12px; }.stats { display: grid; grid-template-columns: repeat(3, 1fr); }.stat { padding: 20px 18px; border-right: 1px solid #edf1f4; border-bottom: 1px solid #edf1f4; }.stat:nth-child(3n) { border-right: 0; }.stat-label { color: var(--muted); font-size: 12px; }.stat-value { margin-top: 10px; font-size: 25px; font-weight: 780; letter-spacing: -.04em; }.stat-note { margin-top: 5px; color: #8a9aa5; font-size: 11px; }.expiry { padding: 19px; }.expiry-date { margin: 10px 0 5px; color: #16798a; font-size: 24px; font-weight: 750; letter-spacing: -.025em; }.expiry p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }.account-actions { display: grid; gap: 9px; margin-top: 20px; }.account-actions button { width: 100%; }.recent { min-height: 344px; }.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; font-size: 12px; }th { padding: 10px 14px; color: var(--muted); background: #fafcfd; font-size: 11px; text-align: left; white-space: nowrap; }td { padding: 12px 14px; border-top: 1px solid #edf1f4; vertical-align: top; }.badge { display: inline-flex; padding: 3px 7px; border-radius: 14px; color: #0c7558; background: #e7f8f1; font-size: 10px; font-weight: 750; white-space: nowrap; }.badge.fail { color: #ad3440; background: #fff0f1; }.badge.site { color: #137688; background: #e6f8fa; }.muted { color: var(--muted); }.empty { padding: 36px 18px; color: var(--muted); font-size: 13px; text-align: center; }.password-panel { max-width: 560px; padding: 20px; }.password-panel p { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }.password-panel .form-actions { display: flex; justify-content: flex-end; gap: 9px; }.password-panel .primary { width: auto; min-width: 125px; margin: 0; }.must-change { border-color: #f0c987; box-shadow: 0 0 0 3px rgba(232,167,56,.09); }.must-change .card-head { color: #84570e; background: #fff9ed; }.mobile-only { display: none; }
@media (max-width: 800px) { .login-page { display: block; }.login-aside { min-height: 230px; padding: 28px 25px; }.login-copy { padding: 28px 0 0; }.login-copy h1 { font-size: 29px; }.login-copy p, .login-points, .aside-foot { display: none; }.login-panel { min-height: calc(100vh - 230px); padding: 38px 25px; align-items: start; }.main { width: min(100% - 28px, 1170px); padding-top: 22px; }.header { height: 61px; padding: 0 14px; }.header-brand span, .user-meta { display: none; }.header-user { gap: 7px; }.intro-row { align-items: flex-start; flex-direction: column; margin-top: 0; }.access-grid, .overview-grid { grid-template-columns: 1fr; }.access-card { min-height: 155px; }.stats { grid-template-columns: repeat(2, 1fr); }.stat:nth-child(3n) { border-right: 1px solid #edf1f4; }.stat:nth-child(2n) { border-right: 0; }.stat:last-child { border-bottom: 0; }.recent { min-height: 0; }.mobile-only { display: inline; } }