.matheo-systems-app {
    --ms-orange: #f27632;
    --ms-orange-bright: #ff934d;
    --ms-red: #e14b3f;
    --ms-green: #43c88a;
    --ms-bg: #0d1118;
    --ms-panel: #151b24;
    --ms-panel-raised: #1b222d;
    --ms-line: rgba(214, 224, 237, .12);
    --ms-ink: #f4f6f8;
    --ms-muted: #aeb8c5;
    width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-columns: 216px minmax(0, 1fr); overflow: hidden; color: var(--ms-ink); background: var(--ms-bg); user-select: none;
}
.ms-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 18px 11px; border-right: 1px solid var(--ms-line); background: #10151d; }
.ms-brand { display: flex; align-items: center; gap: 11px; padding: 3px 10px 22px; }
.ms-brand > span { position: relative; width: 42px; height: 42px; display: grid; place-items: center; color: var(--ms-orange-bright); border: 1px solid rgba(242, 118, 50, .45); border-radius: 10px; background: rgba(242, 118, 50, .08); }
.ms-brand > span .icon { width: 27px; height: 27px; }.ms-brand > span i { position: absolute; font-size: 11px; font-style: normal; font-weight: 800; }
.ms-brand > div { display: grid; line-height: 1; }.ms-brand strong { font-size: 14px; letter-spacing: .05em; }.ms-brand small { margin-top: 4px; color: var(--ms-orange); font-size: 11px; letter-spacing: .16em; }
.ms-sidebar nav { display: grid; gap: 3px; }
.ms-sidebar nav button { min-height: 41px; display: flex; align-items: center; gap: 11px; padding: 0 10px; border: 0; border-radius: 8px; color: var(--ms-muted); text-align: left; background: transparent; font-size: 12px; }
.ms-sidebar nav button:hover { color: var(--ms-ink); background: rgba(255, 255, 255, .045); }
.ms-sidebar nav button.is-current { color: #fff; background: linear-gradient(90deg, rgba(242, 118, 50, .22), rgba(242, 118, 50, .06)); box-shadow: inset 2px 0 var(--ms-orange); }
.ms-sidebar nav .icon { width: 17px; height: 17px; }.ms-sidebar nav button.is-current .icon { color: var(--ms-orange-bright); }
.ms-firmware { display: grid; gap: 4px; margin-top: auto; padding: 14px 10px 2px; border-top: 1px solid var(--ms-line); }
.ms-firmware span { color: var(--ms-orange); font-size: 11px; font-weight: 700; letter-spacing: .08em; }.ms-firmware strong { font-size: 11px; }.ms-firmware small { color: var(--ms-muted); font-size: 11px; }
.ms-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: 54px minmax(0, 1fr); overflow: hidden; }
.ms-toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 18px 0 22px; border-bottom: 1px solid var(--ms-line); background: #121821; }
.ms-toolbar > div { min-width: 0; display: flex; align-items: center; gap: 9px; }.ms-toolbar > div:first-child { overflow: hidden; }
.ms-toolbar-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--ms-orange); box-shadow: 0 0 12px rgba(242, 118, 50, .55); }
.ms-toolbar strong { font-size: 11px; letter-spacing: .04em; white-space: nowrap; }.ms-toolbar small, .ms-toolbar span { color: var(--ms-muted); font-size: 11px; white-space: nowrap; }.ms-toolbar > div:last-child > strong { color: var(--ms-orange-bright); }
.ms-toolbar button { min-height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid rgba(242, 118, 50, .36); border-radius: 7px; color: #fff; background: rgba(242, 118, 50, .12); font-size: 11px; }.ms-toolbar button:hover { background: rgba(242, 118, 50, .22); }.ms-toolbar button .icon { width: 15px; }
.ms-content { min-height: 0; overflow: auto; background: radial-gradient(circle at 75% 4%, rgba(242, 118, 50, .07), transparent 25%), var(--ms-bg); }
.ms-overview, .ms-detail-view { min-height: 100%; padding: clamp(20px, 3vw, 32px); }
.ms-hero { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.ms-hero > div:first-child { min-width: 0; display: flex; align-items: center; gap: 18px; }
.ms-chip-visual { position: relative; width: 76px; height: 76px; flex: 0 0 auto; display: grid; place-items: center; color: var(--ms-orange-bright); border: 1px solid rgba(242, 118, 50, .42); border-radius: 14px; background: linear-gradient(145deg, rgba(242, 118, 50, .16), rgba(242, 118, 50, .03)); box-shadow: 0 14px 32px rgba(0, 0, 0, .22); }
.ms-chip-visual .icon { width: 50px; height: 50px; }.ms-chip-visual i { position: absolute; font-size: 13px; font-style: normal; font-weight: 800; }
.ms-hero p { margin: 0 0 3px; color: var(--ms-orange); font-size: 11px; font-weight: 700; letter-spacing: .06em; }.ms-hero h1 { margin: 0 0 5px; font-size: clamp(22px, 3vw, 31px); line-height: 1.15; letter-spacing: -.03em; }.ms-hero h1 strong { color: var(--ms-orange-bright); font-weight: 600; }.ms-hero > div:first-child > div > span { color: var(--ms-muted); font-size: 11px; }
.ms-survival-state { min-width: 218px; display: grid; align-content: center; gap: 4px; padding: 14px 18px; border: 1px solid rgba(225, 75, 63, .34); border-radius: 10px; background: rgba(225, 75, 63, .075); }
.ms-survival-state span { color: var(--ms-muted); font-size: 11px; }.ms-survival-state strong { color: #ff7569; font-size: 18px; letter-spacing: .04em; }.ms-survival-state small { color: #e2b0ac; font-size: 11px; }
.ms-performance-strip { display: grid; grid-template-columns: 130px minmax(160px, 1fr) minmax(220px, 1.4fr); align-items: center; gap: 16px; padding: 13px 16px; border-block: 1px solid var(--ms-line); background: rgba(255, 255, 255, .018); }
.ms-performance-strip > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }.ms-performance-strip span { color: var(--ms-muted); font-size: 11px; }.ms-performance-strip strong { color: var(--ms-orange-bright); font-size: 18px; }.ms-performance-strip p { margin: 0; color: var(--ms-muted); font-size: 11px; line-height: 1.45; }
.ms-segment-bar { height: 8px; overflow: hidden; border-radius: 3px; background: repeating-linear-gradient(90deg, #262d37 0 8px, transparent 8px 11px); }.ms-segment-bar > i { width: 100%; height: 100%; display: block; transform: scaleX(.08); transform-origin: left; background: repeating-linear-gradient(90deg, var(--ms-orange) 0 8px, transparent 8px 11px); }
.ms-topology { display: grid; grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 18px; }
.ms-hardware-panel, .ms-module, .ms-battery-bank, .ms-charge-profile, .ms-network-adapter, .ms-firewall { border: 1px solid var(--ms-line); border-radius: 10px; background: var(--ms-panel); }
.ms-hardware-panel { min-width: 0; padding: 16px; }.ms-hardware-panel > header, .ms-module > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.ms-hardware-panel header span, .ms-module header span { color: var(--ms-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; }.ms-hardware-panel header i { padding: 3px 5px; border-radius: 4px; color: var(--ms-muted); background: rgba(255, 255, 255, .05); font-size: 11px; font-style: normal; }
.ms-hardware-panel--active { border-color: rgba(242, 118, 50, .38); box-shadow: inset 0 1px rgba(242, 118, 50, .16); }.ms-hardware-panel--active header i { color: #ffb080; background: rgba(242, 118, 50, .14); }.ms-hardware-panel--parked { opacity: .77; }
.ms-hardware-panel h2 { margin: 12px 0 4px; font-size: 15px; }.ms-hardware-panel p { margin: 0 0 14px; color: var(--ms-muted); font-size: 11px; }
.ms-spec-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ms-line); font-size: 11px; }.ms-spec-row span { color: var(--ms-muted); }.ms-hardware-panel footer { margin: 10px -16px -16px; padding: 10px 16px; color: var(--ms-muted); border-top: 1px solid var(--ms-line); background: rgba(0, 0, 0, .12); font-size: 11px; }
.ms-route { display: grid; place-items: center; color: var(--ms-orange); }.ms-route i { width: 100%; height: 1px; background: rgba(242, 118, 50, .38); }.ms-route .icon { width: 18px; margin-top: -9px; background: var(--ms-bg); }
.ms-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; border-block: 1px solid var(--ms-line); }
.ms-metric { min-width: 0; display: grid; gap: 4px; padding: 13px 15px; border-right: 1px solid var(--ms-line); }.ms-metric:last-child { border-right: 0; }.ms-metric span { color: var(--ms-muted); font-size: 11px; }.ms-metric strong { overflow-wrap: anywhere; font-size: 15px; }.ms-metric small { color: var(--ms-muted); font-size: 11px; line-height: 1.35; }
.ms-view-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--ms-line); }.ms-view-heading h1 { margin: 0 0 5px; font-size: 25px; letter-spacing: -.03em; }.ms-view-heading p { margin: 0; color: var(--ms-muted); font-size: 11px; }.ms-live-badge, .ms-alert-badge, .ms-diagnostic-code { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 6px; color: #8ee1b9; background: rgba(67, 200, 138, .1); font-size: 11px; font-weight: 700; }.ms-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--ms-green); }.ms-alert-badge { color: #ff9188; background: rgba(225, 75, 63, .12); }.ms-diagnostic-code { color: var(--ms-orange-bright); background: rgba(242, 118, 50, .12); }
.ms-cpu-layout, .ms-memory-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.ms-module { min-width: 0; padding: 18px; }.ms-module > header > strong { color: var(--ms-orange-bright); font-size: 18px; }.ms-module header h2 { margin: 5px 0 0; font-size: 16px; }.ms-module h3 { margin: 18px 0 8px; color: var(--ms-muted); font-size: 11px; letter-spacing: .04em; }.ms-module footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px -18px -18px; padding: 11px 18px; border-top: 1px solid var(--ms-line); background: rgba(0, 0, 0, .12); font-size: 11px; }.ms-module footer span { color: var(--ms-muted); }.ms-module footer.is-active strong, .ms-online { color: var(--ms-green) !important; }.ms-offline { color: #e08a80 !important; }
.ms-frequency { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; margin-top: 18px; padding: 12px; border: 1px solid var(--ms-line); border-radius: 7px; background: rgba(0, 0, 0, .14); }.ms-frequency span { color: var(--ms-muted); font-size: 11px; }.ms-frequency strong { font-size: 13px; }.ms-frequency i { grid-column: 1 / -1; height: 3px; margin: 5px 0; background: linear-gradient(90deg, #54606f, var(--ms-orange)); }
.ms-check-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.ms-check-list li { display: flex; align-items: center; gap: 8px; color: var(--ms-muted); font-size: 11px; }.ms-check-list .icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ms-green); }
.ms-module-copy { max-width: 56ch; margin: 24px 0; color: var(--ms-muted); font-size: 11px; line-height: 1.55; }.ms-memory-usage { display: grid; grid-template-columns: 1fr auto; gap: 8px; color: var(--ms-muted); font-size: 11px; }.ms-memory-usage > div { grid-column: 1 / -1; height: 7px; overflow: hidden; background: #262d37; }.ms-memory-usage i { width: 100%; height: 100%; display: block; transform: scaleX(.95); transform-origin: left; background: var(--ms-orange); }.ms-disk-speeds { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 18px; }.ms-disk-speeds .ms-metric { padding-left: 0; }
.ms-power-layout, .ms-network-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 14px; }.ms-battery-bank, .ms-charge-profile, .ms-network-adapter, .ms-firewall { padding: 20px; }.ms-battery-title { display: flex; align-items: center; gap: 13px; }.ms-battery-title > span, .ms-adapter-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; color: var(--ms-orange-bright); background: rgba(242, 118, 50, .12); }.ms-battery-title .icon, .ms-adapter-icon .icon { width: 23px; }.ms-battery-title > div { display: grid; gap: 3px; }.ms-battery-title small, .ms-network-adapter small { color: var(--ms-muted); font-size: 11px; }.ms-battery-title strong { font-size: 20px; }.ms-battery-modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 22px 0; }.ms-battery-modules div { min-width: 0; display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(225, 75, 63, .25); border-radius: 7px; background: rgba(225, 75, 63, .05); }.ms-battery-modules span { color: var(--ms-muted); font-size: 11px; }.ms-battery-modules i { height: 22px; border: 1px solid #653a39; background: repeating-linear-gradient(90deg, #402728 0 8px, transparent 8px 11px); }.ms-battery-modules strong { color: #ff7569; font-size: 11px; }.ms-battery-bank footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 13px; border-top: 1px solid var(--ms-line); font-size: 11px; }.ms-battery-bank footer span { color: var(--ms-muted); }
.ms-charge-profile h2, .ms-firewall h2 { margin: 0 0 18px; font-size: 16px; }.ms-charge-chart { position: relative; height: 120px; border-left: 1px solid var(--ms-line); border-bottom: 1px solid var(--ms-line); }.ms-charge-chart i { position: absolute; inset: 16px 10px 0 0; background: linear-gradient(155deg, transparent 48%, var(--ms-orange) 49% 50%, transparent 51%); clip-path: polygon(0 100%, 0 65%, 35% 15%, 100% 0, 100% 3%, 36% 22%, 2% 100%); }.ms-charge-chart b { position: absolute; left: 35%; top: 5px; color: var(--ms-orange-bright); font-size: 11px; }.ms-charge-chart span { position: absolute; bottom: -19px; color: var(--ms-muted); font-size: 11px; }.ms-charge-chart span:last-child { right: 0; }.ms-charge-profile p { margin: 34px 0 14px; color: var(--ms-muted); font-size: 11px; line-height: 1.5; }.ms-charge-profile button, .ms-recommendation button { min-height: 36px; padding: 0 12px; border: 1px solid rgba(242, 118, 50, .42); border-radius: 7px; color: #fff; background: rgba(242, 118, 50, .14); font-size: 11px; }
.ms-network-adapter { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 14px; }.ms-network-adapter h2 { margin: 3px 0; font-size: 16px; }.ms-network-adapter p { margin: 0; color: var(--ms-muted); font-size: 11px; }.ms-network-speed { display: grid; justify-items: end; gap: 3px; }.ms-network-speed span { color: var(--ms-muted); font-size: 11px; }.ms-network-speed strong { color: var(--ms-orange-bright); font-size: 20px; }.ms-network-adapter .ms-segment-bar, .ms-network-adapter footer { grid-column: 1 / -1; width: 100%; }.ms-network-adapter footer { color: var(--ms-muted); font-size: 11px; line-height: 1.5; }.ms-firewall .ms-check-list { margin-bottom: 20px; }.ms-firewall > div { display: grid; gap: 4px; padding-top: 13px; border-top: 1px solid var(--ms-line); }.ms-firewall > div span { color: var(--ms-muted); font-size: 11px; }.ms-firewall > div strong { color: var(--ms-orange-bright); font-size: 11px; }
.ms-process-table { min-width: 620px; }.ms-process-head, .ms-process-row { display: grid; grid-template-columns: minmax(220px, 1fr) 100px minmax(120px, .7fr) 50px; align-items: center; gap: 14px; padding: 0 12px; }.ms-process-head { min-height: 36px; color: var(--ms-muted); border-bottom: 1px solid var(--ms-line); font-size: 11px; }.ms-process-row { min-height: 52px; border-bottom: 1px solid var(--ms-line); font-size: 11px; }.ms-process-row > span:first-child { display: flex; align-items: center; gap: 9px; }.ms-process-row > span:first-child i { width: 7px; height: 7px; border-radius: 50%; background: var(--ms-green); }.ms-process-row > span:nth-child(2) { color: var(--ms-green); }.ms-process-row > div { height: 5px; overflow: hidden; background: #262d37; }.ms-process-row > div i { width: 100%; height: 100%; display: block; transform-origin: left; background: var(--ms-orange); }.ms-process-row[data-state="suspended"] { color: var(--ms-muted); }.ms-process-row[data-state="suspended"] > span:first-child i { background: #697483; }.ms-process-row[data-state="suspended"] > span:nth-child(2) { color: var(--ms-muted); }
.ms-diagnostic-result { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid rgba(67, 200, 138, .3); border-radius: 10px; background: rgba(67, 200, 138, .07); }.ms-diagnostic-result > span { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #10191a; background: var(--ms-green); }.ms-diagnostic-result .icon { width: 25px; }.ms-diagnostic-result h2 { margin: 0 0 4px; font-size: 18px; }.ms-diagnostic-result p { margin: 0; color: #a8d7c2; font-size: 11px; }.ms-diagnostic-copy { max-width: 72ch; padding: 22px 2px; }.ms-diagnostic-copy p { margin: 0 0 10px; color: var(--ms-muted); font-size: 12px; line-height: 1.65; }.ms-diagnostic-performance { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 18px; padding: 16px 18px; border-block: 1px solid var(--ms-line); }.ms-diagnostic-performance > div:first-child { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 9px; }.ms-diagnostic-performance span { color: var(--ms-muted); font-size: 11px; }.ms-diagnostic-performance strong { color: var(--ms-orange-bright); font-size: 24px; }.ms-diagnostic-performance small { grid-column: 1 / -1; color: var(--ms-muted); font-size: 11px; }.ms-recommendation { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 20px; padding: 16px; border: 1px solid rgba(242, 118, 50, .25); border-radius: 10px; background: rgba(242, 118, 50, .055); }.ms-recommendation > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ms-orange-bright); }.ms-recommendation .icon { width: 24px; }.ms-recommendation h2 { margin: 0 0 3px; font-size: 15px; }.ms-recommendation p { margin: 0; color: var(--ms-muted); font-size: 11px; line-height: 1.45; }.ms-disclaimer { margin: 18px 0 0; color: #7f8b99; font-size: 11px; text-align: center; }
.ms-reboot-dialog { width: min(430px, calc(100% - 28px)); padding: 0; border: 1px solid rgba(242, 118, 50, .3); border-radius: 14px; color: var(--ms-ink); background: #151b24; box-shadow: 0 24px 70px rgba(0, 0, 0, .48); }.ms-reboot-dialog::backdrop { background: rgba(3, 5, 9, .66); backdrop-filter: blur(5px); }.ms-reboot-dialog form { display: grid; justify-items: center; padding: 26px; text-align: center; }.ms-dialog-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--ms-orange-bright); background: rgba(242, 118, 50, .12); }.ms-dialog-icon .icon { width: 25px; }.ms-reboot-dialog h2 { margin: 15px 0 6px; font-size: 20px; }.ms-reboot-dialog p { margin: 0 0 17px; color: var(--ms-muted); font-size: 11px; }.ms-reboot-dialog .ms-check-list { width: 100%; padding: 14px; border-block: 1px solid var(--ms-line); text-align: left; }.ms-reboot-dialog form > div:last-child { display: flex; gap: 8px; margin-top: 18px; }.ms-reboot-dialog button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 7px; color: var(--ms-ink); background: #252e3a; }.ms-reboot-dialog button[value="confirm"] { color: #fff; background: var(--ms-orange); }
@container (max-width: 800px) { .matheo-systems-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .ms-sidebar { position: static; z-index: 4; grid-row: 1; width: 100%; display: block; overflow: hidden; padding: 6px 10px; border-right: 0; border-bottom: 1px solid var(--ms-line); } .ms-brand, .ms-firmware, .ms-toolbar { display: none; } .ms-sidebar nav { width: 100%; display: flex; overflow: auto hidden; } .ms-sidebar nav button { min-width: max-content; min-height: 44px; } .ms-main { grid-row: 2; grid-template-rows: minmax(0, 1fr); padding: 0; }.ms-hero { align-items: stretch; flex-direction: column; }.ms-survival-state { min-width: 0; }.ms-overview-grid { grid-template-columns: repeat(2, 1fr); }.ms-overview-grid .ms-metric:nth-child(2) { border-right: 0; }.ms-cpu-layout, .ms-memory-map, .ms-power-layout, .ms-network-layout { grid-template-columns: 1fr; } .ms-charge-profile button, .ms-recommendation button, .ms-reboot-dialog button { min-height: 44px; font-size: 12px; } .ms-content :is(p, small, li, footer), .ms-content .ms-spec-row, .ms-content .ms-view-heading p { font-size: 12px; } }
@container (max-width: 560px) { .ms-toolbar { padding-inline: 12px; }.ms-toolbar > div:first-child small, .ms-toolbar > div:last-child > span, .ms-toolbar > div:last-child > strong { display: none; }.ms-toolbar button { width: 32px; padding: 0; font-size: 0; }.ms-overview, .ms-detail-view { padding: 18px 14px 28px; }.ms-chip-visual { width: 60px; height: 60px; }.ms-chip-visual .icon { width: 41px; }.ms-hero h1 { font-size: 21px; }.ms-performance-strip { grid-template-columns: 1fr; }.ms-topology { grid-template-columns: 1fr; }.ms-route { min-height: 25px; transform: rotate(90deg); }.ms-overview-grid { grid-template-columns: 1fr; }.ms-overview-grid .ms-metric { border-right: 0; border-bottom: 1px solid var(--ms-line); }.ms-battery-modules { grid-template-columns: repeat(2, 1fr); }.ms-network-adapter { grid-template-columns: 38px minmax(0, 1fr); }.ms-network-speed { grid-column: 1 / -1; justify-items: start; }.ms-recommendation { grid-template-columns: 34px minmax(0, 1fr); }.ms-recommendation button { grid-column: 1 / -1; }.ms-diagnostic-performance { grid-template-columns: 1fr; } }