.button-link{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 12px;border:1px solid var(--line);border-radius:6px;text-decoration:none;font-size:13px;background:var(--glass);color:var(--ink);margin:8px 0;overflow-wrap:anywhere;transition:background .15s,border-color .15s}.button-link:hover{background:var(--surface-hover);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}.detail-actions .button-link{margin:0}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0}
.brand{white-space:nowrap}
.console-nav{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--soft);white-space:nowrap;overflow-x:auto;max-width:100%}
.nav-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.nav-pill:hover{color:var(--ink);background:var(--glass)}
.nav-pill.active{background:var(--paper);color:var(--accent);font-weight:600;box-shadow:0 1px 4px #10302412}
.top-link{margin:0;padding:5px 10px;min-height:32px;font-size:12px;white-space:nowrap}
.cached{display:block;color:var(--amber);margin-top:6px;font-size:10px}.due,#form-error{color:var(--amber)}#form-error{margin-top:12px}
.live-list{display:flex!important;flex-direction:column;gap:10px!important}
.live-list .monitor-card{display:grid!important;grid-template-columns:1fr 2fr 2fr;gap:12px}
.live-list .monitor-address{grid-column:1}.live-list .monitor-resources{grid-column:2;grid-row:1/4}.live-list .monitor-facts{grid-column:3;grid-row:1/4;margin:0}.live-list .monitor-network{grid-column:1/-1}
.node-options{max-height:280px;overflow:auto;margin:14px 0;border:1px solid var(--line);border-radius:7px}
.node-options label{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px}
.node-options input,.check input{width:17px;height:17px;accent-color:var(--accent);flex-shrink:0}
.node-options small{display:block;color:var(--muted);font-size:11px}
.check{display:flex;gap:8px;align-items:center;font-size:13px}
.service-card .monitor-line>b{overflow-wrap:anywhere;max-width:75%;font-size:11px}
.monitor-network .network-caption{white-space:normal}
.log{max-height:420px;overflow:auto}
.workspace-note{color:var(--muted);overflow-wrap:anywhere}
.summary>button>span{min-width:0}
.detail-actions{flex-wrap:wrap}
#inspector .kv b{max-width:72%}

/* === NON-CARD PURPOSE-BUILT VIEWS (APPS, ROUTES, SETTINGS, TRASH) === */
#items.non-card-view{display:flex!important;flex-direction:column;align-items:stretch!important;gap:14px;min-width:0;width:100%}
#items.non-card-view>*{width:100%;box-sizing:border-box}
.inspector:not(.has-detail).is-empty{display:none!important}
.devops-gateway-strip,.topo-board,.app-group-panel,.route-group-panel,.settings-panel,.trash-panel{border:1px solid var(--line);border-radius:10px;background:var(--glass);backdrop-filter:blur(10px);box-shadow:var(--panel-shadow);overflow:hidden;min-width:0}
.devops-gateway-strip{padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gw-chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;min-width:0}
.gw-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;background:var(--soft);border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));color:var(--accent);font-weight:600;max-width:100%;overflow-wrap:anywhere}
.gw-pill.warn{background:var(--warn);color:var(--amber);border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.gw-arrow{color:var(--muted);font-size:12px}

.app-group-head,.route-group-head,.settings-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 16px;background:color-mix(in srgb,var(--soft) 60%,var(--paper));border-bottom:1px solid var(--line);font-size:12.5px;font-weight:650;color:var(--ink)}
.app-group-head small,.route-group-head small,.settings-head small{font-weight:500;color:var(--muted);font-size:11.5px}

