/* 页面层：登录、各管理页、图表与响应式断点样式 */

.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.brand-corner { position: absolute; top: 22px; left: 28px; display: flex; align-items: center; gap: 10px; color: #fff; }

.brand-corner .b-icon { width: 34px; height: 34px; border-radius: 9px; display:block; object-fit:cover; }

.brand-corner .b-name { font-size: 16px; font-weight: 600; }

.brand-corner .b-ver { font-size: 11px; color: #777; margin-left: 4px; margin-top: 4px; }

.login-card { background: rgba(255,255,255,.06); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 40px; width: 360px; }

.login-card h1 { font-size: 20px; margin-bottom: 24px; text-align: center; color: #fff; }

.layout { display: flex; min-height: 100vh; }

.sidebar { width: 210px; background: rgba(0,0,0,.25); padding: 20px 0 0; display: flex; flex-direction: column; }

.sidebar .logo { color: #fff; font-size: 16px; font-weight: 600; padding: 0 20px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }

.sidebar .item { padding: 12px 20px; cursor: pointer; color: #a0a0b8; font-size: 14px; }

.sidebar .item.active, .sidebar .item:hover { color: #fff; background: rgba(41,97,255,.25); border-right: 3px solid var(--accent); }

.main { flex: 1; padding: 24px 32px; }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.topbar h2 { font-size: 18px; color: #fff; }

.card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 20px; margin-bottom: 20px; }

.card h3 { font-size: 15px; color: #fff; margin-bottom: 14px; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }

.tag.green { background: rgba(82,196,26,.2); color: #95de64; }

.tag.orange { background: rgba(250,173,20,.2); color: #ffc53d; }

.tag.red { background: rgba(255,77,79,.2); color: #ff7875; }

.tag.gray { background: rgba(255,255,255,.12); color: #999; }

.tag.blue { background: rgba(41,97,255,.25); color: #85a5ff; }

.row-actions button { margin-right: 8px; padding: 4px 12px; font-size: 12px; }

.cap-list { display: flex; flex-wrap: wrap; gap: 6px; }

.cap { background: rgba(41,97,255,.15); border: 1px solid rgba(41,97,255,.4); padding: 3px 10px; border-radius: 4px; font-size: 12px; }

.cap.off { opacity: .4; text-decoration: line-through; }

.mono { font-family: "SF Mono", Menlo, monospace; font-size: 12px; color: #9d9dbb; }

.inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.inline-form input, .inline-form select { width: auto; margin-bottom: 0; }

.muted { color: #777; font-size: 12px; }

.task-result-row td { border-bottom: 1px solid rgba(255,255,255,.07); padding-top: 0; }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

.asset-row-cpu { margin-bottom: 16px; }

.asset-item { background: rgba(0,0,0,.25); border-radius: 8px; padding: 14px; font-size: 13px; }

.bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; margin-top: 8px; overflow: hidden; }

.bar-inner { height: 100%; background: var(--accent); border-radius: 3px; transition: width .5s; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }

.metric-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 18px; }

.metric-card .label { color: #8a8aa5; font-size: 13px; }

.metric-card .value { font-size: 30px; color: #fff; font-weight: 600; margin: 6px 0; }

.metric-card .note { font-size: 12px; color: #777; }

.metric-card .note b { color: #95de64; }

.trend-chart { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding-top: 10px; }

.trend-chart i { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }

.group-rank { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; }

.group-rank .progress { flex: 1; height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }

.group-rank .progress span { display: block; height: 100%; background: var(--accent); }

.group-rank strong { min-width: 30px; text-align: right; color: #fff; }

.tree-row { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #a0a0b8; border: none; background: none; }

.tree-row:hover { background: rgba(41,97,255,.15); color: #fff; }

.tree-row.active { background: var(--accent); color: #fff; }

.tree-row .count { margin-left: auto; font-size: 11px; opacity: .7; }

.tree-row .count.attention { background: #faad14; color: #000; border-radius: 8px; padding: 0 6px; }

.dev-hero { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 2px; }

.dev-hero .left { display: flex; gap: 12px; align-items: center; }

.dev-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }

.dev-hero h2 { color: #fff; font-size: 18px; margin: 0; }

.dev-hero .sub { color: #777; font-size: 12px; margin-top: 3px; }

.filter-input, .filter-select { padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); color: #fff; font-size: 13px; margin: 0; width: auto; }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.theme-card { background: rgba(255,255,255,.04); border: 2px solid transparent; border-radius: 10px; padding: 14px; cursor: pointer; text-align: left; color: #ddd; }

.theme-card.selected { border-color: var(--accent); }

.theme-preview { display: block; height: 48px; border-radius: 6px; margin-bottom: 10px; }

.theme-card small { color: #888; display: block; margin-top: 4px; }

.dev-layout { display: flex; gap: 16px; }

.group-panel { width: 200px; flex-shrink: 0; background: rgba(0,0,0,.25); border-radius: 10px; padding: 14px 10px; height: fit-content; }

.group-header { display: flex; justify-content: space-between; align-items: center; color: #8a8aa5; font-size: 13px; padding: 0 8px 10px; }

.group-header button { padding: 2px 10px; font-size: 12px; }

.group-item { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #a0a0b8; display: flex; justify-content: space-between; align-items: center; }

.group-item:hover { background: rgba(41,97,255,.15); color: #fff; }

.group-item.active { background: rgba(41,97,255,.3); color: #fff; }

.group-item .ops { visibility: hidden; font-size: 12px; }

.group-item:hover .ops { visibility: visible; }

.group-item .ops span { margin-left: 6px; cursor: pointer; }

.dev-main { flex: 1; min-width: 0; }

.dev-summary { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

.dev-summary .name { font-size: 16px; color: #fff; font-weight: 600; }

.dev-toggle { cursor: pointer; color: #85a5ff; font-size: 13px; user-select: none; }

.dev-toggle:hover { text-decoration: underline; }

.tag-chip { background: rgba(250,173,20,.15); border: 1px solid rgba(250,173,20,.4); padding: 1px 8px; border-radius: 8px; font-size: 11px; color: #ffc53d; }

.chart-hoverable { cursor: crosshair; }

.asset-chart-tip {
  position: absolute; z-index: 6; pointer-events: none; white-space: nowrap;
  background: rgba(2,6,23,.94); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 9px; font-size: 11px; line-height: 1.6; color: #e2e8f0;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

.asset-chart-tip .t { color: #94a3b8; }

.asset-chart-tip .v { font-weight: 600; }

.asset-wide { grid-column: 1 / -1; }

.login-wrap { background:radial-gradient(circle at 50% 20%, var(--accent-soft), transparent 30%); }

.login-card { width:400px; padding:42px; background:rgba(15,23,40,.92); border-color:var(--line-strong); border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.42); }

.login-card h1 { font-size:22px; letter-spacing:.02em; }

.brand-corner .b-icon { box-shadow:0 8px 26px var(--accent-soft); }

.layout { display:block; min-height:100vh; }

.sidebar { position:fixed; z-index:30; inset:0 auto 0 0; width:232px; padding:0; background:linear-gradient(180deg,var(--nav-bg),color-mix(in srgb,var(--nav-bg) 88%,black)); border-right:1px solid var(--line); box-shadow:12px 0 40px rgba(0,0,0,.14); transition:width .22s ease; overflow:hidden; }

.sidebar .logo { height:72px; display:flex; align-items:center; gap:12px; padding:0 18px; border-bottom:1px solid var(--line); white-space:nowrap; }

.brand-mark { flex:0 0 36px; width:36px; height:36px; border-radius:11px; display:block; object-fit:cover; box-shadow:0 9px 24px var(--accent-soft); }

.brand-copy strong { display:block; font-size:14px; letter-spacing:.04em; }

.brand-copy small { display:block; margin-top:3px; color:var(--text-3); font-size:10px; font-weight:500; letter-spacing:.06em; }

.sidebar .item { position:relative; display:flex; align-items:center; gap:12px; width:calc(100% - 20px); min-height:42px; margin:3px 10px; padding:0 12px; color:var(--text-2); background:transparent; border:0; border-radius:9px; box-shadow:none; text-align:left; white-space:nowrap; }

.sidebar .item:hover { color:var(--text); background:rgba(255,255,255,.045); transform:none; }

.sidebar .item.active { color:white; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 28%,transparent); }

.sidebar .item.active::before { content:""; position:absolute; left:-10px; width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--accent); box-shadow:0 0 14px var(--accent); }

.sidebar-status { margin-top:auto; padding:16px 18px; border-top:1px solid var(--line); color:var(--text-3); font-size:11px; line-height:1.55; white-space:nowrap; }

.sidebar-toggle { position:absolute; right:12px; bottom:80px; width:32px; min-height:32px; padding:0; background:var(--surface); border:1px solid var(--line); color:var(--text-2); box-shadow:none; }

.main { min-height:100vh; margin-left:232px; padding:0 32px 40px; transition:margin-left .22s ease; }

.layout.collapsed .sidebar { width:72px; }

.layout.collapsed .main { margin-left:72px; }

.layout.collapsed .brand-copy, .layout.collapsed .nav-label, .layout.collapsed .nav-count, .layout.collapsed .nav-section, .layout.collapsed .sidebar-status { opacity:0; pointer-events:none; }

.layout.collapsed .sidebar .item { justify-content:center; align-items:center; padding:0; }

.layout.collapsed .sidebar .item .nav-icon { position:absolute; left:0; right:0; top:0; bottom:0; width:auto; flex:none; margin:0; display:flex; align-items:center; justify-content:center; text-align:center; }

.layout.collapsed .sidebar .item { width:52px; }

.layout.collapsed .sidebar-toggle { right:20px; }

.topbar { position:sticky; z-index:20; top:0; min-height:72px; margin:0 -32px 28px; padding:0 32px; background:color-mix(in srgb,var(--canvas) 84%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }

.icon-btn { width:38px; min-height:38px; padding:0; background:var(--surface); border:1px solid var(--line); color:var(--text-2); box-shadow:none; }

.tab-bar { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:12px; flex-wrap:wrap; }

.tab-btn { background:none; border:none; border-bottom:2px solid transparent; color:var(--text-2); padding:8px 12px; font-size:13px; font-weight:600; border-radius:0; }

.tab-btn.active { color:var(--text); border-bottom-color:var(--accent); }

.tab-count { display:inline-block; min-width:18px; padding:0 5px; margin-left:5px; border-radius:9px; background:rgba(255,255,255,.09); color:var(--text-2); font-size:11px; font-weight:700; text-align:center; }

.tab-count.danger { background:#ef4444; color:#fff; }

.card, .metric-card, .group-panel, .asset-item { background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,white),var(--surface)); border:1px solid var(--line); box-shadow:0 16px 38px rgba(0,0,0,.12); }

.card { border-radius:13px; padding:20px; }

.metric-grid { grid-template-columns:repeat(4,minmax(160px,1fr)); gap:16px; }

.metric-card { position:relative; overflow:hidden; border-radius:13px; padding:19px; }

.metric-card::after { content:""; position:absolute; inset:auto -18px -36px auto; width:90px; height:90px; border-radius:50%; background:var(--accent-soft); filter:blur(2px); }

.metric-card .label { color:var(--text-2); }

.metric-card .value { position:relative; z-index:1; font-size:32px; letter-spacing:-.04em; }

.table-scroll > table { border:0; border-radius:0; min-width:100%; }

.table-scroll > table thead th { position:sticky; top:0; z-index:2; background:var(--surface, #1e293b); box-shadow:inset 0 -1px 0 var(--line); }

.table-scroll > table thead th.col-actions { z-index:3; }

@media (max-width:760px) {
  .cell-truncate { max-width:130px; }
  /* 关键列模式：窄屏隐藏次要列，保留勾选/名称/状态/操作四列 */
  .table-scroll.col-key > table th.col-secondary,
  .table-scroll.col-key > table td.col-secondary { display:none; }
  .table-scroll > table td.row-actions,
  .table-scroll > table th.col-actions { position:static; box-shadow:none; }
}

.row-actions { white-space:nowrap; }

.row-actions button { margin:2px 4px 2px 0; }

.state-block .state-icon { font-size:26px;line-height:1;opacity:.75; }

.state-block .state-title { color:var(--text-2);font-size:14px; }

.state-block .state-msg { max-width:420px;line-height:1.6;word-break:break-word; }

.state-block.error .state-title { color:var(--danger,#f87171); }

.state-block button { font-size:13px;padding:5px 14px; }

.skip-link:focus { left:12px; top:12px; }

@media (prefers-reduced-motion: reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

.batch-bar label { display:flex;align-items:center;gap:6px;cursor:pointer; }

.batch-bar input[type=radio] { width:auto; margin:0; }

.batch-target-box { padding:9px 12px;background:rgba(0,0,0,.25);border-radius:6px;margin-bottom:12px;font-size:14px; }

.batch-preview { margin-bottom:12px; }

.batch-preview-grid { display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));gap:10px;margin-bottom:8px; }

.batch-preview-cell { display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.18); }

.batch-preview-cell .label { font-size:11px;color:var(--text-3); }

.batch-preview-cell .value { font-size:20px;color:var(--text); }

.batch-preview-cell .value.green { color:var(--ok,#4ade80); }

.batch-preview-cell .value.gray { color:var(--text-3); }

.batch-preview-plat { font-size:12px;color:var(--text-3); }

.muted { color:var(--text-3); }

@media (max-width:1100px) { .metric-grid { grid-template-columns:repeat(2,minmax(160px,1fr)); } .global-search { width:240px; } }

@media (max-width:760px) { .sidebar { width:72px; } .main, .layout.collapsed .main { margin-left:72px; padding:0 16px 28px; } .brand-copy,.nav-label,.nav-count,.nav-section,.sidebar-status { display:none; } .sidebar .item { justify-content:center; width:52px; padding:0; } .sidebar-toggle { display:none; } .topbar { margin:0 -16px 20px; padding:10px 16px; flex-wrap:wrap; } .global-search { order:3; width:100%; } .tenant-meta,.icon-btn { display:none; } .icon-btn.alarm-lamp { display:flex; } .metric-grid { grid-template-columns:1fr; } .dev-layout { display:block; } .group-panel { width:100%; margin-bottom:14px; } .alarm-panel { position:fixed; left:0; right:0; top:0; bottom:0; width:100%; max-height:none; max-width:none; border-radius:0; border:none; z-index:400; padding:14px; } .alarm-panel .alarm-drawer-head { position:sticky; top:0; background:var(--surface,#1e293b); padding-bottom:10px; margin-bottom:8px; z-index:1; } .alarm-item { flex-wrap:wrap; } .alert-summary-row .tag { font-size:11px; } }

@media (max-width:760px) { .tab-bar { gap:2px; } .tab-btn { padding:8px 8px; font-size:12px; } }

.toast-msg { position:fixed; top:18px; left:50%; transform:translateX(-50%) translateY(-12px); background:var(--surface,rgba(30,30,46,.97)); border:1px solid var(--line-strong,rgba(255,255,255,.15)); color:var(--text,#fff); padding:10px 18px; border-radius:8px; font-size:13px; z-index:9999; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; box-shadow:0 10px 32px rgba(0,0,0,.35); }

.toast-msg.show { opacity:1; transform:translateX(-50%) translateY(0); }