.shell {
 --glass-panel: rgba(249, 253, 254, .88);
 --glass-panel-strong: rgba(252, 254, 255, .96);
 --glass-edge: rgba(255, 255, 255, .98);
 --glass-rim: rgba(69, 116, 136, .18);
 --glass-depth: rgba(39, 82, 101, .16);
 position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; overflow: hidden;
 background:
 radial-gradient(740px 420px at 30% -12%, rgba(255,255,255,.96), transparent 72%),
 radial-gradient(620px 440px at 78% 18%, rgba(117,203,211,.10), transparent 72%);
}
html.dark .shell {
 --glass-panel: rgba(16, 24, 35, .86);
 --glass-panel-strong: rgba(19, 28, 40, .95);
 --glass-edge: rgba(157, 194, 211, .14);
 --glass-rim: rgba(155, 190, 207, .17);
 --glass-depth: rgba(0, 0, 0, .38);
}
.topbar {
 flex: none; display: flex; align-items: center; gap: 12px;
 height: 52px; padding: 0 16px;
 background: linear-gradient(180deg, rgba(var(--glass-rgb), .94), rgba(var(--glass-rgb), .76));
 border-bottom: 1px solid rgba(64, 105, 122, .15); backdrop-filter: blur(18px) saturate(1.12); z-index: 30;
 box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 8px 28px -24px rgba(29,73,91,.65);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand .mark {
 width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
 color: #fff; background: linear-gradient(145deg, var(--accent-grad-a), var(--accent-grad-b));
 border: 1px solid rgba(4, 91, 98, .48);
 box-shadow:
 inset 0 1px 0 rgba(255,255,255,.42),
 inset 0 -2px 4px rgba(1,58,65,.22),
 0 1px 1px rgba(255,255,255,.72),
 0 8px 18px -10px rgba(var(--accent-rgb),.76);
}
.brand .n { font-weight: 640; letter-spacing: -.02em; font-size: 14px; line-height: 1.1; white-space: nowrap; }
.brand .n small { display: block; font-size: 10px; color: var(--text-2); font-weight: 400; font-family: var(--mono); letter-spacing: 0; }
.topbar .spacer { flex: 1; }
.sum-wrap { display: flex; align-items: center; gap: 14px; margin-right: 4px; }
.sum { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.sum b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 620; }
.sum span { font-size: 11px; color: var(--text-2); }
.seg {
 display: inline-flex; padding: 3px; gap: 3px; flex: none;
 border: 1px solid var(--glass-rim); border-radius: 11px;
 background: linear-gradient(180deg, rgba(224,235,239,.88), rgba(243,248,250,.82));
 box-shadow: inset 0 1px 3px rgba(31,71,88,.10), 0 1px 0 rgba(255,255,255,.95);
}
html.dark .seg { background: linear-gradient(180deg, var(--surface-0), var(--surface-2)); }
.seg button {
 border: 0; background: transparent; color: var(--text-2); height: 26px; padding: 0 12px;
 border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 560; font-family: var(--sans);
 transition: background .16s, color .16s;
}
.seg button:hover { color: var(--text-1); }
.seg button.on {
 color: #fff; background: linear-gradient(145deg, var(--accent-grad-a), var(--accent-grad-b));
 box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 3px 8px rgba(var(--accent-rgb),.28);
}
html.dark .seg button.on { color: #03161B; }
.seg button:disabled { opacity: .55; cursor: not-allowed; }
.ui-scale {
 display: inline-flex; align-items: center; gap: 6px; flex: none;
 height: 28px; padding: 0 8px 0 10px;
 border: 1px solid var(--glass-rim); border-radius: 9px;
 background: linear-gradient(180deg, rgba(224,235,239,.72), rgba(243,248,250,.66));
 box-shadow: inset 0 1px 2px rgba(31,71,88,.08), 0 1px 0 rgba(255,255,255,.9);
 user-select: none;
}
html.dark .ui-scale {
 background: linear-gradient(180deg, var(--surface-0), var(--surface-2));
}
.ui-scale-lab {
 font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
 color: var(--text-2); font-weight: 620; white-space: nowrap;
}
.ui-scale input[type="range"] {
 width: 88px; height: 4px; margin: 0; padding: 0;
 accent-color: var(--accent, #087F88); cursor: pointer;
}
.ui-scale-val {
 min-width: 38px; text-align: right;
 font-size: 11.5px; font-variant-numeric: tabular-nums;
 color: var(--text-1); font-weight: 560;
}
html[data-density="compact"] .ui-scale {
 height: 22px; padding: 0 6px 0 8px; gap: 5px; border-radius: 7px;
}
html[data-density="compact"] .ui-scale-lab { font-size: 9.5px; }
html[data-density="compact"] .ui-scale input[type="range"] { width: 72px; }
html[data-density="compact"] .ui-scale-val { font-size: 10.5px; min-width: 34px; }
.content {
 flex: 1; min-width: 0; min-height: 0; overflow: hidden;
 width: 100%; padding: 10px 12px;
 display: flex; flex-direction: column; gap: 10px;
}
.workspace {
 flex: 1; min-height: 0;
 display: flex; align-items: stretch; gap: 0;
}
.main-pane {
 flex: 1 1 auto; min-width: 0; min-height: 0;
 display: flex; flex-direction: column; gap: 10px;
}
.shell .card {
 border-color: var(--glass-edge);
 background: linear-gradient(180deg, var(--glass-panel-strong), var(--glass-panel));
 box-shadow:
 0 2px 5px rgba(29,67,84,.10),
 0 18px 42px -31px rgba(28,70,89,.54),
 inset 0 0 0 1px var(--glass-rim),
 inset 0 2px 0 rgba(255,255,255,.62);
 backdrop-filter: blur(18px) saturate(1.12);
}
.shell .card::before {
 inset: 3px;
 border-color: rgba(72,111,128,.055);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.66);
}
.shell .card::after {
 content: "";
 position: absolute; z-index: 3; pointer-events: none;
 top: 1px; left: 14px; right: 14px; height: 1px;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,.98) 18%, rgba(255,255,255,.64) 78%, transparent);
}
html.dark .shell .card::after { opacity: .18; }
.toolbar {
 flex: none;
 display: flex; flex-direction: column;
 background:
 linear-gradient(112deg, rgba(255,255,255,.72), transparent 42%),
 linear-gradient(180deg, var(--glass-panel-strong), var(--glass-panel));
}
.tb-row {
 display: flex; align-items: center; gap: 10px;
 flex-wrap: nowrap; 
 padding: 6px 12px;
 min-width: 0; height: 40px; 
 overflow: hidden; 
}
.tb-row + .tb-row { border-top: 1px solid var(--border); }
.tb-r1 { gap: 10px; }
.tb-r2 { gap: 16px; height: 34px; padding-top: 5px; padding-bottom: 5px; }
.tb-r3 { gap: 8px; height: 34px; padding-top: 5px; padding-bottom: 5px; }
.tb-r4 { gap: 8px; height: 34px; padding-top: 5px; padding-bottom: 5px; }
.f { display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 0; }
.f > label {
 font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
 color: var(--text-2); font-weight: 600; white-space: nowrap; flex: none;
}
.f.f-veh select { width: 88px; }
.f.f-vid select { width: 88px; }
.f.f-map { flex: 1 1 auto; min-width: 0; max-width: 280px; }
.f.f-map select { flex: 1 1 auto; min-width: 0; width: 100%; }
.f.fgrow { flex: 1 1 240px; }
.f.fgrow select { flex: 1; min-width: 0; }
.inp, select.inp {
 font-family: var(--sans); font-size: 12.5px; color: var(--text-1);
 background: linear-gradient(180deg, rgba(246,250,252,.94), rgba(231,240,244,.82));
 border: 1px solid var(--glass-rim); border-radius: 8px;
 padding: 4px 8px; min-height: 30px;
 box-shadow: inset 0 1px 2px rgba(36,74,91,.08), 0 1px 0 rgba(255,255,255,.92);
 transition: border-color .16s, box-shadow .16s, background .16s;
}
html.dark .inp, html.dark select.inp { background: linear-gradient(180deg, var(--surface-1), var(--surface-2)); }
.inp.mono { font-family: var(--mono); font-size: 12px; }
.inp:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.inp:disabled { opacity: .55; cursor: not-allowed; }
.check { display: flex; align-items: center; gap: 7px; cursor: pointer; min-height: 30px; white-space: nowrap;
 font-size: 12.5px; font-family: var(--sans); font-weight: 500; color: var(--text-1); flex: none; }