.app-row,.route-row,.trash-row{width:100%;display:grid;align-items:center;gap:12px;padding:11px 16px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--paper);text-align:left;cursor:pointer;min-height:48px;min-width:0;transition:background .14s,box-shadow .14s}
.app-row{grid-template-columns:minmax(150px,1.3fr) minmax(130px,1.1fr) minmax(120px,1fr) minmax(100px,.9fr) auto}
.route-row{grid-template-columns:minmax(150px,1.3fr) 86px minmax(160px,1.6fr) 92px auto}
.trash-row{grid-template-columns:minmax(160px,1.4fr) minmax(120px,1fr) minmax(120px,1fr) minmax(140px,1.1fr) auto;cursor:default}
.app-row:last-child,.route-row:last-child,.trash-row:last-child{border-bottom:0}
.app-row:hover,.route-row:hover,.trash-row:hover{background:var(--surface-hover)}
.app-row.selected,.route-row.selected{background:var(--soft);box-shadow:inset 3.5px 0 0 var(--accent)}

.row-title-cell{display:flex;align-items:center;gap:8px;min-width:0}
.row-title-cell b{font-size:13.5px;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.row-kind{font-size:10.5px;padding:1px 6px;border-radius:4px;background:var(--soft);color:var(--muted);border:1px solid var(--line);flex-shrink:0}
.domain-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-family:ui-monospace,Consolas,monospace;color:var(--accent);background:var(--soft);padding:2px 8px;border-radius:5px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));max-width:100%;overflow-wrap:anywhere}
.domain-chip.muted-chip{background:transparent;color:var(--muted);border-color:var(--line)}
.row-meta-mono{font-size:11.5px;font-family:ui-monospace,Consolas,monospace;color:var(--muted);overflow-wrap:anywhere;min-width:0}
.row-state-cell{font-size:12px;font-weight:600;color:var(--accent);overflow-wrap:anywhere}
.row-state-cell.warn{color:var(--amber)}
.row-action-hint{font-size:12px;color:var(--accent);font-weight:500;white-space:nowrap}

/* === NATIVE SETTINGS & EXTERNAL CONSOLES MATRIX === */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.settings-body{padding:16px;background:var(--paper);display:grid;gap:12px}
.settings-note{font-size:12px;color:var(--muted);line-height:1.65;padding:9px 12px;border-radius:7px;background:var(--soft);border:1px solid var(--line)}
.settings-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:6px;border-top:1px dashed var(--line)}
.console-matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;padding:14px 16px;background:var(--paper)}
.console-card{display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--glass);text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s,transform .15s}
.console-card:hover{background:var(--soft);border-color:var(--accent);transform:translateY(-1px)}
.console-card b{font-size:13.5px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:6px}
.console-card small{font-size:11.5px;color:var(--muted);line-height:1.5}
.danger-btn{color:var(--red)!important;border-color:color-mix(in srgb,var(--red) 35%,var(--line))!important}
.danger-btn:hover{background:color-mix(in srgb,var(--red) 10%,var(--paper))!important}
[hidden]{display:none!important}

