/* Shared semantic colors keep every screen and dialog in the selected theme. */
:root, :root[data-theme=midnight] {
  --bg:#101319; --surface:#171c23; --raised:#202733; --text:#e2e8f0;
  --muted:#9aa9ba; --line:#303947; --accent:#82b4ff; --danger:#ff9b9b;
  --heading:#f1f5fb; --input:#11171e; --panel-head:#1b222c;
  --active:#24364e; --active-border:#45678e; --nav:#b7c2d0;
  --success:#85ddba; --success-bg:#173d30; --success-line:#32634e;
  --warning:#f3cd8c; --warning-bg:#382b1c; --warning-line:#6d5030;
  --danger-bg:#3b2026; --danger-line:#79404b; --button-text:#101a28;
  --log:#c2d4cb; --radius:7px; --cpu:#76d6a2; --memory:#7cb6ff; --disk:#c691f4;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root[data-theme=pixel] {
  --bg:#080b27; --surface:#0d1438; --raised:#172552; --text:#eff0ff;
  --muted:#b1bce5; --line:#426bba; --accent:#76e6ff; --danger:#ff97b2;
  --heading:#86eaff; --input:#090e28; --panel-head:#111f4c;
  --active:#253ba0; --active-border:#80c8ff; --nav:#ede5ff;
  --success:#59ff9b; --success-bg:#113c32; --success-line:#46a983;
  --warning:#ffe192; --warning-bg:#443824; --warning-line:#b59855;
  --danger-bg:#441b3b; --danger-line:#b66b9b; --button-text:#061332;
  --log:#9fe6ff; --radius:0px; --cpu:#5afa9e; --memory:#5bdaff; --disk:#f7a4ee;
  font-family:"Lucida Console",ui-monospace,monospace;
}
:root[data-theme=sakura] {
  --bg:#211b34; --surface:#2d2444ed; --raised:#3d3057; --text:#f4eafa;
  --muted:#c8b7d9; --line:#69527f; --accent:#f5aed5; --danger:#ffb1c6;
  --heading:#fff0fc; --input:#21192f; --panel-head:#392c51;
  --active:#e99cc9; --active-border:#ffd0eb; --nav:#e2d7f0;
  --success:#a3e4ce; --success-bg:#24463f; --success-line:#558879;
  --warning:#f6d8a8; --warning-bg:#4c3942; --warning-line:#9b7373;
  --danger-bg:#502d47; --danger-line:#b8799a; --button-text:#35213f;
  --log:#edd3f4; --radius:9px; --cpu:#f7a2cb; --memory:#95c5ff; --disk:#c9a4ff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root[data-theme=matrix] {
  --bg:#020903; --surface:#040e06; --raised:#081d0e; --text:#9cf9b2;
  --muted:#75bd86; --line:#276d39; --accent:#80ff9e; --danger:#d2ffd8;
  --heading:#8cffaa; --input:#010703; --panel-head:#07170b;
  --active:#092b13; --active-border:#78ef94; --nav:#94e6a7;
  --success:#80ff9e; --success-bg:#082712; --success-line:#397e48;
  --warning:#c9f7ce; --warning-bg:#16271a; --warning-line:#83b289;
  --danger-bg:#122419; --danger-line:#a1d3ad; --button-text:#021607;
  --log:#8aefa3; --radius:0px; --cpu:#80ff9e; --memory:#80ff9e; --disk:#80ff9e;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root { color:var(--text); background:var(--bg); }
::selection { background:var(--active); color:var(--heading); }
* { scrollbar-color:var(--line) transparent; }
h1, h2 { color:var(--heading); }
.nav-button { color:var(--nav); border-radius:var(--radius); }
.nav-button[aria-current=page], .mobile-more.current-section { color:var(--accent); background:var(--active); border-color:var(--active-border); }
.slash { color:var(--muted); }
.header-connection.connected .status-dot { background:var(--success); box-shadow:none; }
.panel { border-radius:var(--radius); }
.panel-heading, .form-footer { background:var(--panel-head); }
.pill { color:var(--muted); }
.pill.online { color:var(--success); background:var(--success-bg); border-color:var(--success-line); }
.pill.offline { color:var(--warning); background:var(--warning-bg); border-color:var(--warning-line); }
input, select, textarea { background-color:var(--input); color:var(--text); border-color:var(--line); border-radius:var(--radius); }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.8; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent); }
summary { color:var(--nav); }
button.primary { color:var(--button-text); border-radius:var(--radius); }
button.primary:hover { background:color-mix(in srgb,var(--accent) 80%,white); border-color:var(--accent); }
button.primary.danger { color:var(--danger); background:var(--danger-bg); border-color:var(--danger-line); }
button.primary.danger:hover { background:color-mix(in srgb,var(--danger-bg) 80%,var(--danger)); }
.quiet { color:var(--nav); background:var(--raised); border-color:var(--line); border-radius:var(--radius); }
.quiet:hover:not(:disabled) { color:var(--heading); background:var(--active); border-color:var(--active-border); }
.json-button[aria-expanded=true] { color:var(--accent); background:var(--active); border-color:var(--active-border); }
.results pre { color:var(--log); }
.results [role=status]:not(:empty) { color:var(--success); background:var(--success-bg); }
th { background:var(--input); color:var(--muted); }
th, td { border-color:var(--line); }
td { color:var(--text); }
tbody tr:hover { background:var(--raised); }
.help-dialog, .operation-dialog { border-color:var(--active-border); border-radius:var(--radius); }
.help-dialog::backdrop, .operation-dialog::backdrop { background:#02040bbf; }
.delete-deployment-dialog .delete-warning { color:var(--danger); background:var(--danger-bg); border-color:var(--danger-line); }
.metric > span { color:var(--nav); }
.gauge-track { stroke:var(--line); }
.host-gauge strong { color:var(--heading); }
.host-gauge-card:nth-child(1) { --gauge-color:var(--cpu); }
.host-gauge-card:nth-child(2) { --gauge-color:var(--memory); }
.host-gauge-card:nth-child(3) { --gauge-color:var(--disk); }
.host-gauge { color:var(--gauge-color); }
.gauge-fill { stroke:var(--gauge-color); }
.gauge-warning .gauge-fill { stroke:var(--warning); }
.gauge-critical .gauge-fill { stroke:var(--danger); }
.process-details dd { color:var(--text); }
.monitor-logs { background:var(--input); color:var(--log); }
.theme-select { width:112px; min-height:30px; padding-top:5px; padding-bottom:5px; font-size:10px; }
[data-theme=midnight] .panel { background:linear-gradient(145deg,#1b2129,var(--surface)); box-shadow:0 2px 8px #0002; }
[data-theme=midnight] .brand-mark { color:var(--text); }
[data-theme=midnight] .nav-button[aria-current=page] { color:var(--heading); background:#282f3a; border-color:#363f4c; }
[data-theme=midnight] .host-gauge-card { border-top-color:var(--gauge-color); }
[data-theme=pixel] .panel { border-width:2px; box-shadow:3px 3px 0 #030619,inset 0 0 0 1px #162861; }
[data-theme=pixel] .sidebar { border-right:2px solid var(--accent); background:linear-gradient(#101333,#070a20); }
[data-theme=pixel] .topbar { border-bottom:2px solid var(--accent); }
[data-theme=pixel] .brand, [data-theme=pixel] h1, [data-theme=pixel] h2 { text-transform:uppercase; letter-spacing:.5px; text-shadow:2px 2px #071129; }
[data-theme=pixel] .nav-icon { color:#ffe193; }
[data-theme=pixel] .nav-group { padding-top:10px; border-top:1px dashed #9fafe1; }
[data-theme=pixel] .nav-button[aria-current=page] { box-shadow:inset 3px 0 #ffe193,2px 2px #04061b; }
[data-theme=pixel] .monitoring-heading { padding:18px; min-height:132px; border:2px solid var(--line); background:linear-gradient(90deg,#0b133af5 20%,#0b133a99 70%),url('/theme-pixel.svg') center/cover; box-shadow:3px 3px #030619; }
[data-theme=pixel] .monitoring-heading .monitor-status { color:var(--success); }
[data-theme=pixel] .quiet, [data-theme=pixel] button.primary { box-shadow:2px 2px #02051b; }
[data-theme=pixel] .host-gauge-card { border-color:var(--gauge-color); }
[data-theme=pixel] .host-gauge { filter:drop-shadow(2px 2px #040924); }
[data-theme=sakura] .content-scroll { background:linear-gradient(#211b3499,#211b34ed 55%),url('/theme-sakura.svg') top right/100% auto no-repeat; }
[data-theme=sakura] .sidebar { background:linear-gradient(160deg,#342849,#221c37); }
[data-theme=sakura] .brand-mark { font-size:0; letter-spacing:0; }
[data-theme=sakura] .brand-mark::before { content:'✿'; color:var(--accent); font-size:25px; }
[data-theme=sakura] .nav-button[aria-current=page], [data-theme=sakura] .mobile-more.current-section { color:#35203e; }
[data-theme=sakura] .monitoring-heading { min-height:132px; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(90deg,#241d39ed 10%,#2a224966 80%),url('/theme-sakura.svg') center/cover; }
[data-theme=sakura] .panel { box-shadow:0 5px 22px #0e082033; backdrop-filter:blur(8px); }
[data-theme=sakura] .host-gauge-card { border-color:color-mix(in srgb,var(--gauge-color) 60%,var(--line)); }
[data-theme=sakura] .brand { font-weight:500; }
[data-theme=matrix] .topbar, [data-theme=matrix] .sidebar { border-color:var(--accent); }
[data-theme=matrix] .nav-group { padding-top:10px; border-top:1px dashed var(--line); }
[data-theme=matrix] h1, [data-theme=matrix] h2 { text-transform:uppercase; font-weight:500; }
[data-theme=matrix] .brand, [data-theme=matrix] h1 { text-shadow:0 0 12px #80ff9e26; }
[data-theme=matrix] .monitoring-heading { padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:repeating-linear-gradient(0deg,transparent,transparent 3px,#80ff9e04 4px); }
[data-theme=matrix] .panel { border-color:#398b4d; }
[data-theme=matrix] .panel-heading { background:transparent; }
[data-theme=matrix] .nav-button[aria-current=page] { box-shadow:inset 2px 0 var(--accent); }
[data-theme=matrix] .monitor-logs { text-shadow:0 0 5px #80ff9e18; }
[data-theme=matrix] .panel, [data-theme=matrix] .badge, [data-theme=matrix] .quiet { box-shadow:inset 0 0 0 1px #80ff9e0b,0 0 12px #80ff9e08; }
[data-theme=matrix] .status-dot { width:10px; height:10px; border-radius:0; background:transparent !important; box-shadow:none !important; background-image:url('/matrix-pulse.png') !important; background-size:80px 10px !important; animation:matrix-pulse .9s steps(8) infinite; }
[data-theme=matrix] #session-loading { display:flex; align-items:center; gap:10px; }
[data-theme=matrix] #session-loading::before { content:''; width:30px; height:30px; flex:none; background:url('/matrix-spinner.png') 0 0 / 240px 30px; animation:matrix-spinner .8s steps(8) infinite; }
[data-theme=matrix] .metric-grid .metric:first-child { position:relative; padding-right:60px; }
[data-theme=matrix] .metric-grid .metric:first-child::after { content:''; position:absolute; right:12px; top:24px; width:40px; height:34px; background:url('/matrix-server.png') 0 0 / 320px 34px; animation:matrix-server 1.6s steps(8) infinite; }
[data-theme=matrix] .metric-grid .metric:nth-child(2)::after, [data-theme=matrix] .metric-grid .metric:nth-child(3)::after { content:''; display:block; width:44px; height:40px; margin-top:auto; background:url('/matrix-data.png') 0 0 / 352px 40px; animation:matrix-data 1.4s steps(8) infinite; opacity:.7; }
[data-theme=matrix] .sparkline { position:relative; z-index:1; }
[data-theme=matrix] .sparkline:empty { width:72px; height:28px; background:url('/matrix-chart.png') 0 0 / 576px 28px; animation:matrix-chart 1.5s steps(8) infinite; }
[data-theme=matrix] .pill.online { text-shadow:0 0 8px #80ff9e99; box-shadow:0 0 8px #80ff9e30; }
[data-theme=matrix] .pill.offline { color:#ff8c80; border-color:#8f3f36; background:#25110d; }
[data-theme=matrix] .icon-button.matrix-control-start svg, [data-theme=matrix] .icon-button.matrix-control-stop svg, [data-theme=matrix] .icon-button.matrix-control-restart svg, [data-theme=matrix] #pm2-refresh svg, [data-theme=matrix] #pm2-log-refresh svg { display:none; }
[data-theme=matrix] .icon-button.matrix-control-start::before, [data-theme=matrix] .icon-button.matrix-control-stop::before, [data-theme=matrix] .icon-button.matrix-control-restart::before, [data-theme=matrix] #pm2-refresh::before, [data-theme=matrix] #pm2-log-refresh::before { content:''; display:block; width:24px; height:24px; background-size:96px 24px; animation:matrix-control .85s steps(4) infinite; }
[data-theme=matrix] .matrix-control-start::before { background-image:url('/matrix-play.png'); }
[data-theme=matrix] .matrix-control-stop::before { background-image:url('/matrix-stop.png'); }
[data-theme=matrix] .matrix-control-restart::before, [data-theme=matrix] #pm2-refresh::before, [data-theme=matrix] #pm2-log-refresh::before { background-image:url('/matrix-refresh.png'); }
[data-theme=matrix] .quiet:hover:not(:disabled), [data-theme=matrix] .primary:hover:not(:disabled) { text-shadow:0 0 10px #80ff9e; box-shadow:0 0 12px #80ff9e55,inset 0 0 10px #80ff9e1c; }
@keyframes matrix-spinner { to { background-position-x:-240px; } }
@keyframes matrix-pulse { to { background-position-x:-80px; } }
@keyframes matrix-server { to { background-position-x:-320px; } }
@keyframes matrix-data { to { background-position-x:-352px; } }
@keyframes matrix-chart { to { background-position-x:-576px; } }
@keyframes matrix-control { to { background-position-x:-96px; } }
@media(prefers-reduced-motion:reduce) { [data-theme=matrix] .status-dot, [data-theme=matrix] #session-loading::before, [data-theme=matrix] .metric-grid .metric::after, [data-theme=matrix] .sparkline:empty, [data-theme=matrix] .icon-button::before { animation:none !important; } }
@media(max-width:650px) {
  .header-actions { display:grid; grid-template-columns:auto auto; gap:3px 8px; align-items:center; }
  .theme-select { grid-column:1; grid-row:1 / 3; width:99px; font-size:9px; }
  .header-connection { grid-column:2; grid-row:1; justify-self:end; }
  .header-actions #disconnect { grid-column:2; grid-row:2; justify-self:end; }
  [data-theme=pixel] .monitoring-heading, [data-theme=sakura] .monitoring-heading { padding:14px; min-height:120px; }
  [data-theme=sakura] .content-scroll { background-size:auto 300px; }
  [data-theme=pixel] .sidebar { border-right:0; border-top:2px solid var(--accent); }
  [data-theme=matrix] .sidebar { border-right:0; }
}
@media(prefers-reduced-transparency:reduce) { [data-theme=sakura] .panel { background:#2d2444; backdrop-filter:none; } }