:root { --ink:#163247; --muted:#64778a; --line:#d9e4e9; --canvas:#f5f8fa; --panel:#ffffff; --teal:#0aa77f; --teal-dark:#08775d; --teal-soft:#dff7ef; --blue:#1d7fd4; --blue-dark:#1768ae; --green:#13835f; --amber:#a96900; --red:#c7404a; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font:14px/1.5 "Microsoft YaHei","PingFang SC","Noto Sans CJK SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:0; }
button,input,select,textarea { font:inherit; letter-spacing:0; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.48; }
.hidden { display:none !important; }
h1,h2,h3,h4,p { margin-top:0; }
h1 { margin-bottom:8px; font-size:31px; line-height:1.2; }
h2 { margin-bottom:0; font-size:22px; line-height:1.25; }
h3 { margin-bottom:0; font-size:17px; line-height:1.3; }
h4 { margin-bottom:9px; color:var(--muted); font-size:13px; }
.eyebrow { margin:20px 0 6px; color:var(--teal-dark); font-size:12px; font-weight:700; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(280px,440px) minmax(300px,410px); place-content:center; padding:24px; }
.login-brand { padding:58px 54px; background:#eaf9f4; border:1px solid #cce8df; border-right:0; }
.login-brand p:last-child { max-width:270px; color:#3c6870; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; color:#fff; background:var(--teal); font-size:15px; font-weight:700; }
.brand-mark.small { width:28px; height:28px; flex:0 0 auto; font-size:11px; }
.login-form { display:grid; align-content:center; gap:17px; min-height:336px; padding:54px; background:var(--panel); border:1px solid var(--line); }
label { display:grid; gap:6px; color:#36536a; font-weight:600; }
input,select,textarea { width:100%; min-height:38px; padding:7px 9px; color:var(--ink); background:#fff; border:1px solid #b7c9d4; border-radius:4px; outline:none; }
textarea { resize:vertical; line-height:1.45; }
input:focus,select:focus,textarea:focus { border-color:var(--teal); box-shadow:0 0 0 2px rgba(10,167,127,.14); }
.primary,.secondary,.text-button,.icon-button { border:1px solid transparent; border-radius:4px; font-weight:600; }
.primary { min-height:34px; padding:7px 13px; color:#fff; background:var(--teal); }
.primary:hover { background:var(--teal-dark); }
.secondary { min-height:32px; padding:6px 11px; color:#376277; background:#fff; border-color:#b9cbd4; }
.secondary:hover { color:#075e4a; background:#effaf6; border-color:#8ecfba; }
.wide { width:100%; }
.form-error { min-height:20px; margin:0; color:var(--red); font-size:13px; }
.console { display:grid; grid-template-columns:238px minmax(0,1fr); min-height:100vh; }
.sidebar { display:flex; flex-direction:column; min-height:100vh; padding:18px 12px; color:#24535a; background:#eef8f5; border-right:1px solid #d4e7e1; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:5px 8px 22px; color:#114d47; font-weight:700; }
.sidebar nav { display:grid; align-content:start; gap:13px; }
.nav-group { margin:0; padding:0; border:0; }
.nav-group-title { margin:0 8px 5px; color:#74948f; font-size:11px; font-weight:700; }
.nav-item { display:block; width:100%; min-height:38px; padding:8px 11px; color:#39676c; text-align:left; background:transparent; border:0; border-left:3px solid transparent; }
.nav-item:hover { color:#075e4a; background:#def6ed; }
.nav-item.active { color:#075e4a; background:#c9f1e4; border-left-color:var(--teal); font-weight:700; }
.sidebar-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding:17px 8px 2px; color:#547b7c; overflow:hidden; border-top:1px solid #d6e9e2; }
.sidebar-footer span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.text-button { flex:0 0 auto; padding:4px; color:#24715f; background:transparent; white-space:nowrap; }
.text-button:hover { color:#075e4a; }
.workspace { min-width:0; padding:24px 30px 46px; }
.topbar,.section-heading,.modal-heading,.modal-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar { min-height:56px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.topbar .eyebrow { margin:0 0 3px; }
.topbar-actions { display:flex; align-items:center; gap:9px; }
.status-pill { display:inline-block; padding:4px 8px; color:#416577; background:#e8f0f3; border-radius:12px; font-size:12px; font-weight:700; white-space:nowrap; }
.status-pill.ok { color:#0d6e52; background:#def4ea; }
.status-pill.bad { color:#a32f39; background:#fae8e9; }
.icon-button { width:34px; height:34px; display:grid; place-items:center; padding:0; color:#42667a; background:#fff; border-color:#b9cbd4; font:20px/1 "DejaVu Sans","Segoe UI Symbol",sans-serif; }
.icon-button:hover { background:#effaf6; border-color:#8ecfba; }
.page-message { min-height:30px; padding-top:9px; color:var(--muted); }
.page-message.error { color:var(--red); }
.muted { color:var(--muted); font-size:12px; }
.page { display:none; }
.page.active { display:block; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:7px 0 22px; }
.metric-grid-six { grid-template-columns:repeat(6,minmax(0,1fr)); }
.metric { min-width:0; padding:15px; color:var(--ink); text-align:left; background:var(--panel); border:1px solid var(--line); border-top:3px solid #a9ded0; border-radius:5px; }
.metric-link:hover { border-color:#8acbb9; background:#fbfffd; }
.metric span { display:block; color:var(--muted); font-size:12px; }
.metric strong { display:block; margin:3px 0; color:#0d594a; font-size:27px; line-height:1.2; }
.metric small { display:block; overflow:hidden; color:#70818c; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.data-section,.detail-panel { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.overview-grid .data-section { margin-top:0; }
.panel-section { min-width:0; }
.section-heading { margin-bottom:13px; }
.section-heading > div:first-child { min-width:0; }
.section-note { margin:4px 0 0; color:var(--muted); font-size:12px; }
.table-heading { margin-top:16px; }
.filter-bar { display:flex; flex-wrap:wrap; align-items:end; gap:11px; margin:4px 0 13px; padding:13px; background:#fff; border:1px solid var(--line); border-radius:4px; }
.filter-bar label { flex:1 1 150px; min-width:140px; }
.filter-bar button { flex:0 0 auto; }
.filter-note { margin:0 0 12px; }
.summary-strip { display:flex; flex-wrap:wrap; gap:0; margin:4px 0 16px; border:1px solid var(--line); background:#fff; }
.summary-strip span { min-width:145px; padding:9px 13px; color:var(--muted); border-right:1px solid var(--line); }
.summary-strip strong { margin-left:6px; color:#155e52; font-size:16px; }
.two-table-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.compact-list { display:grid; gap:7px; }
.compact-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:43px; padding:8px 11px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:4px; }
.compact-row span:last-child { color:var(--muted); text-align:right; }
.compact-action { width:100%; text-align:left; }
.compact-action:hover { border-color:#91d0bd; background:#fbfffd; }
.empty-row { justify-content:flex-start; color:var(--muted); }
.table-wrap { overflow:auto; background:#fff; border:1px solid var(--line); border-radius:4px; }
table { width:100%; min-width:700px; border-collapse:collapse; }
th,td { padding:11px 12px; text-align:left; border-bottom:1px solid #e4ecef; white-space:nowrap; }
th { color:#5e7582; background:#f7faf9; font-size:12px; font-weight:700; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:#fbfffd; }
.empty-cell { padding:28px 12px; color:var(--muted); text-align:center; }
.message-preview { max-width:360px; overflow:hidden; text-overflow:ellipsis; }
.table-icon { width:28px; height:28px; display:block; object-fit:cover; border:1px solid #dbe4e8; border-radius:3px; }
.url-cell { max-width:300px; overflow:hidden; text-overflow:ellipsis; }
.url-cell a { color:#1676b9; text-decoration:none; }
.url-cell a:hover { text-decoration:underline; }
.state { display:inline-block; padding:3px 7px; border-radius:10px; font-size:12px; font-weight:700; }
.state.healthy,.state.succeeded,.state.resolved { color:#0f6d50; background:#dff3eb; }
.state.unhealthy,.state.failed,.state.open,.state.critical { color:#a32f39; background:#fae7e8; }
.state.queued,.state.running,.state.warning { color:#8a5700; background:#fff0d5; }
.row-actions { display:flex; justify-content:flex-end; gap:6px; }
.row-actions button { min-height:29px; padding:4px 8px; }
.two-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
dialog { width:min(460px,calc(100vw - 32px)); padding:0; border:1px solid var(--line); border-radius:5px; box-shadow:0 18px 50px rgba(22,50,71,.25); }
dialog::backdrop { background:rgba(20,42,53,.38); }
#modal-form { padding:18px; }
.modal-heading { margin-bottom:17px; }
.modal-fields { display:grid; gap:13px; }
.modal-actions { justify-content:flex-end; margin-top:18px; }
.secret-output { max-height:310px; margin:0; padding:11px; overflow:auto; overflow-wrap:anywhere; color:#1d4d54; background:#f2faf7; border:1px solid #cde7dd; font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; }
.console { grid-template-columns:240px minmax(0,1fr); background:#eef1f5; }
.sidebar { padding:0; color:#39434f; background:#f6f7f8; border-right:1px solid #e4e7eb; }
.sidebar-brand { min-height:61px; padding:0 19px; color:#fff; background:#12caa2; font-size:16px; }
.sidebar-brand .brand-mark { color:#12caa2; background:#fff; }
.legacy-nav { display:block; flex:1 1 auto; overflow-y:auto; padding:1px 0 20px; }
.nav-root,.nav-tree > summary { min-height:46px; padding:0 22px; color:#4d5661; background:transparent; border:0; border-radius:0; }
.nav-tree { margin:0; }
.nav-tree > summary { display:flex; align-items:center; gap:10px; list-style:none; cursor:pointer; font-weight:500; }
.nav-tree > summary::-webkit-details-marker { display:none; }
.nav-tree > summary::after { content:"›"; margin-left:auto; color:#8a959f; font-size:21px; font-weight:400; transform:rotate(0deg); transition:transform .15s ease; }
.nav-tree[open] > summary::after { transform:rotate(90deg); }
.nav-tree[open] > summary { color:#205d56; background:#d8f7ef; }
.nav-children { padding:3px 0 5px; background:#fafbfc; }
.legacy-nav .nav-item { position:relative; min-height:38px; padding:9px 20px 9px 56px; color:#5a6570; border-left:0; }
.legacy-nav .nav-root { display:flex; align-items:center; gap:10px; padding-left:22px; color:#4d5661; }
.legacy-nav .nav-item:hover { color:#1b7868; background:#e5f8f3; }
.legacy-nav .nav-item.active { color:#fff; background:#12caa2; border-left:0; font-weight:700; }
.legacy-nav .nav-item.active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#0b9d7d; }
.nav-symbol { display:inline-grid; width:16px; place-items:center; color:#73808c; font-size:14px; }
.nav-root .nav-symbol { color:inherit; }
.nav-count { display:inline-grid; min-width:18px; height:18px; place-items:center; margin-left:auto; padding:0 4px; color:#fff; background:#e55a59; border-radius:9px; font-size:11px; }
.sidebar-footer { margin:0; padding:14px 18px; color:#6e7882; background:#fff; border-top:1px solid #e4e7eb; }
.sidebar-footer .text-button { color:#278c7c; }
.workspace { padding:0 28px 42px; background:#eef1f5; }
.legacy-header { display:flex; align-items:center; justify-content:space-between; min-height:58px; margin:0 -28px; padding:0 28px; color:#7d8790; background:#fff; border-bottom:1px solid #e4e7eb; }
.legacy-links,.legacy-user { display:flex; align-items:center; gap:26px; }
.legacy-links span { white-space:nowrap; }
.legacy-user { color:#3e4953; font-weight:600; }
.legacy-user .text-button { color:#7d8790; }
.topbar { min-height:70px; padding:17px 0 14px; border-bottom:0; }
.topbar .eyebrow { color:#6e7882; font-weight:500; }
.topbar h2 { font-size:20px; }
.topbar-actions { gap:10px; }
.status-pill { border-radius:3px; }
.page-message { min-height:22px; padding-top:0; }
.page { min-height:560px; padding:18px; background:#fff; border:1px solid #e0e5e8; border-radius:2px; }
.page.active { display:block; }
.metric { border-top-color:#12caa2; border-radius:2px; box-shadow:0 1px 2px rgba(38,50,56,.04); }
.metric strong { color:#273947; }
.filter-bar { border-radius:2px; background:#f8fafb; }
.table-wrap { border-radius:2px; }
.reference-filter { margin-top:18px; }
.cell-subtle { display:block; margin-top:2px; color:#8a959f; font-size:11px; font-weight:400; }
.tree-indent { color:#8a959f; white-space:pre; }
.secondary.danger { color:#9d333b; border-color:#e3b7bb; }
.secondary.danger:hover { color:#fff; background:#a13d45; border-color:#a13d45; }
.permission-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; margin:0; padding:12px; border:1px solid var(--line); }
.permission-list legend { padding:0 5px; color:#50616d; font-size:13px; font-weight:700; }
.permission-option { display:flex; align-items:center; gap:7px; min-width:0; font-size:12px; font-weight:500; }
.permission-option input { width:16px; height:16px; padding:0; flex:0 0 auto; }
.permission-option span { min-width:0; }
.permission-option small { display:block; color:#83909a; font-size:11px; }
@media (max-width:760px) { .sidebar-brand { min-height:48px; } .legacy-nav { display:flex; overflow-x:auto; overflow-y:hidden; padding:0; } .nav-tree { flex:0 0 auto; } .nav-tree > summary { min-height:42px; padding:0 12px; white-space:nowrap; } .nav-tree > summary::after { display:none; } .nav-tree[open] .nav-children { position:absolute; z-index:4; min-width:180px; border:1px solid #dfe6e9; box-shadow:0 8px 18px rgba(25,38,47,.12); } .legacy-nav .nav-root { min-width:max-content; min-height:42px; padding:0 12px; } .legacy-nav .nav-item { min-width:max-content; padding:9px 14px; } .nav-symbol { display:none; } .workspace { padding:0 14px 28px; } .legacy-header { margin:0 -14px; padding:0 14px; overflow:auto; } .legacy-links { gap:13px; font-size:12px; } .legacy-user { display:none; } .page { padding:14px; } }
@media (max-width:1120px) { .metric-grid-six { grid-template-columns:repeat(3,minmax(0,1fr)); } .overview-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .login-shell { grid-template-columns:1fr; padding:16px; } .login-brand { padding:32px; border-right:1px solid #cce8df; border-bottom:0; } .login-form { min-height:0; padding:32px; } .console { grid-template-columns:1fr; } .sidebar { min-height:auto; padding:10px 12px; } .sidebar-brand { padding-bottom:10px; } .sidebar nav { display:flex; gap:0; overflow:auto; } .nav-group { display:flex; flex:0 0 auto; } .nav-group-title { display:none; } .nav-item { width:auto; min-width:max-content; border-left:0; border-bottom:3px solid transparent; } .nav-item.active { border-left:0; border-bottom-color:var(--teal); } .sidebar-footer { display:none; } .workspace { padding:18px 16px 32px; } .topbar { align-items:flex-start; } .topbar-actions { flex-wrap:wrap; justify-content:flex-end; } .metric-grid,.metric-grid-six,.two-table-grid { grid-template-columns:1fr; } .summary-strip span { min-width:0; flex:1 1 120px; } .two-column { grid-template-columns:1fr; } .section-heading { align-items:flex-start; flex-wrap:wrap; } .filter-bar { display:grid; grid-template-columns:1fr 1fr; } .filter-bar label { min-width:0; } .filter-bar button { width:100%; } }