main.nodectl-workspace-active > :not(#mmwx-nodectl-root), [role="main"].nodectl-workspace-active > :not(#mmwx-nodectl-root) { display: none !important; }
#mmwx-nodectl-root, .nodectl-dialog { color: var(--foreground, #20252c); font: inherit; }
#mmwx-nodectl-root { width: 100%; max-width: 1320px; margin: 0 auto; padding: 24px; }
#mmwx-nodectl-root h1 { font-size: 1.65rem; line-height: 1.3; font-weight: 650; margin: 5px 0 10px; }
#mmwx-nodectl-root h2 { font-size: 1.05rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.nodectl-header, .nodectl-card-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.nodectl-header { flex-wrap: wrap; margin-bottom: 18px; }
.nodectl-eyebrow, .nodectl-muted { color: var(--muted-foreground, #657184); font-size: .82rem; line-height: 1.65; overflow-wrap: anywhere; }
.nodectl-eyebrow { letter-spacing: .06em; }
.nodectl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nodectl-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 11px; font-size: .82rem; line-height: 1.4; border: 1px solid var(--border, #d9dee5); border-radius: 7px; background: var(--background, #fff); color: inherit; cursor: pointer; }
.nodectl-button:hover { background: var(--muted, #f1f4f7); }
.nodectl-button:focus-visible, .nodectl-form :focus-visible { outline: 2px solid var(--ring, #39707c); outline-offset: 2px; }
.nodectl-button:disabled { opacity: .5; cursor: wait; }
.nodectl-primary { background: var(--primary, #244b56); color: var(--primary-foreground, #fff); }
.nodectl-primary:hover { opacity: .85; background: var(--primary, #244b56); }
.nodectl-danger, .nodectl-notice[data-error="true"] { color: var(--destructive, #ae3030); }
.nodectl-notice { padding: 12px 14px; margin: 0 0 20px; border: 1px solid var(--border, #d9dee5); border-radius: 7px; font-size: .85rem; line-height: 1.6; }
.nodectl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.nodectl-card { min-width: 0; padding: 18px; border: 1px solid var(--border, #d9dee5); border-radius: 9px; background: var(--card, #fff); }
.nodectl-card > * + * { margin-top: 11px; }
.nodectl-badge { white-space: nowrap; font-size: .72rem; padding: 3px 8px; border: 1px solid var(--border, #d9dee5); border-radius: 5px; }
.nodectl-protocols { border-top: 1px solid var(--border, #d9dee5); padding-top: 10px; }
.nodectl-protocol { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; font-size: .8rem; }
.nodectl-protocol > :first-child { margin-right: auto; overflow-wrap: anywhere; }
.nodectl-empty { padding: 30px 0; color: var(--muted-foreground, #657184); }
.nodectl-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; border: 1px solid var(--border, #d9dee5); border-radius: 10px; background: var(--background, #fff); }
.nodectl-dialog::backdrop { background: rgb(0 0 0 / .45); }
.nodectl-dialog h2 { font-size: 1.2rem; font-weight: 600; margin: 0 0 20px; }
.nodectl-dialog > .nodectl-actions { justify-content: end; margin-top: 18px; }
.nodectl-form { display: grid; gap: 14px; }
.nodectl-form label { display: grid; gap: 6px; font-size: .85rem; }
.nodectl-form input, .nodectl-form select, .nodectl-dialog textarea { display: block; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--border, #d9dee5); border-radius: 6px; background: var(--background, #fff); color: inherit; font: inherit; }
.nodectl-dialog textarea { resize: vertical; margin-bottom: 10px; }
.nodectl-nav-link { display: flex; align-items: center; gap: 8px; padding: 8px; font-size: .9rem; }
.nodectl-top-nav-link { flex-shrink: 0; text-decoration: none; }
.nodectl-dashboard { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 24px; align-items: start; }
.nodectl-management { min-width: 0; }
#mmwx-nodectl-root .nodectl-management-title { margin: 0 0 12px; }
.nodectl-management .nodectl-grid { grid-template-columns: 1fr; gap: 12px; }
.nodectl-traffic-panel { --traffic-surface: #fff; --traffic-soft: #f5f8ff; --traffic-border: #e7eaf3; --traffic-track: #edf0f7; --traffic-text: #24272d; --traffic-muted: #737983; --traffic-up: #1c843f; --traffic-down: #176ce0; --traffic-ratio: #8652cc; min-width: 0; padding: 20px 16px 16px; border: 1px solid var(--traffic-border); border-radius: 18px; background: var(--traffic-surface); color: var(--traffic-text); font-variant-numeric: tabular-nums; }
.nodectl-traffic-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 3px 22px; }
#mmwx-nodectl-root .nodectl-traffic-header h2 { display: flex; align-items: center; flex-shrink: 0; gap: 9px; margin: 0; font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; }
.nodectl-traffic-icon { width: 22px; height: 23px; display: inline-flex; align-items: end; gap: 3px; padding: 3px; border: 1.5px solid #6ea4f5; border-radius: 3px; }
.nodectl-traffic-icon > span { width: 4px; background: #5495ee; border-radius: 1px; }
.nodectl-traffic-filters { display: flex; align-items: center; gap: 7px; min-width: 0; }
.nodectl-traffic-date, .nodectl-traffic-lifetime { min-height: 34px; border: 1px solid var(--traffic-border); border-radius: 9px; font: inherit; font-size: .78rem; color: var(--traffic-text); background: var(--traffic-surface); }
.nodectl-traffic-date { width: 135px; min-width: 0; padding: 4px 6px; color-scheme: light; }
.nodectl-traffic-lifetime { padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.nodectl-traffic-lifetime[aria-pressed="true"] { border-color: #b9d3fd; color: var(--traffic-down); background: var(--traffic-soft); }
.nodectl-traffic-lifetime:hover { border-color: #74a8ff; }
.nodectl-traffic-lifetime:active { transform: translateY(1px); }
.nodectl-traffic-date:focus-visible, .nodectl-traffic-lifetime:focus-visible { outline: 2px solid #5899f3; outline-offset: 3px; }
.nodectl-traffic-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 0 15px; margin-bottom: 12px; border-bottom: 1px solid var(--traffic-border); text-align: center; }
.nodectl-traffic-summary > div { display: grid; gap: 5px; }
.nodectl-traffic-metric-label { font-size: .85rem; color: var(--traffic-muted); }
.nodectl-traffic-summary strong { font-size: .94rem; font-weight: 600; white-space: nowrap; }
.nodectl-traffic-up { color: var(--traffic-up); }
.nodectl-traffic-down { color: var(--traffic-down); }
.nodectl-traffic-ratio { color: var(--traffic-ratio); }
.nodectl-traffic-list { display: grid; gap: 9px; }
.nodectl-traffic-row { min-width: 0; padding: 12px; border: 1px solid var(--traffic-border); border-radius: 15px; }
.nodectl-traffic-row.nodectl-traffic-leading { border-color: #77adff; background: var(--traffic-soft); }
.nodectl-traffic-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 10px; }
.nodectl-traffic-server { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nodectl-traffic-server > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; font-weight: 650; }
.nodectl-traffic-flag { flex-shrink: 0; font-size: 1.12rem; line-height: 1; }
.nodectl-traffic-flag svg { display: block; border: 1px solid rgb(90 100 120 / .12); border-radius: 2px; }
.nodectl-traffic-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #b4bac4; }
.nodectl-traffic-dot[data-state="online"] { background: #36bb5d; }
.nodectl-traffic-dot[data-state="offline"] { background: #df6262; }
.nodectl-traffic-dot[data-state="stale"] { background: #c7952a; }
.nodectl-traffic-total { color: var(--traffic-muted); font-size: .86rem; white-space: nowrap; font-weight: 650; }
.nodectl-traffic-track { height: 7px; border-radius: 4px; overflow: hidden; background: var(--traffic-track); }
.nodectl-traffic-fill { display: flex; height: 100%; overflow: hidden; border-radius: inherit; }
.nodectl-traffic-up-bar { height: 100%; background: #39c35d; }
.nodectl-traffic-down-bar { height: 100%; background: #2589ff; }
.nodectl-traffic-row-footer { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; margin-top: 10px; font-size: .76rem; line-height: 1.5; }
.nodectl-traffic-usage, .nodectl-traffic-rates { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.nodectl-traffic-rates { margin-left: auto; }
.nodectl-traffic-empty { margin: 14px 0; padding: 20px 8px; text-align: center; color: var(--traffic-muted); font-size: .85rem; }
.nodectl-traffic-empty[hidden] { display: none; }
.nodectl-traffic-status, .nodectl-traffic-hint { color: var(--traffic-muted); font-size: .7rem; line-height: 1.65; margin: 13px 3px 0; }
.nodectl-traffic-hint { margin-top: 4px; }
.dark .nodectl-traffic-panel, [data-theme="dark"] .nodectl-traffic-panel { --traffic-surface: #181c25; --traffic-soft: #1b2b41; --traffic-border: #30394a; --traffic-track: #2c3545; --traffic-text: #e6ebf2; --traffic-muted: #a4afbe; --traffic-up: #65d985; --traffic-down: #79b8ff; --traffic-ratio: #bf9bff; }
.dark .nodectl-traffic-date, [data-theme="dark"] .nodectl-traffic-date { color-scheme: dark; }
@media (prefers-reduced-motion: no-preference) { .nodectl-traffic-fill { transition: width .2s ease; } }
@media (max-width: 1050px) { .nodectl-dashboard { grid-template-columns: minmax(0, 1fr); } .nodectl-management .nodectl-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } }
@media (max-width: 480px) { .nodectl-traffic-panel { padding: 17px 12px 13px; border-radius: 16px; } .nodectl-traffic-header { gap: 8px; } #mmwx-nodectl-root .nodectl-traffic-header h2 { font-size: 1rem; gap: 6px; } .nodectl-traffic-icon { width: 19px; height: 21px; } .nodectl-traffic-date { width: 122px; } .nodectl-traffic-lifetime { padding: 4px 7px; } .nodectl-traffic-row { padding: 11px 10px; } .nodectl-traffic-row-footer { font-size: .73rem; } }
@media (max-width: 380px) { .nodectl-traffic-header { flex-wrap: wrap; } .nodectl-traffic-filters { margin-left: auto; } }
@media (max-width: 767px) { .nodectl-top-nav-link .nodectl-nav-label { display: none; } }
@media (max-width: 640px) { #mmwx-nodectl-root { padding: 16px; } .nodectl-header > .nodectl-actions { width: 100%; } .nodectl-grid { grid-template-columns: 1fr; } }