:root {
  --bg: #f3f6f8;
  --panel: #ffffff;
  --ink: #16212b;
  --muted: #687581;
  --line: #dce3e8;
  --nav: #111c24;
  --nav-2: #1b2c38;
  --accent: #147b80;
  --accent-dark: #0c5f63;
  --success: #1f7a4d;
  --danger: #b33a3a;
  --warn: #a76513;
  --soft: #e9f4f4;
  --soft-2: #f7fafb;
  --shadow: 0 6px 24px rgba(23,39,51,.08);
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, "Segoe UI", Arial, sans-serif; color:var(--ink); background:var(--bg); }
button,input,select,textarea { font:inherit; }
svg text { font-family: Inter, "Segoe UI", Arial, sans-serif; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:240px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:22px 16px; background:var(--nav); color:#eef5f7; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:12px; padding:0 8px 22px; border-bottom:1px solid rgba(255,255,255,.1); }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:9px; background:var(--accent); font-weight:800; font-size:24px; }
.brand strong,.brand span { display:block; }
.brand strong { font-size:18px; letter-spacing:.08em; }
.brand span { color:#99acb8; font-size:12px; margin-top:2px; }
nav { display:flex; flex-direction:column; gap:4px; padding-top:18px; }
.nav-item { border:0; color:#b8c6ce; background:transparent; text-align:left; padding:11px 12px; border-radius:8px; cursor:pointer; }
.nav-item:hover { background:var(--nav-2); color:#fff; }
.nav-item.active { background:#213d49; color:#fff; font-weight:600; }
.sidebar-foot { margin-top:auto; padding:14px 8px 2px; border-top:1px solid rgba(255,255,255,.1); }
main { min-width:0; padding:0 28px 40px; }
.topbar { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); margin-bottom:24px; }
h1,h2,h3,p { margin-top:0; }
.topbar h1 { margin-bottom:5px; font-size:25px; }
.topbar p { margin:0; color:var(--muted); font-size:14px; }
.top-actions,.button-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.button-row.right { justify-content:flex-end; }
.btn { border:1px solid transparent; border-radius:7px; padding:9px 13px; cursor:pointer; font-weight:600; background:#e9eef1; color:var(--ink); }
.btn:hover { filter:brightness(.97); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.primary { background:var(--accent); color:#fff; }
.btn.warn { background:#fff6e8; color:#8c570f; border-color:#e6c995; }
.btn.success { background:#e9f7ef; color:#16603b; border-color:#b8dfc8; }
.btn.danger { background:#fff0f0; color:#992e2e; border-color:#efc4c4; }
.btn.secondary { background:#fff; border-color:#cbd6dc; }
.btn.link { background:transparent; color:var(--accent); padding:5px; }
.badge { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.badge::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.badge.running { background:#e8f6ee; color:#16633d; }
.badge.stopped { background:#edf0f2; color:#6d7880; }
.notice { margin:-8px 0 20px; border-radius:8px; padding:12px 14px; border:1px solid #c8d8df; background:#eef7fb; }
.notice.error { background:#fff0f0; border-color:#efc4c4; color:#8e2e2e; }
.notice.success { background:#edf8f1; border-color:#c5e2cf; color:#1f6540; }
.notice.info { background:#eef7fb; border-color:#c8d8df; color:#1f4d5c; }
.action-banner { margin-top:14px; padding:10px 13px; border-radius:8px; border:1px solid #c8d8df; background:#eef7fb; color:#1f4d5c; font-size:13px; line-height:1.5; }
.action-banner.pending { padding-left:34px; position:relative; }
.action-banner.pending::before { content:""; position:absolute; left:12px; top:50%; width:13px; height:13px; margin-top:-7px; border-radius:50%; border:2px solid rgba(20,123,128,.25); border-top-color:var(--accent); animation:action-spin .9s linear infinite; }
.action-banner.success { background:#edf8f1; border-color:#c5e2cf; color:#1f6540; }
.action-banner.error { background:#fff0f0; border-color:#efc4c4; color:#8e2e2e; }
.badge.warning::before { animation:action-pulse 1.2s ease-in-out infinite; }
@keyframes action-spin { to { transform:rotate(360deg); } }
@keyframes action-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.hidden, [hidden] { display:none !important; }
.page { display:none; }
.page.active { display:block; }
.grid { display:grid; gap:18px; }
.cards-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.split { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.overview-split { margin-top:18px; }
.topology-layout { grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr); align-items:start; }
.stack { display:grid; gap:18px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:20px; }
.inset-card { background:var(--soft-2); border-style:dashed; box-shadow:none; }
.metric span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.metric strong { display:block; margin:10px 0 4px; font-size:25px; }
.metric small { color:var(--muted); }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.card-head h2 { font-size:18px; margin-bottom:5px; }
.card-head h3 { font-size:16px; margin-bottom:0; }
.card-head p { color:var(--muted); font-size:13px; margin-bottom:0; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.status-list { margin:0; }
.status-list div { display:grid; grid-template-columns:150px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid #edf1f3; }
.status-list.compact div { grid-template-columns:120px 1fr; }
.status-list div:last-child { border-bottom:0; }
.status-list dt { color:var(--muted); }
.status-list dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.event-list { display:flex; flex-direction:column; gap:8px; min-height:70px; }
.event { display:grid; grid-template-columns:90px 160px 1fr; gap:10px; padding:8px 10px; border-radius:7px; background:#f7f9fa; font-size:12px; }
.event .time { color:var(--muted); }
.event .type { font-weight:700; color:var(--accent-dark); }
.form-card { max-width:1180px; }
.form-grid { display:grid; gap:17px 18px; }
.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid.profile-row { grid-template-columns:1.2fr 1fr auto; align-items:end; }
.wide { grid-column:1/-1; }
label { display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:650; }
label small { color:var(--muted); font-size:11px; line-height:1.45; font-weight:400; }
input,select,textarea { width:100%; border:1px solid #c9d4da; border-radius:7px; background:#fff; color:var(--ink); padding:9px 10px; outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(20,123,128,.1); }
.check-label { flex-direction:row; align-items:center; flex-wrap:wrap; padding-top:27px; }
.check-label input { width:auto; }
.check-label small { width:100%; padding-left:24px; }
.subpanel { margin-top:20px; padding:17px; background:#f7fafb; border:1px solid #e1e8ec; border-radius:9px; }
.subpanel:empty { display:none; }
.toggle-row { display:flex; align-items:center; gap:12px; padding:14px 0 20px; }
.toggle-row p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.switch { position:relative; display:block; width:44px; height:24px; flex:none; }
.switch input { opacity:0; width:0; height:0; }
.switch span { position:absolute; inset:0; background:#b9c3c9; border-radius:20px; transition:.15s; }
.switch span::after { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; border-radius:50%; background:#fff; transition:.15s; }
.switch input:checked + span { background:var(--accent); }
.switch input:checked + span::after { transform:translateX(20px); }
.callout { margin-top:20px; padding:13px 15px; border-radius:8px; border-left:4px solid; font-size:13px; line-height:1.5; }
.callout.info { background:#eef7f8; border-color:var(--accent); }
.callout.warning { background:#fff7e9; border-color:#d58c26; }
.callout.neutral { background:#f5f8fa; border-color:#90a4b2; }
.compact-callout { margin-bottom:18px; }
.small-space { margin-top:14px; }
.advanced { margin-top:22px; border-top:1px solid var(--line); padding-top:16px; }
.advanced summary { cursor:pointer; font-weight:700; color:#334753; margin-bottom:12px; }
.advanced textarea { min-height:430px; font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; line-height:1.5; }
.field-actions { padding-bottom:1px; }
.log-card { max-width:none; }
.log-toolbar { grid-template-columns:2fr 120px 3fr; align-items:end; margin-bottom:10px; }
#logFileOutput { min-height:320px; max-height:56vh; margin-top:8px; }
.log-card pre { min-height:520px; max-height:68vh; overflow:auto; margin:0; padding:14px; background:#111b22; color:#d8e7ed; border-radius:8px; font-size:12px; line-height:1.55; white-space:pre-wrap; }
.modal { position:fixed; inset:0; background:rgba(9,17,22,.62); display:grid; place-items:center; z-index:20; }
.modal-card { width:min(460px,calc(100% - 32px)); background:#fff; border-radius:12px; padding:24px; box-shadow:0 18px 70px rgba(0,0,0,.3); }
.modal-card p { color:var(--muted); line-height:1.5; }
.summary-stack { display:grid; gap:10px; }
.summary-item { padding:11px 12px; border:1px solid #d9e4e9; background:#f8fbfc; border-radius:8px; }
.summary-item strong { display:block; margin-bottom:4px; }
.profile-library { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.profile-card { border:1px solid #d6e2e7; background:#fff; border-radius:12px; padding:16px; cursor:pointer; transition:all .15s; }
.profile-card:hover { border-color:#afc9d2; box-shadow:var(--shadow); transform:translateY(-1px); }
.profile-card.active { border-color:var(--accent); box-shadow:0 0 0 3px rgba(20,123,128,.08); background:#f4fbfb; }
.profile-card h3 { margin:0 0 8px; font-size:16px; }
.profile-card p { color:var(--muted); font-size:12px; margin:0 0 10px; line-height:1.45; }
.profile-card ul { margin:0; padding-left:18px; color:#41515d; font-size:12px; }
.helper-strip { margin-top:16px; padding:10px 12px; border-radius:8px; background:#f4f8fa; border:1px solid #dce6eb; color:#41515d; font-size:12px; }
.narrow-top { margin-top:20px; }
.topology-card { overflow:hidden; }
.topology-svg { width:100%; min-height:620px; background:linear-gradient(180deg,#fbfdfe,#f3f7f9); border:1px solid #e2eaee; border-radius:12px; }
.topology-legend { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px; color:#42535f; font-size:12px; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.dot-local { background:#4c8bd6; }
.dot-master { background:#147b80; }
.dot-remote { background:#7d73d8; }
.line { display:inline-block; width:18px; height:0; border-top:3px solid; margin-right:6px; vertical-align:middle; }
.line.good { border-color:#1f7a4d; }
.line.warn { border-color:#cf8a22; }
.line.bad { border-color:#b33a3a; }
.route-list, .mini-list { display:grid; gap:10px; }
.route-item, .mini-item { padding:11px 12px; border-radius:8px; background:#f8fbfc; border:1px solid #d8e4e9; }
.route-item header { display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; }
.route-state { font-weight:700; font-size:12px; }
.route-good .route-state { color:#1f7a4d; }
.route-warn .route-state { color:#a76513; }
.route-bad .route-state { color:#b33a3a; }
.mini-item strong { display:block; margin-bottom:4px; }
.pipeline { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pipeline-step { position:relative; padding:12px 10px; border-radius:10px; border:1px solid #d8e4e9; background:#f8fbfc; text-align:center; }
.pipeline-step.active { border-color:var(--accent); background:#eef8f8; }
.pipeline-step.done { border-color:#b5d8c4; background:#eef8f1; }
.pipeline-step.bad { border-color:#efc4c4; background:#fff2f2; }
.pipeline-step small { display:block; color:var(--muted); margin-top:4px; }
.node-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; background:#f4f8fa; border:1px solid #dbe5ea; margin:3px 6px 0 0; font-size:12px; }
.node-chip.master { background:#eef8f8; border-color:#bfe1e2; }
@media(max-width:1250px){ .cards-5{grid-template-columns:repeat(3,1fr)} .topology-layout{grid-template-columns:1fr} .metrics-layout{grid-template-columns:1fr} .profile-library{grid-template-columns:repeat(2,1fr)} }
@media(max-width:1050px){ .split{grid-template-columns:1fr} .topbar{align-items:flex-start;padding-top:20px;flex-direction:column} .top-actions{padding-bottom:16px} .form-grid.profile-row{grid-template-columns:1fr 1fr} .field-actions{grid-column:1/-1} }
@media(max-width:760px){ .log-toolbar{grid-template-columns:1fr} .app-shell{grid-template-columns:1fr} .sidebar{position:static;height:auto} .sidebar nav{display:grid;grid-template-columns:repeat(2,1fr)} .sidebar-foot{display:none} main{padding:0 16px 30px} .cards-5,.form-grid.two,.form-grid.profile-row,.profile-library,.pipeline{grid-template-columns:1fr} .wide{grid-column:auto} .event{grid-template-columns:80px 1fr} .event .message{grid-column:1/-1} .top-actions{width:100%} .top-actions .btn{flex:1} .status-list div{grid-template-columns:120px 1fr} .topology-svg{min-height:460px} }

/* Multi-bridge management */
.bridge-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-top:26px; margin-bottom:12px; }
.bridge-section-head h3 { margin:0 0 5px; font-size:17px; }
.bridge-section-head p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.bridge-list { display:grid; gap:16px; margin-top:16px; }
.bridge-empty { padding:28px 20px; border:1px dashed #bfd0d8; background:#f8fbfc; border-radius:11px; color:#536470; text-align:center; }
.bridge-card { border:1px solid #d7e1e6; border-radius:12px; padding:17px; background:#fff; box-shadow:0 3px 14px rgba(23,39,51,.05); }
.bridge-card.enabled { border-color:#9bc9bd; box-shadow:0 0 0 2px rgba(31,122,77,.05); }
.bridge-card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:14px; margin-bottom:15px; border-bottom:1px solid #edf1f3; }
.bridge-title-row { display:flex; align-items:center; gap:14px; min-width:0; }
.bridge-title-row > div { min-width:0; }
.bridge-title-row strong { display:block; font-size:15px; overflow-wrap:anywhere; }
.bridge-title-row span { display:block; color:var(--muted); font-size:11px; margin-top:3px; overflow-wrap:anywhere; }
.bridge-enable { flex-direction:row; align-items:center; gap:7px; white-space:nowrap; font-weight:700; }
.bridge-enable input { width:auto; }
.bridge-basic-grid { margin-bottom:14px; }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.bridge-discovery-extra { padding:14px; border-radius:9px; background:#f7fafb; border:1px solid #e1e8ec; margin-bottom:14px; }
.bridge-advanced { border-top:1px solid #e7edf0; padding-top:12px; margin-top:4px; }
.bridge-advanced summary { cursor:pointer; font-weight:700; color:#42535f; margin-bottom:12px; }
.bridge-remove { padding:7px 10px; }
.forward-section-head { margin-top:30px; padding-top:22px; border-top:1px solid #e2e9ed; }
.forward-rule-list { display:grid; gap:12px; margin:14px 0 4px; }
.forward-rule-empty { padding:22px 18px; border:1px dashed #bfd0d8; background:#f8fbfc; border-radius:11px; color:#536470; text-align:center; }
.forward-rule-card { display:grid; grid-template-columns:auto minmax(220px,1.3fr) minmax(180px,1fr) auto; gap:12px; align-items:end; padding:14px; border:1px solid #d7e1e6; border-radius:11px; background:#fff; }
.forward-rule-card.enabled { border-color:#9bc9bd; box-shadow:0 0 0 2px rgba(31,122,77,.04); }
.forward-rule-card .forward-enable { align-self:center; flex-direction:row; align-items:center; gap:7px; white-space:nowrap; font-weight:700; }
.forward-rule-card .forward-enable input { width:auto; }
.forward-rule-card label { min-width:0; }
.forward-rule-card input[type=text] { font-family:"SFMono-Regular",Consolas,monospace; }
.forward-rule-card .btn { align-self:end; }
.forward-rule-summary { grid-column:2 / 4; color:var(--muted); font-size:11px; line-height:1.35; margin-top:-4px; }
code { font-family:"SFMono-Regular",Consolas,monospace; font-size:.92em; background:#eef3f5; padding:1px 4px; border-radius:4px; overflow-wrap:anywhere; }
@media(max-width:980px){ .form-grid.three{grid-template-columns:1fr 1fr} }
@media(max-width:760px){ .bridge-section-head,.bridge-card-head{flex-direction:column;align-items:stretch}.form-grid.three{grid-template-columns:1fr}.bridge-title-row{justify-content:space-between}.bridge-remove{width:100%}.forward-rule-card{grid-template-columns:1fr}.forward-rule-summary{grid-column:auto}.forward-rule-card .btn{width:100%} }

/* Guided voice demonstration */
.btn.tour-start { background:#163d61; color:#fff; border-color:#163d61; }
.btn.tour-start:hover { background:#0f304e; }
.guided-tour {
  position:fixed;
  right:24px;
  bottom:24px;
  width:min(520px,calc(100vw - 36px));
  z-index:60;
  background:#ffffff;
  border:1px solid #bfd0d8;
  border-radius:14px;
  box-shadow:0 20px 70px rgba(12,31,43,.28);
  padding:16px;
}
.guided-tour-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.guided-tour-head strong { display:block; font-size:15px; }
.guided-tour-head span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.tour-close { border:0; background:transparent; color:#566773; font-size:26px; line-height:1; cursor:pointer; padding:0 2px; }
.guided-tour-caption { min-height:76px; padding:13px 14px; border-radius:9px; background:#f3f8fa; border-left:4px solid var(--accent); line-height:1.5; font-size:13px; }
.guided-tour-settings { display:grid; grid-template-columns:auto auto 1fr 120px; align-items:end; gap:10px; margin-top:12px; }
.tour-option { flex-direction:row; align-items:center; gap:6px; font-size:12px; font-weight:600; white-space:nowrap; padding-bottom:8px; }
.tour-option input { width:auto; }
.tour-select-label { font-size:11px; gap:4px; }
.tour-select-label select { padding:7px 8px; font-size:12px; }
.guided-tour-controls { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.guided-tour-note { min-height:16px; margin-top:7px; color:var(--muted); font-size:10px; }
.tour-highlight {
  position:relative;
  z-index:32 !important;
  outline:4px solid rgba(20,123,128,.72) !important;
  outline-offset:5px;
  border-radius:10px;
  box-shadow:0 0 0 10px rgba(20,123,128,.10), 0 16px 40px rgba(11,71,75,.18) !important;
  transition:outline-color .18s, box-shadow .18s;
}
.tour-highlight.tour-pulse { animation:tourPulse 1.35s ease-in-out infinite; }
@keyframes tourPulse {
  0%,100% { outline-color:rgba(20,123,128,.48); box-shadow:0 0 0 8px rgba(20,123,128,.07), 0 12px 34px rgba(11,71,75,.13); }
  50% { outline-color:rgba(20,123,128,.95); box-shadow:0 0 0 14px rgba(20,123,128,.15), 0 18px 46px rgba(11,71,75,.23); }
}
body.tour-active::after {
  content:"";
  position:fixed;
  inset:0;
  background:rgba(12,24,32,.08);
  z-index:25;
  pointer-events:none;
}
body.tour-active .guided-tour { z-index:70; }
@media(max-width:850px){
  .guided-tour { left:12px; right:12px; bottom:12px; width:auto; }
  .guided-tour-settings { grid-template-columns:1fr 1fr; }
  .tour-option { padding-bottom:0; }
}

/* v0.4.7 OpenAI adapter */
.ai-provider-card { margin-top:18px; }
.ai-status-list { margin-top:18px; }
.ai-ask-panel { margin-top:18px; padding-top:18px; border-top:1px solid #e2eaee; }
.ai-ask-panel label { display:block; font-weight:600; }
.ai-ask-panel textarea { margin-top:8px; width:100%; }
.ai-answer { min-height:112px; max-height:360px; overflow:auto; white-space:pre-wrap; word-break:break-word; background:#0f1720; color:#e9f1f5; border-radius:10px; padding:14px; margin-top:12px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; line-height:1.45; }
.badge.warning { background:#fff4dd; color:#9a6214; }

/* v0.4.7 deployed IRIS AI service */
.ai-network-service { margin-top:18px; padding:16px; border:1px solid #dce7eb; border-radius:12px; background:#f9fcfd; }
.compact-head { margin-bottom:10px; }
.compact-head h3 { margin:0 0 4px; font-size:17px; }
.compact-head p { margin:0; color:var(--muted); font-size:12px; }
.protocol-box { margin-top:12px; padding:12px 14px; border-radius:8px; background:#eef4f6; color:#32444f; line-height:1.65; }

/* v0.4.8 provider-neutral AI + live RELAY3 bridge-rate visibility */
.provider-selector-grid { margin-bottom:16px; }
.provider-fields { margin-top:14px; padding-top:14px; border-top:1px solid #e1e8ec; }
.provider-banner { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:12px 14px; margin-bottom:14px; border:1px solid #c8dce7; border-radius:10px; background:#f5fafc; }
.provider-banner strong { color:#16212b; }
.provider-banner span { color:#52636f; font-size:13px; }
.gdc-banner { border-color:#b9d7ca; background:#f2faf6; }
.ai-environment-overview { margin-top:18px; padding:16px; border:1px solid #d8e3e8; border-radius:12px; background:#fbfdfe; }
.ai-environment-overview h3 { margin:0 0 12px; }
.environment-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.environment-grid > div { display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid #dfe8ec; border-radius:10px; background:#fff; }
.environment-grid span { color:#596a75; font-size:12px; line-height:1.45; }
.rate-legend { margin-left:auto; padding:4px 8px; border:1px solid #9bc8ca; border-radius:999px; color:#0c5f63; font-weight:700; }
.bridge-rate-highlight { margin:7px 0; padding:7px 9px; border-radius:8px; background:#edf8f8; border:1px solid #a9d1d2; color:#0c5f63; font-size:12px; font-weight:800; }
@media(max-width:900px){ .environment-grid{grid-template-columns:1fr}.rate-legend{margin-left:0;width:100%} }

/* v0.5.1 headless Gateway Plugin API */
.plugin-install-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:end; margin-bottom:4px; }
.plugin-file-label input[type=file] { padding:8px; background:#f8fbfc; }
.plugin-list { display:grid; gap:16px; margin-top:20px; }
.plugin-card { border:1px solid #d7e1e6; border-radius:12px; padding:17px; background:#fff; box-shadow:0 3px 14px rgba(23,39,51,.05); }
.plugin-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:13px; border-bottom:1px solid #edf1f3; }
.plugin-title-line { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.plugin-title-line h3 { margin:0; font-size:17px; }
.plugin-description { color:#42535f; font-size:13px; line-height:1.5; margin:14px 0; }
.plugin-actions { justify-content:flex-end; }
.plugin-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0; }
.plugin-metrics > div { padding:10px 12px; border:1px solid #e0e8ec; border-radius:9px; background:#f8fbfc; }
.plugin-metrics span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.plugin-metrics strong { display:block; margin-top:5px; overflow-wrap:anywhere; }
.plugin-permissions { font-size:12px; color:#536470; line-height:1.9; }
.plugin-permissions code { margin-right:5px; white-space:nowrap; }
.plugin-status-list { margin-top:10px; }
.plugin-settings-host { margin-top:15px; }
.plugin-settings-panel { padding:16px; border:1px solid #dce6eb; border-radius:10px; background:#f7fafb; }
.plugin-settings-panel h4 { margin:0 0 14px; }
.plugin-settings-panel .button-row { margin-top:14px; }
.compact-plugin-callout { margin-top:12px; }
@media(max-width:900px){ .plugin-install-row{grid-template-columns:1fr}.plugin-metrics{grid-template-columns:1fr}.plugin-card-head{flex-direction:column}.plugin-actions{justify-content:flex-start} }


/* v0.5.1 plugin status readability and diagnostics */
.plugin-status-list { margin-top:12px; border-top:1px solid #edf1f3; }
.plugin-status-list .plugin-status-row { grid-template-columns:minmax(190px, 34%) minmax(0,1fr); gap:18px; align-items:start; padding:9px 0; }
.plugin-status-key { color:var(--muted); min-width:0; overflow-wrap:anywhere; }
.plugin-status-value { min-width:0; overflow-wrap:anywhere; white-space:normal; }
.plugin-log-panel { margin-top:14px; padding:12px 14px; border:1px solid #dfe8ec; border-radius:9px; background:#f8fbfc; }
.plugin-log-head { display:flex; justify-content:space-between; gap:16px; align-items:baseline; margin-bottom:8px; }
.plugin-log-row { display:grid; grid-template-columns:92px 58px minmax(0,1fr); gap:9px; padding:5px 0; border-top:1px solid #e8eef1; font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; font-size:11px; line-height:1.45; }
.plugin-log-row:first-of-type { border-top:0; }
.plugin-log-time { color:#667985; }
.plugin-log-level { font-weight:800; }
.plugin-log-level.warn,.plugin-log-level.error { color:#a64232; }
.plugin-log-message { min-width:0; overflow-wrap:anywhere; }
.plugin-log-empty { color:var(--muted); font-size:12px; }
@media(max-width:760px){
  .plugin-status-list .plugin-status-row{grid-template-columns:1fr;gap:3px}
  .plugin-log-head{flex-direction:column;gap:3px}
  .plugin-log-row{grid-template-columns:75px 52px minmax(0,1fr)}
}

/* Topology data-rate graph */
.metrics-layout { grid-template-columns: minmax(0, 1.6fr) minmax(320px, .7fr); align-items:start; }
.mini-item { border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:grid; gap:4px; }
.traffic-window { display:flex; gap:6px; }
.traffic-window .btn.active { background:var(--accent, #1f5c8b); color:#fff; border-color:transparent; }
.traffic-stats { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap:10px; margin:6px 0 12px; }
.traffic-stat { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fbfdfe; }
.traffic-stat .label { display:flex; align-items:center; gap:8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#5a6b78; }
.traffic-stat .current { font-size:22px; font-weight:600; margin:4px 0 2px; }
.traffic-stat .minor { font-size:12px; color:#5a6b78; }
.traffic-svg { width:100%; height:260px; background:linear-gradient(180deg,#fbfdfe,#f3f7f9); border:1px solid #e2eaee; border-radius:12px; }
.traffic-legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; font-size:13px; color:#5a6b78; }
.swatch { display:inline-block; width:14px; height:4px; border-radius:2px; vertical-align:middle; margin-right:4px; }
.s-local-tx { background:#1f77b4; } .s-local-rx { background:#7fb3d5; } .s-bridge-tx { background:#d9822b; } .s-bridge-rx { background:#f0b27a; }
.traffic-svg .grid { stroke:#dfe7ec; stroke-width:1; }
.traffic-svg .axis { fill:#6b7c88; font-size:11px; }
.traffic-svg .series { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.traffic-svg .empty { fill:#8a98a3; font-size:14px; }
.legend-toggle { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff; border-radius:999px; padding:4px 10px; font-size:13px; color:#3c4a55; cursor:pointer; }
.legend-toggle:hover { border-color:#b9c8d2; }
.legend-toggle.off { color:#9aa7b1; background:#f5f7f9; text-decoration:line-through; }
.legend-toggle.off .swatch { opacity:.3; }
.traffic-stat.off { opacity:.45; }

/* WAN device enrolment (GossipRouter card) */
.wan-devices-head { margin-top:22px; }
.wan-devices-table { margin-top:10px; }
.wan-devices-table table { width:100%; border-collapse:collapse; font-size:13px; }
.wan-devices-table th, .wan-devices-table td { text-align:left; padding:9px 8px; border-bottom:1px solid #edf1f3; vertical-align:middle; }
.wan-devices-table th { color:var(--muted); font-weight:600; }
.wan-devices-table td.actions { text-align:right; white-space:nowrap; }
.wan-devices-table .expired { color:#992e2e; font-weight:600; }
.wan-device-add { margin-top:16px; }
.wan-apply-row { margin:18px 0 6px; }
#wanEchelonBody > .form-grid { margin-top:4px; }
.wan-passphrase { display:inline-block; font-family:"SFMono-Regular",Consolas,monospace; font-size:18px; letter-spacing:.06em; padding:8px 12px; border-radius:8px; background:#fff; border:1px solid #cbd6dc; margin:6px 0; user-select:all; }
/* While this gateway hosts the WAN echelon the local network card is hidden and the WAN section
   carries one derived summary line plus, under Advanced, the local-stack blocks moved in from the
   card ("This gateway's link"). */
.wan-hosted-summary { margin-top:18px; padding:12px 14px; border-radius:8px; background:#f5f8fa; border:1px solid #dce6eb; font-size:13px; line-height:1.5; }
.wan-hosted-summary p { margin:0; }
.wan-hosted-summary p + p { margin-top:6px; }
.wan-hosted-summary code { font-family:"SFMono-Regular",Consolas,monospace; font-size:12px; }
.wan-advanced-subhead { margin:18px 0 8px; font-size:14px; font-weight:700; color:#42535f; }
.wan-advanced-subhead-hint { margin:0 0 10px; }
.wan-link-slot + .wan-link-slot { margin-top:14px; }