:root{color:#17202a;background:#f4f6f8;font-family:"Segoe UI","Microsoft YaHei",sans-serif;font-size:15px;letter-spacing:0}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#f4f6f8}button,input{font:inherit;letter-spacing:0}button{cursor:pointer}.login-view{min-height:100vh;display:grid;place-items:center;padding:24px;background:#17202a}.login-panel{width:min(100%,380px);padding:32px;background:#fff;border-top:4px solid #168c79;box-shadow:0 20px 50px rgba(0,0,0,.24)}.brand-mark{width:52px;height:52px;display:grid;place-items:center;margin-bottom:24px;color:#fff;background:#17202a;font-weight:750}.brand-mark.small{width:40px;height:40px;margin:0;background:#168c79;font-size:13px}.eyebrow{margin:0 0 5px;color:#607080;font-size:11px;font-weight:700;text-transform:uppercase}h1,h2{margin:0;letter-spacing:0}.login-panel h1{margin-bottom:28px;font-size:25px}label{display:block;margin-bottom:7px;color:#394957;font-size:13px;font-weight:650}.password-label{margin-top:14px}input[type=text],input[type=password]{width:100%;height:42px;padding:0 11px;border:1px solid #b8c2cc;border-radius:4px;outline:none}input:focus{border-color:#168c79;box-shadow:0 0 0 3px rgba(22,140,121,.14)}.primary-button,.secondary-button{min-height:40px;border-radius:4px;font-weight:650}.primary-button{width:100%;margin-top:16px;border:0;color:#fff;background:#168c79}.primary-button:hover{background:#117665}.primary-button.compact{width:auto;min-width:112px;margin-top:0;padding:0 16px}.secondary-button{padding:0 14px;border:1px solid #c6ced6;color:#34424e;background:#fff}.secondary-button:hover{background:#f7f9fa}.secondary-button.dark{border-color:#53616d;color:#fff;background:transparent}.form-error{margin:12px 0 0;color:#b42318;font-size:13px}.portal{min-height:100vh}.topbar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(18px,4vw,56px);color:#fff;background:#17202a}.brand-lockup{display:flex;align-items:center;gap:13px}.brand-lockup .eyebrow{color:#a9bac8}.brand-lockup h1{font-size:18px}.toolbar{display:flex;align-items:center;gap:10px}.current-user{font-weight:650}.impersonated{padding:4px 8px;border:1px solid #e7b65a;border-radius:3px;color:#ffd98f;font-size:12px}.icon-button{width:40px;height:40px;border:1px solid #53616d;border-radius:4px;color:#fff;background:transparent;font-size:23px;line-height:1}.icon-button.loading{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{padding:12px clamp(18px,4vw,56px);color:#7a271a;background:#fee4e2;border-bottom:1px solid #fecdca}.summary-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 clamp(18px,4vw,56px);background:#fff;border-bottom:1px solid #d9e0e6}.summary-item{min-height:100px;padding:22px 20px;border-right:1px solid #e3e8ec}.summary-item:first-child{padding-left:0}.summary-item:last-child{border-right:0}.summary-item span{display:block;margin-bottom:9px;color:#667684;font-size:12px}.summary-item strong{font-size:24px}.content-section{padding:34px clamp(18px,4vw,56px) 10px}.content-section.bottom{padding-bottom:40px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:15px}.section-heading h2{font-size:19px}.table-wrap{overflow-x:auto;background:#fff;border:1px solid #d9e0e6}table{width:100%;border-collapse:collapse}th,td{padding:13px 15px;text-align:left;border-bottom:1px solid #e5eaee;overflow-wrap:anywhere}th{color:#607080;background:#f9fafb;font-size:11px;text-transform:uppercase}td{font-size:13px}.node-name{font-weight:680}.muted{color:#7a8995}.nowrap{white-space:nowrap}.status-label{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.status-dot{width:8px;height:8px;border-radius:50%;background:#8a98a5}.status-dot.healthy{background:#168c79}.status-dot.warning{background:#dc8b19}.status-dot.offline{background:#d04437}.row-actions{display:flex;gap:7px}.table-action{min-height:30px;padding:0 9px;border:1px solid #b8c2cc;border-radius:4px;background:#fff;font-size:12px}.table-action.danger{color:#a9362b;border-color:#d7a8a3}.empty-state{margin:0;padding:36px;text-align:center;color:#73818d}dialog{width:min(640px,calc(100% - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:6px;box-shadow:0 24px 70px rgba(0,0,0,.32)}dialog::backdrop{background:rgba(23,32,42,.68)}.dialog-form{padding:24px;background:#fff}.dialog-heading{display:flex;justify-content:space-between;gap:16px;margin-bottom:22px}.dialog-heading h2{font-size:20px}.dialog-close{width:36px;height:36px;border:1px solid #c6ced6;border-radius:4px;background:#fff}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label{margin:0}.form-grid input[type=text]{margin-top:7px}.form-grid .wide{grid-column:1/-1}.check-label{display:flex!important;align-items:center;gap:8px;grid-column:1/-1}.check-label input{width:18px;height:18px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.credential-list{margin:0}.credential-list dt{margin-top:14px;color:#607080;font-size:12px}.credential-list dd{margin:5px 0 0;padding:11px;background:#f4f6f8;font-family:Consolas,monospace;overflow-wrap:anywhere}[hidden]{display:none!important}@media(max-width:800px){.summary-band{grid-template-columns:repeat(2,minmax(0,1fr))}.summary-item:nth-child(2n){border-right:0}table{min-width:760px}}@media(max-width:560px){.topbar{align-items:flex-start}.toolbar{flex-wrap:wrap;justify-content:flex-end}.current-user{width:100%;text-align:right}.summary-item{padding:17px 14px}.summary-item:first-child{padding-left:14px}.section-heading{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}.form-grid .wide,.check-label{grid-column:auto}}.summary-band{grid-template-columns:repeat(4,minmax(0,1fr))}.no-plan-state{min-height:calc(100vh - 72px);display:grid;place-items:center;background:#fff}.no-plan-state strong{font-size:28px}.no-plan-state[hidden]{display:none!important}input[type=number],select{width:100%;height:42px;padding:0 11px;border:1px solid #b8c2cc;border-radius:4px;outline:none;background:#fff}.form-grid input[type=number],.form-grid select{margin-top:7px}select:focus{border-color:#168c79;box-shadow:0 0 0 3px rgba(22,140,121,.14)}.package-form{padding:22px;background:#fff;border:1px solid #d9e0e6}.package-controls{display:flex;align-items:center;gap:12px}.package-controls input[type=file]{min-width:0;flex:1;padding:10px;border:1px solid #b8c2cc;border-radius:4px;background:#f9fafb}.package-status{margin:12px 0 0;color:#117665;font-size:13px}@media(max-width:800px){.summary-band{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.summary-band{grid-template-columns:1fr}.package-controls{align-items:stretch;flex-direction:column}.package-controls .primary-button{width:100%}}
:root {
  color: #18232d;
  background: #edf1f3;
  font-family: "Segoe UI Variable", "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  color-scheme: light;
  --ink: #18232d;
  --muted: #657581;
  --line: #d7e0e5;
  --line-strong: #bdcbd2;
  --surface: #ffffff;
  --surface-soft: #f5f8f9;
  --nav: #111a21;
  --nav-soft: #1c2932;
  --teal: #128f82;
  --teal-dark: #0c7067;
  --cyan: #1976b9;
  --amber: #d28a1d;
  --red: #c9473d;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: #edf1f3; }
body { margin: 0; min-width: 320px; background: #edf1f3; color: var(--ink); }
button, input, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
[hidden] { display: none !important; }
h1, h2 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: 0; }
.eyebrow { margin: 0 0 5px; color: #247b75; font-size: 10px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
.login-view { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--nav); border-top: 3px solid #24b8a7; }
.login-panel { width: min(100%, 420px); padding: 34px; background: var(--surface); border: 1px solid #30414d; border-radius: 8px; box-shadow: 0 28px 80px rgba(0,0,0,.36); }
.login-panel .brand-mark { margin-bottom: 25px; }
.login-panel h1 { margin-bottom: 28px; font-size: 25px; }
.brand-mark { width: 52px; height: 52px; display: grid; place-items: center; color: #eafdf9; background: #17252e; border: 1px solid #3a5a66; border-left: 3px solid #24b8a7; border-radius: 6px; font-weight: 800; }
.brand-mark.small { width: 42px; height: 42px; margin: 0; color: #fff; background: #17323a; border-color: #326572; border-left-color: #2bd0bc; font-size: 12px; }
label { display: block; margin-bottom: 7px; color: #33434e; font-size: 12px; font-weight: 680; }
.password-label { margin-top: 15px; }
input, select { width: 100%; height: 43px; padding: 0 12px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 5px; outline: none; }
input:hover, select:hover { border-color: #91a7b2; }
input:focus, select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18,143,130,.14); }
.primary-button, .secondary-button { min-height: 40px; padding: 0 15px; border-radius: 5px; font-weight: 700; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.primary-button { width: auto; margin: 0; color: #fff; background: var(--teal); border: 1px solid var(--teal); }
.primary-button:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.login-panel .primary-button { width: 100%; margin-top: 18px; }
.primary-button.compact { min-width: 116px; padding: 0 16px; }
.secondary-button { color: #334550; background: #fff; border: 1px solid var(--line-strong); }
.secondary-button:hover { color: #17252e; background: #f4f8f9; border-color: #8da2ac; }
.form-error { margin: 12px 0 0; color: #ad3129; font-size: 12px; }
.form-error.success { color: #13715f; }
.dashboard, .portal { min-height: 100vh; background: #edf1f3; }
.topbar { min-height: 76px; position: sticky; top: 0; z-index: 30; padding: 0; color: #fff; background: var(--nav); border-bottom: 1px solid #2a4652; box-shadow: 0 8px 22px rgba(10,20,27,.13); }
.topbar-inner { width: min(1600px, 100%); min-height: 76px; margin: 0 auto; padding: 12px 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-lockup { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand-lockup .eyebrow { color: #71cfc3; }
.brand-lockup h1 { color: #f5fbfc; font-size: 17px; }
.toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 0; }
.updated-at, .software-version, .current-user { color: #aebdc5; font-size: 12px; }
.current-user { max-width: 180px; overflow: hidden; color: #e9f2f4; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.software-version { padding: 4px 8px; color: #8fd5cc; background: #17252e; border: 1px solid #34505a; border-radius: 4px; }
.icon-button { width: 40px; height: 40px; flex: 0 0 40px; padding: 0; color: #e7f4f5; background: #18252e; border: 1px solid #3a505b; border-radius: 5px; font-size: 21px; line-height: 1; }
.icon-button:hover { color: #fff; background: #24343e; border-color: #5c7782; }
.icon-button.loading { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.topbar .secondary-button { min-height: 40px; color: #e8f1f3; background: transparent; border-color: #405965; }
.topbar .secondary-button:hover { color: #fff; background: #22313a; border-color: #68808a; }
.error-banner { position: relative; z-index: 15; padding: 11px max(24px, calc((100% - 1540px) / 2)); color: #8f2d26; background: #fff0ee; border-bottom: 1px solid #efc2bd; font-size: 13px; }
.workspace { width: min(1600px, 100%); margin: 0 auto; padding: 24px 30px 56px; }
.summary-band { display: grid; gap: 12px; padding: 0; background: transparent; border: 0; }
.summary-item { min-width: 0; min-height: 104px; padding: 19px 20px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--teal); border-radius: 7px; box-shadow: 0 5px 14px rgba(28,47,58,.045); }
.summary-item:nth-child(3n+2) { border-top-color: var(--cyan); }
.summary-item:nth-child(3n) { border-top-color: var(--amber); }
.summary-item span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 650; }
.summary-item strong { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-size: 24px; font-weight: 720; overflow-wrap: anywhere; }
.content-section { padding: 30px 0 0; }
.content-section.bottom { padding-bottom: 0; }
.section-heading { min-height: 42px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.section-heading h2 { font-size: 18px; }
.section-actions { display: flex; align-items: center; gap: 16px; }
.legend { display: flex; flex-wrap: wrap; gap: 13px; color: var(--muted); font-size: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.table-wrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 6px 18px rgba(29,48,60,.045); scrollbar-color: #a8bac3 #edf2f4; scrollbar-width: thin; }
table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: auto; }
th, td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid #e4eaed; overflow-wrap: anywhere; }
th { color: #5e707b; background: #f5f8f9; font-size: 10px; font-weight: 750; text-transform: uppercase; white-space: nowrap; }
td { color: #2c3c46; font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f6faf9; }
.node-name { color: #172630; font-weight: 720; white-space: nowrap; }
.muted { color: #7b8992; }
.nowrap { white-space: nowrap; }
.status-label { min-height: 25px; display: inline-flex; align-items: center; gap: 7px; padding: 0 8px; color: #344650; background: #f2f6f7; border: 1px solid #dce5e8; border-radius: 4px; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: #8797a0; }
.status-dot.healthy { background: #10a18f; box-shadow: 0 0 0 3px rgba(16,161,143,.12); }
.status-dot.warning { background: var(--amber); box-shadow: 0 0 0 3px rgba(210,138,29,.12); }
.status-dot.offline { background: var(--red); box-shadow: 0 0 0 3px rgba(201,71,61,.11); }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.table-action { min-height: 30px; padding: 0 9px; color: #34505d; background: #fff; border: 1px solid #b8c7ce; border-radius: 4px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.table-action:hover { color: #173943; background: #f1f7f7; border-color: #7ca2a8; }
.table-action.neutral { color: #176b63; border-color: #91c5bd; }
.table-action.danger { color: #a63a32; border-color: #dfaaa5; }
.table-action.danger:hover { background: #fff3f1; border-color: #cf7d75; }
.empty-state { margin: 0; padding: 38px 20px; color: #73838c; text-align: center; font-size: 12px; }
dialog { width: min(680px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: 0; color: var(--ink); background: #fff; border: 1px solid #84959e; border-radius: 8px; box-shadow: 0 28px 80px rgba(9,20,27,.38); }
dialog::backdrop { background: rgba(9,17,22,.72); }
.edge-form, .dialog-form { padding: 25px; background: #fff; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid #e1e8eb; }
.dialog-heading h2 { font-size: 19px; }
.dialog-close { width: 36px; height: 36px; flex: 0 0 36px; padding: 0; color: #445660; background: #f7f9fa; border: 1px solid #c5d1d6; border-radius: 5px; font-size: 16px; }
.dialog-close:hover { background: #edf3f4; border-color: #95a9b2; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid label { margin: 0; }
.form-grid input, .form-grid select { margin-top: 7px; }
.form-grid .wide { grid-column: 1 / -1; }
.check-label { display: flex !important; align-items: center; gap: 8px; grid-column: 1 / -1; min-height: 40px; margin: 0; }
.check-label input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.assigned-plan-block { margin-bottom: 18px; padding: 14px; background: var(--surface-soft); border: 1px solid var(--line); }
.assigned-plan-block > strong { display: block; margin-bottom: 10px; font-size: 12px; }
.assigned-plan-list { display: grid; gap: 7px; }
.assigned-plan-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; background: #fff; border: 1px solid var(--line); font-size: 12px; }
.assigned-plan-item span { min-width: 0; overflow-wrap: anywhere; }
.assigned-plan-block > .muted { margin: 0; font-size: 12px; }
.credential-list { margin: 0; }
.credential-list dt { margin-top: 14px; color: var(--muted); font-size: 11px; font-weight: 650; }
.credential-list dd { margin: 5px 0 0; padding: 12px; color: #17343d; background: #f1f6f6; border: 1px solid #d9e5e6; border-radius: 5px; font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; overflow-wrap: anywhere; }
.edge-metric { display: grid; gap: 3px; min-width: 116px; white-space: nowrap; }
.edge-metric span { color: #31515d; font-size: 11px; }
.edge-metric small, .field-hint { color: var(--muted); font-size: 11px; }
.field-hint { margin: 13px 0 0; line-height: 1.6; }
@media (max-width: 900px) {
  .topbar-inner { padding-inline: 20px; }
  .workspace { padding: 20px 20px 44px; }
  .updated-at { display: none; }
  .table-wrap table { min-width: 760px; }
}
@media (max-width: 600px) {
  .login-view { padding: 16px; }
  .login-panel { padding: 26px 22px; }
  .topbar { position: relative; }
  .topbar-inner { min-height: 0; align-items: flex-start; padding: 12px 16px; }
  .brand-lockup h1 { font-size: 15px; }
  .toolbar { flex-wrap: wrap; }
  .software-version, .updated-at { display: none; }
  .workspace { padding: 16px 14px 36px; }
  .summary-item { min-height: 88px; padding: 16px; }
  .summary-item strong { font-size: 21px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-actions { width: 100%; align-items: flex-start; justify-content: space-between; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide, .check-label { grid-column: auto; }
  .dialog-actions { flex-wrap: wrap; }
}

.portal .summary-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal .summary-item { padding: 19px 20px; border-right: 1px solid var(--line); }
.portal .summary-item:last-child strong { font-size: 18px; }
.impersonated { padding: 5px 8px; color: #ffd994; background: #2b271c; border: 1px solid #6e5a30; border-radius: 4px; font-size: 11px; white-space: nowrap; }
.no-plan-state { min-height: calc(100vh - 124px); display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 7px; }
.no-plan-state strong { color: #5d6d77; font-size: 22px; }
.no-plan-state[hidden] { display: none !important; }
.package-form { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 6px 18px rgba(29,48,60,.045); }
.package-controls { display: flex; align-items: center; gap: 10px; }
.package-controls input[type=file] { min-width: 0; flex: 1; height: auto; padding: 9px; background: #f6f8f9; border: 1px solid var(--line-strong); border-radius: 5px; }
.package-controls input[type=file]::file-selector-button { min-height: 30px; margin-right: 10px; padding: 0 11px; color: #31505b; background: #fff; border: 1px solid #b6c5cc; border-radius: 4px; font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
.package-status { margin: 11px 0 0; color: var(--teal-dark); font-size: 12px; }
.log-section .table-wrap { max-height: 520px; overflow: auto; }
.log-section thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 #dce5e8; }
@media (max-width: 900px) {
  .portal .summary-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .portal .summary-band { grid-template-columns: 1fr; }
  .portal .summary-item { padding: 16px; }
  .portal .toolbar { max-width: 55%; }
  .portal .current-user { width: 100%; text-align: right; }
  .package-controls { align-items: stretch; flex-direction: column; }
  .package-controls .primary-button { width: 100%; }
  .log-section .table-wrap { max-height: 430px; }
}

:root {
  background: #f0f0f0;
  --ink: #252b30;
  --muted: #68747d;
  --line: #e1e4e6;
  --line-strong: #c8cdd1;
  --surface-soft: #f5f6f7;
  --nav: #2e2e2e;
  --nav-soft: #3b3b3b;
  --teal: #f39a18;
  --teal-dark: #d87d00;
  --cyan: #36a2d8;
  --amber: #e7ad55;
}
html, body, .dashboard, .portal { background: #f0f0f0; }
.eyebrow { color: #d67c00; }
.login-view { background: #2d2d2d; border-top-color: #f39a18; }
.login-panel { border-color: #4b4b4b; border-top: 3px solid #f39a18; border-radius: 3px; }
.brand-mark { color: #fff; background: #333; border-color: #555; border-left-color: #f39a18; border-radius: 3px; }
.brand-mark.small { color: #ffc15d; background: #333; border-color: #555; border-left-color: #f39a18; }
.topbar { min-height: 64px; background: #2e2e2e; border-bottom: 0; box-shadow: none; }
.topbar-inner { width: 100%; min-height: 64px; max-width: none; padding: 0 18px; }
.brand-lockup { min-width: 180px; }
.brand-lockup .eyebrow { color: #f4a634; }
.brand-lockup h1 { color: #f7f7f7; }
.software-version { color: #ffd28c; background: #383838; border-color: #565656; }
.icon-button { color: #f2f2f2; background: #383838; border-color: #595959; }
.icon-button:hover { background: #464646; border-color: #777; }
.topbar .secondary-button { color: #f3f3f3; border-color: #666; }
.topbar .secondary-button:hover { background: #444; border-color: #888; }
.sidebar { width: 198px; position: fixed; top: 64px; bottom: 0; left: 0; z-index: 25; overflow-y: auto; color: #e8e8e8; background: #333; border-right: 1px solid #454545; }
.sidebar-group { border-bottom: 1px solid #4a4a4a; }
.sidebar-group p { margin: 0; padding: 14px 17px; color: #fff; background: #484848; font-size: 12px; font-weight: 720; }
.sidebar nav { display: block; padding: 5px 0; }
.sidebar a { min-height: 41px; display: flex; align-items: center; padding: 0 17px; color: #d3d3d3; border-left: 3px solid transparent; text-decoration: none; font-size: 12px; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.sidebar a:hover { color: #fff; background: #3e3e3e; }
.sidebar a.active { color: #fff; background: #3d3d3d; border-left-color: #f39a18; }
.workspace { width: auto; max-width: none; margin: 0 0 0 198px; padding: 18px 18px 48px; }
.error-banner { margin-left: 198px; padding: 11px 18px; }
.summary-band, .content-section { scroll-margin-top: 78px; }
.summary-band { gap: 14px; }
.summary-item { min-height: 108px; padding: 18px 19px; background: #fff; border: 1px solid #e4e4e4; border-top: 1px solid #e4e4e4; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.035); }
.summary-item:nth-child(3n+2), .summary-item:nth-child(3n) { border-top-color: #e4e4e4; }
.summary-item strong { color: #1f2529; }
.summary-item strong::first-letter { color: #f08d00; }
.content-section { padding-top: 26px; }
.section-heading { min-height: 40px; margin-bottom: 0; padding: 0 14px 11px; background: #fff; border: 1px solid #e4e4e4; border-bottom: 0; border-radius: 3px 3px 0 0; }
.section-heading .eyebrow { margin-top: 10px; }
.section-heading h2 { font-size: 17px; font-weight: 650; }
.table-wrap { border-color: #e4e4e4; border-radius: 0 0 3px 3px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
th { color: #5d676e; background: #f5f6f7; }
tbody tr:hover { background: #fffaf3; }
.primary-button { background: #f39a18; border-color: #f39a18; }
.primary-button:hover { background: #d87d00; border-color: #d87d00; }
input:focus, select:focus { border-color: #ed9419; box-shadow: 0 0 0 3px rgba(243,154,24,.14); }
.status-dot.healthy { background: #25a98f; }
.status-dot.warning { background: #e7a52f; }
.status-label { border-radius: 2px; }
.table-action, .primary-button, .secondary-button, input, select, .icon-button, .dialog-close { border-radius: 2px; }
.package-form { border-radius: 0 0 3px 3px; }
dialog { border-radius: 3px; }
@media (max-width: 900px) {
  .sidebar { width: auto; position: static; display: flex; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid #444; }
  .sidebar-group { display: flex; flex: 0 0 auto; border: 0; }
  .sidebar-group p { display: none; }
  .sidebar nav { display: flex; padding: 0; }
  .sidebar a { min-height: 44px; padding: 0 14px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .sidebar a.active { border-bottom-color: #f39a18; }
  .workspace { margin-left: 0; padding: 16px 14px 38px; }
  .error-banner { margin-left: 0; }
  .summary-band, .content-section { scroll-margin-top: 16px; }
}
@media (max-width: 600px) {
  .topbar { position: relative; }
  .topbar-inner { padding: 11px 14px; }
  .brand-lockup { min-width: 0; }
  .workspace { padding-top: 14px; }
  .summary-band { gap: 10px; }
  .section-heading { padding-inline: 12px; }
}

:root {
  --console-blue: #356cff;
  --console-blue-dark: #2457df;
  --console-text: #202936;
  --console-muted: #5f6875;
  --console-line: #e1e5eb;
  --console-soft: #f5f6f9;
}
html, body, .portal { background: #f5f6f8; }
.portal { color: var(--console-text); }
.portal .topbar {
  min-height: 50px;
  position: static;
  color: var(--console-text);
  background: #f5f6f8;
  border: 0;
  box-shadow: none;
}
.portal .topbar-inner {
  width: 100%;
  min-height: 50px;
  max-width: none;
  padding: 0 22px;
}
.portal .brand-lockup { min-width: 0; }
.portal .brand-lockup h1 { color: #121923; font-size: 16px; font-weight: 500; }
.portal .toolbar { gap: 8px; }
.portal .current-user { color: #4c5663; font-size: 12px; }
.portal .impersonated { color: #9a6500; background: #fff8e6; border-color: #ead59b; }
.portal .icon-button {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  color: #566170;
  background: #fff;
  border-color: #d7dce3;
  border-radius: 2px;
  font-size: 18px;
}
.portal .icon-button:hover { color: var(--console-blue); background: #fff; border-color: #aebde8; }
.portal .topbar .secondary-button {
  min-height: 32px;
  padding: 0 12px;
  color: #4b5664;
  background: #fff;
  border-color: #d7dce3;
  border-radius: 2px;
  font-size: 12px;
}
.portal .topbar .secondary-button:hover { color: var(--console-blue); background: #fff; border-color: #aebde8; }
.portal .back-button { color: var(--console-blue); border-color: #b9c7ef; }
.service-list-view { min-height: calc(100vh - 50px); padding: 10px 22px 22px; }
.service-catalog {
  min-height: 188px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--console-line);
}
.service-filter-form { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.service-filter-form select { width: 96px; flex: 0 0 96px; }
.service-filter-form input { width: 208px; flex: 0 1 208px; }
.service-filter-form input,
.service-filter-form select { height: 33px; border-radius: 0; font-size: 12px; }
.service-filter-form .primary-button { min-height: 33px; min-width: 58px; padding: 0 15px; }
.service-filter-form .purchase-button { min-width: 100px; margin-left: auto; }
.service-table-wrap { overflow-x: auto; border: 0; scrollbar-width: thin; }
.service-table { min-width: 1260px; table-layout: auto; border-collapse: collapse; }
.service-table th { height: 40px; padding: 0 13px; color: #222b36; background: #f3f4f7; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.service-table td { height: 64px; padding: 9px 13px; color: #27313d; border-bottom: 1px solid var(--console-line); font-size: 12px; white-space: nowrap; }
.service-table tbody tr:hover { background: #f9fbff; }
.service-product { display: grid; gap: 5px; }
.service-product strong { color: #25303b; font-size: 12px; font-weight: 600; }
.service-product small { color: #8b949f; font-size: 11px; }
.service-serial { max-width: 185px; overflow: hidden; text-overflow: ellipsis; }
.service-bandwidth { display: grid; gap: 7px; color: var(--console-blue); }
.service-state-normal { color: #19a83d; }
.service-state-disabled { color: #c27b17; }
.service-manage-button {
  min-height: 28px;
  padding: 0;
  color: var(--console-blue);
  background: transparent;
  border: 0;
  font-size: 12px;
}
.service-manage-button:hover { color: var(--console-blue-dark); text-decoration: underline; }
.management-view { min-height: 0; }
.console-shell {
	min-height: 0;
  margin: 0 6px 8px;
  padding: 12px 10px 22px;
  background: #fff;
  border: 1px solid var(--console-line);
}
.module-tabs {
  min-height: 40px;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 4px;
  background: var(--console-soft);
  scrollbar-width: thin;
}
.module-tabs a {
  min-width: max-content;
  display: flex;
  align-items: center;
  padding: 0 17px;
  color: #4b535e;
  border-top: 2px solid transparent;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
}
.module-tabs a:hover { color: var(--console-blue); background: #fafbff; }
.module-tabs a.active { color: var(--console-blue); background: #fff; border-top-color: var(--console-blue); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.console-panel[hidden] { display: none !important; }
.forwarding-panel { padding-top: 0 !important; }
.gateway-panel,
.sdk-panel,
.windows-sdk-panel { padding-top: 0 !important; }
.sdk-integration-notice { min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: #27344a; background: #eef3ff; border: 1px solid var(--console-blue); font-size: 12px; }
.sdk-integration-info { width: 14px; height: 14px; flex: 0 0 14px; display: grid; place-items: center; color: #fff; background: var(--console-blue); border-radius: 50%; font: 700 10px/1 Arial,sans-serif; }
.sdk-integration-actions { display: flex; align-items: center; gap: 10px; padding-top: 14px; }
.sdk-platform-downloads { display: flex; align-items: center; gap: 8px; }
.sdk-integration-actions .primary-button,
.sdk-integration-actions .secondary-button { min-height: 33px; margin: 0; padding: 0 15px; font-size: 12px; }
.sdk-integration-actions .primary-button { min-width: 112px; }
.windows-sdk-panel .package-status { margin: 10px 0 0; color: #26734d; font-size: 12px; }
.windows-sdk-panel .form-error { margin-top: 10px; }
.sdk-credential-dialog { width: min(560px,calc(100% - 32px)); }
.sdk-credential-heading { align-items: center; margin-bottom: 22px; }
.sdk-credential-heading h2 { font-size: 15px; }
.sdk-credential-close { width: 30px; height: 30px; padding: 0; border: 0; color: #9099a2; background: transparent; font-size: 25px; line-height: 1; }
.sdk-credential-close:hover { color: #27344a; }
.sdk-credential-list { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: start; gap: 16px 10px; margin: 0; }
.sdk-credential-list dt { padding-top: 2px; text-align: right; color: #3c4650; font-size: 12px; }
.sdk-credential-list dd { min-width: 0; margin: 0; color: #27313a; font: 12px/1.65 Consolas,"Microsoft YaHei",monospace; overflow-wrap: anywhere; }
.sdk-credential-warning { margin: 14px 0 0 122px; color: #ef2d2d; font-size: 12px; line-height: 1.65; }
.sdk-credential-dialog .dialog-actions { margin-top: 24px; }
.gateway-toolbar { min-height: 33px; display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }
.gateway-toolbar .primary-button,
.sdk-panel .primary-button { min-height: 33px; min-width: 58px; padding: 0 15px; }
.gateway-toolbar .secondary-button { min-height: 33px; padding: 0 15px; font-size: 12px; }
.realip-download-toolbar { margin-top: 17px; margin-bottom: 0; }
.gateway-table-wrap { min-height: 0; border: 0 !important; }
.gateway-table { min-width: 880px; border-collapse: collapse; }
.gateway-table th { height: 41px; padding: 0 17px; color: #202a35; background: #f2f3f6; font-size: 12px; font-weight: 600; text-transform: none; white-space: nowrap; }
.gateway-table td { height: 58px; padding: 9px 17px; font-size: 12px; white-space: nowrap; }
.gateway-table .row-actions { align-items: center; }
.gateway-table .gateway-code-copy { min-height: 27px; padding: 0 8px; color: var(--console-blue); border-color: #b9c8f4; }
.gateway-table .gateway-code-copy:hover { color: #fff; background: var(--console-blue); border-color: var(--console-blue); }
.gateway-device-cell { display: grid; gap: 4px; }
.gateway-device-cell strong { font-weight: 650; }
.gateway-device-meta { display: none; color: #7a8491; font-size: 10px; font-weight: 400; overflow-wrap: anywhere; }
.gateway-empty { min-height: 160px; display: grid; place-items: center; color: #687380; background: #fff; }
.gateway-empty[hidden] { display: none !important; }
.sdk-panel .package-form { min-height: 86px; padding: 17px 0 !important; border: 0 !important; border-top: 1px solid var(--console-line) !important; border-bottom: 1px solid var(--console-line) !important; }
.package-mode-field { min-width: 0; margin: 0 0 14px; padding: 0; border: 0; }
.package-mode-field legend { margin-bottom: 7px; color: #4d5865; font-size: 12px; font-weight: 600; }
.package-mode-options { display: inline-flex; border: 1px solid var(--console-line); }
.package-mode-options label { min-width: 138px; margin: 0; font-size: 12px; font-weight: 500; cursor: pointer; }
.package-mode-options label + label { border-left: 1px solid var(--console-line); }
.package-mode-options input { position: absolute; width: 1px !important; height: 1px !important; margin: 0; opacity: 0; pointer-events: none; }
.package-mode-options span { min-height: 34px; display: grid; place-items: center; padding: 0 13px; color: #4d5865; background: #fff; }
.package-mode-options input:checked + span { color: #2457df; background: #eef3ff; box-shadow: inset 0 2px #356cff; }
.package-mode-options input:focus-visible + span { outline: 2px solid #356cff; outline-offset: -2px; }
.package-mode-guide { max-width: 820px; margin: 10px 0 0; border-top: 1px solid var(--console-line); }
.package-mode-guide > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--console-line); }
.package-mode-guide dt { color: #596575; font-size: 12px; font-weight: 650; }
.package-mode-guide dd { min-width: 0; margin: 0; color: #737e8b; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.package-mode-guide > div.active dt { color: var(--console-blue); }
.package-mode-guide > div.active dd { color: #34404d; }
.sdk-panel .package-controls { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) auto; align-items: end; gap: 10px; }
.package-file-field { min-width: 0; margin: 0; color: #4d5865; font-size: 12px; font-weight: 600; }
.package-file-field > span { display: block; margin-bottom: 7px; }
.sdk-panel .package-controls input[type=file] { width: 100%; min-width: 0; height: 33px; padding: 2px 4px; color: #4d5865; background: #fff; border: 1px solid var(--console-line); border-radius: 0; font-size: 12px; }
.sdk-panel .package-controls input[type=file]::file-selector-button { height: 27px; margin-right: 10px; padding: 0 12px; color: #34404d; background: #f7f8fa; border: 0; border-right: 1px solid var(--console-line); border-radius: 0; cursor: pointer; }
.package-progress { margin-top: 14px; }
.package-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: #4d5865; font-size: 12px; }
.package-progress-heading strong { color: var(--console-blue); font-size: 12px; font-weight: 600; }
.package-progress-track { height: 8px; overflow: hidden; background: #e7eaf0; }
.package-progress-track span { width: 0; height: 100%; display: block; background: var(--console-blue); transition: width .18s ease; }
.package-progress-track.processing span { animation: package-progress-pulse 1.2s ease-in-out infinite; }
@keyframes package-progress-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.sdk-panel .package-status { margin: 10px 0 0; color: #26734d; }
.bandwidth-panel { padding-top: 0 !important; }
.bandwidth-filter-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 17px; }
.bandwidth-filter-form > select { width: 90px; height: 33px; border-radius: 0; font-size: 12px; }
.bandwidth-range-buttons { display: flex; gap: 10px; }
.range-button { min-width: 74px; height: 33px; padding: 0 13px; color: #26303b; background: #fff; border: 1px solid var(--console-line); font-size: 12px; }
.range-button.active { color: #fff; background: var(--console-blue); border-color: var(--console-blue); }
.bandwidth-time-label { display: flex; align-items: center; gap: 9px; margin: 0 0 0 14px; color: #333c48; font-size: 12px; font-weight: 400; }
.bandwidth-filter-form input[type=datetime-local] { width: 168px; height: 33px; padding: 0 10px; border: 1px solid var(--console-line); border-radius: 0; font-size: 12px; }
.bandwidth-time-separator { color: #6f7884; }
.bandwidth-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.bandwidth-summary > div { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; background: #f2f3f6; }
.bandwidth-summary span { color: #29323d; font-size: 12px; }
.bandwidth-summary strong { color: #17263a; font-size: 20px; font-weight: 500; white-space: nowrap; }
.bandwidth-summary small { font-size: 12px; font-weight: 400; }
.trend-section { margin-top: 18px; }
.trend-section + .trend-section { margin-top: 28px; }
.trend-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 8px; padding: 0 6px; }
.trend-heading h3 { margin: 0; color: #262f39; font-size: 14px; font-weight: 600; }
.chart-legend { display: flex; align-items: center; gap: 20px; color: #46515e; font-size: 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend span::before { width: 26px; height: 2px; content: ""; background: currentColor; }
.upload-legend { color: #4e82ff; }
.download-legend { color: #ff9148; }
.connection-legend { color: #27b980; }
.daily-device-legend { color: #4e82ff; }
.peak-connection-legend { color: #356cff; }
.chart-scroll { width: 100%; overflow-x: auto; }
.trend-chart { width: 100%; min-width: 880px; height: 260px; display: block; background: #fff; }
.trend-chart .chart-grid { stroke: #dfe3e8; stroke-width: 1; }
.trend-chart .chart-label { fill: #5b6570; font-size: 11px; }
.trend-chart .chart-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.trend-chart .chart-empty { fill: #8a939d; font-size: 13px; text-anchor: middle; }
.connection-statistics-panel,
.connection-details-panel { padding-top: 0 !important; }
.connection-statistics-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.connection-range-buttons { display: flex; gap: 10px; }
.connection-time-label { display: flex; align-items: center; gap: 9px; margin: 0 0 0 14px; color: #333c48; font-size: 12px; font-weight: 400; }
.connection-statistics-filter input[type=datetime-local] { width: 168px; height: 33px; padding: 0 10px; border: 1px solid var(--console-line); border-radius: 0; font-size: 12px; }
.connection-statistics-panel .trend-section { margin-top: 0; }
.connection-statistics-panel .trend-section + .trend-section { margin-top: 30px; }
.connection-detail-filter { display: grid; grid-template-columns: auto auto minmax(150px,1fr) minmax(150px,1fr) minmax(130px,.8fr) minmax(150px,1fr) auto; gap: 10px; align-items: center; margin-bottom: 17px; }
.connection-detail-filter input,
.connection-detail-filter select { width: 100%; height: 33px; border-radius: 0; font-size: 12px; }
.connection-detail-filter .primary-button { min-width: 60px; }
.connection-detail-table { min-width: 1050px; }
.connection-detail-table input[type=checkbox] { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--console-blue); vertical-align: middle; }
.connection-detail-table th { height: 41px; white-space: nowrap; }
.connection-detail-table td { height: 54px; white-space: nowrap; }
.connection-detail-table .blocked-client { color: #c12f2a; font-weight: 650; }
.analysis-subsection { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--console-line); }
.mapping-filter-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 17px; }
.mapping-filter-form input,
.mapping-filter-form select { width: 180px; height: 33px; border-radius: 0; font-size: 12px; }
.mapping-filter-form select { width: 120px; }
.mapping-filter-form .primary-button { min-height: 33px; min-width: 58px; padding: 0 15px; }
.mapping-filter-form .primary-button:disabled { color: #8a929d; background: #e8ebf0; border-color: #e1e4e9; cursor: not-allowed; }
.forwarding-table-wrap { min-height: 0; border: 0 !important; }
.forwarding-table { min-width: 1460px; border-collapse: collapse; }
.forwarding-table th { height: 41px; padding: 0 17px; color: #202a35; background: #f2f3f6; font-size: 12px; font-weight: 600; text-transform: none; white-space: nowrap; }
.forwarding-table th:first-child { line-height: 0; }
.forwarding-table td { height: 58px; padding: 9px 17px; font-size: 12px; white-space: nowrap; }
.forwarding-table input[type=checkbox] { width: 16px; height: 16px; min-height: 0; display: block; margin: 0; accent-color: var(--console-blue); }
.mapping-remark { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.forwarding-empty { min-height: 160px; display: grid; place-items: center; color: #687380; background: #fff; }
.forwarding-empty[hidden] { display: none !important; }
.portal .error-banner {
  margin: 0 22px 10px;
  padding: 10px 14px;
  color: #a3312a;
  background: #fff1f0;
  border: 1px solid #efc5c2;
  font-size: 12px;
}
.portal .workspace { width: auto; max-width: none; margin: 0; padding: 10px 0 40px; }
.portal .summary-band {
  min-height: 168px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--console-line);
  scroll-margin-top: 14px;
}
.portal .summary-item {
  min-height: 166px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 42px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.portal .summary-item span { margin-bottom: 12px; color: #151b24; font-size: 12px; font-weight: 500; }
.portal .summary-item strong { display: flex; align-items: baseline; color: #252c36; font-size: 21px; font-weight: 400; }
.portal .summary-item strong b { color: var(--console-blue); font-size: 32px; font-weight: 400; }
.portal .summary-item strong small { margin-left: 2px; color: #313945; font-size: 17px; font-weight: 400; }
.portal .summary-item strong small span { display: inline; margin: 0; color: inherit; font-size: inherit; }
.portal .summary-item.bandwidth-plan-summary strong { flex-wrap: wrap; gap: 2px 4px; font-size: 13px; line-height: 1.3; }
.portal .summary-item.bandwidth-plan-summary strong + strong { margin-top: 8px; }
.portal .summary-item.bandwidth-plan-summary strong b { font-size: 18px; white-space: nowrap; }
.portal .summary-item.bandwidth-plan-summary strong small { margin: 0; font-size: 12px; white-space: normal; }
.plan-overview { margin-top: 18px; scroll-margin-top: 14px; }
.plan-heading-row { min-height: 47px; display: flex; align-items: center; padding: 0; }
.plan-heading-row h2 { color: #1b222c; font-size: 15px; font-weight: 600; }
.plan-information {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--console-line);
  border-left: 1px solid var(--console-line);
}
.plan-information > div {
  min-width: 0;
  min-height: 57px;
  display: grid;
  grid-template-columns: minmax(96px, 28%) 1fr;
  align-items: center;
  padding: 0 20px;
  border-right: 1px solid var(--console-line);
  border-bottom: 1px solid var(--console-line);
}
.plan-information dt { color: #202833; font-size: 12px; }
.plan-information dd { min-width: 0; margin: 0; color: #27313d; font-size: 12px; overflow-wrap: anywhere; }
.plan-check { color: var(--console-blue); font-weight: 700; }
.portal .content-section { padding: 0; scroll-margin-top: 14px; }
.portal .section-heading {
  min-height: 47px;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 0;
}
.portal .section-heading .eyebrow { display: none; }
.portal .section-heading h2 { color: #1b222c; font-size: 15px; font-weight: 600; }
.portal .table-wrap,
.portal .package-form {
  border: 1px solid var(--console-line);
  border-radius: 0;
  box-shadow: none;
}
.portal th { color: #505b68; background: #f7f8fa; font-size: 11px; font-weight: 600; text-transform: none; }
.portal th, .portal td { padding: 13px 14px; border-bottom-color: var(--console-line); }
.portal tbody tr:hover { background: #f8faff; }
.portal .primary-button {
  color: #fff;
  background: var(--console-blue);
  border-color: var(--console-blue);
  border-radius: 2px;
}
.portal .primary-button:hover { background: var(--console-blue-dark); border-color: var(--console-blue-dark); }
.portal .secondary-button,
.portal .table-action,
.portal input,
.portal select,
.portal dialog,
.portal .dialog-close { border-radius: 2px; }
.portal input:focus, .portal select:focus { border-color: var(--console-blue); box-shadow: 0 0 0 3px rgba(53,108,255,.12); }
.portal .status-label { border-radius: 2px; }
.portal .package-form { padding: 20px; }
.portal .no-plan-state { min-height: 420px; border: 1px solid var(--console-line); border-radius: 0; }
.login-view { background: #f5f6f8; border-top: 0; }
.login-panel { border: 1px solid var(--console-line); border-top: 3px solid var(--console-blue); border-radius: 2px; box-shadow: 0 12px 36px rgba(32,49,84,.12); }
.login-panel .brand-mark { color: #fff; background: var(--console-blue); border: 0; border-radius: 2px; }
.login-panel .eyebrow { color: var(--console-blue); }
.login-panel .primary-button { background: var(--console-blue); border-color: var(--console-blue); }
@media (max-width: 1000px) {
  .portal .summary-item { padding-inline: 26px; }
  .plan-information { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .portal .topbar-inner { padding: 9px 14px; }
  .portal .toolbar { max-width: 68%; flex-wrap: wrap; }
  .service-list-view { padding: 8px 10px 10px; }
  .gateway-panel,
  .sdk-panel,
  .windows-sdk-panel { padding: 0 0 28px !important; }
  .sdk-integration-notice { align-items: flex-start; margin: 0; line-height: 1.6; }
  .sdk-integration-info { margin-top: 2px; }
  .sdk-integration-actions { display: grid; grid-template-columns: 1fr; }
	.sdk-platform-downloads { display: grid; grid-template-columns: 1fr; }
	.sdk-platform-downloads .primary-button,
	.sdk-platform-downloads .secondary-button { width: 100%; }
  .sdk-integration-actions .primary-button,
  .sdk-integration-actions .secondary-button { width: 100%; }
  .sdk-credential-list { grid-template-columns: 1fr; gap: 5px; }
  .sdk-credential-list dt { margin-top: 8px; text-align: left; }
  .sdk-credential-warning { margin-left: 0; }
  .gateway-toolbar { display: grid; grid-template-columns: 1fr; }
  .gateway-toolbar .primary-button,
  .gateway-toolbar .secondary-button { width: 100%; }
  .gateway-table { width: 100% !important; min-width: 100% !important; table-layout: fixed; }
  .gateway-table th:nth-child(2),
  .gateway-table td:nth-child(2),
  .gateway-table th:nth-child(3),
  .gateway-table td:nth-child(3) { display: none; }
  .gateway-table th,
  .gateway-table td { height: auto; padding: 10px 8px; white-space: normal; }
  .gateway-table th:nth-child(1) { width: 34%; }
  .gateway-table th:nth-child(4) { width: 27%; }
  .gateway-table th:nth-child(5) { width: 39%; }
  .gateway-device-meta { display: block; }
  .gateway-table .row-actions { flex-wrap: wrap; gap: 5px; }
  .gateway-table .table-action { min-height: 27px; padding: 0 7px; }
  .sdk-panel .package-form { padding: 0 0 17px !important; border-top: 0 !important; }
  .sdk-panel .package-controls { grid-template-columns: 1fr; gap: 10px; }
  .package-mode-options { width: 100%; }
  .package-mode-options label { min-width: 0; flex: 1; }
  .sdk-panel .package-controls .primary-button { width: 100%; }
  .bandwidth-panel { padding: 0 0 28px !important; }
  .bandwidth-filter-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bandwidth-filter-form > select { width: 100%; }
  .bandwidth-range-buttons { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .range-button { min-width: 0; padding: 0 6px; }
  .bandwidth-time-label { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; margin: 4px 0 0; }
  .bandwidth-filter-form input[type=datetime-local] { width: 100%; min-width: 0; }
  .bandwidth-time-separator { display: none; }
  #bandwidth-to { grid-column: 1 / -1; }
  .bandwidth-filter-form .primary-button { width: 100%; grid-column: 1 / -1; }
  .bandwidth-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bandwidth-summary > div { min-height: 68px; align-items: flex-start; flex-direction: column; gap: 4px; }
  .trend-heading { align-items: flex-start; flex-direction: column; }
  .connection-statistics-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
  .connection-range-buttons { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .connection-time-label { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; margin: 4px 0 0; }
  .connection-statistics-filter input[type=datetime-local] { width: 100%; min-width: 0; }
  #connection-statistics-to { grid-column: 1 / -1; }
  .connection-statistics-filter .primary-button { width: 100%; grid-column: 1 / -1; }
  .connection-detail-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .connection-detail-filter input,
  .connection-detail-filter select { min-width: 0; }
  .connection-detail-filter #connection-client-filter,
  .connection-detail-filter #connection-server-filter,
  .connection-detail-filter #connection-protocol-filter,
  .connection-detail-filter .primary-button:last-child { grid-column: 1 / -1; }
  .connection-detail-filter .primary-button { width: 100%; }
  .service-catalog { padding: 10px; }
  .service-filter-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .service-filter-form select,
  .service-filter-form input { width: 100%; min-width: 0; }
  .service-filter-form .primary-button { width: 100%; }
  .service-filter-form .purchase-button { margin-left: 0; }
  .mapping-filter-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mapping-filter-form input,
  .mapping-filter-form select,
  .mapping-filter-form .primary-button { width: 100%; }
  .portal .error-banner { margin-inline: 10px; }
  .console-shell { margin: 0 4px 8px; padding: 10px 6px 18px; }
  .module-tabs a { padding-inline: 14px; }
  .portal .workspace { padding-top: 8px; }
  .portal .summary-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal .summary-item { min-height: 118px; padding: 20px; border-bottom: 1px solid var(--console-line); }
  .portal .summary-item:nth-child(odd) { border-right: 1px solid var(--console-line); }
  .portal .summary-item:nth-last-child(-n+2) { border-bottom: 0; }
  .plan-information { grid-template-columns: 1fr; }
  .plan-information > div { grid-template-columns: 112px 1fr; padding-inline: 14px; }
  .portal .section-heading { align-items: center; flex-direction: row; }
}
@media (max-width: 430px) {
  .portal .brand-lockup h1 { font-size: 15px; }
  .portal .toolbar { max-width: 62%; }
  .portal .current-user { width: 100%; text-align: right; }
  .portal .back-button { order: 4; }
  .portal .summary-item { min-height: 108px; padding: 16px; }
  .portal .summary-item strong b { font-size: 27px; }
  .portal .summary-item strong small { font-size: 14px; }
  .plan-information > div { grid-template-columns: 100px 1fr; }
}

.rule-editor-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  color: #202936;
  background: #fff;
  border: 1px solid #dfe4eb;
  border-radius: 2px;
  box-shadow: 0 18px 60px rgba(31, 43, 67, .24);
  overflow: auto;
}
.rule-editor-dialog::backdrop { background: rgba(31, 39, 52, .48); }
.rule-editor-dialog .dialog-form { min-height: 620px; padding: 0; }
.rule-editor-dialog .dialog-heading {
  min-height: 50px;
  align-items: center;
  margin: 0;
  padding: 0 16px 0 20px;
  background: #f6f7f9;
  border-bottom: 1px solid #dfe4eb;
}
.rule-editor-dialog .dialog-heading h2 { color: #202936; font-size: 16px; font-weight: 500; }
.rule-editor-dialog .dialog-close { width: 30px; height: 30px; color: #697382; border: 0; background: transparent; }
.rule-editor-dialog .dialog-close:hover { color: #356cff; background: #eef2ff; }
.rule-editor-notice {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 16px 0;
  padding: 7px 10px;
  color: #34415a;
  background: #f0f4ff;
  border: 1px solid #7797ff;
  font-size: 12px;
}
.rule-editor-info {
  width: 14px;
  height: 14px;
  display: inline-grid;
  flex: 0 0 14px;
  place-items: center;
  color: #356cff;
  border: 1px solid #356cff;
  border-radius: 50%;
  font: 700 10px/1 Arial, sans-serif;
}
.rule-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; margin-top: 16px; border-top: 1px solid #e4e8ee; }
.rule-editor-layout.single-column { grid-template-columns: minmax(0, 1fr); }
.rule-editor-main { min-width: 0; padding: 22px 28px 28px; }
.rule-editor-notes { min-width: 0; padding: 20px; background: #fbfbfc; border-left: 1px solid #e1e5eb; }
.rule-editor-notes h3 { margin: 0 0 10px; color: #242d39; font-size: 13px; font-weight: 650; }
.rule-editor-notes p { margin: 0 0 7px; color: #4a5564; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.rule-editor-notes .rule-note-important { color: #e23b35; }
.rule-form-row {
  min-height: 40px;
  display: grid;
  grid-template-columns: 128px minmax(220px, 375px);
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.rule-form-row > label,
.rule-form-label { margin: 0; color: #28313d; font-size: 12px; font-weight: 500; text-align: right; }
.rule-form-row input,
.rule-form-row select,
.rule-form-row textarea {
  width: 100%;
  min-width: 0;
  margin: 0;
  color: #27313d;
  background: #fff;
  border: 1px solid #d5dbe4;
  border-radius: 0;
  outline: none;
  font-size: 12px;
}
.rule-form-row input,
.rule-form-row select { height: 34px; padding: 0 11px; }
.rule-form-row textarea { min-height: 68px; padding: 9px 11px 22px; resize: vertical; line-height: 1.5; }
.rule-form-row input:focus,
.rule-form-row select:focus,
.rule-form-row textarea:focus { border-color: #356cff; box-shadow: 0 0 0 2px rgba(53,108,255,.1); }
.rule-form-row input::placeholder,
.rule-form-row textarea::placeholder { color: #a0a9b6; }
.rule-type-segments { display: flex; align-items: center; }
.rule-type-segments span,
.rule-type-segments button { min-width: 62px; height: 34px; display: inline-grid; place-items: center; margin: 0 -1px 0 0; padding: 0 12px; color: #34404f; background: #fff; border: 1px solid #d5dbe4; border-radius: 0; font: 12px/1 "Microsoft YaHei",sans-serif; cursor: pointer; }
.rule-type-segments span.active,
.rule-type-segments button[aria-pressed="true"] { position: relative; z-index: 1; color: #2457df; border-color: #356cff; }
.rule-type-segments span.active::after,
.rule-type-segments button[aria-pressed="true"]::after { content: ""; position: absolute; right: 0; bottom: 0; border-right: 8px solid #356cff; border-top: 8px solid transparent; }
.rule-remark-row { align-items: start; }
.rule-remark-row > label { padding-top: 9px; }
.rule-remark-control { position: relative; }
.rule-remark-control > span { position: absolute; right: 9px; bottom: 7px; color: #7d8794; font-size: 11px; }
.rule-remark-control b { color: inherit; font-weight: 500; }
.rule-editor-main .form-error { max-width: 517px; margin: 8px 0 0 142px; }
.rule-editor-main .dialog-actions { justify-content: flex-start; margin: 18px 0 0 142px; }
.rule-editor-main .dialog-actions .primary-button,
.rule-editor-main .dialog-actions .secondary-button { min-height: 34px; min-width: 70px; border-radius: 0; font-size: 12px; }
.rule-editor-main .dialog-actions .primary-button { order: 0; color: #fff; background: #356cff; border: 1px solid #356cff; }
.rule-editor-main .dialog-actions .primary-button:hover { background: #2457df; border-color: #2457df; }
.rule-editor-main .dialog-actions .secondary-button { order: 1; color: #34404f; background: #fff; border: 1px solid #cbd2dc; }
.gateway-download-main .rule-form-row { grid-template-columns: 128px minmax(220px, 650px); }
.gateway-download-package { min-height: 52px; display: flex; justify-content: center; flex-direction: column; gap: 5px; padding: 9px 11px; background: #fbfbfc; border: 1px solid #d5dbe4; }
.gateway-download-package strong { color: #27313d; font-size: 12px; font-weight: 600; }
.gateway-download-package small { color: #7d8794; font-size: 11px; }
.gateway-download-command { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; gap: 8px; }
.gateway-download-command code { min-width: 0; min-height: 52px; padding: 10px 11px; overflow-wrap: anywhere; color: #27313d; background: #fbfbfc; border: 1px solid #d5dbe4; font: 12px/1.55 Consolas,"Microsoft YaHei",sans-serif; }
.gateway-download-command .secondary-button { min-width: 64px; border-radius: 0; }
.gateway-download-tutorial-row { align-items: start; }
.gateway-download-tutorial-row .rule-form-label { padding-top: 10px; }
.gateway-download-tutorial { width: 100%; min-height: 280px; max-height: 420px; margin: 0; padding: 13px 15px; overflow: auto; color: #27313d; background: #fbfbfc; border: 1px solid #d5dbe4; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.75 Consolas,"Microsoft YaHei",sans-serif; }
.gateway-download-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 820px) {
  .rule-editor-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .rule-editor-dialog .dialog-form { min-height: 0; }
  .rule-editor-notice { margin: 10px 10px 0; }
  .rule-editor-layout { grid-template-columns: 1fr; margin-top: 10px; }
  .rule-editor-main { padding: 18px 14px 20px; }
  .rule-editor-notes { padding: 16px 14px; border-top: 1px solid #e1e5eb; border-left: 0; }
  .rule-form-row { grid-template-columns: 112px minmax(0, 1fr); }
  .gateway-download-main .rule-form-row { grid-template-columns: 112px minmax(0, 1fr); }
  .rule-editor-main .form-error,
  .rule-editor-main .dialog-actions { margin-left: 126px; }
}
@media (max-width: 520px) {
  .rule-editor-dialog { width: calc(100vw - 8px); max-height: calc(100vh - 8px); }
  .rule-editor-dialog .dialog-heading { padding-left: 14px; }
  .rule-editor-notice { align-items: flex-start; }
  .rule-form-row { grid-template-columns: 1fr; gap: 6px; margin-bottom: 13px; }
  .gateway-download-main .rule-form-row { grid-template-columns: 1fr; }
  .rule-form-row > label,
  .rule-form-label { text-align: left; }
  .rule-remark-row > label { padding-top: 0; }
  .rule-editor-main .form-error,
  .rule-editor-main .dialog-actions { margin-left: 0; }
  .rule-editor-main .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .rule-editor-main .dialog-actions .primary-button,
  .rule-editor-main .dialog-actions .secondary-button { width: 100%; }
}

.realip-panel { padding-top: 0 !important; }
.realip-filter-form input { width: 220px; }
.realip-filter-form select { width: 132px; }
.realip-table-wrap { min-height: 0; max-height: 520px; overflow: auto; border-radius: 0; }
.realip-table { min-width: 1180px; }
.realip-device { display: grid; gap: 3px; }
.realip-device strong { color: #25303b; font-size: 12px; font-weight: 600; }
.realip-device small { color: #74808c; font: 11px Consolas, monospace; }
.realip-source-values { display: flex; flex-wrap: wrap; gap: 4px; min-width: 150px; }
.realip-source-value { padding: 3px 7px; border: 1px solid #d5dbe3; border-radius: 3px; color: #34404f; background: #f7f8fa; font: 11px Consolas, monospace; white-space: nowrap; }
.realip-source-pending { color: #b06413; font-size: 12px; white-space: nowrap; }
.realip-source-dialog { width: min(980px, calc(100% - 24px)); }
.realip-source-dialog .dialog-form { min-height: 520px; }
.realip-source-device-name { min-height: 34px; display: flex; align-items: center; margin: 0 0 12px; padding: 0 11px; color: #4d5865; background: #f7f8fa; border: 1px solid #d9dee5; font-size: 12px; }
.realip-source-main .form-error,
.realip-source-main .dialog-actions { margin-left: 0; }
.realip-source-options { max-height: 330px; overflow-y: auto; border: 1px solid #d9dee5; }
.realip-source-option { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; margin: 0; padding: 9px 12px; border-bottom: 1px solid #e5e9ee; color: #293542; background: #fff; }
.realip-source-option:last-child { border-bottom: 0; }
.realip-source-option input { width: 16px; height: 16px; margin: 0; }
.realip-source-option strong { font: 12px Consolas, monospace; }
.realip-source-option small { color: #75808d; font-size: 11px; white-space: nowrap; }
.realip-source-option.disabled { color: #89939d; background: #f5f6f8; }
.realip-source-empty { margin: 0; padding: 24px 16px; color: #6f7c89; text-align: center; border: 1px solid #d9dee5; }
@media (max-width: 700px) {
  .realip-filter-form input,
  .realip-filter-form select { width: 100%; min-width: 0; }
  .realip-source-option { grid-template-columns: 20px minmax(0, 1fr); }
  .realip-source-option small { grid-column: 2; white-space: normal; }
}

.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:16px}.auth-links button{padding:0;border:0;color:#356cff;background:transparent;font-size:13px}.code-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.code-row .secondary-button{height:42px;white-space:nowrap}.account-tabs{display:flex;gap:0;margin-bottom:12px;background:#fff;border:1px solid var(--console-line);overflow-x:auto}.account-tabs button{min-height:42px;padding:0 18px;border:0;border-right:1px solid var(--console-line);color:#53616d;background:#fff;white-space:nowrap}.account-tabs button.active{color:#356cff;box-shadow:inset 0 3px #356cff}.account-panel{padding:20px;background:#fff;border:1px solid var(--console-line)}.account-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.account-heading h2{font-size:19px}.account-heading>strong{font-size:20px}.store-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.store-product-card{padding:18px;border:1px solid #dce3e8;border-radius:6px;background:#fff}.store-product-card h3{margin:0 0 8px;font-size:17px}.store-product-limits{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:14px 0;color:#61707c;font-size:12px}.store-product-price{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;padding-top:14px;border-top:1px solid #e5eaee}.store-product-price strong,.purchase-price{color:#2457df;font-size:20px}.purchase-summary{padding:12px;background:#f6f8fa;border:1px solid #e0e6ea}.purchase-price{margin:16px 0 0;font-weight:700}.service-actions{display:flex;gap:6px}.service-actions .service-manage-button{min-width:56px}.wallet-positive{color:#168c79}.wallet-negative{color:#b42318}.identity-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:1px solid var(--console-line)}.identity-summary div{min-width:0;padding:14px;border-right:1px solid var(--console-line)}.identity-summary div:last-child{border-right:0}.identity-summary dt{color:#71808b;font-size:11px}.identity-summary dd{margin:6px 0 0;font-weight:700;overflow-wrap:anywhere}.identity-form{margin-top:18px;padding-top:18px;border-top:1px solid var(--console-line)}.identity-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.identity-form-grid label{display:grid;gap:7px}.identity-form-grid .wide{grid-column:1/-1}.identity-consent{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center}.identity-consent input{width:auto}.identity-latest{margin:14px 0 0;padding:10px 0;color:#5d6b76;border-bottom:1px solid var(--console-line)}.payment-method-fieldset{margin:17px 0 0;padding:0;border:0}.payment-method-fieldset legend{margin-bottom:8px;color:#394957;font-size:13px;font-weight:650}.payment-method-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));border:1px solid #cfd6dd;border-radius:4px;overflow:hidden}.payment-method-options label{min-width:0;margin:0;border-right:1px solid #cfd6dd}.payment-method-options label:last-child{border-right:0}.payment-method-options input{position:absolute;opacity:0;pointer-events:none}.payment-method-options span{min-height:42px;display:grid;place-items:center;padding:0 8px;color:#4b5966;background:#fff;font-size:13px;white-space:nowrap}.payment-method-options input:checked+span{color:#fff;background:#356cff}.payment-method-options input:focus-visible+span{box-shadow:inset 0 0 0 3px #a8bdf7}.payment-waiting{display:grid;justify-items:center;gap:10px;padding:8px 0 0;text-align:center}.payment-waiting img{width:220px;height:220px;border:1px solid #dbe1e6}.payment-waiting strong{font-size:17px}.payment-waiting p{margin:0}.payment-waiting-status{color:#4c5a67}@media(max-width:900px){.store-products{grid-template-columns:repeat(2,minmax(0,1fr))}.identity-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.identity-summary div:nth-child(2){border-right:0}.identity-summary div:nth-child(-n+2){border-bottom:1px solid var(--console-line)}}@media(max-width:600px){.auth-panel{padding:24px}.store-products{grid-template-columns:1fr}.account-panel{padding:14px}.account-heading{align-items:flex-start;flex-direction:column}.code-row{grid-template-columns:1fr}.code-row .secondary-button{width:100%}.account-tabs button{flex:1 0 auto;padding:0 7px;font-size:12px}.identity-form-grid{grid-template-columns:1fr}.identity-form-grid .wide{grid-column:auto}.identity-summary{grid-template-columns:1fr}.identity-summary div{border-right:0;border-bottom:1px solid var(--console-line)}.identity-summary div:last-child{border-bottom:0}.payment-method-options{grid-template-columns:1fr}.payment-method-options label{border-right:0;border-bottom:1px solid #cfd6dd}.payment-method-options label:last-child{border-bottom:0}.payment-waiting img{width:190px;height:190px}}

.purchase-dialog { width: min(1000px, calc(100% - 24px)); max-width: 1000px; background: #fff; border: 1px solid #d8dde5; border-radius: 2px; box-shadow: 0 18px 48px rgba(28,39,54,.22); }
.purchase-dialog .dialog-form { padding: 0; background: #fff; }
.purchase-dialog .dialog-heading { min-height: 52px; align-items: center; margin: 0; padding: 0 18px; border-bottom: 1px solid #e3e7ed; }
.purchase-dialog .dialog-heading .eyebrow { display: none; }
.purchase-dialog .dialog-heading h2 { color: #1f2937; font-size: 16px; font-weight: 500; }
.purchase-dialog .dialog-close { width: 30px; height: 30px; border: 0; border-radius: 0; color: #6c7785; }
.purchase-dialog .rule-editor-notice { margin: 14px 18px 0; }
.purchase-dialog .rule-editor-layout { display: block; margin-top: 12px; border-top: 1px solid #e4e8ee; }
.purchase-dialog .rule-editor-main { padding: 20px 22px 18px; }
.purchase-dialog .rule-editor-notes { display: none; }
.purchase-dialog .payment-method-fieldset { max-width: 520px; margin: 16px 0 0 128px; }
.purchase-dialog .payment-waiting { margin: 0; padding: 8px 0; justify-items: center; text-align: center; }
.purchase-dialog .dialog-actions { justify-content: flex-start; margin: 18px 0 0 128px; gap: 10px; }
.purchase-dialog .dialog-actions button { min-width: 88px; height: 34px; min-height: 34px; border-radius: 0; font-size: 12px; }
.purchase-dialog .dialog-actions #submit-purchase { order: 0; color: #fff; background: #356cff; border: 1px solid #356cff; }
.purchase-dialog .dialog-actions #cancel-purchase { order: 1; color: #34404f; background: #fff; border: 1px solid #cbd2dc; }
@media(max-width:760px){.purchase-dialog{width:calc(100% - 16px)}.purchase-dialog .payment-method-fieldset,.purchase-dialog .dialog-actions{margin-left:0}.purchase-dialog .dialog-actions{display:flex;flex-wrap:wrap}}

.table-pager{min-height:48px;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 12px;color:#687582;background:#fff;border:1px solid #dbe1e6;border-top:0;font-size:12px}.table-pager select{width:68px;height:32px;padding:0 7px}.table-pager-label{display:flex;align-items:center;gap:7px;margin:0;color:#687582;font-size:12px;font-weight:500;white-space:nowrap}.table-pager-pages{display:flex;align-items:center;gap:7px;white-space:nowrap}.table-pager-button{width:32px;height:32px;padding:0;border:1px solid #c8d0d8;border-radius:3px;color:#465361;background:#fff;font-size:18px;line-height:1}.table-pager-button:hover:not(:disabled){color:#2457df;border-color:#7f9ff1}.table-pager-button:disabled{color:#aeb7bf;background:#f4f6f8;cursor:not-allowed}.access-detail-page{padding-top:22px!important;padding-bottom:40px!important;background:#f4f6f8}.access-detail-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}.access-detail-heading h2{font-size:20px}.access-detail-heading>p{margin:0;color:#7a8793;font-size:12px}.access-filter-bar{display:grid;grid-template-columns:minmax(180px,1.2fr) auto minmax(185px,1fr) minmax(185px,1fr) auto;align-items:end;gap:10px;padding:14px;background:#fff;border:1px solid #dbe1e6}.access-filter-bar>select{height:38px}.access-filter-bar label{margin:0}.access-filter-bar label span{display:block;margin-bottom:5px;color:#667481;font-size:11px}.access-filter-bar input{width:100%;height:38px;padding:0 9px;border:1px solid #c8d0d8;border-radius:3px;color:#2f3a45;background:#fff}.access-filter-bar .primary-button{height:38px;min-height:38px}.access-range-buttons{display:flex;height:38px;border:1px solid #c8d0d8}.access-range-buttons button{min-width:58px;padding:0 11px;border:0;border-right:1px solid #c8d0d8;color:#52606d;background:#fff;white-space:nowrap}.access-range-buttons button:last-child{border-right:0}.access-range-buttons button.active{color:#fff;background:#356cff}.access-summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0;background:#fff;border:1px solid #dbe1e6;border-top:0}.access-summary-strip>div{min-height:70px;padding:13px 17px;border-right:1px solid #e2e7eb}.access-summary-strip>div:last-child{border-right:0}.access-summary-strip span{display:block;margin-bottom:6px;color:#77838e;font-size:11px}.access-summary-strip strong{color:#27323d;font-size:18px}.access-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:0}.access-panel{min-width:0;background:#fff;border:1px solid #dbe1e6;border-radius:0}.access-chart-grid .access-panel{border-top:0}.access-chart-grid .access-panel+.access-panel{border-left:0}.access-panel>header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:49px;padding:0 15px;border-bottom:1px solid #e5e9ed}.access-panel>header h3{margin:0;color:#2c3742;font-size:14px}.access-panel>header span{color:#89949e;font-size:11px;white-space:nowrap}.access-chart{height:255px}.access-region-panel,.access-table-panel{margin-top:0;border-top:0}.access-region-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,1fr);min-height:430px}.access-map{height:430px;border-right:1px solid #e5e9ed}.access-ranking-wrap{max-height:430px;overflow:auto}.access-ranking-table{min-width:0}.access-ranking-table th,.access-ranking-table td{padding:11px 13px}.access-ranking-table th{position:sticky;top:0;z-index:1}.access-ranking-table td:last-child{color:#356cff;font-weight:650}.access-table-wrap{overflow:auto}.access-detail-table{min-width:1160px}.access-detail-table th,.access-detail-table td{padding:11px 13px}.access-state{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.access-state::before{width:7px;height:7px;border-radius:50%;background:#9aa5af;content:""}.access-state.online{color:#147a69}.access-state.online::before{background:#19a184}.access-truncated{color:#b06413!important}.access-loading{position:relative}.access-loading::after{position:absolute;inset:49px 0 0;z-index:3;display:grid;place-items:center;color:#65727e;background:rgba(255,255,255,.82);content:"正在加载访问数据..."}@media(max-width:1120px){.access-filter-bar{grid-template-columns:1fr auto 1fr 1fr}.access-filter-bar>.primary-button{grid-column:4}.access-chart-grid{grid-template-columns:1fr 1fr}.access-chart-grid .access-panel:last-child{grid-column:1/-1;border-left:1px solid #dbe1e6;border-top:0}.access-region-layout{grid-template-columns:1fr}.access-map{border-right:0;border-bottom:1px solid #e5e9ed}.access-ranking-wrap{max-height:300px}}@media(max-width:760px){.table-pager{justify-content:space-between;flex-wrap:wrap;gap:8px}.table-pager-total{order:3;width:100%}.access-detail-page{padding:14px 10px 28px!important}.access-detail-heading{align-items:flex-start;flex-direction:column}.access-filter-bar{grid-template-columns:1fr}.access-filter-bar>*{width:100%}.access-filter-bar>.primary-button{grid-column:auto}.access-range-buttons button{flex:1}.access-summary-strip{grid-template-columns:1fr 1fr}.access-summary-strip>div:nth-child(2){border-right:0}.access-summary-strip>div:nth-child(-n+2){border-bottom:1px solid #e2e7eb}.access-chart-grid{grid-template-columns:1fr}.access-chart-grid .access-panel+.access-panel{border-left:1px solid #dbe1e6}.access-chart-grid .access-panel:last-child{grid-column:auto}.access-chart{height:230px}.access-panel>header{align-items:flex-start;flex-direction:column;justify-content:center;padding:9px 12px}.access-panel>header span{white-space:normal}.access-region-layout{min-height:0}.access-map{height:330px}.access-ranking-wrap{max-height:270px}.access-summary-strip strong{font-size:16px}}

.portal #user-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.component-intro { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 24px; margin: 0 0 16px; padding: 16px 18px; color: #53606d; background: #f7f9fc; border-top: 2px solid var(--console-blue); border-bottom: 1px solid #dce2e8; }
.component-intro header { min-width: 0; }
.component-intro header span { display: block; margin-bottom: 5px; color: #778390; font-size: 10px; font-weight: 600; }
.component-intro h3 { margin: 0; color: #26313c; font-size: 15px; font-weight: 650; }
.component-intro p { margin: 0; font-size: 12px; line-height: 1.75; }
.component-intro strong { color: #34404c; font-weight: 650; }
.account-balance-row { min-height: 38px; display: flex; align-items: flex-start; justify-content: flex-end; margin-bottom: 12px; }
.account-balance-row strong { color: #252c36; font-size: 20px; font-weight: 600; }
.mapping-filter-form .danger-button { color: #fff; background: #d43c35; border-color: #d43c35; }
.mapping-filter-form .danger-button:hover { background: #b52e28; border-color: #b52e28; }
.mapping-filter-form .danger-button:disabled { color: #8a929d; background: #e8ebf0; border-color: #e1e4e9; }
.gateway-download-toolbar { margin-top: 17px; margin-bottom: 0; }
.gateway-filter-form input { width: 220px; }
.gateway-assignment-dialog .dialog-form { min-height: 0; }
.gateway-assignment-dialog .rule-editor-layout { grid-template-columns: minmax(0, 1fr) 350px; }
.identity-status-row { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.identity-status-row > span { color: #6c7883; font-size: 12px; }
.identity-resume-button { margin-top: 14px; }
.identity-qr-dialog { width: min(420px, calc(100% - 24px)); }
.identity-qr-content { display: grid; justify-items: center; gap: 14px; text-align: center; }
.identity-qr-content img { width: 256px; height: 256px; max-width: 100%; aspect-ratio: 1; border: 1px solid #d8e0e6; }
.identity-qr-content p { min-height: 20px; margin: 0; color: #5d6974; }
.identity-scan-link { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
@media (max-width: 1000px) {
  .portal #user-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .portal #user-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .component-intro { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  .gateway-filter-form input,
  .gateway-filter-form select { width: 100%; }
  .gateway-assignment-dialog .rule-editor-layout { grid-template-columns: 1fr; }
  .identity-qr-content img { width: min(256px, 72vw); height: auto; }
}

.account-panel[data-account-panel="store"] { padding: 0; }
.store-shell { min-width: 0; color: #293542; background: #fff; }
.store-heading { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px; border-bottom: 1px solid #e1e6ec; }
.store-heading > div { display: flex; align-items: baseline; gap: 10px; }
.store-heading span { color: #697684; font-size: 12px; }
.store-heading strong { color: #2457df; font-size: 24px; font-weight: 700; }
.store-heading .primary-button { min-width: 92px; height: 36px; min-height: 36px; border-radius: 3px; background: #356cff; }
.store-heading .primary-button:hover { background: #2457df; }
.store-section { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 18px; padding: 22px 28px; border-bottom: 1px solid #e5e9ee; }
.store-section > h2 { padding-top: 8px; color: #354250; font-size: 13px; font-weight: 650; }
.store-products { display: flex; flex-wrap: wrap; gap: 10px; }
.store-plan-tab { min-width: 96px; min-height: 38px; padding: 0 16px; border: 1px solid #cbd3dc; border-radius: 3px; color: #43515f; background: #fff; font-size: 13px; }
.store-plan-tab:hover { color: #2457df; border-color: #8fa8ee; }
.store-plan-tab.active { color: #fff; border-color: #356cff; background: #356cff; box-shadow: inset 0 0 0 1px #356cff; }
.store-spec-list,.store-definition-list { margin: 0; }
.store-spec-list { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); border: 1px solid #dce2e8; }
.store-spec-list > div { min-width: 0; padding: 13px 14px; border-right: 1px solid #e3e8ed; }
.store-spec-list > div:last-child { border-right: 0; }
.store-spec-list dt { color: #7a8793; font-size: 11px; }
.store-spec-list dd { margin: 7px 0 0; color: #2457df; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.store-definition-list { display: grid; gap: 8px; padding: 2px 0; }
.store-definition-list > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; }
.store-definition-list dt { color: #536271; font-size: 12px; font-weight: 650; }
.store-definition-list dd { margin: 0; color: #84909b; font-size: 12px; line-height: 1.55; }
.store-terms { display: flex; flex-wrap: wrap; }
.store-term-button { position: relative; min-width: 94px; min-height: 38px; margin-left: -1px; padding: 0 15px; border: 1px solid #cbd3dc; color: #43515f; background: #fff; font-size: 13px; }
.store-term-button:first-child { margin-left: 0; }
.store-term-button:hover { z-index: 1; color: #2457df; border-color: #8fa8ee; }
.store-term-button.active { z-index: 2; color: #fff; border-color: #356cff; background: #356cff; }
.store-checkout-bar { display: flex; align-items: center; gap: 26px; padding: 22px 28px 26px 154px; }
.store-total { min-width: 230px; display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; column-gap: 16px; }
.store-total > span { color: #354250; font-size: 13px; }
.store-total > strong { color: #2457df; font-size: 26px; font-weight: 500; }
.store-total > small { grid-column: 2; min-height: 18px; margin-top: 3px; color: #71808e; font-size: 11px; }
.store-total > small.insufficient { color: #b42318; }
.store-checkout-bar .primary-button { width: auto; min-width: 120px; min-height: 42px; margin: 0; padding: 0 22px; border-radius: 3px; background: #356cff; }
.store-checkout-bar .primary-button:hover { background: #2457df; }
.store-checkout-bar .primary-button:disabled { color: #8793a0; background: #e7ebf0; cursor: not-allowed; }
.purchase-wallet-row,.recharge-balance-row { max-width: 520px; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0 128px; padding: 0 12px; color: #5f6d7a; background: #f7f9fb; border: 1px solid #dce2e8; font-size: 12px; }
.purchase-wallet-row strong,.recharge-balance-row strong { color: #2457df; font-size: 16px; }
.recharge-dialog { width: min(860px, calc(100% - 24px)); max-width: 860px; border-radius: 3px; }
.recharge-dialog .dialog-form { padding: 0; }
.recharge-dialog .dialog-heading { min-height: 54px; align-items: center; margin: 0; padding: 0 18px; border-bottom: 1px solid #e3e7ed; }
.recharge-dialog .dialog-heading .eyebrow { display: none; }
.recharge-dialog .dialog-heading h2 { font-size: 16px; font-weight: 500; }
.recharge-dialog .dialog-close { width: 30px; height: 30px; border: 0; border-radius: 0; }
.recharge-dialog .rule-editor-notice { margin: 14px 18px 0; }
.recharge-dialog .rule-editor-layout { margin-top: 12px; border-top: 1px solid #e4e8ee; }
.recharge-dialog .rule-editor-main { padding: 20px 22px; }
.recharge-balance-row { margin: 0 0 16px; }
.recharge-amount-label { max-width: 520px; display: grid; grid-template-columns: 110px minmax(0, 1fr) 24px; align-items: center; gap: 10px; margin: 0; }
.recharge-amount-label input { min-width: 0; }
.recharge-presets { max-width: 520px; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; }
.recharge-presets button { min-height: 36px; margin-left: -1px; border: 1px solid #cbd3dc; color: #4a5968; background: #fff; }
.recharge-presets button:first-child { margin-left: 0; }
.recharge-presets button:hover,.recharge-presets button.active { z-index: 1; color: #2457df; border-color: #356cff; background: #f2f6ff; }
.recharge-dialog .payment-method-fieldset { max-width: 520px; }
.recharge-dialog .dialog-actions { justify-content: flex-start; }
.recharge-dialog .dialog-actions button { width: auto; min-width: 96px; margin: 0; }
.recharge-dialog .payment-waiting { min-height: 310px; align-content: center; }
.recharge-dialog .form-error { max-width: 520px; }
@media(max-width:980px){.store-spec-list{grid-template-columns:repeat(2,minmax(110px,1fr))}.store-spec-list>div{border-bottom:1px solid #e3e8ed}.store-spec-list>div:nth-child(2n){border-right:0}.store-spec-list>div:nth-last-child(-n+2){border-bottom:0}.store-checkout-bar{padding-left:28px}}
@media(max-width:700px){.store-heading{align-items:flex-start;flex-direction:column}.store-heading .primary-button{width:100%}.store-section{grid-template-columns:1fr;gap:10px;padding:18px 14px}.store-section>h2{padding-top:0}.store-plan-tab{flex:1 1 calc(50% - 5px);min-width:0}.store-definition-list>div{grid-template-columns:68px minmax(0,1fr)}.store-terms{display:grid;grid-template-columns:1fr 1fr}.store-term-button{min-width:0;margin:-1px 0 0 -1px}.store-term-button:nth-child(odd){margin-left:0}.store-term-button:nth-child(-n+2){margin-top:0}.store-checkout-bar{align-items:stretch;flex-direction:column;padding:18px 14px}.store-total{min-width:0}.store-checkout-bar .primary-button{width:100%}.purchase-wallet-row{margin-left:0}.recharge-dialog{width:calc(100% - 12px)}.recharge-dialog .rule-editor-layout{grid-template-columns:1fr}.recharge-dialog .rule-editor-notes{border-left:0;border-top:1px solid #e1e5eb}.recharge-amount-label{grid-template-columns:1fr 24px}.recharge-amount-label{font-size:0}.recharge-amount-label input{font-size:13px}.recharge-presets{grid-template-columns:1fr 1fr}.recharge-presets button{margin:-1px 0 0 -1px}.recharge-presets button:nth-child(odd){margin-left:0}.recharge-presets button:nth-child(-n+2){margin-top:0}.recharge-dialog .payment-method-options{grid-template-columns:1fr 1fr}.recharge-dialog .payment-method-options label{border-right:1px solid #cfd6dd;border-bottom:0}.recharge-dialog .payment-method-options label:last-child{border-right:0}}

.login-view {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  color: #17202a;
  background: #eaf0f8;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}
.login-layout {
  width: min(1320px, 100%);
  min-height: min(760px, calc(100svh - 48px));
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(430px, .82fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid #cfd9e7;
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(31, 52, 87, .18);
}
.login-intro {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  align-content: center;
  gap: 26px;
  padding: 54px 48px 36px;
  overflow: hidden;
  color: #293542;
  background: #f4f5f7;
}
.login-intro::before, .login-intro::after { display: none; }
.login-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.login-brand > div { min-width: 0; }
.login-brand h1 { max-width: 100%; color: #1688ff; font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; font-size: 28px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.login-intro-copy { position: relative; z-index: 1; padding-top: 30px; }
.login-intro-copy h2 { max-width: 620px; color: #1688ff; font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; font-size: 40px; font-weight: 700; line-height: 1.35; }
.login-intro-copy > p:last-child { margin: 10px 0 0; color: #263341; font-size: 16px; font-weight: 400; line-height: 1.7; }
.login-capability-list { position: relative; z-index: 1; display: grid; gap: 12px; margin: 12px 0 0; padding: 0; color: #6e7f98; font-size: 15px; list-style: none; }
.login-capability-list li { position: relative; padding-left: 20px; }
.login-capability-list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; background: #78838f; border-radius: 50%; }
.intro-login-button { position: relative; z-index: 1; width: 160px; height: 46px; margin-top: 4px; border: 0; border-radius: 0; color: #fff; background: #1688ff; font-size: 15px; font-weight: 600; }
.intro-login-button:hover { background: #0875e8; }
.intro-login-button:focus-visible { outline: 3px solid rgba(22, 136, 255, .22); outline-offset: 3px; }
.login-intro footer { position: relative; z-index: 1; align-self: end; color: #a3acb8; font-size: 11px; }
.auth-workspace {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 34px clamp(34px, 5vw, 68px) 28px;
  overflow-y: auto;
  color: #263341;
  background: #fff;
}
.auth-workspace-heading { display: flex; align-items: center; gap: 10px; color: #536271; font-size: 13px; font-weight: 400; }
.login-panel {
  width: min(100%, 430px);
  align-self: center;
  justify-self: center;
  padding: 34px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.login-panel .auth-section-label { margin: 0 0 9px; color: #2457df; font-size: 12px; font-weight: 500; }
.login-panel h2 { color: #17202a; font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; font-size: 28px; font-weight: 700; line-height: 1.35; }
.login-panel .auth-caption { margin: 10px 0 28px; color: #7a8794; font-size: 13px; line-height: 1.6; }
.auth-fields { min-width: 0; }
.auth-fields label { margin: 16px 0 7px; color: #43515f; font-size: 13px; font-weight: 400; }
.auth-fields label:first-child { margin-top: 0; }
.auth-panel input[type="text"],
.auth-panel input[type="email"],
.auth-panel input[type="password"] {
  width: 100%;
  height: 48px;
  min-width: 0;
  padding: 0 13px;
  color: #25313e;
  background: #fff;
  border: 1px solid #cbd4df;
  border-radius: 3px;
  outline: 0;
  font-size: 14px;
}
.auth-panel input::placeholder { color: #a0aab5; }
.auth-panel input:focus { border-color: #2457df; box-shadow: 0 0 0 3px rgba(36, 87, 223, .12); }
.auth-panel .code-row { gap: 8px; }
.auth-panel .code-row .secondary-button { height: 48px; min-height: 48px; border-radius: 3px; color: #2457df; border-color: #aebeea; background: #f5f8ff; }
.auth-panel .code-row .secondary-button:hover { color: #1744bb; background: #e9efff; }
.auth-panel .form-error { margin: 13px 0 0; padding: 9px 11px; color: #a4342a; background: #fff4f2; border-left: 3px solid #d65245; font-size: 12px; }
.auth-panel .auth-submit { height: 48px; min-height: 48px; margin-top: 20px; border-radius: 3px; color: #fff; background: #2457df; border: 1px solid #2457df; }
.auth-panel .auth-submit:hover { background: #1744bb; border-color: #1744bb; }
.auth-panel .auth-submit:focus-visible,
.auth-links button:focus-visible { outline: 3px solid rgba(36, 87, 223, .24); outline-offset: 3px; }
.auth-panel .auth-submit:disabled { color: #8390a0; background: #e4e8ee; border-color: #e4e8ee; cursor: wait; }
.auth-panel .auth-links { margin-top: 18px; }
.auth-panel .auth-links button { color: #2457df; font-size: 12px; }
.auth-panel .auth-links button:hover { color: #1744bb; text-decoration: underline; }
.auth-links-single { justify-content: flex-start; }
.auth-workspace-footer { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; color: #8b96a2; border-top: 1px solid #e1e6ec; font-size: 9px; }
@media (max-width: 900px) {
  .login-view { padding: 0; overflow: visible; }
  .login-layout { min-height: 100svh; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; }
  .login-intro { min-height: 370px; grid-template-rows: auto auto auto auto auto; gap: 17px; padding: 24px; }
  .login-intro-copy { padding-top: 12px; }
  .login-intro-copy h2 { max-width: 520px; font-size: 28px; }
  .login-capability-list { grid-template-columns: 1fr 1fr; gap: 9px 14px; margin-top: 2px; font-size: 12px; }
  .intro-login-button { width: 140px; height: 42px; }
  .login-intro footer { display: block; }
  .auth-workspace { min-height: calc(100svh - 370px); padding: 22px 24px 18px; }
  .login-panel { padding: 32px 0; }
}
@media (max-width: 520px) {
  .login-intro { min-height: 350px; padding: 20px 18px 16px; }
  .login-brand h1 { font-size: 22px; }
  .login-intro-copy { padding-top: 8px; }
  .login-intro-copy h2 { font-size: 25px; }
  .login-intro-copy > p:last-child { margin-top: 8px; font-size: 13px; }
  .login-capability-list { font-size: 11px; }
  .intro-login-button { width: 128px; }
  .login-intro footer { font-size: 9px; }
  .auth-workspace { min-height: calc(100svh - 350px); padding: 18px; }
  .auth-workspace-heading { padding-bottom: 2px; }
  .login-panel { padding: 28px 0 22px; }
  .login-panel h2 { font-size: 24px; }
  .login-panel .auth-caption { margin-bottom: 22px; }
  .auth-panel .code-row { grid-template-columns: 1fr; }
  .auth-panel .code-row .secondary-button { width: 100%; }
}