/* === 3-STAGE TOPOLOGY BOARD (ROUTES VIEW) === */
.topo-board{padding:14px 16px}
.topo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.topo-head b{font-size:13.5px;display:block}
.topo-head small{font-size:11.5px;color:var(--muted)}
.topo-actions{display:flex;gap:8px;flex-wrap:wrap}
.topo-actions .button-link{margin:0;min-height:32px;padding:4px 10px;font-size:12px}
.topo-actions .button-link.primary-link{background:var(--accent);color:var(--paper);border-color:var(--accent);font-weight:600}
.topo-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:10px;border-top:1px dashed var(--line)}
.topo-col{display:grid;gap:7px;min-width:0}
.topo-col-label{font-size:11px;font-weight:650;color:var(--muted)}
.topo-box{padding:9px 11px;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:7px;background:var(--paper);min-width:0}
.topo-box.relay{border-left-color:#4775c9}
.topo-box b{font-size:12.5px;display:block;overflow-wrap:anywhere}
.topo-box small{font-size:11px;color:var(--muted);display:block;margin-top:2px;overflow-wrap:anywhere}

/* === INLINE DARK TERMINAL IN INSPECTOR === */
.terminal-box{margin-top:12px;border-radius:8px;background:#101d19;color:#d6ebe2;padding:10px 12px;font:11.5px/1.6 ui-monospace,Consolas,monospace;border:1px solid #254238;max-height:210px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.terminal-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid #223b32;color:#84a99c;font-size:11px}

@media(max-width:1100px){
 .console-nav{display:none}
 .app-row{grid-template-columns:minmax(130px,1.2fr) minmax(110px,1fr) minmax(90px,.8fr) auto}
 .app-row>.row-meta-mono{display:none}
 .route-row{grid-template-columns:minmax(130px,1.2fr) 78px minmax(120px,1.2fr) auto}
 .route-row>.row-state-cell{display:none}
 .settings-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
 .live-list .monitor-card{display:block!important}
 .live-list .monitor-resources{margin:10px 0}
 .live-list .monitor-facts{margin:12px 0 0}
 .console-nav,.top-link{display:none}
 .topo-stages,.settings-grid{grid-template-columns:1fr}
 .app-row,.route-row,.trash-row{grid-template-columns:1fr;gap:6px;padding:10px 12px}
 .row-action-hint{display:none}
}

.topbar{position:sticky;top:0;z-index:20;overflow:hidden}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:linear-gradient(90deg,transparent,#10b981,#0d9488,#34d399,transparent);background-size:200% 100%;opacity:0;transition:opacity .2s;pointer-events:none}
body.is-loading .topbar::after{opacity:1;animation:laser-sweep 1.15s cubic-bezier(.4,0,.2,1) infinite}
body.is-loading .demo::before{animation:radar-pulse 1.2s ease-out infinite}
@keyframes laser-sweep{0%{background-position:120% 0}100%{background-position:-80% 0}}
@keyframes radar-pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.65)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
@keyframes shimmer-sweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes hud-spin{to{transform:rotate(360deg)}}
@keyframes hud-spin-rev{to{transform:rotate(-360deg)}}
@keyframes hud-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes modal-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.sk-line{display:block;height:14px;border-radius:6px;background:linear-gradient(90deg,var(--soft) 25%,color-mix(in srgb,var(--accent) 16%,var(--soft)) 50%,var(--soft) 75%);background-size:200% 100%;animation:shimmer-sweep 1.5s infinite linear}
.sk-line.lg{height:24px;width:55%;margin:6px 0}
.sk-line.sm{height:10px;width:72%}
.hud-loader-wrap{grid-column:1/-1;position:relative;display:grid;gap:14px}
.hud-stage{display:flex;align-items:center;justify-content:center;gap:18px;padding:22px 20px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:12px;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--green) 10%,transparent),transparent 70%),var(--glass);backdrop-filter:blur(12px);box-shadow:var(--panel-shadow)}
.hud-rings{position:relative;width:46px;height:46px;flex-shrink:0;display:grid;place-items:center}
.hud-rings::before,.hud-rings::after{content:"";position:absolute;inset:0;border-radius:50%;border:2.5px solid transparent;border-top-color:var(--green);border-right-color:color-mix(in srgb,var(--green) 35%,transparent);animation:hud-spin .95s cubic-bezier(.45,.05,.55,.95) infinite}
.hud-rings::after{inset:7px;border-top-color:transparent;border-bottom-color:var(--accent);border-left-color:color-mix(in srgb,var(--accent) 40%,transparent);animation:hud-spin-rev 1.35s linear infinite}
.hud-core{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:radar-pulse 1.3s infinite}
.hud-copy b{display:block;font-size:14px;color:var(--ink);letter-spacing:.02em}
.hud-copy small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.sk-card{padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--glass);display:grid;gap:12px}
#items>.card,#items>.devops-gateway-strip,#items>.app-group-panel,#items>.topo-board,#items>.route-group-panel,#items>.settings-grid,#items>.settings-panel,#items>.trash-panel{animation:hud-rise .28s cubic-bezier(.16,1,.3,1) both}
dialog[open]{animation:modal-pop .22s cubic-bezier(.16,1,.3,1)}
.card{transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.live-chart{width:100%;height:auto;color:var(--muted);background:var(--glass);border:1px solid var(--line);border-radius:7px;padding:8px}.chart-legend{display:flex;gap:15px;font-size:12px;margin:10px 0}