:root {
    --navy: #082e61;
    --lime: #9acd4b;
    --bg: #f3f5f7;
    --panel: #ffffff;
    --text: #17202a;
    --muted: #68717a;
    --border: #dde2e7;
}

* { box-sizing: border-box; }
html, body { margin: 0; font-family: Inter, Segoe UI, Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--navy); }
.shell { min-height: 100vh; display: grid; grid-template-columns: 270px 1fr; }
.sidebar { background: #6e7073; padding: 24px 18px; display: flex; flex-direction: column; gap: 22px; }
.brand-logo { width: 100%; max-height: 120px; object-fit: contain; }
.sidebar nav { display: flex; flex-direction: column; gap: 5px; }
.sidebar nav a { color: white; text-decoration: none; padding: 11px 12px; border-radius: 8px; cursor: pointer; display: block; }
.sidebar nav a.active, .sidebar nav a:hover { background: rgba(255,255,255,.15); }
.sidebar nav a.active { box-shadow: inset 3px 0 0 var(--lime); font-weight: 600; }
.content { padding: 32px; max-width: 1500px; width: 100%; }
h1 { color: var(--navy); margin-top: 0; }
h2 { color: var(--navy); }
.lead { font-size: 1.1rem; color: var(--muted); }
.panel { background: var(--panel); padding: 20px; border: 1px solid var(--border); border-radius: 14px; margin: 18px 0; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.metric { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.metric span { display: block; color: var(--muted); }
.metric strong { display: block; color: var(--navy); font-size: 1.8rem; margin-top: 6px; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.module-grid > div { border: 1px solid var(--border); padding: 16px; border-radius: 10px; background: #fafbfc; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px; border-bottom: 1px solid var(--border); }
th { color: var(--navy); }
.status { padding: 4px 8px; border-radius: 999px; font-size: .85rem; }
.status.online { background: #e9f7df; color: #376512; }
.status.offline { background: #eee; color: #666; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid #cbd2d9; border-radius: 8px; margin: 5px 0 14px; }
button { background: var(--navy); color: white; border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
button.secondary { background: rgba(255,255,255,.15); width: 100%; }
.two-column { display: grid; grid-template-columns: minmax(280px, .7fr) 1.3fr; gap: 18px; }
.muted { color: var(--muted); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(460px, 100%); background: white; border: 1px solid var(--border); border-radius: 18px; padding: 28px; box-shadow: 0 16px 50px rgba(0,0,0,.08); }
.login-logo { width: 100%; max-height: 140px; object-fit: contain; margin-bottom: 12px; }
.checkbox { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.checkbox input { width: auto; margin: 0; }
.alert { margin-top: 14px; padding: 10px; border-radius: 8px; }
.alert.danger { background: #fdeaea; color: #8b1d1d; }

@media (max-width: 850px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { position: relative; }
    .two-column { grid-template-columns: 1fr; }
    .content { padding: 18px; }
}


/* v0.3.0 Device Center */
.device-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.device-title-row h1 { margin-bottom:8px; }
.device-subtitle { display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:var(--muted); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:14px; }
.section-heading h2 { margin:0 0 4px; }
.section-heading p { margin:0; }
.route-grid { display:grid; grid-template-columns:minmax(280px, 1.2fr) minmax(220px, .8fr); gap:18px; align-items:end; }
.route-status { display:flex; flex-direction:column; gap:4px; border:1px solid var(--border); background:#fafbfc; padding:14px; border-radius:10px; margin-bottom:14px; }
.route-status small { color:var(--muted); }
.badge { display:inline-flex; width:max-content; align-items:center; border-radius:999px; padding:4px 9px; font-size:.8rem; font-weight:600; }
.badge.good { background:#e9f7df; color:#376512; }
.badge.warn { background:#fff0db; color:#8a4f00; }
.badge.neutral { background:#eef2f5; color:#4f5b66; }
.alert.success { background:#e9f7df; color:#376512; }
.device-metrics .metric { min-height:118px; }
.metric .metric-text { font-size:1.05rem; overflow-wrap:anywhere; }
.metric small { display:block; margin-top:6px; color:var(--muted); }
.component-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.component-card { border:1px solid var(--border); border-radius:12px; padding:15px; background:#fafbfc; }
.component-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; color:var(--navy); }
.component-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.component-values span { background:white; border:1px solid var(--border); border-radius:8px; padding:9px; }
.component-values b, .component-values small { display:block; }
.component-values small { color:var(--muted); margin-top:2px; }
.quick-actions { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px; }
.quick-actions button { background:#1c4b80; }
.rpc-editor { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(320px,1.3fr); gap:14px; align-items:end; }
.rpc-editor button { grid-column:1 / -1; justify-self:start; }
.rpc-editor textarea { font-family:Consolas, "Cascadia Code", monospace; }
.rpc-result-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:20px 0 8px; color:var(--muted); flex-wrap:wrap; }
.rpc-result-head > div { display:flex; align-items:center; gap:9px; color:var(--text); }
.json-console { background:#101820; color:#d8f3dc; border-radius:12px; padding:18px; max-height:560px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font-family:Consolas, "Cascadia Code", monospace; font-size:.88rem; line-height:1.45; }
.module-grid > div { display:flex; flex-direction:column; gap:5px; }
.module-grid > div span { color:var(--muted); font-size:.9rem; }
.device-link { display:flex; flex-direction:column; gap:2px; text-decoration:none; font-weight:600; }
.device-link small { color:var(--muted); font-weight:400; }
button:disabled { opacity:.6; cursor:not-allowed; }

@media (max-width: 850px) {
    .device-title-row, .section-heading { flex-direction:column; }
    .route-grid, .rpc-editor { grid-template-columns:1fr; }
}


/* v0.3.2 RPC response modernization */
.rpc-response-shell { margin-top: 20px; border: 1px solid var(--border); border-radius: 16px; padding: 18px; background: linear-gradient(180deg, #fbfdff 0%, #f4f8fb 100%); box-shadow: 0 10px 25px rgba(15, 23, 42, .06); }
.rpc-response-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.rpc-response-title { font-size: 1.1rem; font-weight: 700; color: var(--navy); }
.rpc-response-subtitle { margin-top: 4px; color: var(--muted); font-size: .92rem; }
.rpc-response-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rpc-meta-pill { display:inline-flex; align-items:center; padding:5px 10px; border-radius:999px; background:#edf3f9; color:#35516c; font-size:.82rem; font-weight:600; }
.rpc-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-bottom:16px; }
.rpc-kpi-card { background:white; border:1px solid var(--border); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:4px; }
.rpc-kpi-card span { color:var(--muted); font-size:.84rem; }
.rpc-kpi-card strong { color:var(--navy); font-size:1.05rem; line-height:1.2; }
.rpc-kpi-card small { color:var(--muted); }
.rpc-view-switch { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.rpc-view-button { border:1px solid #c9d6e2; background:white; color:#35516c; border-radius:999px; padding:8px 14px; font-weight:600; }
.rpc-view-button.active { background:var(--navy); color:white; border-color:var(--navy); box-shadow:0 8px 18px rgba(18,46,77,.15); }
.rpc-summary-layout { display:grid; grid-template-columns:1.25fr .9fr; gap:14px; }
.rpc-summary-panel { background:white; border:1px solid var(--border); border-radius:14px; padding:16px; }
.rpc-panel-title { font-weight:700; color:var(--navy); margin-bottom:12px; }
.rpc-preview-grid { display:grid; gap:10px; }
.rpc-preview-row { display:grid; grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr); gap:10px; align-items:start; padding:10px 0; border-bottom:1px solid #edf2f7; }
.rpc-preview-row:last-child { border-bottom:none; padding-bottom:0; }
.rpc-preview-row span { color:var(--muted); font-size:.88rem; }
.rpc-preview-row strong { color:var(--text); overflow-wrap:anywhere; }
.json-console.modern { background:#0f172a; color:#dbeafe; border:1px solid #1e293b; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.json-console.raw { background:#17212f; color:#dbeafe; border:1px solid #25364a; }
@media (max-width: 900px) {
    .rpc-summary-layout { grid-template-columns:1fr; }
}


/* v0.4.0 Diagnostic Workspace */
.diagnostic-workspace { scroll-margin-top:20px; }
.diagnostic-health-badge { display:inline-flex; padding:7px 11px; border-radius:999px; font-weight:800; font-size:.82rem; }
.diagnostic-health-badge.excellent { background:#eaf7e2; color:#416d20; }
.diagnostic-health-badge.good { background:#e5f2fa; color:#255d80; }
.diagnostic-health-badge.attention { background:#fff2dc; color:#8a570c; }
.diagnostic-health-badge.critical { background:#fde9e9; color:#9d3030; }
.diagnostic-module-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:15px 0 18px; }
.diagnostic-tab { display:flex; flex-direction:column; align-items:flex-start; text-align:left; min-height:78px; padding:12px 13px; border-radius:12px; background:#f8fafc; color:#25425c; border:1px solid #d7e1ea; box-shadow:none; }
.diagnostic-tab b { font-size:.9rem; }
.diagnostic-tab span { margin-top:4px; color:#718293; font-size:.76rem; line-height:1.3; }
.diagnostic-tab.active { background:#153b60; border-color:#153b60; color:white; box-shadow:0 8px 18px rgba(20,59,96,.15); }
.diagnostic-tab.active span { color:#d8e6f1; }
.diagnostic-module { border-top:1px solid #e3eaf0; padding-top:17px; }
.diagnostic-actionbar { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px; }
.diagnostic-actionbar select { width:auto; min-width:170px; margin:0; }
.diagnostic-empty { padding:18px; border:1px dashed #bfcfdd; border-radius:12px; background:#fafcfe; color:#657a8d; }
.diagnostic-score-row { display:grid; grid-template-columns:1.4fr 1.4fr repeat(3,minmax(100px,.7fr)); gap:10px; margin-bottom:13px; }
.diagnostic-score-card, .diagnostic-temp-card, .diagnostic-count-card { border-radius:13px; padding:13px; border:1px solid #dbe4ed; background:white; display:flex; flex-direction:column; justify-content:center; }
.diagnostic-score-card span, .diagnostic-temp-card span, .diagnostic-count-card span { color:#728597; font-size:.76rem; }
.diagnostic-score-card strong, .diagnostic-temp-card strong, .diagnostic-count-card strong { color:#153b60; font-size:1.4rem; margin:3px 0; }
.diagnostic-score-card.excellent { border-top:4px solid #72ad3f; }
.diagnostic-score-card.good { border-top:4px solid #4f93b9; }
.diagnostic-score-card.attention { border-top:4px solid #d79a34; }
.diagnostic-score-card.critical { border-top:4px solid #cf4b4b; }
.diagnostic-temp-card.good { border-top:4px solid #72ad3f; }
.diagnostic-temp-card.attention { border-top:4px solid #d79a34; }
.diagnostic-temp-card.warning { border-top:4px solid #d16d27; }
.diagnostic-temp-card.critical { border-top:4px solid #cf4b4b; }
.diagnostic-temp-card.neutral { border-top:4px solid #879dae; }
.diagnostic-metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:9px; }
.diagnostic-metric { border:1px solid #dbe4ed; border-top-width:4px; border-radius:12px; padding:12px; background:white; }
.diagnostic-metric span,.diagnostic-metric small { display:block; color:#728597; }
.diagnostic-metric strong { display:block; color:#153b60; margin:3px 0; font-size:1.08rem; }
.diagnostic-metric.good { border-top-color:#72ad3f; }
.diagnostic-metric.attention { border-top-color:#d79a34; }
.diagnostic-metric.warning { border-top-color:#d16d27; }
.diagnostic-metric.critical { border-top-color:#cf4b4b; }
.diagnostic-metric.neutral { border-top-color:#879dae; }
.diagnostic-note { margin-top:13px; padding:10px 11px; border-radius:10px; background:#fff9e9; border:1px solid #e7d7aa; color:#735817; font-size:.8rem; line-height:1.4; }
.danger-note { background:#fff4f4; border-color:#efc3c3; color:#843535; }
.finding-list { display:grid; gap:9px; }
.diagnostic-finding { display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px; border:1px solid #dbe4ed; border-left-width:5px; border-radius:12px; background:white; padding:12px; }
.diagnostic-finding.critical { border-left-color:#cf4b4b; }
.diagnostic-finding.warning { border-left-color:#d58429; }
.diagnostic-finding.info { border-left-color:#4f91b8; }
.diagnostic-finding.good { border-left-color:#72ad3f; }
.finding-severity { font-size:.72rem; font-weight:900; letter-spacing:.04em; color:#65798c; }
.finding-title-row { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.finding-title-row strong { color:#173650; }
.finding-title-row span { color:#778a9c; font-size:.78rem; }
.finding-content p { color:#526a7e; line-height:1.4; }
.correction-box { display:flex; flex-direction:column; gap:4px; padding:9px 10px; background:#f5f8fb; border-radius:9px; margin:8px 0; }
.correction-box b { font-size:.75rem; color:#36536c; text-transform:uppercase; }
.correction-box span { color:#526a7e; font-size:.87rem; }
.finding-evidence { color:#7a8c9c; font-size:.77rem; margin-bottom:8px; overflow-wrap:anywhere; }
.verification-summary,.baseline-grid,.baseline-comparison-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.verification-summary article,.baseline-grid article,.baseline-comparison-cards article { padding:12px; border:1px solid #dbe4ed; border-radius:12px; background:white; }
.verification-summary span,.baseline-grid span,.baseline-comparison-cards span { display:block; color:#76899a; font-size:.76rem; }
.verification-summary strong,.baseline-grid strong,.baseline-comparison-cards strong { display:block; color:#153b60; margin-top:4px; }
.baseline-comparison-summary,.baseline-summary { margin-top:12px; display:flex; gap:12px; flex-wrap:wrap; padding:11px; border-radius:10px; background:#edf5fa; color:#365773; }
.history-layout { display:grid; grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr); gap:12px; }
.history-list { display:grid; gap:6px; max-height:580px; overflow:auto; align-content:start; }
.history-row { display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:10px; border:1px solid #dbe4ed; border-radius:10px; background:white; color:#27445d; box-shadow:none; }
.history-row.selected { border-color:#5e86aa; background:#eef6fc; }
.history-row span,.history-row small { margin-top:2px; color:#75899a; }
.history-viewer { min-width:0; }
.history-viewer-head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:flex-start; margin-bottom:8px; }
.history-viewer-head div { display:flex; flex-direction:column; }
.history-viewer-head span { color:#788b9c; font-size:.8rem; }
.support-case-form { display:grid; gap:10px; }
.support-case-list { display:grid; gap:8px; margin-top:15px; }
.support-case-list article { border:1px solid #dbe4ed; border-radius:11px; padding:11px; background:white; }
.support-case-list article > div { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.support-case-list span { color:#75899a; font-size:.8rem; }
.support-case-list p { margin:7px 0 0; color:#526a7e; }
.button-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; padding:9px 14px; border-radius:8px; font-weight:600; }
@media (max-width:950px) {
    .diagnostic-module-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .diagnostic-score-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .history-layout { grid-template-columns:1fr; }
    .verification-summary,.baseline-grid,.baseline-comparison-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
    .diagnostic-module-tabs,.diagnostic-score-row,.verification-summary,.baseline-grid,.baseline-comparison-cards { grid-template-columns:1fr; }
    .diagnostic-finding { grid-template-columns:1fr; }
}


/* v0.4.1 Web RPC Explorer parity */
/* v0.3.4 Companion RPC Analyzer */
.analyze-action { background:#214f7a !important; box-shadow:0 7px 18px rgba(33,79,122,.16); }
.rpc-analyzer { display:grid; gap:16px; }
.rpc-analyzer-empty { padding:22px; border:1px dashed #bdcddd; border-radius:14px; background:#fbfdff; display:flex; flex-direction:column; gap:5px; color:#53687b; }
.rpc-health-row { display:grid; grid-template-columns:minmax(230px,1.5fr) repeat(4,minmax(100px,.65fr)); gap:10px; }
.rpc-health-score-card { border-radius:15px; padding:16px; display:flex; align-items:center; gap:14px; color:white; min-height:92px; }
.rpc-health-score-card.excellent { background:linear-gradient(135deg,#3f7f27,#72ad3f); }
.rpc-health-score-card.good { background:linear-gradient(135deg,#23658f,#3c91bd); }
.rpc-health-score-card.attention { background:linear-gradient(135deg,#a36814,#d89b35); }
.rpc-health-score-card.critical { background:linear-gradient(135deg,#8f2d2d,#cf4b4b); }
.rpc-health-score { width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.3); font-size:1.55rem; font-weight:800; flex:0 0 auto; }
.rpc-health-score-card strong { display:block; font-size:1.08rem; }
.rpc-health-score-card span { display:block; margin-top:3px; opacity:.88; font-size:.82rem; }
.rpc-analyzer-stat { border:1px solid #dbe4ef; border-radius:14px; background:white; padding:13px; display:flex; flex-direction:column; justify-content:center; }
.rpc-analyzer-stat span { color:#718293; font-size:.8rem; }
.rpc-analyzer-stat strong { color:#102b46; font-size:1.35rem; margin-top:3px; }
.rpc-analyzer-section-title { color:#102b46; font-size:.92rem; font-weight:800; letter-spacing:.02em; padding-top:2px; }
.rpc-analysis-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:10px; }
.rpc-analysis-metric { border:1px solid #dbe4ef; border-radius:13px; background:white; padding:13px; border-top-width:4px; }
.rpc-analysis-metric.good { border-top-color:#72ad3f; }
.rpc-analysis-metric.attention { border-top-color:#d89b35; }
.rpc-analysis-metric.warn { border-top-color:#c86b22; }
.rpc-analysis-metric.critical { border-top-color:#cf4b4b; }
.rpc-analysis-metric.neutral { border-top-color:#7f9bb3; }
.rpc-analysis-metric span, .rpc-analysis-metric small { display:block; color:#718293; }
.rpc-analysis-metric strong { display:block; margin:4px 0; color:#102b46; font-size:1.08rem; }
.rpc-findings { display:grid; gap:9px; }
.rpc-finding { display:grid; grid-template-columns:34px minmax(0,1fr); gap:11px; padding:13px; border:1px solid #dbe4ef; border-radius:13px; background:white; }
.rpc-finding.critical { border-left:4px solid #cf4b4b; }
.rpc-finding.warning { border-left:4px solid #d78b27; }
.rpc-finding.info { border-left:4px solid #4e8fb7; }
.rpc-finding.good { border-left:4px solid #72ad3f; }
.rpc-finding-icon { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; background:#edf3f8; color:#35516c; }
.rpc-finding.critical .rpc-finding-icon { background:#fde9e9; color:#a12e2e; }
.rpc-finding.warning .rpc-finding-icon { background:#fff2dd; color:#925909; }
.rpc-finding.good .rpc-finding-icon { background:#edf8e6; color:#497629; }
.rpc-finding-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.rpc-finding-head strong { color:#20384f; }
.rpc-finding-head span { color:#7c8d9d; font-size:.73rem; font-weight:700; }
.rpc-finding-body p { margin:7px 0; color:#455c70; line-height:1.4; }
.rpc-finding-body small { display:block; color:#8a9aaa; margin-top:7px; font-family:Consolas,"Cascadia Code",monospace; overflow-wrap:anywhere; }
.rpc-recommendation { display:flex; flex-direction:column; gap:3px; background:#f7fafc; border-radius:9px; padding:9px 10px; }
.rpc-recommendation b { color:#38546c; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
.rpc-recommendation span { color:#53687b; font-size:.86rem; line-height:1.35; }
.rpc-analyzer-note { padding:11px 12px; border-radius:10px; background:#fff9e8; border:1px solid #ead9a8; color:#725615; font-size:.8rem; line-height:1.4; }
@media (max-width: 900px) {
    .rpc-health-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .rpc-health-score-card { grid-column:1 / -1; }
}



/* v0.3.5 Safety Center + Fahrenheit thermal emphasis */
.rpc-safety-center { display:grid; gap:13px; padding:15px; border:1px solid #ccdce9; border-radius:15px; background:linear-gradient(180deg,#f9fcff,#f2f7fb); }
.rpc-safety-title-row { display:flex; align-items:stretch; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.rpc-safety-title-row > div:first-child { min-width:240px; flex:1; }
.rpc-safety-title-row > div:first-child > span { display:block; color:#64798c; font-size:.84rem; margin-top:3px; }
.rpc-temp-hero { min-width:205px; border-radius:14px; padding:12px 15px; display:flex; flex-direction:column; justify-content:center; border:1px solid #d5e0e9; background:white; border-left-width:5px; }
.rpc-temp-hero span { color:#718293; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.rpc-temp-hero strong { color:#102b46; font-size:1.55rem; margin:2px 0; }
.rpc-temp-hero small { color:#718293; }
.rpc-temp-hero.good { border-left-color:#72ad3f; }
.rpc-temp-hero.attention { border-left-color:#d89b35; background:#fffdf7; }
.rpc-temp-hero.warn { border-left-color:#d17124; background:#fff9f2; }
.rpc-temp-hero.critical { border-left-color:#cf4b4b; background:#fff6f6; }
.rpc-temp-hero.neutral { border-left-color:#829aae; }
.rpc-safety-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:10px; }
.rpc-safety-card { background:white; border:1px solid #dbe4ef; border-top-width:4px; border-radius:13px; padding:12px; }
.rpc-safety-card.good { border-top-color:#72ad3f; }
.rpc-safety-card.attention { border-top-color:#d89b35; }
.rpc-safety-card.warn { border-top-color:#d17124; }
.rpc-safety-card.critical { border-top-color:#cf4b4b; background:#fffafa; }
.rpc-safety-card.neutral { border-top-color:#829aae; }
.rpc-safety-card-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.rpc-safety-card-head strong { color:#173650; }
.rpc-safety-card-head span { color:#7c8d9d; font-size:.72rem; font-family:Consolas,"Cascadia Code",monospace; }
.rpc-safety-values { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:11px 0 8px; }
.rpc-safety-values > div { padding:8px; border-radius:9px; background:#f6f9fc; }
.rpc-safety-values span { display:block; color:#7b8c9c; font-size:.72rem; }
.rpc-safety-values b { display:block; color:#102b46; margin-top:2px; overflow-wrap:anywhere; }
.rpc-safety-margin { color:#38546c; font-size:.82rem; font-weight:700; margin-bottom:5px; }
.rpc-safety-card small { color:#738596; line-height:1.35; }
.rpc-safety-empty { padding:12px; border:1px dashed #b8cbdc; border-radius:10px; background:white; color:#61788c; font-size:.84rem; line-height:1.4; }
.rpc-temperature-legend { padding:10px 11px; border-radius:10px; background:#fff9e9; border:1px solid #e7d6a4; color:#725816; font-size:.79rem; line-height:1.4; }
@media (max-width:650px) {
    .rpc-temp-hero { width:100%; }
    .rpc-safety-values { grid-template-columns:1fr; }
}




.rpc-method-selector { margin:18px 0; padding:16px; border:1px solid var(--border); border-radius:14px; background:#f8fbfe; }
.rpc-method-selector-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:12px; flex-wrap:wrap; }
.rpc-method-selector-head h3 { margin:0 0 4px; color:var(--navy); }
.rpc-method-selector-head p { margin:0; }
.rpc-selection-count { display:inline-flex; padding:7px 11px; border-radius:999px; background:#eaf1f8; color:#35516c; font-size:.84rem; font-weight:700; }
.rpc-method-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.rpc-method-search { flex:1 1 260px; min-width:220px; }
.secondary-action { background:white !important; color:#35516c !important; border:1px solid #c9d6e2 !important; }
.secondary-action:hover { background:#f1f6fa !important; }
.secondary-action.compact { padding:6px 11px; font-size:.82rem; }
.rpc-method-list { max-height:360px; overflow:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:8px; padding:2px; }
.rpc-method-option { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 11px; border:1px solid #dbe4ef; border-radius:10px; background:white; cursor:pointer; transition:.15s ease; }
.rpc-method-option:hover { border-color:#9eb8d0; box-shadow:0 5px 12px rgba(15,23,42,.05); }
.rpc-method-option.selected { border-color:#638ab0; background:#f0f7fd; }
.rpc-method-option input { width:auto; margin:0; }
.rpc-method-name { font-family:Consolas,"Cascadia Code",monospace; font-size:.86rem; overflow-wrap:anywhere; color:#203a54; }
.rpc-method-type { padding:3px 6px; border-radius:6px; font-size:.67rem; font-weight:800; letter-spacing:.03em; white-space:nowrap; }
.rpc-method-type.read { background:#e8f6df; color:#3c661d; }
.rpc-method-type.write { background:#fff1df; color:#8d5204; }
.rpc-batch-footer { margin-top:14px; padding-top:14px; border-top:1px solid #dbe4ef; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.rpc-batch-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rpc-risk-toggle { display:flex; align-items:center; gap:7px; margin:0; padding:7px 9px; border-radius:9px; background:#fff7e8; border:1px solid #f0d9a7; color:#794b09; font-size:.84rem; }
.rpc-risk-toggle input { width:auto; margin:0; }
.rpc-batch-results { margin-top:16px; border-top:1px solid #dbe4ef; padding-top:14px; }
.rpc-batch-results-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.rpc-batch-results-head h3 { margin:0 0 3px; color:var(--navy); }
.rpc-batch-results-head p { margin:0; }
.rpc-batch-result-list { display:grid; gap:7px; max-height:330px; overflow:auto; }
.rpc-batch-result-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px; background:white; border:1px solid #dbe4ef; border-radius:10px; }
.rpc-batch-result-main { display:flex; align-items:center; gap:9px; min-width:0; }
.rpc-batch-result-main > div { min-width:0; }
.rpc-batch-result-main strong { display:block; color:#203a54; overflow-wrap:anywhere; font-family:Consolas,"Cascadia Code",monospace; font-size:.85rem; }
.rpc-batch-result-main small { display:block; color:var(--muted); margin-top:2px; }
.rpc-batch-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.rpc-batch-dot.good { background:#68a832; box-shadow:0 0 0 4px rgba(104,168,50,.12); }
.rpc-batch-dot.bad { background:#c94a4a; box-shadow:0 0 0 4px rgba(201,74,74,.12); }
.web-rpc-auth-panel { display:grid; grid-template-columns:minmax(220px,1fr) minmax(230px,.8fr) auto; gap:10px; align-items:center; padding:12px 13px; margin:12px 0; border:1px solid #e7cf97; border-radius:12px; background:#fff9ec; }
.web-rpc-auth-panel.neutral { border-color:#cbd9e6; background:#f8fbfe; }
.web-rpc-auth-panel > div { display:flex; flex-direction:column; gap:3px; }
.web-rpc-auth-panel strong { color:#634711; }
.web-rpc-auth-panel span { color:#796b4f; font-size:.8rem; line-height:1.35; }
.web-rpc-auth-panel input { margin:0; }
.analyze-action { background:#214f7a !important; box-shadow:0 7px 18px rgba(33,79,122,.16); }
@media (max-width:800px) {
    .web-rpc-auth-panel { grid-template-columns:1fr; }
    .rpc-method-list { grid-template-columns:1fr; }
}


/* ============================================================
   v0.5.0 UX System - Web
   ============================================================ */
:root {
    --agil-navy: #082e61;
    --agil-navy-2: #0b2e59;
    --agil-lime: #9acd4b;
    --agil-surface: #ffffff;
    --agil-canvas: #f4f7fa;
    --agil-border: #dce5ed;
    --agil-text: #17202a;
    --agil-muted: #687784;
    --agil-shadow: 0 8px 28px rgba(15, 38, 61, .07);
}

body { background: var(--agil-canvas); }
.agil-appbar { border-bottom: 1px solid rgba(255,255,255,.08); }
.agil-appbar-logo { width: 34px; height: 34px; object-fit: contain; margin-left: 4px; }
.agil-appbar-title { display:flex; flex-direction:column; margin-left:10px; line-height:1.15; }
.agil-appbar-title strong { font-size:.95rem; }
.agil-appbar-title span { font-size:.7rem; opacity:.78; margin-top:2px; }
.agil-environment-pill { display:flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.1); font-size:.76rem; }
.agil-live-dot { width:7px; height:7px; border-radius:50%; background:var(--agil-lime); box-shadow:0 0 0 4px rgba(154,205,75,.13); }
.agil-drawer { border-right:0 !important; }
.agil-drawer-brand { padding:18px 18px 10px; }
.agil-drawer-brand img { width:100%; max-height:92px; object-fit:contain; }
.agil-nav-section-label { padding:17px 18px 6px; color:#8ca1b4; font-size:.64rem; font-weight:800; letter-spacing:.12em; }
.agil-drawer .mud-nav-link { border-radius:9px; margin:2px 9px; min-height:42px; }
.agil-drawer .mud-nav-link.active { background:rgba(154,205,75,.14) !important; color:#fff !important; box-shadow:inset 3px 0 0 var(--agil-lime); }
.agil-drawer .mud-nav-link:hover { background:rgba(255,255,255,.08); }
.agil-drawer-spacer { min-height:22px; }
.agil-logout-form { padding:16px; margin-top:auto; }
.agil-logout-button { width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); min-height:42px; }
.agil-main { min-height:100vh; background:var(--agil-canvas); }
.agil-page { max-width:1580px; margin:0 auto; padding:30px; }
.auth-layout { min-height:100vh; background:linear-gradient(135deg,#f6f9fc 0%,#eaf0f5 100%); }

.page-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin:2px 0 22px; }
.page-heading h1 { margin:2px 0 6px; font-size:clamp(1.65rem,2vw,2.2rem); letter-spacing:-.02em; }
.page-heading p { margin:0; color:var(--agil-muted); max-width:760px; }
.eyebrow { color:#65809a; font-size:.68rem; font-weight:900; letter-spacing:.12em; }
.page-heading-actions { display:flex; gap:8px; flex-wrap:wrap; }
.page-heading-stat { min-width:94px; padding:10px 14px; border-radius:12px; background:white; border:1px solid var(--agil-border); display:flex; flex-direction:column; align-items:flex-end; }
.page-heading-stat strong { color:var(--agil-navy); font-size:1.35rem; }
.page-heading-stat span { color:var(--agil-muted); font-size:.74rem; }
.page-heading-stat.healthy { border-left:4px solid #72ad3f; }
.page-heading-stat.attention { border-left:4px solid #d89b35; }

.ux-panel { background:white; border:1px solid var(--agil-border); border-radius:16px; padding:18px; box-shadow:0 2px 12px rgba(15,38,61,.025); margin:16px 0; }
.ux-panel-header { display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ux-panel-header h2 { margin:0 0 4px; font-size:1rem; }
.ux-panel-header p { margin:0; color:var(--agil-muted); font-size:.84rem; }

.dashboard-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.dashboard-kpi { display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; min-height:112px; background:white; border:1px solid var(--agil-border); border-radius:16px; padding:16px; box-shadow:0 3px 14px rgba(15,38,61,.03); }
.dashboard-kpi.healthy { border-top:4px solid #72ad3f; }
.dashboard-kpi.attention { border-top:4px solid #d89b35; }
.kpi-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#edf3f8; color:var(--agil-navy); font-weight:900; }
.dashboard-kpi span,.dashboard-kpi small { display:block; color:var(--agil-muted); }
.dashboard-kpi strong { display:block; color:var(--agil-navy); font-size:1.45rem; margin:2px 0; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:16px; }
.workflow-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.workflow-card { display:flex; gap:11px; padding:13px; border:1px solid var(--agil-border); border-radius:12px; text-decoration:none; background:#fbfcfd; transition:.15s; }
.workflow-card:hover { transform:translateY(-1px); border-color:#aac0d4; box-shadow:0 6px 16px rgba(15,38,61,.06); }
.workflow-number { width:28px; height:28px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:var(--agil-navy); color:white; font-size:.78rem; font-weight:800; }
.workflow-card strong,.workflow-card small { display:block; }
.workflow-card small { margin-top:3px; color:var(--agil-muted); line-height:1.35; }
.quick-launch-panel { display:flex; flex-direction:column; }
.quick-launch { padding:11px 0; border-bottom:1px solid #edf1f4; text-decoration:none; display:flex; flex-direction:column; }
.quick-launch:last-child { border-bottom:0; }
.quick-launch strong { color:var(--agil-navy); }
.quick-launch span { color:var(--agil-muted); font-size:.8rem; margin-top:2px; }
.dashboard-loading { display:flex; flex-direction:column; gap:10px; max-width:500px; color:var(--agil-muted); }

.device-list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.device-search { flex:1; max-width:620px; }
.list-summary-chips { display:flex; gap:7px; flex-wrap:wrap; }
.summary-chip { display:inline-flex; padding:6px 9px; border-radius:999px; font-size:.75rem; font-weight:700; }
.summary-chip.healthy { background:#ebf7e4; color:#467126; }
.summary-chip.neutral { background:#eef2f5; color:#5b6a77; }
.responsive-table { overflow:auto; }
.modern-table { min-width:860px; }
.modern-table th { font-size:.73rem; text-transform:uppercase; letter-spacing:.04em; color:#718293; background:#f8fafc; }
.modern-table td { vertical-align:middle; }
.modern-table tbody tr:hover { background:#fbfdff; }
.table-primary strong,.table-primary small { display:block; }
.table-primary strong { color:#213d56; }
.table-primary small { color:var(--agil-muted); margin-top:2px; }
.table-action { text-align:right; }
.empty-state { padding:22px; text-align:center; border:1px dashed #bdcddd; border-radius:12px; color:var(--agil-muted); background:#fbfdff; display:flex; flex-direction:column; align-items:center; gap:5px; }
.empty-state.compact { padding:15px; }
.empty-state.large { min-height:190px; justify-content:center; gap:9px; }

.device-primary-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.device-workspace-intro { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; border:1px solid var(--agil-border); border-radius:13px; background:#fff; margin:14px 0 6px; }
.device-workspace-intro > div { display:flex; flex-direction:column; }
.device-workspace-intro span { color:var(--agil-muted); font-size:.8rem; margin-top:2px; }
.workspace-route { display:inline-flex; padding:6px 9px; border-radius:999px; background:#eef4f8; color:#46617a !important; margin:0 !important; }
.device-workspace-tabs > .mud-tabs-tabbar { background:white; border:1px solid var(--agil-border); border-radius:13px; padding:4px; position:sticky; top:68px; z-index:20; box-shadow:0 7px 20px rgba(15,38,61,.05); }
.device-workspace-tabs .mud-tab { min-height:46px; font-weight:700; }
.device-workspace-tabs .mud-tab-slider { height:3px; }
.device-workspace-tabs .mud-tabs-panels { padding-top:4px; }
.device-workspace-tabs .panel { box-shadow:none; border-radius:14px; }

.login-card { border:0; box-shadow:0 22px 70px rgba(15,38,61,.12); }
.login-card button { min-height:46px; }

@media (max-width:1100px) {
    .dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dashboard-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
    .agil-page { padding:18px; }
    .page-heading { flex-direction:column; }
    .page-heading-stat { align-items:flex-start; }
    .device-list-toolbar { flex-direction:column; align-items:stretch; }
    .device-search { max-width:none; }
    .device-title-row { align-items:stretch; }
    .device-primary-actions { justify-content:flex-start; }
    .device-workspace-tabs > .mud-tabs-tabbar { top:60px; }
}
@media (max-width:600px) {
    .dashboard-kpis,.workflow-cards { grid-template-columns:1fr; }
    .agil-appbar-title span { display:none; }
    .agil-environment-pill { display:none; }
}

/* v0.6.0 branding + localization + quick-fix UX */
.login-logo { width:min(100%, 340px); max-height:120px; display:block; margin:0 auto 12px; }
.login-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.agil-drawer-brand img { width:min(100%, 220px); max-height:84px; }
.language-switcher { display:flex; gap:6px; align-items:center; margin-left:12px; }
.language-switcher.compact { margin-left:0; }
.lang-chip { border:1px solid rgba(11,46,89,.18); background:#fff; color:#0b2e59; border-radius:999px; padding:6px 12px; font-size:.78rem; font-weight:700; cursor:pointer; }
.lang-chip.active { background:#97c93d; color:#0b2e59; border-color:#97c93d; }
.finding-action-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.primary-action.compact { background:#0b2e59; color:#fff; border:none; border-radius:10px; padding:8px 14px; font-weight:700; cursor:pointer; }
.primary-action.compact:disabled { opacity:.6; cursor:not-allowed; }


/* v0.6.1 web branding hard-fix */
.agil-drawer-brand { padding: 18px 16px 14px; display:flex; justify-content:center; align-items:center; }
.agil-drawer-brand img { width: 180px !important; max-width: 180px !important; max-height: 66px !important; object-fit: contain; display:block; }
.agil-appbar-logo { width: 30px !important; height: 30px !important; flex: 0 0 30px; }
.login-toolbar { align-items: center; }
.login-logo { width: 260px !important; max-width: 100%; max-height: 88px !important; object-fit: contain; display:block; margin: 0 auto 10px; }


/* v0.6.2 native runtime graphics - SVG/CSS, no chart JS required */
.native-graphics-grid,
.diagnostic-native-graphics,
.companion-native-graphics {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:14px;
    margin:14px 0;
}

.native-health-gauge,
.native-status-donut {
    position:relative;
    min-height:230px;
    border:1px solid #dce5ed;
    border-radius:16px;
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:14px;
    overflow:hidden;
}

.native-health-gauge svg,
.native-status-donut svg {
    width:150px;
    height:150px;
    transform:rotate(-90deg);
    overflow:visible;
}

.gauge-track,
.donut-track {
    fill:none;
    stroke:#e9eef3;
    stroke-width:10;
}

.gauge-value,
.donut-value {
    fill:none;
    stroke-width:10;
    stroke-linecap:round;
    transition:stroke-dasharray .35s ease;
}

.native-health-gauge.excellent .gauge-value,
.native-status-donut.excellent .donut-value { stroke:#97c93d; }
.native-health-gauge.good .gauge-value,
.native-status-donut.good .donut-value { stroke:#4f93b9; }
.native-health-gauge.attention .gauge-value,
.native-status-donut.attention .donut-value { stroke:#d99b32; }
.native-health-gauge.critical .gauge-value,
.native-status-donut.critical .donut-value { stroke:#cf4b4b; }

.gauge-center,
.donut-center {
    position:absolute;
    top:70px;
    display:flex;
    align-items:baseline;
    gap:3px;
    color:#0b2e59;
}
.gauge-center strong,
.donut-center strong { font-size:2rem; line-height:1; }
.gauge-center span,
.donut-center span { color:#758798; font-size:.78rem; }

.gauge-caption,
.donut-caption {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin-top:4px;
}
.gauge-caption b,
.donut-caption b { color:#173650; }
.gauge-caption small,
.donut-caption small { color:#718293; margin-top:3px; }

.native-severity-chart {
    min-height:230px;
    border:1px solid #dce5ed;
    border-radius:16px;
    background:#fff;
    padding:16px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
}
.severity-chart-title { color:#173650; font-weight:800; margin-bottom:3px; }
.severity-row {
    display:grid;
    grid-template-columns:82px minmax(80px,1fr) 34px;
    align-items:center;
    gap:9px;
    font-size:.78rem;
}
.severity-row span { color:#65798b; }
.severity-row b { text-align:right; color:#173650; }
.severity-track {
    height:10px;
    border-radius:999px;
    background:#edf1f4;
    overflow:hidden;
}
.severity-track i {
    display:block;
    height:100%;
    min-width:2px;
    border-radius:999px;
}
.severity-row.critical .severity-track i { background:#cf4b4b; }
.severity-row.warning .severity-track i { background:#d99b32; }
.severity-row.info .severity-track i { background:#4f93b9; }
.severity-row.good .severity-track i { background:#97c93d; }

.dashboard-graphics-panel { margin-top:0; }

@media (max-width:620px) {
    .native-graphics-grid,
    .diagnostic-native-graphics,
    .companion-native-graphics {
        grid-template-columns:1fr;
    }
}

/* v0.6.2 optimized runtime brand assets */
.agil-appbar-logo { width:30px !important; height:30px !important; object-fit:contain; }
.agil-drawer-brand img { width:178px !important; height:auto !important; max-height:64px !important; object-fit:contain; }
.login-logo { width:260px !important; height:auto !important; max-height:88px !important; object-fit:contain; }


/* v0.6.5 RPC hover help + Users */
.rpc-method-help { position:relative; display:flex; align-items:center; min-width:0; gap:6px; }
.rpc-method-help-icon { width:18px; height:18px; border-radius:50%; display:inline-grid; place-items:center; flex:0 0 18px; background:#e7f1f8; color:#0b2e59; font-size:.68rem; font-weight:900; cursor:help; }
.rpc-method-tooltip { display:none; position:absolute; left:0; bottom:calc(100% + 10px); z-index:200; width:min(390px,76vw); padding:12px 13px; border-radius:11px; background:#102538; color:#fff; box-shadow:0 14px 36px rgba(0,0,0,.25); line-height:1.38; }
.rpc-method-tooltip::after { content:""; position:absolute; left:24px; top:100%; border:7px solid transparent; border-top-color:#102538; }
.rpc-method-tooltip strong,.rpc-method-tooltip b,.rpc-method-tooltip span,.rpc-method-tooltip small { display:block; }
.rpc-method-tooltip strong { color:#97c93d; font-family:Consolas,"Cascadia Code",monospace; margin-bottom:4px; }
.rpc-method-tooltip b { color:#d8e8f4; font-size:.73rem; margin-bottom:7px; }
.rpc-method-tooltip span { font-size:.82rem; }
.rpc-method-tooltip small { color:#b8c9d6; margin-top:7px; }
.rpc-method-help:hover .rpc-method-tooltip,.rpc-method-help:focus-within .rpc-method-tooltip { display:block; }

.users-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:16px; }
.user-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin-bottom:14px; }
.user-form-grid > div { display:flex; flex-direction:column; }
.user-form-grid small { color:#718293; margin-top:3px; }
.role-guide { display:grid; gap:9px; }
.role-guide > div { padding:10px; border:1px solid #dce5ed; border-radius:10px; background:#f8fafc; }
.role-guide strong,.role-guide span { display:block; }
.role-guide strong { color:#0b2e59; }
.role-guide span { color:#687784; font-size:.8rem; margin-top:3px; }
.admin-bootstrap-panel { display:flex; justify-content:space-between; align-items:center; gap:18px; border-left:5px solid #97c93d; }
.admin-bootstrap-panel h2 { margin:0 0 5px; }
.admin-bootstrap-panel p { margin:0; color:#687784; }
.alert.success { background:#edf8e7; color:#456d26; border:1px solid #cbe4ba; margin-top:12px; padding:10px; border-radius:10px; }
@media (max-width:850px) { .users-layout,.user-form-grid { grid-template-columns:1fr; } .admin-bootstrap-panel { align-items:flex-start; flex-direction:column; } }


/* v0.6.6 discreet application footer */
.agil-footer {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    padding:16px 12px 12px;
    color:#8b99a6;
    font-size:.66rem;
    line-height:1.25;
    letter-spacing:.015em;
    text-align:center;
    user-select:none;
}
.agil-footer span:first-child {
    font-weight:600;
    color:#7b8b98;
}
.agil-footer-auth {
    margin-top:auto;
    padding-bottom:18px;
}
.auth-layout {
    min-height:100vh;
    display:flex;
    flex-direction:column;
}


/* v0.7.0 model-aware diagnostics */
.model-aware-card {
    border:1px solid #d7e3ec;
    border-left:5px solid #97c93d;
    border-radius:15px;
    background:linear-gradient(180deg,#ffffff 0%,#f7fafc 100%);
    padding:16px;
    margin:14px 0;
}
.model-aware-header {
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
}
.model-aware-header h3 { margin:3px 0 4px; color:#0b2e59; }
.model-aware-header p { margin:0; color:#687b8d; max-width:760px; }
.inventory-confidence {
    padding:6px 9px;
    border-radius:999px;
    font-size:.7rem;
    font-weight:800;
    white-space:nowrap;
}
.inventory-confidence.exact { background:#edf8e7; color:#53762f; }
.inventory-confidence.fallback { background:#fff4dc; color:#8c641e; }

.model-aware-facts {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
    gap:9px;
    margin:14px 0 10px;
}
.model-aware-facts > div {
    border:1px solid #e1e8ee;
    border-radius:10px;
    padding:9px;
    background:#fff;
}
.model-aware-facts span,.model-aware-facts strong { display:block; }
.model-aware-facts span { color:#7b8b98; font-size:.69rem; }
.model-aware-facts strong { color:#193a55; margin-top:2px; font-size:.82rem; }

.component-chip-list { display:flex; flex-wrap:wrap; gap:6px; }
.component-chip {
    padding:4px 7px;
    border-radius:7px;
    background:#edf2f6;
    color:#51687a;
    font-family:Consolas,"Cascadia Code",monospace;
    font-size:.7rem;
}
.component-chip.output {
    background:#e6f2fb;
    color:#235b80;
    font-weight:800;
}

.remediation-classification {
    margin:9px 0;
    padding:10px 11px;
    border-radius:10px;
    border:1px solid #dde6ed;
    background:#f8fafc;
}
.remediation-classification b,
.remediation-classification span,
.remediation-classification small { display:block; }
.remediation-classification b { font-size:.7rem; letter-spacing:.03em; margin-bottom:3px; }
.remediation-classification span { color:#50697d; font-size:.8rem; }
.remediation-classification small { color:#75899a; margin-top:4px; }
.remediation-classification.automatic-mitigation { border-left:4px solid #97c93d; }
.remediation-classification.confirmation { border-left:4px solid #d99b32; }
.remediation-classification.field { border-left:4px solid #cf4b4b; }
.remediation-classification.guidance { border-left:4px solid #4f93b9; }

@media (max-width:700px) {
    .model-aware-header { flex-direction:column; }
}


/* v0.8.2 node-scoped Shelly inventory */
.node-device-filter {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    padding:14px 16px;
    margin-bottom:16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#f8fbfe;
}
.node-device-filter-copy {
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}
.node-device-filter-copy strong {
    color:var(--navy);
    font-size:1.02rem;
}
.node-device-filter-copy span {
    color:var(--agil-muted);
    font-size:.82rem;
}
.node-device-filter-control {
    width:min(420px, 100%);
}
.node-device-filter-control label {
    display:block;
    margin:0 0 5px;
    font-size:.76rem;
    font-weight:700;
    color:var(--navy);
}
.node-device-filter-control select {
    margin:0;
}
.attention-state {
    border-color:#e8cf9f;
    background:#fffaf1;
}

@media (max-width: 760px) {
    .node-device-filter {
        flex-direction:column;
        align-items:stretch;
    }

    .node-device-filter-control {
        width:100%;
    }
}


/* v0.8.3 user administration */
.users-global-message {
    margin-bottom:16px;
}
.user-admin-editor,
.user-password-panel {
    margin-top:16px;
    border-color:#c8dbe9;
}
.user-editor-actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
}
.user-row-actions {
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    min-width:330px;
}
.user-role-stack {
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
}
.user-role-chip {
    display:inline-flex;
    align-items:center;
    padding:3px 8px;
    border-radius:999px;
    border:1px solid #cbdce8;
    background:#f6fafc;
    color:var(--navy);
    font-size:.72rem;
    font-weight:700;
}
.user-lock-badge {
    display:inline-flex;
    align-items:center;
    margin-left:5px;
    padding:3px 7px;
    border-radius:999px;
    background:#fff2d7;
    color:#805f10;
    font-size:.68rem;
    font-weight:800;
}
.users-table td {
    vertical-align:middle;
}

@media (max-width: 920px) {
    .user-row-actions {
        min-width:260px;
    }
}


/* v0.8.4 users access diagnostics */
.users-access-summary {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
}
.users-access-summary > div:first-child {
    display:flex;
    flex-direction:column;
    gap:3px;
}
.users-access-summary strong {
    color:var(--navy);
}
.users-access-summary span {
    color:var(--agil-muted);
    font-size:.8rem;
}

@media (max-width: 760px) {
    .users-access-summary {
        align-items:flex-start;
        flex-direction:column;
    }
}


/* v0.8.5 direct Users navigation
   Uses a normal browser anchor so Users remains reachable even if
   Blazor enhanced navigation / interactive circuit is unavailable. */
.agil-direct-nav-menu {
    position:relative;
    z-index:4;
    pointer-events:auto;
}
.agil-direct-nav-link {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:42px;
    margin:2px 9px;
    padding:8px 16px;
    border-radius:9px;
    color:#eaf1f7 !important;
    text-decoration:none !important;
    cursor:pointer;
    pointer-events:auto !important;
    user-select:none;
    position:relative;
    z-index:5;
    font-size:.875rem;
    font-weight:400;
    line-height:1.5;
}
.agil-direct-nav-link:hover {
    background:rgba(255,255,255,.08);
}
.agil-direct-nav-link.active {
    background:rgba(154,205,75,.14) !important;
    color:#fff !important;
    box-shadow:inset 3px 0 0 var(--agil-lime);
}
.agil-direct-nav-icon {
    flex:0 0 auto;
    color:inherit !important;
}