.protocol-workspace { --protocol-accent: #22b8cf; color: var(--text-primary, #e2e8f0); }
#mpls-dashboard-section { --protocol-accent: #a78bfa; }
.protocol-workspace [hidden] { display:none !important; }
.protocol-header { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:8px 0 24px; flex-wrap:wrap; }
.protocol-eyebrow { color:var(--protocol-accent); font-size:11px; font-weight:700; letter-spacing:1.5px; margin-bottom:10px; }
.protocol-eyebrow span { color:var(--text-secondary); }
.protocol-header h2 { font-size:30px; letter-spacing:-.7px; margin:0 0 8px; }
.protocol-header p { margin:0; color:var(--text-secondary); max-width:660px; line-height:1.6; }
.protocol-actions { display:flex; gap:8px; flex-wrap:wrap; }
.protocol-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.protocol-kpi { background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; }
.protocol-kpi:before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--protocol-accent); opacity:.6; }
.protocol-kpi span { font-size:13px; color:var(--text-secondary); }
.protocol-kpi strong { font-size:32px; font-variant-numeric:tabular-nums; line-height:1.1; }
.protocol-kpi small { color:var(--text-secondary); font-size:11px; }
.protocol-kpi.good strong { color:var(--green,#10b981); }
.protocol-kpi.bad strong { color:var(--red,#f43f5e); }
.protocol-kpi.accent strong { color:var(--protocol-accent); }
.protocol-panel { border:1px solid var(--border); border-radius:12px; background:var(--bg-surface); overflow:hidden; }
.protocol-tabs { display:flex; gap:8px; padding:0 20px; border-bottom:1px solid var(--border); overflow-x:auto; }
.protocol-tabs button { border:0; border-bottom:3px solid transparent; background:transparent; color:var(--text-secondary); padding:18px 14px; font-weight:600; white-space:nowrap; cursor:pointer; }
.protocol-tabs button[aria-selected=true] { color:var(--protocol-accent); border-bottom-color:var(--protocol-accent); }
.protocol-filters { display:flex; align-items:end; flex-wrap:wrap; gap:12px; padding:20px; }
.protocol-filters label { display:flex; flex-direction:column; gap:7px; font-size:11px; font-weight:600; color:var(--text-secondary); flex:1; min-width:135px; }
.protocol-filters label.protocol-search { flex:2; min-width:230px; }
.protocol-workspace input[type=search], .protocol-workspace select { color:var(--text-primary); background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:10px 12px; font:inherit; font-size:13px; min-height:38px; width:100%; }
.protocol-workspace :is(button,input,select):focus-visible { outline:2px solid var(--protocol-accent); outline-offset:3px; }
.protocol-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:0 20px 12px; color:var(--text-secondary); font-size:12px; }
.protocol-toolbar>div { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.protocol-auto { display:flex; align-items:center; gap:7px; cursor:pointer; }
.protocol-context { margin:0; padding:0 20px 16px; font-size:12px; line-height:1.5; color:var(--text-secondary); }
.protocol-table-scroll { overflow:auto; max-height:65vh; }
.protocol-table { width:100%; border-collapse:collapse; font-size:12px; text-align:left; }
.protocol-table th { background:var(--bg-elevated); position:sticky; top:0; z-index:1; white-space:nowrap; font-size:11px; }
.protocol-table th button { background:none; border:0; color:var(--text-secondary); padding:0; font:inherit; cursor:pointer; }
.protocol-table td,.protocol-table th { padding:14px 16px; border-bottom:1px solid var(--border); }
.protocol-table td { overflow-wrap:anywhere; max-width:300px; }
.protocol-table tbody tr:hover { background:var(--bg-hover); }
.protocol-table strong { font-weight:600; }
.protocol-table code { color:var(--text-primary); white-space:nowrap; font-size:12px; }
.protocol-sub { display:block; margin-top:4px; color:var(--text-secondary); font-size:10px; }
.protocol-family { display:block; color:var(--protocol-accent); font-size:10px; margin-top:4px; }
.protocol-state,.protocol-tag { display:inline-flex; border-radius:5px; padding:4px 7px; background:var(--bg-elevated); color:var(--text-secondary); font-size:10px; font-weight:600; white-space:nowrap; }
.protocol-state.is-up { color:#10b981; background:rgba(16,185,129,.12); }
.protocol-state.is-down { color:#f43f5e; background:rgba(244,63,94,.12); }
.protocol-tag { color:var(--protocol-accent); }
.protocol-date { white-space:nowrap; font-size:11px; color:var(--text-secondary); }
.protocol-empty { text-align:center; padding:56px 20px !important; color:var(--text-secondary); }
.protocol-empty strong { display:block; font-size:16px; color:var(--text-primary); }
.protocol-empty p { margin:10px 0; }
.protocol-pagination { display:flex; justify-content:space-between; gap:16px; padding:16px 20px; align-items:center; flex-wrap:wrap; color:var(--text-secondary); font-size:11px; }
.protocol-pagination>div { display:flex; gap:12px; align-items:center; }
.protocol-pagination label { display:flex; gap:8px; align-items:center; white-space:nowrap; }
.protocol-pagination select { width:70px; }
.protocol-workspace button:disabled { opacity:.45; cursor:not-allowed; }
.protocol-notice { border:1px solid var(--protocol-accent); background:var(--bg-surface); color:var(--text-primary); padding:14px 18px; border-radius:8px; margin-bottom:20px; font-size:13px; }
.protocol-notice.is-error { border-color:var(--red); }
.protocol-dialog { width:min(850px,94vw); max-height:85vh; padding:0; border:1px solid var(--border); border-radius:14px; background:var(--bg-surface); color:var(--text-primary); margin:auto; box-shadow:0 24px 100px #0008; }
.protocol-dialog::backdrop { background:#020617b3; backdrop-filter:blur(3px); }
.protocol-detail-header { position:sticky; top:0; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:24px; background:var(--bg-surface); border-bottom:1px solid var(--border); z-index:1; }
.protocol-detail-header small { font-size:10px; letter-spacing:1px; color:var(--protocol-accent); }
.protocol-detail-header h3 { margin:7px 0 0; font-size:20px; overflow-wrap:anywhere; }
.protocol-detail-body { padding:24px; }
.protocol-detail-body dl { display:grid; grid-template-columns:1fr 1fr; margin:0; gap:0 24px; }
.protocol-detail-body dl>div { padding:14px 0; border-bottom:1px solid var(--border); min-width:0; }
.protocol-detail-body dt { font-size:11px; color:var(--text-secondary); margin-bottom:6px; }
.protocol-detail-body dd { margin:0; font-size:13px; overflow-wrap:anywhere; }
.protocol-detail-body h4 { margin:24px 0 12px; }
.protocol-peer-events { font-size:12px; line-height:1.8; color:var(--text-secondary); }
@media(max-width:700px) {
 .protocol-header h2 { font-size:24px; } .protocol-actions { width:100%; }
 .protocol-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .protocol-kpi { padding:15px; } .protocol-kpi strong { font-size:26px; }
 .protocol-filters { padding:16px; } .protocol-filters label.protocol-search { min-width:100%; }
 .protocol-tabs { padding:0 8px; } .protocol-tabs button { padding:16px 10px; }
 .protocol-pagination>div { flex-wrap:wrap; } .protocol-detail-body dl { grid-template-columns:1fr; }
}
.protocol-workspace .btn-secondary { background:var(--bg-elevated); color:var(--text-primary); border:1px solid var(--border); box-shadow:none; }
.protocol-workspace .btn-ghost { color:var(--text-secondary); background:transparent; border:1px solid var(--border); }
.protocol-workspace .btn-secondary:hover { border-color:var(--protocol-accent); }