:root{--bg:#f4f6f8;--surface:#ffffff;--surface-2:#f7f9fb;--surface-3:#eef2f4;--ink:#111827;--muted:#667085;--line:#e6eaee;--line-strong:#d9dee4;--accent:#34c759;--accent-strong:#22b149;--accent-soft:#eaf8ee;--online:#34c759;--warning:#f5a623;--danger:#ef4444;--shadow:0 10px 30px rgba(16,24,40,.06);--inner:inset 0 1px 0 rgba(255,255,255,.8)}
html{color-scheme:light}
body{background:linear-gradient(180deg,#f7f9fb 0,#f3f5f7 100%);color:var(--ink)}
.control-shell{background:var(--bg);grid-template-columns:236px minmax(0,1fr)}
.control-nav{background:#101820;border-right:0;box-shadow:8px 0 30px rgba(16,24,32,.08)}
.nav-brand{color:#fff}.brand-mark{background:linear-gradient(145deg,#55d879,#2bbf5b);color:#fff;box-shadow:none}
.nav-item{color:#9da7b2}.nav-item .nav-icon{background:#19242e;color:#8e99a5}.nav-item:hover,.nav-item.active{background:#1a2530;color:#fff}.nav-item.active .nav-icon{background:#2b6f48;color:#bdf3cb}.nav-icon svg,.node-icon svg,.operation-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}.nav-icon{display:inline-grid;place-items:center}
.nav-status{border-top-color:#26313b}.nav-status strong{color:#f5f7f9}.nav-status small,.nav-account,.text-button{color:#8f99a5}
.control-main{background:transparent;padding:32px clamp(24px,3.5vw,46px) 28px}
.dashboard-head{margin-bottom:20px}.dashboard-head h1{color:#101828;font-size:clamp(30px,3.4vw,42px);letter-spacing:-.045em}.dashboard-head .muted{color:#7a8491;font-size:13px}.eyebrow{color:#2eb85a}.muted{color:var(--muted)}
.live-refresh{background:#fff;border-color:var(--line);color:#667085;box-shadow:0 3px 12px rgba(16,24,40,.04)}.live-refresh.is-live{background:#effaf2;color:#228848;border-color:#d8f0df}.live-refresh-dot{background:#aab2bb}.live-refresh.is-live .live-refresh-dot{background:var(--online);box-shadow:0 0 0 4px rgba(52,199,89,.10)}
.button.secondary,.button.compact{background:#fff;border-color:var(--line);color:#344054;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.metric-grid{gap:14px}.metric-card{min-height:124px;padding:19px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.metric-card span,.metric-card small{color:#7b8490;font-size:12px}.metric-card strong{color:#111827;font-size:30px}.metric-card strong.healthy{color:#27ae60;font-size:21px}
.surface-card{border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow)}.surface-card:not(.task-panel){padding:20px}.card-head h2{color:#182230}.card-head p{color:#7a8491;font-size:12px}.status-chip{background:#eef9f1;border-color:#d8efe0;color:#27864a}
.connection-console{background:#fff!important;border-color:var(--line);box-shadow:var(--shadow)}.connection-health strong{color:#27313c}.connection-health small{color:#7b8490}
.connection-topology{border:1px solid var(--line);background:linear-gradient(180deg,#fbfcfd,#f6f8fa);box-shadow:none}.connection-node{border:1px solid var(--line);background:#fff;box-shadow:0 5px 18px rgba(16,24,40,.04)}.connection-node.active{border-color:#bfe8ca;box-shadow:0 8px 24px rgba(52,199,89,.09)}.connection-node.warning{border-color:#f1d493;background:#fffaf0}.connection-node:not(.active):not(.warning){border-color:#ead7d7}
.node-icon{border:1px solid var(--line);background:#f2f5f7;color:#475467;box-shadow:none;display:grid;place-items:center}.node-icon svg{width:20px;height:20px}.wordpress-node{background:#eef3f7;color:#344054}.connector-node,.gateway-node{background:#ecf8ef;color:#25894b}.chatgpt-node{background:#eef1f4;color:#344054}
.node-copy>span{color:#98a2b3}.node-copy strong{color:#1d2939}.node-copy small{color:#7b8490}.node-status{background:#b5bdc6}.node-status.online{background:var(--online);box-shadow:0 0 0 4px rgba(52,199,89,.10)}
.connection-track{background:#dde3e8}.connection-link.active .connection-track{background:linear-gradient(90deg,#cfeeda,#65d685,#cfeeda);box-shadow:none}.connection-link.active .connection-packet{background:#2eb85a;box-shadow:0 0 0 4px rgba(46,184,90,.10)}
.connection-facts{display:none}
.status-dot{background:#b6bdc5}.status-dot.online{background:var(--online);box-shadow:0 0 0 4px rgba(52,199,89,.09)}.status-dot.warning{background:var(--warning);box-shadow:0 0 0 4px rgba(245,166,35,.10)}.status-dot.offline{background:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,.08)}
.site-card{border:1px solid var(--line);background:#fbfcfd}.site-logo{background:#eef2f5;color:#344054}.site-title strong{color:#1d2939}.site-title small{color:#7b8490}.connection-pill.online{background:#edf9f1;color:#24854a}.connection-pill.warning{background:#fff7e8;color:#a46800}.connection-pill.offline{background:#fff0f0;color:#c53636}.site-meta span{border-color:#e6eaee;color:#667085;background:#fff}.mini-button{background:#fff;border-color:#dfe4e8;color:#475467}.mini-button:hover{background:#f8fafb;border-color:#cfd6dc}.mini-button.danger{color:#d33f3f}
.operation-icon,.compact-icon{background:#eef2f5;color:#475467}.operation-icon{display:grid;place-items:center}.operation-state.verified,.task-state.verified{background:#edf9f1;color:#27864a}.operation-state.failed,.task-state.failed{background:#fff0f0;color:#c73b3b}.operation-state.pending,.task-state.pending{background:#fff7e8;color:#a46800}
.compact-item{border-top-color:var(--line)}.compact-item strong{color:#27313c}.compact-item small{color:#7b8490}.task-panel-head{border-bottom-color:var(--line);color:#182230}.task-toggle:hover{background:#fafbfc}.task-count{background:#f6f8fa;border-color:var(--line);color:#475467}.chevron{color:#98a2b3}.timeline-line{background:#e4e8ec}.timeline-dot{background:#c4cbd2}.task-item.verified .timeline-dot{background:#34c759}.task-item.failed .timeline-dot{background:#ef4444}.task-item.pending .timeline-dot{background:#f5a623}.task-card{background:#fbfcfd;border-color:var(--line)}
.security-row{border-color:var(--line)}.security-row span{color:#7a8491}.security-row strong{color:#344054}.side-note,.side-empty,.empty-state{color:#7b8490}
.loading{background:#f5f7f9;color:#667085}.spinner{border-color:#d8dee4;border-top-color:#34c759}
@media(max-width:1100px){.control-shell{grid-template-columns:84px minmax(0,1fr)}.nav-brand span:last-child,.nav-item:not(.active){font-size:0}.nav-item{justify-content:center}.nav-item .nav-icon{font-size:initial}.nav-status div,.nav-account span{display:none}}
@media(max-width:820px){.control-shell{display:block}.control-nav{position:static;height:auto;display:flex;flex-direction:row;align-items:center;gap:10px;padding:12px 14px}.nav-list{display:flex;overflow-x:auto}.nav-status,.nav-account{display:none}.control-main{padding:22px 16px}.metric-grid{grid-template-columns:1fr 1fr}.connection-topology{grid-template-columns:1fr}.connection-link{height:26px;width:2px;justify-self:center}.connection-track{top:0;bottom:0;left:0;right:auto;width:2px;height:auto}.dashboard-grid{grid-template-columns:1fr}}