:root {
  --ink: #162033;
  --muted: #718096;
  --line: #e6eaf0;
  --soft: #f6f8fb;
  --panel: #ffffff;
  --navy: #17233a;
  --navy-2: #1f2d48;
  --primary: #6857db;
  --primary-2: #8a72eb;
  --primary-soft: #f0edff;
  --blue: #3d7bf2;
  --success: #1e9d74;
  --warning: #d4872e;
  --danger: #d65261;
  --shadow: 0 12px 38px rgba(29, 42, 71, .08);
  font-family: Inter, "Microsoft YaHei UI", "PingFang SC", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--soft);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { min-width: 1180px; background: var(--soft); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
code { font: 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; color: #526078; word-break: break-all; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 14px 18px; background: linear-gradient(180deg, var(--navy), #111b2e); color: #dfe7f5; display: flex; flex-direction: column; z-index: 5; }
.brand { display: flex; gap: 12px; align-items: center; padding: 2px 9px 25px; }
.brand strong { display: block; font-size: 18px; letter-spacing: .5px; color: #fff; }
.brand small { display: block; margin-top: 3px; font-size: 9px; letter-spacing: 1.6px; color: #8e9bb1; }
.brand-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: white; background: linear-gradient(135deg, #755ee8, #9b80f0); box-shadow: 0 8px 24px rgba(111, 88, 226, .35); font-weight: 800; }
.brand-mark.large { width: 52px; height: 52px; border-radius: 17px; font-size: 23px; }
.nav-list { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; padding-right: 2px; }
.nav-group { margin: 14px 13px 5px; color: #687790; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.nav-group:first-child { margin-top: 0; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 13px; border-radius: 11px; font-size: 14px; color: #aeb9ca; transition: .18s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.055); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(113,91,226,.42), rgba(113,91,226,.13)); box-shadow: inset 3px 0 #927af0; }
.nav-icon { width: 20px; text-align: center; color: #9c89ef; font-size: 17px; }
.sidebar-footer { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid rgba(255,255,255,.08); }
.user-card { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #2e3d5b; color: #fff; font-weight: 700; }
.user-copy { min-width: 0; }
.user-copy strong, .user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-copy strong { font-size: 13px; color: white; }
.user-copy small { margin-top: 2px; color: #8997ad; font-size: 11px; }
.link-button { padding: 0; border: 0; color: #9aa8bd; background: none; font-size: 12px; }
.link-button:hover { color: #fff; }

.workspace { min-width: 0; }
.topbar { min-height: 68px; padding: 10px 34px; display: grid; grid-template-columns: minmax(150px, .6fr) minmax(360px, 1.4fr) minmax(270px, .8fr); gap: 22px; align-items: center; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); color: #59667a; font-size: 13px; }
.environment-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(30,157,116,.11); }
.environment-label { white-space: nowrap; }
.topbar-actions { display: flex; gap: 18px; align-items: center; justify-content: flex-end; white-space: nowrap; }
.global-search { position: relative; display: flex; align-items: center; min-width: 0; }
.global-search > span { position: absolute; left: 13px; color: #8b96a7; z-index: 1; }
.global-search input { min-width: 0; padding-left: 37px; padding-right: 72px; border-color: #e2e6ed; background: #f8f9fc; }
.global-search button { position: absolute; right: 5px; min-height: 32px; padding: 0 11px; border: 0; border-radius: 7px; color: #5d4fc2; background: #ebe7ff; font-size: 11px; font-weight: 800; }
.privacy-pill { padding: 7px 11px; border-radius: 999px; color: #6354c6; background: var(--primary-soft); font-size: 12px; }
.page-content { padding: 30px 34px 48px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.page-heading h1 { margin: 5px 0 5px; font-size: 28px; letter-spacing: -.5px; }
.page-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.eyebrow { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }
.heading-actions { display: flex; gap: 10px; }

.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 17px; border-radius: 9px; border: 1px solid transparent; font-size: 13px; font-weight: 700; }
.primary-button { color: white; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 7px 18px rgba(104,87,219,.2); }
.primary-button:hover { filter: brightness(1.04); }
.secondary-button { border-color: #dce1e9; color: #3f4b60; background: white; }
.large-button { width: 100%; min-height: 48px; font-size: 14px; }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card { position: relative; min-height: 126px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 6px 22px rgba(29,42,71,.045); }
.metric-card::after { content: ""; position: absolute; right: -25px; bottom: -35px; width: 95px; height: 95px; border-radius: 50%; background: var(--primary-soft); }
.metric-card.success::after { background: #e6f7f1; }.metric-card.warning::after { background: #fff3df; }.metric-card.danger::after { background: #ffebee; }
.metric-card span, .metric-card small { display: block; color: var(--muted); font-size: 12px; }
.metric-card strong { display: block; margin: 10px 0 7px; font-size: 28px; }

.task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.task-card { position: relative; min-height: 136px; padding: 21px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 8px 26px rgba(29,42,71,.055); transition: transform .16s ease, box-shadow .16s ease; }
.task-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(29,42,71,.09); }
.task-card::after { content: ""; position: absolute; right: -35px; top: -42px; width: 125px; height: 125px; border-radius: 50%; background: #eeeaff; }
.task-card.warning::after { background: #fff1dc; }.task-card.neutral::after { background: #e9f1f9; }
.task-card span, .task-card small { display: block; position: relative; z-index: 1; }.task-card span { color: #58657a; font-size: 13px; font-weight: 700; }.task-card strong { display: block; position: relative; z-index: 1; margin: 10px 0 12px; font-size: 32px; }.task-card small { color: var(--primary); font-size: 11px; }
.status-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 6px 22px rgba(29,42,71,.04); }
.status-strip > a, .status-strip > span { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 18px; border-left: 1px solid var(--line); }
.status-strip > :first-child { border-left: 0; }
.status-strip > a:hover { background: #faf9ff; }
.status-strip span { color: var(--muted); font-size: 12px; }
.status-strip strong { color: var(--ink); font-size: 22px; }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.quick-grid > a { display: flex; gap: 12px; align-items: center; min-height: 70px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.78); }
.quick-grid > a:hover { border-color: #cfc7f8; background: white; }
.quick-icon { display: grid; place-items: center; flex: 0 0 35px; height: 35px; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-size: 17px; font-weight: 800; }
.quick-grid strong, .quick-grid small { display: block; }.quick-grid strong { font-size: 13px; }.quick-grid small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 12px; }.section-heading h2 { margin: 0 0 4px; font-size: 18px; }.section-heading p { margin: 0; color: var(--muted); font-size: 11px; }

.panel-grid { display: grid; gap: 18px; }
.panel-grid.two-one { grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr); }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.panel-header { min-height: 72px; padding: 18px 21px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0f4; }
.panel-header h2 { margin: 0 0 4px; font-size: 16px; }
.panel-header p { margin: 0; color: var(--muted); font-size: 12px; }
.panel-header > a { color: var(--primary); font-size: 12px; font-weight: 700; }
.attention-panel { background: linear-gradient(150deg, #fff, #faf8ff); }
.health-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #edf0f4; }
.health-item { min-height: 62px; padding: 12px 16px; display: flex; gap: 10px; align-items: center; background: white; }
.health-item > span:nth-child(2) { min-width: 0; flex: 1; }
.health-item strong, .health-item small { display: block; }.health-item strong { font-size: 12px; }.health-item small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.health-item em { color: #8a96a9; font-size: 10px; font-style: normal; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }.status-dot.online { background: var(--success); box-shadow: 0 0 0 4px rgba(30,157,116,.12); }.status-dot.offline { background: var(--danger); box-shadow: 0 0 0 4px rgba(214,82,97,.12); }
.rule-list { list-style: none; margin: 0; padding: 14px 22px 22px; }
.rule-list li { position: relative; padding: 10px 0 10px 24px; border-bottom: 1px dashed #e5e7ec; color: #526077; font-size: 13px; }
.rule-list li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 800; }

.toolbar-header { min-height: 68px; }
.search-form { display: flex; gap: 8px; width: min(560px, 60%); }
.search-form input { flex: 1; }
.data-scope { color: var(--muted); font-size: 11px; }
.device-toolbar { align-items: flex-start; gap: 18px; }
.device-toolbar .data-scope { max-width: 360px; padding: 8px 11px; border-radius: 8px; color: #6d5bc7; background: var(--primary-soft); line-height: 1.55; }
.tiny-link { align-self: center; color: var(--primary); font-size: 11px; white-space: nowrap; }
.result-summary { padding: 10px 16px; border-bottom: 1px solid #edf0f4; color: #7b8799; background: #fcfcfd; font-size: 11px; }
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 13px 15px; color: #7b8799; background: #fafbfc; font-size: 11px; font-weight: 700; text-align: left; white-space: nowrap; }
td { padding: 14px 15px; border-top: 1px solid #edf0f4; color: #465267; font-size: 12px; vertical-align: middle; }
tbody tr:hover { background: #faf9ff; }
.empty-cell { padding: 45px; color: var(--muted); text-align: center; }
.table-subtitle { display: block; margin-top: 4px; color: #909bae; font-size: 10px; }
.empty-state { padding: 56px 20px; text-align: center; }.empty-state > span { display: block; color: #ab9bea; font-size: 35px; }.empty-state h3 { margin: 8px 0; }.empty-state p { margin: 0; color: var(--muted); font-size: 13px; }

input, select, textarea { width: 100%; border: 1px solid #dce1e8; border-radius: 9px; outline: none; background: white; color: var(--ink); transition: .16s ease; }
input, select { min-height: 42px; padding: 0 12px; }
textarea { padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #9281e9; box-shadow: 0 0 0 3px rgba(104,87,219,.1); }
label { display: grid; gap: 7px; color: #465267; font-size: 12px; font-weight: 650; }
label small { color: var(--muted); font-weight: 400; line-height: 1.5; }
.form-panel { padding-bottom: 4px; }.stack-form { display: grid; gap: 14px; padding: 20px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.sticky-panel { align-self: start; position: sticky; top: 82px; }
.approvals-section { margin-top: 18px; }
.actions-section { align-items: start; }
.tickets-heading { margin-top: 28px; }
.mode-notice { display: flex; align-items: center; gap: 13px; margin: 0 0 24px; padding: 14px 17px; border: 1px solid #cbe9df; border-radius: 12px; color: #345d50; background: #effaf6; }
.mode-notice .mode-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; color: white; background: var(--success); font-weight: 800; }
.mode-notice strong, .mode-notice small { display: block; }
.mode-notice strong { margin-bottom: 3px; font-size: 13px; }
.mode-notice small { color: #5d776f; font-size: 11px; line-height: 1.55; }
.inline-actions { display: flex; gap: 6px; }.inline-actions form, .inline-form { margin: 0; }
.tiny-button { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 9px; border: 0; border-radius: 7px; font-size: 11px; font-weight: 700; }.tiny-button.success { color: #107153; background: #e4f7f0; }.tiny-button.danger { color: #b43d4b; background: #ffeaed; }.tiny-button.neutral { color: #4f5c72; background: #eef1f6; }
.badge, .level-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 999px; background: #eef1f5; color: #59667a; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.badge.critical, .badge.failed, .badge.denied, .badge.rejected { color: #b33f4d; background: #ffeaed; }.badge.high, .badge.pending, .badge.warning { color: #9b5c11; background: #fff0d9; }.badge.success, .badge.approved { color: #137354; background: #e5f7f0; }
.level-badge.level-1 { color: #476078; background: #eaf0f6; }.level-badge.level-2 { color: #3d65b5; background: #e7efff; }.level-badge.level-3 { color: #6d4ac3; background: #eee8ff; }
.muted { color: var(--muted); }
.alert { margin-bottom: 17px; padding: 12px 15px; border-radius: 9px; font-size: 12px; }.alert.danger { color: #a73543; border: 1px solid #f5c8ce; background: #fff0f2; }.alert.success { color: #126c51; border: 1px solid #bfe9dc; background: #eaf9f4; }

.action-dialog { width: 460px; padding: 28px; border: 0; border-radius: 16px; box-shadow: 0 25px 80px rgba(18,26,44,.28); }.action-dialog::backdrop { background: rgba(15,22,38,.45); backdrop-filter: blur(3px); }.action-dialog h2 { margin: 7px 0 8px; }.action-dialog p { color: var(--muted); line-height: 1.7; font-size: 13px; }.dialog-close { position: absolute; right: 15px; top: 12px; border: 0; background: none; color: #8d98a8; font-size: 24px; }
.device-dialog { width: min(760px, calc(100vw - 80px)); max-height: calc(100vh - 80px); overflow: auto; }
.dialog-subtitle { margin-top: 0; }.detail-section { margin-top: 18px; padding: 17px; border: 1px solid #e8ebf0; border-radius: 12px; background: #fafbfc; }.detail-section h3 { margin: 0; font-size: 13px; }.detail-title { display: flex; align-items: center; justify-content: space-between; }.detail-title span { padding: 4px 8px; border-radius: 999px; color: #6d5bc7; background: #ebe7ff; font-size: 10px; font-weight: 700; }.sensitive-section { border-color: #ddd6ff; background: #fbfaff; }.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 20px; margin: 15px 0 0; }.detail-grid div { min-width: 0; }.detail-grid dt { margin-bottom: 4px; color: var(--muted); font-size: 10px; }.detail-grid dd { margin: 0; color: #364156; font-size: 12px; word-break: break-word; }.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }

.search-results { display: grid; gap: 17px; }.compact-result-list { display: grid; }.compact-result-list > a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 20px; border-top: 1px solid #edf0f4; }.compact-result-list > a:first-child { border-top: 0; }.compact-result-list > a:hover { background: #faf9ff; }.compact-result-list strong, .compact-result-list small { display: block; }.compact-result-list strong { font-size: 12px; }.compact-result-list small { margin-top: 4px; color: var(--muted); font-size: 10px; }.compact-result-list > a > span:last-child { color: #738096; font-size: 11px; text-align: right; }.compact-table { max-height: 330px; }.empty-inline { margin: 0; padding: 26px 20px; color: var(--muted); font-size: 12px; text-align: center; }

.permission-fieldset { min-width: 0; margin: 0; padding: 14px; border: 1px solid #e4e7ed; border-radius: 11px; }.permission-fieldset legend { padding: 0 6px; color: #536076; font-size: 11px; font-weight: 800; }.preset-row { display: flex; flex-wrap: wrap; gap: 7px; }.preset-chip { min-height: 30px; padding: 0 10px; border: 1px solid #ddd7fa; border-radius: 999px; color: #6655ca; background: #f5f2ff; font-size: 10px; font-weight: 750; }.preset-chip:hover { color: white; background: var(--primary); }.permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.permission-option { display: flex; grid-template-columns: none; gap: 9px; align-items: center; min-width: 0; padding: 9px 10px; border: 1px solid #eaedf1; border-radius: 9px; background: white; cursor: pointer; }.permission-option:has(input:checked) { border-color: #cfc6fa; background: #f8f6ff; }.permission-option input { flex: 0 0 auto; width: 16px; min-height: 16px; margin: 0; accent-color: var(--primary); }.permission-option strong, .permission-option small { display: block; }.permission-option strong { font-size: 11px; }.permission-option small { margin-top: 2px; color: #98a1b0; font: 9px/1.2 ui-monospace, Consolas, monospace; }.selection-summary { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.module-summary { display: block; max-width: 280px; color: #69758a; line-height: 1.6; font-size: 10px; }

.login-body { min-width: 1000px; min-height: 100vh; background: #f5f7fb; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, .78fr) minmax(520px, 1.22fr); }
.login-art { position: relative; overflow: hidden; padding: 46px 58px; color: white; background: radial-gradient(circle at 65% 45%, rgba(129,104,231,.26), transparent 30%), linear-gradient(150deg, #16213a, #0e1729); }
.login-art::after { content: ""; position: absolute; right: -100px; bottom: -140px; width: 440px; height: 440px; border-radius: 50%; background: rgba(115,91,224,.08); }
.login-brand { display: flex; gap: 14px; align-items: center; }.login-brand strong, .login-brand small { display: block; }.login-brand strong { font-size: 21px; }.login-brand small { margin-top: 4px; color: #9fabc0; font-size: 11px; letter-spacing: 1px; }
.login-visual { position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; transform: translate(-50%,-48%); }
.orbit { position: absolute; inset: 0; border: 1px solid rgba(169,151,240,.18); border-radius: 50%; }.orbit-two { inset: 58px; border-style: dashed; }.tracker-pulse { position: absolute; inset: 128px; display: grid; place-items: center; border-radius: 50%; background: rgba(111,87,221,.13); box-shadow: 0 0 0 35px rgba(111,87,221,.06), 0 0 0 75px rgba(111,87,221,.025); }.tracker-pulse span { width: 46px; height: 58px; border: 2px solid #a992ff; border-radius: 21px 21px 28px 28px; background: linear-gradient(180deg, #5b49c6, #2b3158); box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.trust-row { position: absolute; left: 58px; right: 58px; bottom: 48px; display: flex; justify-content: space-between; color: #71809a; font-size: 10px; letter-spacing: 1px; }
.login-panel { display: grid; place-items: center; padding: 50px; background: white; }
.login-card { width: 390px; display: grid; gap: 18px; }.login-card header { margin-bottom: 7px; }.login-card h1 { margin: 7px 0 8px; font-size: 30px; }.login-card header p { margin: 0; color: var(--muted); font-size: 13px; }.security-note { margin: 0; color: #8995a7; font-size: 11px; line-height: 1.6; text-align: center; }
.password-field { position: relative; display: block; }.password-field input { padding-right: 58px; }.password-toggle { position: absolute; right: 6px; top: 5px; min-height: 32px; padding: 0 9px; border: 0; border-radius: 7px; color: #6657c8; background: #f0edff; font-size: 10px; font-weight: 800; }.caps-lock-hint { color: var(--warning); }
.password-shell { min-height: 100vh; display: grid; place-items: center; padding: 50px; background: radial-gradient(circle at 50% 0, #eeeaff, transparent 35%), #f5f7fb; }.password-card { padding: 30px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow); }

.login-body { min-width: 0; background: radial-gradient(circle at 50% 0, #eeeaff, transparent 36%), #f5f7fb; }
.login-shell.simple-login-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; place-items: center; padding: 32px 20px; }
.simple-login-card { width: min(420px, calc(100vw - 40px)); padding: 34px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 20px 60px rgba(29,42,71,.12); }
.simple-login-brand { margin-bottom: 10px; color: var(--ink); }
.simple-login-brand strong { color: var(--ink); font-size: 19px; }
.simple-login-brand small { color: var(--muted); letter-spacing: .4px; }

@media (max-width: 1280px) {
  .page-content { padding-left: 25px; padding-right: 25px; }
  .panel-grid.two-one { grid-template-columns: minmax(0, 1.7fr) 330px; }
  .topbar { padding-left: 25px; padding-right: 25px; grid-template-columns: 130px minmax(330px, 1fr) 245px; gap: 14px; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .simple-login-card { padding: 27px 23px; }
  .status-strip { grid-template-columns: 1fr; }
  .status-strip > a, .status-strip > span { border-left: 0; border-top: 1px solid var(--line); }
  .status-strip > :first-child { border-top: 0; }
}