.check input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.check .off-note { font-size: 11px; color: var(--text-3); font-weight: 400; }
.chip {
 display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
 border-radius: 7px; font-size: 11px; font-family: var(--mono);
 background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(237,244,247,.76));
 border: 1px solid rgba(70,111,129,.14); color: var(--text-2);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 1px 2px rgba(32,67,82,.05);
 max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: none;
}
html.dark .chip { background: linear-gradient(180deg, var(--surface-1), var(--surface-2)); }
.chip b { color: var(--text-1); font-weight: 560; }
.chip.ok::before, .chip.bad::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chip.ok::before { background: var(--st-online); }
.chip.bad::before { background: var(--st-alarm); }
.chip.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.chip.chip-map { max-width: 180px; }
.chip.chip-map b {
 overflow: hidden; text-overflow: ellipsis;
}
.chip.path {
 flex: 1 1 auto; min-width: 0; max-width: none; width: 100%;
}
.chip.path b {
 font-weight: 500; color: var(--text-3);
 overflow: hidden; text-overflow: ellipsis;
}
.btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 6px;
 height: 32px; padding: 0 13px; border-radius: 10px; cursor: pointer;
 font-size: 12.5px; font-weight: 560; font-family: var(--sans); white-space: nowrap; user-select: none;
 border: 1px solid var(--glass-rim);
 background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(232,240,244,.88)); color: var(--text-1);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 1px 2px rgba(25,62,79,.10);
 transition: transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium), border-color .2s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: inset 0 1px 0 #fff, 0 4px 9px -5px rgba(28,75,92,.42); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: inset 0 1px 3px rgba(25,62,79,.14); }
html.dark .btn { background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; border-color: var(--border-strong); }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 8px; }
.btn.icon { padding: 0; width: 32px; }
.btn.sm.icon { width: 26px; }
.btn.primary { color: #fff; border-color: var(--accent);
 background: linear-gradient(145deg, var(--accent-grad-a), var(--accent-grad-b));
 box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 4px rgba(0,65,72,.18), 0 5px 12px -7px rgba(var(--accent-rgb),.82); }
html.dark .btn.primary { color: #03161B; }
.btn.danger {
 color: var(--danger);
 border-color: color-mix(in srgb, var(--danger) 34%, transparent);
 background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,237,239,.86));
}
html.dark .btn.danger { background: color-mix(in srgb, var(--danger) 8%, var(--surface-1)); }
.btn.danger:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface-1)); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text-1); border-color: transparent; }
.spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.mods-card {
 flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column;
 container-type: inline-size; 
 container-name: modscard;
 background:
 linear-gradient(112deg, rgba(255,255,255,.66), transparent 38%),
 linear-gradient(180deg, var(--glass-panel-strong), var(--glass-panel));
}
.mods-card .card-title {
 flex: none; height: 38px; padding: 0 14px; gap: 10px;
 justify-content: flex-start; align-items: center; flex-wrap: nowrap;
 background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(230,240,244,.18));
}
.card-title .title-text {
 flex: 1 1 auto; min-width: 0;
 display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 10px;
 overflow: hidden;
}
.card-title .title-acts {
 flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
}
.card-title .tt { flex: none; white-space: nowrap; }
.card-title .sub {
 min-width: 0; flex: 0 1 auto;
 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-title .sum-wrap { flex: none; }
.card-title .btn { flex: none; }
.mods-body {
 flex: 1 1 auto; min-height: 0; min-width: 0;
 display: flex; align-items: stretch;
}
.mods-scroll {
 flex: 1 1 auto; min-width: 0; min-height: 0;
 overflow: auto;
}
.mods-scroll.is-grabbing { cursor: grabbing; user-select: none; }
.mods-scroll.is-grabbing * { cursor: grabbing; user-select: none; }
.mods-ops {
 flex: 0 0 auto;
 width: 302px;
 display: flex; flex-direction: column;
 min-height: 0;
 background: var(--glass-panel);
 border-left: 1px solid var(--border);
 box-shadow: -6px 0 12px -10px rgba(25, 62, 79, .28);
}
html.dark .mods-ops { background: var(--surface-1); }
.ops-head {
 flex: none; height: 28px;
 display: flex; align-items: center;
 color: var(--text-2); font: 540 10px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
 background: rgba(244,249,251,.96);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 var(--border);
}
html.dark .ops-head { background: rgba(17,24,36,.96); }
.ops-head .col-lvl,
.ops-head .col-acts {
 display: flex; align-items: center; height: 100%;
 padding: 0 10px; box-sizing: border-box;
}
.ops-head .col-lvl { width: 82px; flex: none; }
.ops-head .col-acts { width: 220px; flex: none; }
.ops-clip { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ops-track { will-change: transform; }
.ops-grp {
 height: 23px;
 background: linear-gradient(90deg, rgba(var(--accent-rgb),.075), rgba(231,240,244,.58));
 border-bottom: 1px solid var(--border);
}
html.dark .ops-grp { background: linear-gradient(90deg, rgba(var(--accent-rgb),.10), var(--surface-2)); }
.ops-row {
 height: 31px; box-sizing: border-box;
 display: flex; align-items: center;
 border-bottom: 1px solid var(--border);
}
.ops-row .col-lvl {
 width: 82px; flex: none; padding: 0 10px; box-sizing: border-box;
 display: flex; align-items: center;
}
.ops-row .col-acts {
 width: 220px; flex: none; padding: 0 10px; box-sizing: border-box;
 display: flex; align-items: center; justify-content: flex-end;
}
.ops-row.off { color: var(--text-2); }
.ops-row.dis { color: var(--text-3); }
.ops-row.exited-warn { background: color-mix(in srgb, var(--warning) 10%, transparent); }
html.dark .ops-row.exited-warn { background: color-mix(in srgb, var(--warning) 14%, var(--surface-1)); }
.ops-row.param-on { background: rgba(var(--accent-rgb), .04); }
.ops-param-spacer { flex: none; border-bottom: 1px solid var(--border); }
table.mods {
 width: max-content; min-width: max(100%, 640px);
 border-collapse: separate; border-spacing: 0;
 table-layout: auto;
}
table.mods thead th {
 position: sticky; top: 0; z-index: 2;
 height: 28px; padding: 0 10px; text-align: left; white-space: nowrap;
 box-sizing: border-box;
 color: var(--text-2); font: 540 10px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
 background: rgba(244,249,251,.94);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 var(--border);
}
html.dark table.mods thead th { background: rgba(17,24,36,.96); }
table.mods td {
 height: 31px; padding: 1px 10px; box-sizing: border-box;
 border-bottom: 1px solid var(--border); font-size: 12.5px; white-space: nowrap;
}
table.mods tr:last-child td { border-bottom: 0; }
table.mods tbody tr:hover td { background: rgba(var(--accent-rgb), .035); }
table.mods tbody tr.row-jump { cursor: pointer; }
table.mods tbody tr.row-jump:hover td { background: rgba(var(--accent-rgb), .06); }
table.mods tr.grp td {
 height: 23px;
 background: linear-gradient(90deg, rgba(var(--accent-rgb),.075), rgba(231,240,244,.58)) !important;
 color: var(--accent); font: 620 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
}
html.dark table.mods tr.grp td { background: linear-gradient(90deg, rgba(var(--accent-rgb),.10), var(--surface-2)) !important; }
table.mods tr.off td { color: var(--text-2); }
table.mods tr.dis td { color: var(--text-3); }
td.right, th.right { text-align: right; }
.mod-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mod-name b { font-weight: 560; color: var(--text-1); }
.mod-name small { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
tr.dis .mod-name b { color: var(--text-3); }
.stat-cell { display: inline-flex; align-items: center; gap: 7px; }
.stat-cell .txt { font-size: 12px; }
.txt-on { color: var(--success); }
.txt-off { color: var(--text-3); }
.txt-busy { color: var(--st-pending); }
.txt-exited { color: var(--warning); font-weight: 600; }
.txt-exited-err { color: var(--danger); font-weight: 600; }
table.mods tr.exited-warn td {
 background: color-mix(in srgb, var(--warning) 10%, transparent);
}
table.mods tr.exited-warn .mod-name b { color: var(--warning); }
html.dark table.mods tr.exited-warn td {
 background: color-mix(in srgb, var(--warning) 14%, var(--surface-1));
}
.cpu-cell { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; width: 100%; }
.cpu-cell .bar { width: 52px; }
.cpu-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; width: 44px; text-align: right; }
.cpu-ok { color: var(--success); }
.cpu-mid { color: var(--warning); }
.cpu-hot { color: var(--danger); }
select.lvl {
 font-family: var(--mono); font-size: 11.5px; color: var(--text-1);
 background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(231,240,244,.82));
 border: 1px solid var(--glass-rim); border-radius: 7px;
 box-shadow: inset 0 1px 1px rgba(37,74,91,.06);
 padding: 2px 5px; min-height: 24px; cursor: pointer;
}
html.dark select.lvl { background: linear-gradient(180deg, var(--surface-1), var(--surface-2)); }
select.lvl:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
select.lvl.warnish { color: var(--warning); }
select.lvl.errish { color: var(--danger); }
select.lvl:disabled { opacity: .38; cursor: not-allowed; color: var(--text-3); }
.col-name { min-width: 88px; }
.col-name .mod-name { max-width: 100%; overflow: hidden; }
.col-name .mod-name b {
 display: inline-block; max-width: 100%;
 overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
}
.col-stat { width: 72px; min-width: 72px; }
.col-pid { min-width: 64px; }
.col-up { min-width: 72px; }
.col-thr { min-width: 44px; }
.col-mem { min-width: 56px; }
.col-cpu { min-width: 110px; }
@container modscard (max-width: 1040px) {
 .mods-card .card-title { gap: 8px; padding: 0 12px; }
 .card-title .title-text { gap: 6px 8px; }
 .card-title .title-acts { gap: 6px; }
 .sum-wrap { gap: 10px; margin-right: 0; }
 table.mods thead th,
 table.mods td { padding-left: 7px; padding-right: 7px; }
 .ops-head .col-lvl,
 .ops-row .col-lvl,
 .ops-head .col-acts,
 .ops-row .col-acts { padding-left: 7px; padding-right: 7px; }
 .row-acts { gap: 3px; }
}
@container modscard (max-width: 920px) {
 .mods-card .card-title { gap: 6px; padding: 0 10px; }
 .card-title .title-text { gap: 4px 6px; }
 .card-title .title-acts { gap: 5px; }
 .sum-wrap { gap: 8px; }
 table.mods thead th,
 table.mods td { padding-left: 5px; padding-right: 5px; }
 .ops-head .col-lvl,
 .ops-row .col-lvl,
 .ops-head .col-acts,
 .ops-row .col-acts { padding-left: 5px; padding-right: 5px; }
 .cpu-cell { gap: 5px; }
 .cpu-cell .bar { width: 40px; }
 .cpu-num { width: 40px; font-size: 11.5px; }
 .row-acts {
 gap: 2px;
 grid-template-columns: 60px 24px 24px 24px 24px;
 }
 .row-acts .act-main { width: 60px; min-width: 60px; padding: 0 4px; }
 .row-acts .btn.sm.icon { width: 24px; }
 .mods-ops { width: 280px; }
 .ops-head .col-lvl, .ops-row .col-lvl { width: 76px; }
 .ops-head .col-acts, .ops-row .col-acts { width: 204px; }
 select.lvl { padding: 2px 3px; }
}
@container modscard (max-width: 720px) {
 .card-title .sum-wrap { display: none; }
 .mods-ops { width: 268px; }
 .ops-head .col-lvl, .ops-row .col-lvl { width: 72px; }
 .ops-head .col-acts, .ops-row .col-acts { width: 196px; }
 .row-acts { grid-template-columns: 56px 22px 22px 22px 22px; }
 .row-acts .act-main { width: 56px; min-width: 56px; }
 .row-acts .btn.sm.icon { width: 22px; }
}
@container modscard (max-width: 560px) {
 .card-title .sub { display: none; }
}
.col-params { min-width: 0; }
.param-row { display: none; }
tr.param-on td { background: rgba(var(--accent-rgb), .04); }
tr.param-expand td {
 padding: 0 12px 10px !important;
 background: rgba(var(--accent-rgb), .03);
 border-bottom: 1px solid var(--border);
}
.param-panel {
 margin: 2px 0 4px;
 padding: 10px 12px;
 border: 1px solid var(--glass-rim);
 border-radius: 12px;
 background: linear-gradient(180deg, var(--glass-panel-strong), var(--glass-panel));
 box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.param-panel-hd {
 display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.param-panel-hd .t { font-weight: 620; font-size: 12.5px; }
.param-panel-hd .sub { font-size: 11px; color: var(--warning); }
.param-panel-hd .spacer { flex: 1; }
.param-panel-body {
 display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
}
.param-field {
 display: inline-flex; align-items: center; gap: 6px; margin: 0;
 font-size: 12px; color: var(--text-2);
}
.param-field .plab { min-width: 2.5em; white-space: nowrap; }
select.param-sel { min-width: 132px; height: 28px; padding: 0 8px; font-size: 12px; }
input.param-inp {
 width: 108px; min-width: 88px; height: 28px; padding: 0 8px; font-size: 12px;
 box-sizing: border-box;
}
input.param-inp:disabled { opacity: .38; cursor: not-allowed; color: var(--text-3); }
.row-acts {
 display: inline-grid;
 grid-template-columns: 64px 26px 26px 26px 26px;
 gap: 5px;
 align-items: center;
 justify-items: stretch;
 flex: none;
 width: max-content;
}
.row-acts .act-main {
 width: 64px;
 min-width: 64px;
 padding: 0 6px;
 justify-content: center;
 box-sizing: border-box;
 white-space: nowrap;
}
.row-acts .btn.icon.on {
 color: var(--accent);
 background: rgba(var(--accent-rgb), .12);
}
.row-acts .btn[disabled],
.row-acts .btn[disabled]:hover {
 opacity: .38;
 color: var(--text-3);
 background: transparent;
 border-color: transparent;
 cursor: not-allowed;
 transform: none;
 box-shadow: none;
}
.dock {
 flex: none; z-index: 25; width: min(480px, 36vw); max-width: 70vw; min-width: 0;
 display: flex; align-items: stretch; margin: 0 0 0 8px;
 background:
 linear-gradient(112deg, rgba(255,255,255,.72), transparent 40%),
 linear-gradient(180deg, var(--glass-panel-strong), var(--glass-panel));
 border: 1px solid var(--glass-edge); border-radius: 14px;
 box-shadow:
 0 2px 5px rgba(29,67,84,.10),
 0 20px 45px -31px rgba(28,70,89,.58),
 inset 0 0 0 1px var(--glass-rim),
 inset 0 2px 0 rgba(255,255,255,.62);
 backdrop-filter: blur(18px) saturate(1.12);
}
.dock-main {
 flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
 border-radius: 13px;
}
.dock .dbar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 6px 10px 4px; }
.dock .dbar .t { font-weight: 580; font-size: 12.5px; flex: none; }
.dock .dbar .spacer { flex: 1; }
.term-tabs {
 flex: none; display: flex; align-items: center; flex-wrap: wrap;
 gap: 6px; min-width: 0; overflow: visible; padding: 2px 10px 7px;
}
.term-tab {
 display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 7px 0 10px;
 border-radius: 8px; flex: none; cursor: pointer; user-select: none;
 font-size: 12px; font-weight: 540; color: var(--text-2);
 background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(229,239,243,.78));
 border: 1px solid var(--glass-rim);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
 transition: background .16s, color .16s, border-color .16s;
}
html.dark .term-tab { background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); }
.term-tab:hover { color: var(--text-1); border-color: var(--border-strong); }
.term-tab.on { color: var(--accent); background: var(--accent-dim); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.term-tab:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.term-tab .lab { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; line-height: 1.1; }
.term-tab .lc {
 display: inline-flex; align-items: center; gap: 5px;
 font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.term-tab .lc .sv.ok { color: #0B7B54; }
.term-tab .lc .sv.warn { color: #E6B422; }
.term-tab .lc .sv.err { color: #C62828; }
html.dark .term-tab .lc .sv.ok { color: #57C7A0; }
html.dark .term-tab .lc .sv.warn { color: #FFD08A; }
html.dark .term-tab .lc .sv.err { color: #FF6B74; }
.term-tab .nm { white-space: nowrap; }
.term-tab .x {
 width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center;
 font-size: 13px; line-height: 1; color: var(--text-3);
}
.term-tab .x:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.dock .term {
 flex: 1; min-height: 0;
 background: #0A0C10; color: #C9D6DE; font-family: var(--mono); font-size: 12px; line-height: 18px;
 padding: 10px 12px; margin: 0 7px 7px; overflow: auto; white-space: normal;
 border: 1px solid rgba(49,88,105,.44); border-radius: 8px; cursor: text;
 box-shadow:
 inset 0 1px 8px rgba(0,0,0,.78),
 inset 0 0 0 1px rgba(255,255,255,.025),
 0 1px 0 rgba(255,255,255,.68);
}
.dock .term:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); }
.dock .term-pad { flex: none; pointer-events: none; }
.dock .term-chunk {
 margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
 font: inherit; line-height: 18px; white-space: pre; word-break: normal;
 overflow: visible; min-height: 0;
}
.dock .term.idle { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; cursor: default; }
.dock .term.idle::before {
 content: '暂无终端\A点模块行的「终端」图标查看输出\A启动 / 重启模块时会自动打开对应终端';
 white-space: pre-line; text-align: center; color: #5F7285; font-size: 12px; line-height: 2;
}
.term-search { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 7px 7px; }
.term-search .inp { flex: 1; min-width: 0; min-height: 26px; font-size: 12px; padding: 2px 8px; }
.term-search .cnt {
 flex: none; min-width: 46px; text-align: center;
 font: 500 11px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2);
}
.dock .term mark.tsr {
 background: rgba(255, 203, 90, .22); color: #FFE3A8;
 outline: 1px solid rgba(255, 203, 90, .38); border-radius: 2px;
}
.dock .term mark.tsr.cur { background: #FFC94D; color: #081018; outline-color: #FFC94D; }
.term-exit {
 flex: none; display: flex; align-items: center; gap: 8px;
 margin: 0 7px 7px; padding: 4px 10px; border-radius: 7px;
 font: 500 11.5px/1.5 var(--mono); color: var(--text-2);
 background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(232,240,244,.8));
 border: 1px solid var(--glass-rim);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.term-exit .spacer { flex: 1; }
.term-exit.err {
 color: var(--danger);
 border-color: color-mix(in srgb, var(--danger) 38%, transparent);
 background: linear-gradient(180deg, rgba(255,255,255,.92), color-mix(in srgb, var(--danger) 9%, #fff));
}
html.dark .term-exit { background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); }
html.dark .term-exit.err { background: color-mix(in srgb, var(--danger) 14%, var(--surface-1)); }
.tty-badge {
 flex: none; height: 18px; padding: 0 7px; border-radius: 5px;
 display: inline-flex; align-items: center; font: 500 10.5px/1 var(--mono); letter-spacing: .04em;
}
.tty-badge.ok { color: #0B7B54; background: color-mix(in srgb, var(--st-online) 16%, transparent); }
html.dark .tty-badge.ok { color: var(--st-online); }
.tty-badge.ro { color: var(--text-3); background: var(--surface-2); }
.tty-badge.pause { color: #9A6B00; background: color-mix(in srgb, #FFC94D 22%, transparent); }
html.dark .tty-badge.pause { color: #FFC94D; }
.dock .drag { flex: none; width: 10px; margin-left: -5px; margin-right: -5px; cursor: ew-resize; position: relative; z-index: 3; touch-action: none; }
.dock .drag::after {
 content: ""; position: absolute; top: 50%; left: 1px; width: 7px; height: 56px;
 transform: translateY(-50%); border-radius: 5px;
 border: 1px solid rgba(63,103,120,.28);
 background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(173,199,209,.86), rgba(255,255,255,.9));
 box-shadow: 0 2px 6px rgba(26,65,82,.18), inset 0 0 0 1px rgba(255,255,255,.54);
 transition: border-color .16s, box-shadow .16s;
}
.dock .drag:hover::after, .dock .drag:active::after {
 border-color: var(--accent);
 box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.10), 0 2px 6px rgba(26,65,82,.20);
}
.hl-btn.on { color: var(--accent); background: var(--accent-dim); }
.dock .term .lg-err { color: #FF8C92; }
.dock .term .lg-warn { color: #FFD08A; }
.dock .term .lg-dbg { color: #66788B; }
.dock .term .lg-meta { color: #69B7C4; }
.dock .term .lg-node { color: #7E93A8; }
.dock .term .tk-info { color: #57C7A0; }
.dock .term .tk-warn { color: #FFB84D; font-weight: 600; }
.dock .term .tk-err { color: #FF6B74; font-weight: 600; }
.dock .term .tk-dbg { color: #8B9AAB; }
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px;
 background: rgba(25,45,55,.42); backdrop-filter: blur(2px); }
html.dark .overlay { background: rgba(4,6,10,.6); }
.modal { width: min(860px, 94vw); max-height: 86vh; display: flex; flex-direction: column; border-radius: 18px;
 background: var(--surface-1); border: 1px solid var(--border-highlight); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--border); }
.modal .m-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal .m-head .t { font-weight: 620; font-size: 14px; white-space: nowrap; }
.modal .m-head .sub { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal .m-head .spacer { flex: 1; }
.modal pre {
 margin: 0; flex: 1; min-height: 200px; overflow: auto; padding: 14px 18px;
 background: #0A0C10; color: #C9D6DE; font-family: var(--mono); font-size: 12px; line-height: 1.5;
 white-space: pre; border-radius: 0 0 18px 18px;
}
.modal .m-loading { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 60px 0; color: var(--text-2); font-size: 13px; }
.modal.confirm { width: min(440px, 92vw); }
.modal.confirm .m-body { padding: 18px; font-size: 13px; line-height: 1.7; }
.modal.confirm .m-body .warn { color: var(--warning); font-weight: 560; }
.modal.confirm .m-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 16px; }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; gap: 8px; }
.toast { min-width: 220px; max-width: 400px; padding: 10px 14px; border-radius: 11px;
 background: var(--surface-1); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
 font-size: 13px; animation: toast-in .3s var(--ease-premium) both; }
.toast.ok { border-left: 3px solid var(--success); }
.toast.err { border-left: 3px solid var(--danger); }
.toast.warn { border-left: 3px solid var(--warning); color: var(--warning); }
.toast.info { border-left: 3px solid var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html[data-density="compact"] body {
 font-size: 12px;
 line-height: 18px;
}
html[data-density="compact"] .topbar {
 height: 40px; padding: 0 12px; gap: 8px;
}
html[data-density="compact"] .brand { gap: 8px; }
html[data-density="compact"] .brand .mark { width: 24px; height: 24px; border-radius: 7px; }
html[data-density="compact"] .brand .n { font-size: 12.5px; }
html[data-density="compact"] .brand .n small { font-size: 9px; }
html[data-density="compact"] .sum-wrap { gap: 10px; }
html[data-density="compact"] .sum b { font-size: 13px; }
html[data-density="compact"] .sum span { font-size: 10px; }
html[data-density="compact"] .seg { padding: 2px; gap: 2px; border-radius: 9px; }
html[data-density="compact"] .seg button {
 height: 22px; padding: 0 9px; font-size: 11px; border-radius: 7px;
}
html[data-density="compact"] .content { padding: 8px 10px; gap: 8px; }
html[data-density="compact"] .main-pane { gap: 8px; }
html[data-density="compact"] .tb-row { gap: 8px; padding: 4px 10px; height: 34px; }
html[data-density="compact"] .tb-r1 { gap: 8px; }
html[data-density="compact"] .tb-r2 { height: 28px; padding-top: 3px; padding-bottom: 3px; gap: 12px; }
html[data-density="compact"] .tb-r3,
html[data-density="compact"] .tb-r4 { height: 28px; padding-top: 3px; padding-bottom: 3px; gap: 6px; }
html[data-density="compact"] .f.f-veh select,
html[data-density="compact"] .f.f-vid select { width: 78px; }
html[data-density="compact"] .f.f-map { max-width: 180px; }
html[data-density="compact"] .f { gap: 5px; }
html[data-density="compact"] .f > label { font-size: 9.5px; }
html[data-density="compact"] .inp,
html[data-density="compact"] select.inp {
 font-size: 11.5px; min-height: 26px; padding: 2px 7px; border-radius: 7px;
}
html[data-density="compact"] .inp.mono { font-size: 11px; }
html[data-density="compact"] .check {
 min-height: 26px; font-size: 11.5px; gap: 5px;
}
html[data-density="compact"] .check input { width: 13px; height: 13px; }
html[data-density="compact"] .check .off-note { font-size: 10px; }
html[data-density="compact"] .chip {
 height: 18px; padding: 0 7px; gap: 4px; font-size: 10px; border-radius: 6px;
}
html[data-density="compact"] .chip.ok::before,
html[data-density="compact"] .chip.bad::before { width: 6px; height: 6px; }
html[data-density="compact"] .btn {
 height: 26px; padding: 0 10px; font-size: 11.5px; border-radius: 8px; gap: 4px;
}
html[data-density="compact"] .btn.sm { height: 22px; padding: 0 7px; font-size: 11px; border-radius: 7px; }
html[data-density="compact"] .btn.icon { width: 26px; }
html[data-density="compact"] .btn.sm.icon { width: 22px; }
html[data-density="compact"] .spin { width: 11px; height: 11px; }
html[data-density="compact"] .mods-card .card-title {
 height: 32px; padding: 0 10px; gap: 8px;
}
html[data-density="compact"] .card-title .title-text { gap: 6px 8px; }
html[data-density="compact"] .card-title .title-acts { gap: 6px; }
html[data-density="compact"] .card-title .tt { font-size: 12.5px; }
html[data-density="compact"] .card-title .sub { font-size: 10.5px; }
html[data-density="compact"] table.mods thead th {
 height: 24px; padding: 0 8px; font-size: 9.5px;
}
html[data-density="compact"] table.mods td {
 height: 26px; padding: 0 8px; font-size: 11.5px;
}
html[data-density="compact"] table.mods tr.grp td {
 height: 20px; font-size: 9.5px;
}
html[data-density="compact"] .ops-head { height: 24px; }
html[data-density="compact"] .ops-grp { height: 20px; }
html[data-density="compact"] .ops-row { height: 26px; }
html[data-density="compact"] .mods-ops { width: 268px; }
html[data-density="compact"] .ops-head .col-lvl,
html[data-density="compact"] .ops-row .col-lvl { width: 72px; padding: 0 8px; }
html[data-density="compact"] .ops-head .col-acts,
html[data-density="compact"] .ops-row .col-acts { width: 196px; padding: 0 8px; }
html[data-density="compact"] .mod-name { gap: 6px; }
html[data-density="compact"] .mod-name small { font-size: 9.5px; }
html[data-density="compact"] .stat-cell { gap: 5px; }
html[data-density="compact"] .stat-cell .txt { font-size: 11px; }
html[data-density="compact"] .cpu-cell { gap: 6px; }
html[data-density="compact"] .cpu-cell .bar { width: 44px; }
html[data-density="compact"] .cpu-num { font-size: 11px; width: 40px; }
html[data-density="compact"] select.lvl {
 font-size: 10.5px; min-height: 20px; padding: 1px 4px; border-radius: 6px;
}
html[data-density="compact"] .row-acts {
 gap: 2px;
 grid-template-columns: 56px 22px 22px 22px 22px;
}
html[data-density="compact"] .row-acts .act-main { width: 56px; min-width: 56px; }
html[data-density="compact"] .param-panel-hd .t { font-size: 11.5px; }
html[data-density="compact"] .param-panel-hd .sub { font-size: 10px; }
html[data-density="compact"] select.param-sel {
 min-width: 112px; height: 24px; padding: 0 6px; font-size: 11px;
}
html[data-density="compact"] input.param-inp {
 width: 96px; min-width: 80px; height: 24px; padding: 0 6px; font-size: 11px;
}
html[data-density="compact"] .dock {
 width: min(420px, 34vw); margin-left: 6px; border-radius: 12px;
}
html[data-density="compact"] .dock-main { border-radius: 11px; }
html[data-density="compact"] .dock .dbar { padding: 4px 8px 2px; gap: 3px 6px; }
html[data-density="compact"] .dock .dbar .t { font-size: 11.5px; }
html[data-density="compact"] .term-tabs { gap: 4px; padding: 1px 8px 5px; flex-wrap: wrap; }
html[data-density="compact"] .term-tab {
 height: 28px; padding: 0 5px 0 8px; gap: 5px;
 font-size: 11px; border-radius: 7px;
}
html[data-density="compact"] .term-tab .lab { gap: 1px; }
html[data-density="compact"] .term-tab .lc {
 gap: 4px; font-size: 10.5px;
}
html[data-density="compact"] .term-tab .x {
 width: 14px; height: 14px; font-size: 11px; border-radius: 4px;
}
html[data-density="compact"] .dock .term {
 font-size: 11px; line-height: 16px; padding: 8px 10px; margin: 0 5px 5px;
}
html[data-density="compact"] .dock .term-chunk { line-height: 16px; }
html[data-density="compact"] .dock .term.idle::before { font-size: 11px; line-height: 1.8; }
html[data-density="compact"] .term-search { gap: 5px; padding: 0 5px 5px; }
html[data-density="compact"] .term-search .inp { min-height: 22px; font-size: 11px; padding: 1px 6px; }
html[data-density="compact"] .term-search .cnt { font-size: 10px; min-width: 40px; }
html[data-density="compact"] .term-exit {
 margin: 0 5px 5px; padding: 3px 8px; font-size: 10.5px; border-radius: 6px;
}
html[data-density="compact"] .tty-badge { font-size: 9.5px; }
html[data-density="compact"] .topbar-icon-btn { width: 28px; height: 28px; border-radius: 7px; }
html[data-density="compact"] .toast { font-size: 12px; }
html[data-density="compact"] .modal .m-head { padding: 10px 14px; gap: 8px; }
html[data-density="compact"] .modal .m-head .t { font-size: 13px; }
html[data-density="compact"] .modal .m-head .sub { font-size: 10.5px; }
html[data-density="compact"] .modal .m-body pre { font-size: 11px; }
html[data-density="compact"] .modal.confirm .m-body { padding: 14px; font-size: 12px; }
@media (max-width: 900px) {
 .shell { height: auto; min-height: 100%; overflow: visible; }
 .shell.has-dock { padding-bottom: calc(min(240px, 45vh) + 100px); }
 .content { overflow: visible; padding: 12px; }
 .workspace { flex-direction: column; }
 .main-pane { flex: none; }
 .mods-card { flex: none; display: block; }
 .mods-body { max-height: min(70vh, 640px); }
 .topbar { flex-wrap: wrap; height: auto; padding: 10px 12px; row-gap: 8px; }
 .mods-card .card-title { height: auto; min-height: 38px; padding: 6px 12px; }
 .tb-row { padding: 8px 12px; gap: 10px; }
 .f.fgrow { flex: 1 1 100%; }
 .dock {
 position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
 width: auto !important; max-width: none;
 margin: 0; border-radius: 14px 14px 0 0;
 border-left: 0; border-top: 1px solid var(--border);
 box-shadow: 0 -10px 30px -18px rgba(22, 58, 76, .35);
 }
 .dock.no-tabs { display: none; }
 .dock .drag { display: none; }
 .dock .term { flex: none; height: min(240px, 45vh); }
}
@media (max-width: 640px) {
 .brand .n small { display: none; }
}