/* Grey scale: every neutral grey of this stylesheet is one variable, named by
   its value (--n33 is #333333). The Contrast option (data-contrast on <html>)
   spreads them away from the page background (#262626): darker surfaces get
   darker, borders, raised surfaces and text lighter. Colours are untouched.
   Surfaces are the exception to the spread: lifting cards towards mid-grey
   washed out colours and made everything look disabled. Instead the page
   (--bg) gets darker with each step while cards (--n23) stay dark and only
   creep up a little, so chrome < page < card still holds; grey buttons
   (--btn) and dropdowns (--dd-*) keep dark fills under bright text.
   +4 and +5 continue the stretch around #262626 (about x1.25, x1.5,
   x1.8, x2.2, x2.7). "Today" keeps every grey as it was. */
:root {
  --n00: #000000;
  --n0a: #0a0a0a;
  --n0b: #0b0b0b;
  --n0d: #0d0d0d;
  --n11: #111111;
  --n14: #141414;
  --n15: #151515;
  --n16: #161616;
  --n18: #181818;
  --n1a: #1a1a1a;
  --n1b: #1b1b1b;
  --n1c: #1c1c1c;
  --n1d: #1d1d1d;
  --n1e: #1e1e1e;
  --n1f: #1f1f1f;
  --n22: #222222;
  --n23: #232323;
  --n26: #262626;
  --n29: #292929;
  --n2a: #2a2a2a;
  --n2b: #2b2b2b;
  --n2c: #2c2c2c;
  --n2d: #2d2d2d;
  --n2e: #2e2e2e;
  --n2f: #2f2f2f;
  --n30: #303030;
  --n33: #333333;
  --n35: #353535;
  --n38: #383838;
  --n3a: #3a3a3a;
  --n3b: #3b3b3b;
  --n3c: #3c3c3c;
  --n3f: #3f3f3f;
  --n44: #444444;
  --n47: #474747;
  --n4a: #4a4a4a;
  --n4d: #4d4d4d;
  --n55: #555555;
  --n57: #575757;
  --n5a: #5a5a5a;
  --n63: #636363;
  --n66: #666666;
  --n6a: #6a6a6a;
  --n6b: #6b6b6b;
  --n6d: #6d6d6d;
  --n77: #777777;
  --n7a: #7a7a7a;
  --n7d: #7d7d7d;
  --n88: #888888;
  --n8a: #8a8a8a;
  --n8d: #8d8d8d;
  --n8f: #8f8f8f;
  --n99: #999999;
  --n9a: #9a9a9a;
  --naa: #aaaaaa;
  --nb5: #b5b5b5;
  --nbb: #bbbbbb;
  --nbd: #bdbdbd;
  --ncc: #cccccc;
  --ncf: #cfcfcf;
  --ndd: #dddddd;
  --ne6: #e6e6e6;
  --ne8: #e8e8e8;
  --ne9: #e9e9e9;
  --nee: #eeeeee;
  --nf0: #f0f0f0;
  --nf1: #f1f1f1;
  --nf4: #f4f4f4;
  --nff: #ffffff;
}
:root[data-contrast="1"] {
  --n00: #000000;
  --n0a: #030303;
  --n0b: #040404;
  --n0d: #070707;
  --n11: #0c0c0c;
  --n14: #101010;
  --n15: #111111;
  --n16: #121212;
  --n18: #141414;
  --n1a: #171717;
  --n1b: #181818;
  --n1c: #1a1a1a;
  --n1d: #1b1b1b;
  --n1e: #1c1c1c;
  --n1f: #1d1d1d;
  --n22: #212121;
  --n23: #292929; /* card surface: stays dark; the page sinks below it instead */
  --n26: #262626;
  --n29: #2a2a2a;
  --n2a: #2b2b2b;
  --n2b: #2c2c2c;
  --n2c: #2e2e2e;
  --n2d: #2f2f2f;
  --n2e: #303030;
  --n2f: #313131;
  --n30: #323232;
  --n33: #383838; /* card borders and dividers */
  --n35: #393939;
  --n38: #3c3c3c;
  --n3a: #3f3f3f;
  --n3b: #404040;
  --n3c: #424242;
  --n3f: #454545;
  --n44: #4c4c4c;
  --n47: #4f4f4f;
  --n4a: #535353;
  --n4d: #575757;
  --n55: #616161;
  --n57: #636363;
  --n5a: #676767;
  --n63: #727272;
  --n66: #767676;
  --n6a: #7b7b7b;
  --n6b: #7c7c7c;
  --n6d: #7f7f7f;
  --n77: #8b8b8b;
  --n7a: #8f8f8f;
  --n7d: #939393;
  --n88: #a0a0a0;
  --n8a: #a3a3a3;
  --n8d: #a7a7a7;
  --n8f: #a9a9a9;
  --n99: #b6b6b6;
  --n9a: #b7b7b7;
  --naa: #cbcbcb;
  --nb5: #d9d9d9;
  --nbb: #e0e0e0;
  --nbd: #e3e3e3;
  --ncc: #f6f6f6;
  --ncf: #f9f9f9;
  --ndd: #ffffff;
  --ne6: #ffffff;
  --ne8: #ffffff;
  --ne9: #ffffff;
  --nee: #ffffff;
  --nf0: #ffffff;
  --nf1: #ffffff;
  --nf4: #ffffff;
  --nff: #ffffff;
  --bg: #222222; /* the page gets darker with each step */
  --dd-bg: #1e1e1e; /* dropdowns: a field a little darker than the card */
  --dd-line: #474747;
  --btn: #444444; /* grey buttons stay dark enough for white text */
  --btn-h: #505050;
  --btn-on: #5e5e5e; /* the selected segment of a grey toggle */
}
:root[data-contrast="2"] {
  --n00: #000000;
  --n0a: #000000;
  --n0b: #000000;
  --n0d: #000000;
  --n11: #060606;
  --n14: #0b0b0b;
  --n15: #0c0c0c;
  --n16: #0e0e0e;
  --n18: #111111;
  --n1a: #141414;
  --n1b: #161616;
  --n1c: #171717;
  --n1d: #181818;
  --n1e: #1a1a1a;
  --n1f: #1c1c1c;
  --n22: #202020;
  --n23: #2a2a2a; /* card surface: stays dark; the page sinks below it instead */
  --n26: #262626;
  --n29: #2b2b2b;
  --n2a: #2c2c2c;
  --n2b: #2e2e2e;
  --n2c: #2f2f2f;
  --n2d: #313131;
  --n2e: #323232;
  --n2f: #343434;
  --n30: #353535;
  --n33: #3c3c3c; /* card borders and dividers */
  --n35: #3d3d3d;
  --n38: #414141;
  --n3a: #444444;
  --n3b: #464646;
  --n3c: #474747;
  --n3f: #4c4c4c;
  --n44: #535353;
  --n47: #585858;
  --n4a: #5c5c5c;
  --n4d: #606060;
  --n55: #6c6c6c;
  --n57: #707070;
  --n5a: #747474;
  --n63: #828282;
  --n66: #868686;
  --n6a: #8c8c8c;
  --n6b: #8e8e8e;
  --n6d: #909090;
  --n77: #a0a0a0;
  --n7a: #a4a4a4;
  --n7d: #a8a8a8;
  --n88: #b9b9b9;
  --n8a: #bcbcbc;
  --n8d: #c1c1c1;
  --n8f: #c4c4c4;
  --n99: #d2d2d2;
  --n9a: #d4d4d4;
  --naa: #ececec;
  --nb5: #fcfcfc;
  --nbb: #ffffff;
  --nbd: #ffffff;
  --ncc: #ffffff;
  --ncf: #ffffff;
  --ndd: #ffffff;
  --ne6: #ffffff;
  --ne8: #ffffff;
  --ne9: #ffffff;
  --nee: #ffffff;
  --nf0: #ffffff;
  --nf1: #ffffff;
  --nf4: #ffffff;
  --nff: #ffffff;
  --bg: #1e1e1e; /* the page gets darker with each step */
  --dd-bg: #1a1a1a; /* dropdowns: a field a little darker than the card */
  --dd-line: #4d4d4d;
  --btn: #464646; /* grey buttons stay dark enough for white text */
  --btn-h: #525252;
  --btn-on: #626262; /* the selected segment of a grey toggle */
}
:root[data-contrast="3"] {
  --n00: #000000;
  --n0a: #000000;
  --n0b: #000000;
  --n0d: #000000;
  --n11: #000000;
  --n14: #060606;
  --n15: #070707;
  --n16: #090909;
  --n18: #0d0d0d;
  --n1a: #101010;
  --n1b: #121212;
  --n1c: #141414;
  --n1d: #161616;
  --n1e: #181818;
  --n1f: #191919;
  --n22: #1f1f1f;
  --n23: #2b2b2b; /* card surface: stays dark; the page sinks below it instead */
  --n26: #262626;
  --n29: #2b2b2b;
  --n2a: #2d2d2d;
  --n2b: #2f2f2f;
  --n2c: #313131;
  --n2d: #333333;
  --n2e: #343434;
  --n2f: #363636;
  --n30: #383838;
  --n33: #404040; /* card borders and dividers */
  --n35: #414141;
  --n38: #464646;
  --n3a: #4a4a4a;
  --n3b: #4c4c4c;
  --n3c: #4e4e4e;
  --n3f: #535353;
  --n44: #5c5c5c;
  --n47: #616161;
  --n4a: #676767;
  --n4d: #6c6c6c;
  --n55: #7b7b7b;
  --n57: #7e7e7e;
  --n5a: #848484;
  --n63: #949494;
  --n66: #999999;
  --n6a: #a0a0a0;
  --n6b: #a2a2a2;
  --n6d: #a6a6a6;
  --n77: #b8b8b8;
  --n7a: #bdbdbd;
  --n7d: #c3c3c3;
  --n88: #d6d6d6;
  --n8a: #dadada;
  --n8d: #dfdfdf;
  --n8f: #e3e3e3;
  --n99: #f5f5f5;
  --n9a: #f7f7f7;
  --naa: #ffffff;
  --nb5: #ffffff;
  --nbb: #ffffff;
  --nbd: #ffffff;
  --ncc: #ffffff;
  --ncf: #ffffff;
  --ndd: #ffffff;
  --ne6: #ffffff;
  --ne8: #ffffff;
  --ne9: #ffffff;
  --nee: #ffffff;
  --nf0: #ffffff;
  --nf1: #ffffff;
  --nf4: #ffffff;
  --nff: #ffffff;
  --bg: #1a1a1a; /* the page gets darker with each step */
  --dd-bg: #161616; /* dropdowns: a field a little darker than the card */
  --dd-line: #545454;
  --btn: #484848; /* grey buttons stay dark enough for white text */
  --btn-h: #545454;
  --btn-on: #666666; /* the selected segment of a grey toggle */
}
:root[data-contrast="4"] {
  --n00: #000000;
  --n0a: #000000;
  --n0b: #000000;
  --n0d: #000000;
  --n11: #000000;
  --n14: #000000;
  --n15: #010101;
  --n16: #030303;
  --n18: #070707;
  --n1a: #0c0c0c;
  --n1b: #0e0e0e;
  --n1c: #101010;
  --n1d: #121212;
  --n1e: #141414;
  --n1f: #171717;
  --n22: #1d1d1d;
  --n23: #2c2c2c; /* card surface: stays dark; the page sinks below it instead */
  --n26: #262626;
  --n29: #2d2d2d;
  --n2a: #2f2f2f;
  --n2b: #313131;
  --n2c: #333333;
  --n2d: #353535;
  --n2e: #383838;
  --n2f: #3a3a3a;
  --n30: #3c3c3c;
  --n33: #444444; /* card borders and dividers */
  --n35: #474747;
  --n38: #4e4e4e;
  --n3a: #525252;
  --n3b: #545454;
  --n3c: #565656;
  --n3f: #5d5d5d;
  --n44: #686868;
  --n47: #6f6f6f;
  --n4a: #757575;
  --n4d: #7c7c7c;
  --n55: #8d8d8d;
  --n57: #929292;
  --n5a: #989898;
  --n63: #acacac;
  --n66: #b3b3b3;
  --n6a: #bcbcbc;
  --n6b: #bebebe;
  --n6d: #c2c2c2;
  --n77: #d8d8d8;
  --n7a: #dfdfdf;
  --n7d: #e5e5e5;
  --n88: #fefefe;
  --n8a: #ffffff;
  --n8d: #ffffff;
  --n8f: #ffffff;
  --n99: #ffffff;
  --n9a: #ffffff;
  --naa: #ffffff;
  --nb5: #ffffff;
  --nbb: #ffffff;
  --nbd: #ffffff;
  --ncc: #ffffff;
  --ncf: #ffffff;
  --ndd: #ffffff;
  --ne6: #ffffff;
  --ne8: #ffffff;
  --ne9: #ffffff;
  --nee: #ffffff;
  --nf0: #ffffff;
  --nf1: #ffffff;
  --nf4: #ffffff;
  --nff: #ffffff;
  --bg: #161616; /* the page gets darker with each step */
  --dd-bg: #131313; /* dropdowns: a field a little darker than the card */
  --dd-line: #5a5a5a;
  --btn: #4a4a4a; /* grey buttons stay dark enough for white text */
  --btn-h: #565656;
  --btn-on: #6a6a6a; /* the selected segment of a grey toggle */
}
:root[data-contrast="5"] {
  --n00: #000000;
  --n0a: #000000;
  --n0b: #000000;
  --n0d: #000000;
  --n11: #000000;
  --n14: #000000;
  --n15: #000000;
  --n16: #000000;
  --n18: #000000;
  --n1a: #060606;
  --n1b: #080808;
  --n1c: #0b0b0b;
  --n1d: #0e0e0e;
  --n1e: #101010;
  --n1f: #131313;
  --n22: #1b1b1b;
  --n23: #2d2d2d; /* card surface: stays dark; the page sinks below it instead */
  --n26: #262626;
  --n29: #2e2e2e;
  --n2a: #313131;
  --n2b: #343434;
  --n2c: #363636;
  --n2d: #393939;
  --n2e: #3c3c3c;
  --n2f: #3e3e3e;
  --n30: #414141;
  --n33: #484848; /* card borders and dividers */
  --n35: #4e4e4e;
  --n38: #575757;
  --n3a: #5c5c5c;
  --n3b: #5f5f5f;
  --n3c: #616161;
  --n3f: #6a6a6a;
  --n44: #777777;
  --n47: #7f7f7f;
  --n4a: #878787;
  --n4d: #8f8f8f;
  --n55: #a5a5a5;
  --n57: #aaaaaa;
  --n5a: #b2b2b2;
  --n63: #cbcbcb;
  --n66: #d3d3d3;
  --n6a: #dedede;
  --n6b: #e0e0e0;
  --n6d: #e6e6e6;
  --n77: #ffffff;
  --n7a: #ffffff;
  --n7d: #ffffff;
  --n88: #ffffff;
  --n8a: #ffffff;
  --n8d: #ffffff;
  --n8f: #ffffff;
  --n99: #ffffff;
  --n9a: #ffffff;
  --naa: #ffffff;
  --nb5: #ffffff;
  --nbb: #ffffff;
  --nbd: #ffffff;
  --ncc: #ffffff;
  --ncf: #ffffff;
  --ndd: #ffffff;
  --ne6: #ffffff;
  --ne8: #ffffff;
  --ne9: #ffffff;
  --nee: #ffffff;
  --nf0: #ffffff;
  --nf1: #ffffff;
  --nf4: #ffffff;
  --nff: #ffffff;
  --bg: #121212; /* the page gets darker with each step */
  --dd-bg: #101010; /* dropdowns: a field a little darker than the card */
  --dd-line: #606060;
  --btn: #4c4c4c; /* grey buttons stay dark enough for white text */
  --btn-h: #585858;
  --btn-on: #6e6e6e; /* the selected segment of a grey toggle */
}

@font-face {
  font-family: 'neo-sans-std';
  src: url('assets/neo-sans-std.otf');
}

:root {
  --rail-w: 68px;
  --rail-w-open: 252px;
  --top-h: 64px;
  --r-ctl: 6px; /* buttons, selects, inputs and segments; matches the cards */
  --h-ctl: 28px; /* the same controls share one height */
  --bg: var(--n26);
  --bg-2: var(--n2d);
  --card: var(--n11);
  --line: var(--n3a);
  --text: var(--ne9);
  --muted: var(--n9a);
  --blue: #3d8bfd;
  --green: #5cb85c;
  --red: #e5534b;
  --orange: #f0a030;
  --accent: var(--nff);
  font-family: 'neo-sans-std', 'Segoe UI', Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--n00); color: var(--text); font-size: 14px; overflow: hidden; }
button { font: inherit; color: inherit; }
svg.ico { display: block; flex: none; }

/* ───────────── Shell ───────────── */
.shell { display: flex; height: 100vh; }
.rail {
  width: var(--rail-w); flex: none; background: var(--n0b); border-right: 1px solid var(--n1d);
  display: flex; flex-direction: column; transition: width .22s cubic-bezier(.3,.7,.3,1); z-index: 5;
}
.shell.open .rail { width: var(--rail-w-open); }
.rail-top { height: var(--top-h); flex: none; display: flex; align-items: center; padding-left: 14px; border-bottom: 1px solid var(--n1d); }
.rail-toggle {
  width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--n8d); cursor: pointer;
  display: grid; place-items: center;
}
.rail-toggle:hover { background: var(--n1c); color: var(--nff); }
.rail-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0 14px; scrollbar-width: none; display: flex; flex-direction: column; }
.rail-list::-webkit-scrollbar { display: none; }
.rail-sep { height: 1px; background: var(--n1f); margin: 8px 14px; flex: none; }
.rail-spacer { flex: 1; min-height: 8px; }

.sb-item {
  position: relative; height: 52px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; outline: none;
  transition: background .15s;
}
.sb-item .ico { width: 40px; height: 40px; transition: transform .18s, opacity .2s, filter .2s, box-shadow .2s; border-radius: 10px; }
.sb-item .lbl {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--nbd); font-size: 15px; opacity: 0;
  transition: opacity .15s; pointer-events: none;
}
.shell.open .sb-item .lbl { opacity: 1; transition-delay: .06s; }
.sb-item:hover { background: rgba(255,255,255,.045); }
.sb-item:hover .lbl { color: var(--nff); }
.sb-item:focus-visible { box-shadow: inset 0 0 0 2px #3d8bfd; }
.sb-item.pressing .ico { transform: scale(.92); }
.sb-item.placeholder { opacity: .18; }
.sb-item.placeholder.collapse { height: 0; opacity: 0; transition: height .18s, opacity .1s; }
.sb-item.pop-in .ico { animation: popIn .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes popIn {
  0% { transform: scale(.3); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; box-shadow: 0 0 0 6px rgba(255,255,255,.18); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.sb-item .badge {
  position: absolute; left: 44px; top: 7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--ne9); color: var(--n11); font-size: 11px; line-height: 18px; text-align: center; font-weight: 700;
  border: 2px solid var(--n0b);
}

/* Active highlight — style A: accent bar + soft well (default) */
.hl-bar .sb-item.active { background: rgba(255,255,255,.085); }
.hl-bar .sb-item.active::before {
  content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.hl-bar .sb-item.active .lbl, .hl-ring .sb-item.active .lbl, .hl-dim .sb-item.active .lbl { color: var(--nff); }
/* style B: halo ring around the icon */
.hl-ring .sb-item.active .ico { box-shadow: 0 0 0 2.5px var(--n0b), 0 0 0 5px var(--accent), 0 0 18px 2px color-mix(in srgb, var(--accent) 50%, transparent); }
.hl-ring .sb-item.active { background: rgba(255,255,255,.03); }
/* style C: dim everything else */
.hl-dim .sb-item:not(.active) .ico { opacity: .42; filter: saturate(.35); }
.hl-dim .sb-item:not(.active):hover .ico { opacity: .85; filter: none; }
.hl-dim .sb-item.active { background: rgba(255,255,255,.07); }
.hl-dim .sb-item.active .ico { transform: scale(1.06); }

/* Drag ghost */
.sb-ghost {
  position: fixed; z-index: 100; pointer-events: none; display: flex; align-items: center; gap: 14px; padding: 0 14px; height: 52px;
  background: rgba(30,30,30,.92); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.6), 0 0 0 1px var(--n33);
  transition: background .15s, opacity .15s; will-change: transform;
}
.sb-ghost .lbl { color: var(--nff); font-size: 15px; white-space: nowrap; }
.sb-ghost .ico { width: 40px; height: 40px; transform: scale(1.06); transition: transform .15s; }
.sb-ghost .rm-hint {
  display: none; position: absolute; left: 50px; top: -26px; white-space: nowrap; font-size: 12px; background: #c63c3c;
  color: var(--nff); padding: 3px 9px; border-radius: 10px;
}
.sb-ghost.to-remove { background: rgba(80,20,20,.85); }
.sb-ghost.to-remove .ico { transform: scale(.85) rotate(-6deg); opacity: .75; }
.sb-ghost.to-remove .rm-hint { display: block; }
.sb-ghost.no-remove .rm-hint { display: block; background: var(--n44); }
.sb-ghost.poof { transition: transform .25s, opacity .25s; opacity: 0; }
.sb-ghost.snap { transition: transform .2s cubic-bezier(.3,.7,.3,1); }
body.dragging, body.dragging * { cursor: grabbing !important; }

/* Tooltip */
.tip {
  position: fixed; z-index: 90; pointer-events: none; background: var(--n00); color: var(--nff); border: 1px solid var(--n3a);
  padding: 7px 14px; border-radius: 18px; font-size: 15px; white-space: nowrap; opacity: 0; transform: translateX(-4px);
  transition: opacity .12s, transform .12s; box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.tip.show { opacity: 1; transform: none; }
.tip small { color: var(--n8d); margin-left: 8px; font-size: 12px; }

/* Context menu */
.ctx {
  position: fixed; z-index: 95; min-width: 220px; background: var(--n1a); border: 1px solid var(--n35); border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,.6); display: none;
}
.ctx.show { display: block; animation: menuIn .12s ease-out; }
@keyframes menuIn { from { opacity: 0; transform: scale(.97) translateY(-3px); } }
.ctx-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--n2c); margin-bottom: 4px; }
.ctx-head b { font-weight: 500; font-size: 15px; }
.ctx-head small { display: block; color: var(--muted); font-size: 12px; }
.ctx button {
  display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 8px 10px;
  border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--ndd);
}
.ctx button:hover:not(:disabled) { background: var(--n2b); color: var(--nff); }
.ctx button:disabled { color: var(--n66); cursor: default; }
.ctx button .k { margin-left: auto; color: var(--n77); font-size: 12px; }
.ctx button.danger { color: #ff8a80; }
.ctx button.danger:hover { background: #3a1c1c; }
.ctx hr { border: 0; border-top: 1px solid var(--n2c); margin: 4px 0; }
.ctx svg { width: 16px; height: 16px; flex: none; opacity: .8; }

/* Overflow / hidden-apps popover */
.pop {
  position: fixed; z-index: 92; width: 280px; background: var(--n1a); border: 1px solid var(--n35); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,.65); display: none; overflow: hidden;
}
.pop.show { display: block; animation: menuIn .14s ease-out; }
.pop h4 { margin: 0; padding: 12px 14px 10px; font-weight: 500; font-size: 13px; color: var(--muted); letter-spacing: .02em; display: flex; justify-content: space-between; }
.pop-list { padding: 0 6px 6px; max-height: 60vh; overflow: auto; }
.pop-row { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 9px; cursor: pointer; }
.pop-row:hover { background: var(--n26); }
.pop-row.current { background: var(--n2a); box-shadow: inset 3px 0 0 var(--accent); }
.pop-row .t { flex: 1; min-width: 0; }
.pop-row .t b { font-weight: 400; display: block; font-size: 14px; color: var(--nee); }
.pop-row .t small { color: var(--n88); font-size: 12px; }
.pin-btn {
  border: 1px solid var(--n3c); background: var(--n22); color: var(--nbb); border-radius: 8px; height: 28px; padding: 0 9px; cursor: pointer; font-size: 12px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.pin-btn:hover { background: var(--n33); color: var(--nff); }
.pop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 2px 8px 8px; }
.pop-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 10px; cursor: pointer; text-align: center; position: relative; }
.pop-tile:hover { background: var(--n26); }
.pop-tile.current { background: var(--n2a); }
.pop-tile span { font-size: 12px; color: var(--ncc); line-height: 1.2; }
.pop-tile .mini-pin { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 6px; border: 0; background: var(--n33); color: var(--ndd); display: none; cursor: pointer; font-size: 13px; line-height: 22px; padding: 0; }
.pop-tile:hover .mini-pin { display: block; }
.pop-foot { border-top: 1px solid var(--n2c); padding: 10px 14px; font-size: 13px; color: #7fb6ff; cursor: pointer; }
.pop-foot:hover { background: var(--n22); }
.pop-empty { padding: 4px 16px 14px; color: var(--n88); font-size: 13px; }

/* Toasts */
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  pointer-events: auto; background: var(--nf1); color: var(--n16); border-radius: 12px; padding: 10px 12px 10px 14px; display: flex; gap: 12px; align-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.5); font-size: 14px; animation: toastIn .2s ease-out; max-width: 560px;
}
.toast .ico { width: 26px; height: 26px; }
.toast button { border: 0; background: var(--n1d); color: var(--nff); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.toast button.ghost { background: transparent; color: #2b62c9; }
.toast.out { opacity: 0; transform: translateY(6px); transition: .2s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* ───────────── Header ───────────── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--top-h); flex: none; background: var(--n0b); border-bottom: 1px solid var(--n1d); display: flex; align-items: center; padding: 0 28px 0 26px; gap: 16px; }
.page-title { margin: 0; font-weight: 400; font-size: 30px; letter-spacing: .01em; color: var(--nff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand { height: 21px; margin-left: auto; opacity: .95; }
.content { flex: 1; min-height: 0; overflow: auto; background: var(--bg); position: relative; }
.page { min-height: 100%; display: flex; flex-direction: column; animation: pageIn .18s ease-out; }
@keyframes pageIn { from { opacity: .4; } }

/* ───────────── Shared bits ───────────── */
.gear-s { width: 13px; height: 13px; display: inline-block; vertical-align: -1px; margin-left: 6px; opacity: .9; }
.btn-g { background: var(--n4a); border: 0; color: var(--nee); height: 30px; padding: 0 22px; border-radius: var(--r-ctl); cursor: pointer; font-size: 15px; }
.btn-g:hover { background: var(--n57); }
.footer { height: 30px; flex: none; display: flex; align-items: center; padding: 0 10px; background: var(--n18); color: var(--nbb); font-size: 13px; gap: 10px; border-top: 1px solid var(--n2a); }
.footer .r { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.footer .sup { color: #f0b429; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot.g { background: #4cba52; } .dot.r { background: #e5534b; } .dot.y { background: #f0b429; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--n55); border-top-color: var(--ndd); animation: rot .7s linear infinite; display: inline-block; vertical-align: -2px; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ───────────── Reactor: Panels & Devices ───────────── */
.r-subbar { height: 44px; display: flex; align-items: center; padding: 0 12px; background: var(--n2b); gap: 8px; font-size: 16px; flex: none; }
.r-subbar .sp { flex: 1; }
.r-viewtg { display: flex; margin-left: 12px; }
.r-viewtg button { width: 40px; height: 30px; background: var(--n3a); border: 0; cursor: pointer; color: var(--ndd); display: grid; place-items: center; }
.r-viewtg button.on { background: var(--n55); }
.r-split { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 6px minmax(300px, 600px); }
.r-split > .div { background: var(--n1f); }
.r-tabs { height: 30px; border-bottom: 1px solid var(--n44); display: flex; align-items: flex-end; }
.r-tab { background: var(--n55); color: var(--nee); padding: 5px 14px; font-size: 15px; border-radius: 4px 4px 0 0; min-width: 160px; }
.r-tab.wide { min-width: 266px; }
.r-left-in { margin: 16px 8px; background: var(--n33); padding: 16px 16px 24px; border-radius: 3px; }
.p-card { background: var(--n0d); border-radius: 3px; padding: 22px 14px; display: grid; grid-template-columns: 260px 70px minmax(0, 1fr); gap: 0; margin-bottom: 16px; }
.p-card h5 { margin: 0 0 14px; font-weight: 400; font-size: 16px; }
.p-card .pid { font-size: 16px; margin-bottom: 14px; }
.p-card .st { font-size: 13px; color: #e5534b; }
.p-card .st.ok { color: #5cb85c; } .p-card .st.warn { color: #f0a030; }
.p-thumb { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bulb { width: 26px; height: 26px; border-radius: 50%; background: var(--ncc); display: grid; place-items: center; }
.bulb svg { width: 14px; height: 14px; }
.dd { border: 1px solid var(--nbb); border-radius: 3px; height: 37px; max-width: 824px; display: flex; align-items: center; padding: 0 18px; gap: 8px; font-size: 16px; }
.dd .chip { background: #3c4a5c; color: #dfe9f7; font-size: 13px; padding: 2px 5px; border-radius: 3px; }
.dd .caret { margin-left: auto; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--ndd); }
/* With contrast on, every dropdown is the same field: a little darker than
   the card, with a border that stays visible on card and page alike. */
:root[data-contrast]:not([data-contrast="0"]) :is(.dd, .pk-ver, .logsel, .ss-dd, .optrow .sel, .em-sel) { background: var(--dd-bg); border: 1px solid var(--dd-line); border-radius: var(--r-ctl); }
:root[data-contrast]:not([data-contrast="0"]) .pk-ver.upd { border-color: #2f5fa8; }
:root[data-contrast]:not([data-contrast="0"]) .pk-ver.busy { background: none; border: 0; }
:root[data-contrast]:not([data-contrast="0"]) :is(.btn-g, .dev-btn:not(.ui), .ss-btn.grey) { background: var(--btn); color: var(--nff); }
:root[data-contrast]:not([data-contrast="0"]) :is(.btn-g, .dev-btn:not(.ui), .ss-btn.grey):hover { background: var(--btn-h); }
:root[data-contrast]:not([data-contrast="0"]) .r-viewtg button { background: var(--btn); color: var(--nff); }
:root[data-contrast]:not([data-contrast="0"]) .r-viewtg button.on { background: var(--btn-on); }
.info-i { width: 18px; height: 18px; border: 1.5px solid var(--ndd); border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-style: italic; }
.p-hint { font-style: italic; font-size: 16px; margin-top: 18px; line-height: 1.5; }
.p-hint b { font-weight: 700; }

.dev-wrap { padding: 16px 8px 16px 12px; }
.dev-group { margin: 16px 0 10px; font-size: 15px; }
.p-group { margin: -4px 0 14px; font-size: 15px; }
/* Home devices column (devicesHTML). Not .dev-wrap: that is the device preview frame. */
.dev-list { padding: 12px 8px 16px 6px; }
.dev-card { background: var(--n0d); padding: 12px 10px 12px 10px; display: flex; align-items: center; gap: 10px; font-size: 15px; border-radius: 3px; margin-bottom: 8px; }
.dev-card .l { flex: 1; min-width: 0; }
.dev-card .nm { font-weight: 600; }
.dev-card .addr { color: #2f8ff0; margin-left: 4px; }
.dev-card .l > div { margin-bottom: 7px; }
.dev-card .l > div:last-child { margin-bottom: 0; }
.dev-card .st { color: #e5534b; font-size: 12px; margin-top: 12px; }
.dev-card .st.sim { color: #2f8ff0; } .dev-card .st.ok { color: #3fb950; } .dev-card .st.ip { color: #f0a030; }
.dev-btn { align-self: flex-end; margin-bottom: 18px; background: var(--n55); color: var(--nee); border: 0; border-radius: 3px; padding: 4px 18px; font: inherit; font-size: 15px; cursor: pointer; }
.dev-btn.ui { background: #1a8cff; color: var(--nff); margin-bottom: 0; height: var(--h-ctl); padding: 0 16px; border-radius: var(--r-ctl); font-size: 13px; display: inline-flex; align-items: center; line-height: 1; }
.dev-add { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.dev-add svg { width: 22px; height: 22px; color: var(--ncc); margin-right: 6px; }
.dev-img { width: 90px; height: 90px; flex: none; background: var(--n1c); border: 1px solid var(--n33); display: grid; place-items: center; overflow: hidden; }
.dev-img img { width: 100%; height: 100%; object-fit: contain; }

/* "Reactor Home cards: Match other pages": panels and devices take the
   Settings / Packages cards (var(--n23), 1px var(--n33) border, 6px corners) under
   plain section headings, instead of black cards in a grey box under tabs. */
.hc-match .r-subbar { background: none; border-bottom: 1px solid var(--n33); }
.hc-match .r-split > .div { background: none; border-left: 1px solid var(--n33); margin: 16px 0; }
.hc-match .r-tabs { height: auto; border-bottom: 0; padding: 24px 0 0 20px; }
.hc-match .dev-wrap, .hc-match [data-pane="devices"] .r-tabs { padding-left: 20px; padding-right: 20px; }
.hc-match .r-tab, .hc-match .r-tab.wide { background: none; padding: 0; min-width: 0; border-radius: 0; font-size: 21px; color: var(--nff); }
.hc-match .r-left-in { background: none; margin: 0; padding: 14px 20px 24px; }
.hc-match .p-card, .hc-match .dev-card, .hc-match .warnbox { background: var(--n23); border: 1px solid var(--n33); border-radius: 6px; }
.hc-match .dev-card { padding: 14px; }
.hc-match .warnbox { padding: 16px 18px 18px; font-size: 14px; }
.hc-match .warnbox .head { margin-bottom: 14px; }
.hc-match .dev-img { background: var(--n1c); border-radius: 6px; }
.hc-match .dd { border-color: var(--n3a); background: var(--n11); border-radius: var(--r-ctl); }
.hc-match .orange-box { border-radius: 6px; font-size: 14px; }
.hc-match .dev-group, .hc-match .p-group { color: var(--naa); font-size: 14px; }

/* ───────────── Reactor: Configuration / Simulation ───────────── */
.cfg { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 8px 590px; min-height: 0; }
.cfg.sim { grid-template-columns: 1fr; }
.cfg > .div { background: var(--n1b); }
.cfg-left { display: flex; flex-direction: column; min-height: 0; }
.toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
.tb-ico { width: 30px; height: 30px; display: grid; place-items: center; color: #5fb6a0; font-size: 22px; }
.chipbtn { height: var(--h-ctl); background: #2f7fdc; color: var(--nff); font-size: 13px; letter-spacing: .08em; padding: 0 16px; display: inline-flex; align-items: center; gap: 12px; border-radius: var(--r-ctl); line-height: 1; }
.chipbtn.sel { box-shadow: inset 0 -3px 0 #a2e86b; }
.chipbtn.fit { background: #2b8a6e; }
.chipbtn svg { width: 16px; height: 16px; }
.tb-right { margin-left: auto; display: flex; gap: 18px; color: #4a9be8; align-items: center; font-size: 22px; }
.tb-right .g { color: var(--naa); }
.optrow { display: flex; align-items: center; gap: 12px; padding: 4px 16px 10px; font-size: 16px; flex-wrap: wrap; }
.optrow .sel { background: var(--n11); padding: 7px 10px; min-width: 150px; display: inline-flex; justify-content: space-between; gap: 30px; }
.seg { display: inline-flex; background: var(--n3a); border-radius: 10px; overflow: hidden; }
.seg span { padding: 2px 8px; color: var(--n88); } .seg span.on { background: var(--n55); color: var(--nee); }
.canvas-wrap { flex: 1; position: relative; overflow: hidden; min-height: 500px; }
.canvas {
  position: absolute; left: 175px; top: 140px; right: 0; bottom: 0; border-top: 1px solid var(--n55); border-left: 1px solid var(--n55);
  background-color: var(--n2a);
  background-image: linear-gradient(var(--n33) 1px, transparent 1px), linear-gradient(90deg, var(--n33) 1px, transparent 1px);
  background-size: 12px 12px;
}
.sim .canvas { left: 50px; top: 60px; }
.hw { position: absolute; }
.hw-pill { width: 340px; height: 200px; border-radius: 28px; background: linear-gradient(180deg, #7db6ec, #4a8fd4); box-shadow: inset 0 -6px 12px rgba(0,0,0,.25), 0 2px 0 #2b6bb0; }
.hw-pill .scr { position: absolute; left: 110px; top: 26px; width: 120px; height: 150px; background: var(--n77); border-radius: 3px; opacity: .8; color: var(--nee); font-size: 14px; padding: 8px; }
.hw-pill .led { position: absolute; right: 24px; top: 20px; width: 70px; height: 20px; border-radius: 4px; background: #9cc9f2; }
.hw-panel { background: var(--n33); border: 3px solid var(--n11); border-radius: 6px; padding: 8px; display: grid; gap: 6px; }
.hw-panel .k { background: var(--n44); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--n55); display: grid; place-items: center; }
.hw-panel .k i { width: 60%; height: 50%; background: var(--n22); display: block; border-radius: 2px; }
.hw-panel .b { background: var(--n7a); border-radius: 3px; display: grid; place-items: center; }
.hw-panel .b i { width: 55%; height: 80%; background: var(--n63); border-radius: 4px; display: block; }
.knob { border-radius: 50%; background: var(--n6d); box-shadow: inset 0 0 0 3px var(--n55), 0 0 0 2px var(--n2a); display: grid; place-items: center; }
.knob i { width: 34%; height: 34%; border-radius: 50%; background: var(--n5a); display: block; }
.hw-blue { background: linear-gradient(180deg, #4c95dc, #2d73c0); border: 3px solid var(--n1a); border-radius: 6px; padding: 14px; }
.hw-blue .rowk { display: flex; gap: 12px; margin-bottom: 10px; }
.hw-blue .oled { width: 42px; height: 22px; background: var(--n0a); border-radius: 2px; }
.hw-blue .bt { width: 46px; height: 32px; background: #c9c4ba; border-radius: 4px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.hw-blue .bt.gr { background: #59d3a3; } .hw-blue .bt.lime { background: #8bf24a; } .hw-blue .bt.lb { background: #8eb0f0; } .hw-blue .bt.cy { background: #8fe0e3; } .hw-blue .bt.wh { background: var(--nf4); }
.inspector { padding: 0 0 0 0; }
.inspector h3 { font-weight: 500; font-size: 20px; margin: 30px 12px; }

/* ───────────── Settings ───────────── */
.bb { border: 0; border-radius: var(--r-ctl); height: 32px; padding: 0 30px; color: var(--nff); font-size: 16px; cursor: pointer; background: #3d8bfd; display: inline-flex; gap: 8px; align-items: center; }
.bb.green { background: #5cb85c; } .bb.orange { background: #f0a030; }
.logsel { background: var(--n11); height: var(--h-ctl); box-sizing: border-box; align-items: center; padding: 0 12px; margin-bottom: 14px; display: flex; justify-content: space-between; font-size: 14px; border-radius: var(--r-ctl); }
.logs { background: var(--n11); font-family: ui-monospace, Menlo, monospace; font-size: 14px; line-height: 1.38; padding: 10px; height: 520px; overflow: auto; color: var(--ndd); word-break: break-all; margin-bottom: 14px; }
.logs .a1 { color: #2ab3c0; } .logs .a2 { color: #d0569f; } .logs .a3 { color: #57b06a; } .logs .er { color: #e5534b; }
.tg { width: 44px; height: 22px; border-radius: 11px; background: var(--n55); position: relative; display: inline-block; flex: none; cursor: pointer; }
.tg::after { content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #d8c8ea; transition: .15s; }
.tg.on { background: #2860c6; } .tg.on::after { left: 24px; background: #3d8bfd; box-shadow: 0 0 0 2px #2860c6; }
.note { color: var(--naa); line-height: 1.55; font-size: 15px; }
.yellow-box { border: 1px solid #f0b429; color: #f0b429; padding: 10px 18px; background: #3a3220; margin-top: 18px; font-size: 16px; }

/* ───────────── Packages (as in system-manager today) ───────────── */
.pk2 { padding: 22px 32px 60px; width: 100%; box-sizing: border-box; container-type: inline-size; }
.pk2-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.pk2-top h2 { margin: 0 0 4px; font-weight: 400; font-size: 22px; color: var(--nff); }
.pk2-top p { margin: 0; color: var(--n9a); font-size: 13px; }
.pk-pre { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ndd); padding-top: 4px; white-space: nowrap; }
.pk2-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--n3a); margin: 18px 0 12px; }
.pk2-tabs a { padding: 9px 13px; font-size: 14px; color: var(--ndd); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pk2-tabs a.on { border-color: #3d8bfd; color: var(--nff); }
.pk2-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.pk-srch { background: var(--n11); height: var(--h-ctl); width: 318px; max-width: 100%; display: flex; align-items: center; gap: 8px; padding: 0 12px; box-sizing: border-box; margin-right: 10px; border-radius: var(--r-ctl); }
.pk-srch svg { width: 17px; height: 17px; flex: none; }
.pk-srch input { flex: 1; background: none; border: 0; outline: none; color: var(--nee); font: inherit; font-size: 13px; min-width: 0; }
.pk-chip { background: none; border: 1px solid var(--n44); color: var(--ncc); border-radius: 14px; height: 24px; padding: 0 10px; font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; line-height: 1; cursor: pointer; }
.pk-chip b { font-weight: 400; margin-left: 4px; }
.pk-chip.on { border-color: #3d8bfd; background: #17304f; color: var(--nff); }
.pk-upload { margin-left: auto; background: #3bb54a; color: var(--nff); border: 0; border-radius: var(--r-ctl); height: var(--h-ctl); padding: 0 16px; font: inherit; font-size: 13px; cursor: pointer; }
.pk-upload:hover { background: #45c655; }
.pk2 .pk-sec { margin: 6px 0 26px; }
.pk2 .pk-sec > h3 { font-size: 16px; color: var(--nff); }
.pk-h3 { font-weight: 400; font-size: 16px; color: var(--nff); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--n3a); }
.pk-sys { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 30px; }
@container (min-width: 900px) { .pk-sys { grid-template-columns: repeat(3, 1fr); } }
.pk-card { background: var(--n23); border: 1px solid var(--n33); border-radius: 6px; padding: 10px 12px 10px 18px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--nee); min-width: 0; }
.pk-card .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-card .pk-ver { flex: none; min-width: 0; margin-right: 6px; }
.pk-card .pk-ver i { display: none; } /* no room: the blue outline marks the update */
.pk-sysic { width: 34px; height: 34px; border-radius: 6px; background: #1b2a40; display: grid; place-items: center; color: #3d8bfd; flex: none; }
.pk-sysic svg { width: 22px; height: 22px; }
.pk-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--n6b); display: inline-block; flex: none; }
.pk-dot.on { background: #3bb54a; }
.pk-dot.busy { background: none; border: 2px solid #3d8bfd; border-right-color: transparent; width: 8px; height: 8px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pk-ic { width: var(--h-ctl); height: var(--h-ctl); display: inline-grid; place-items: center; background: none; border: 0; color: var(--ne8); cursor: pointer; border-radius: var(--r-ctl); padding: 0; }
.pk-ic:hover { background: var(--n3a); }
.pk-ic svg { width: 15px; height: 15px; }
.pk-ver { display: inline-flex; align-items: center; gap: 8px; background: var(--n11); border: 1px solid var(--n3a); color: var(--nee); height: var(--h-ctl); min-width: 126px; padding: 0 8px; box-sizing: border-box; font: inherit; font-size: 13px; border-radius: var(--r-ctl); cursor: default; white-space: nowrap; }
.pk-ver span { flex: 1; text-align: left; }
.pk-ver svg { width: 13px; height: 13px; flex: none; }
.pk-ver i { font-style: normal; font-size: 11px; color: #9cc3ff; background: #172741; border-radius: 8px; padding: 0 6px; }
.pk-ver.upd { cursor: pointer; border-color: #2f5fa8; }
.pk-ver.upd:hover { background: #18202c; }
.pk-ver.busy { background: none; border: 0; }
.pk-ver.busy .prog { width: 80px; }
.pk-box { margin-bottom: 22px; }
.pk-box-h { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; color: var(--nff); font: inherit; font-size: 16px; padding: 8px 4px 10px 0; cursor: pointer; text-align: left; }
.pk-box-h small { color: var(--n88); font-size: 12px; flex: 1; }
.pk-box-h svg { width: 16px; height: 16px; color: var(--ncc); transition: transform .15s; }
.pk-box.shut .pk-box-h svg { transform: rotate(-90deg); }
.pk-cols { display: grid; grid-template-columns: 1fr; border: 1px solid var(--n33); border-radius: 6px; background: var(--n23); }
.pk-col { padding: 4px 10px 6px; min-width: 0; }
.pk-col.second .pk-head { display: none; }
@container (min-width: 900px) {
  .pk-cols:not(.one) { grid-template-columns: 1fr 1fr; gap: 22px; border: 0; background: none; }
  .pk-cols:not(.one) .pk-col { border: 1px solid var(--n33); border-radius: 6px; background: var(--n23); }
  .pk-col.second .pk-head { display: grid; }
}
.pk-row { display: grid; grid-template-columns: 40px 30px minmax(0, 1fr) auto 40px; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--n30); font-size: 13px; color: var(--nee); }
.pk-col > .pk-row:last-child { border-bottom: 0; }
.pk-row.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: rgba(61,139,253,.22); } }
.pk-row.pk-head { color: var(--naa); font-size: 10px; border-bottom: 0; }
.pk-row.pk-head span:nth-child(4) { min-width: 126px; }
.pk-row.avail { grid-template-columns: minmax(0, 1fr) auto auto; padding: 8px 6px; }
.pk-dotbtn { background: none; border: 0; padding: 0; width: 40px; height: var(--h-ctl); display: grid; place-items: center; cursor: pointer; }
.pk-dotbtn:disabled { cursor: default; }
.pk-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pk-name .ico { width: 22px; height: 22px; flex: none; }
.pk-name a { color: var(--nff); cursor: pointer; } .pk-name a:hover { text-decoration: underline; }
.pk-name small { color: var(--n88); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-sb { font-size: 11px; color: #9cc3ff; background: #172741; border: 1px solid #2f5fa8; padding: 1px 7px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.pk-sb.off { color: var(--n99); background: var(--n26); border-color: var(--n44); }
.pk-vtext { color: var(--n99); font-size: 12px; }
.pk-install { background: #2860c6; color: var(--nff); border: 0; border-radius: var(--r-ctl); height: var(--h-ctl); padding: 0 16px; font: inherit; font-size: 13px; cursor: pointer; }
.pk-more { position: relative; display: grid; place-items: center; }
.pk-menu { position: absolute; right: 0; top: 30px; z-index: 30; background: var(--n1b); border: 1px solid var(--n44); border-radius: 6px; padding: 4px; min-width: 180px; box-shadow: 0 10px 30px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.pk-menu button { background: none; border: 0; color: var(--nee); text-align: left; padding: 7px 10px; font: inherit; font-size: 13px; border-radius: 4px; cursor: pointer; }
.pk-menu button:hover { background: var(--n2c); }
.pk-menu button.danger { color: #ff7b7b; }
.pk-menu button:disabled { opacity: .4; cursor: default; }
.pk-empty { padding: 10px 6px; font-size: 13px; }
.pk-sec { margin-bottom: 40px; }
.pk-sec > h3 { font-weight: 400; font-size: 21px; margin: 0 0 8px; display: flex; align-items: baseline; gap: 14px; }
.pk-sec > h3 small { color: var(--n8a); font-size: 14px; }
.pk-sec > p.sub { margin: 0 0 18px; color: var(--n8f); font-size: 14px; }
.launch { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ltile {
  background: var(--n23); border: 1px solid var(--n35); border-radius: 12px; padding: 18px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; position: relative; transition: background .15s, transform .15s, border-color .15s; text-align: center;
}
.ltile:hover { background: var(--n2a); border-color: var(--n4a); transform: translateY(-2px); }
.ltile.cur { border-color: var(--n6a); }
.ltile .nm { font-size: 15px; color: var(--nf0); line-height: 1.2; }
.ltile .ap { font-size: 12px; color: var(--n88); margin-top: -6px; }
.ltile .pin {
  margin-top: 4px; border: 1px solid var(--n3c); background: var(--n1b); color: var(--naa); border-radius: 14px; font-size: 12px; padding: 4px 10px; cursor: pointer;
  display: inline-flex; gap: 6px; align-items: center;
}
.ltile .pin.on { color: #cfe3ff; border-color: #2f5fa8; background: #172741; }
.ltile .pin:hover { filter: brightness(1.25); }
.ltile.hidden-tile .ico { opacity: .55; }
.nm-cell { display: flex; gap: 14px; align-items: center; }
.nm-cell .ico { width: 36px; height: 36px; }
.nm-cell > div { min-width: 220px; }
.nm-cell b { font-weight: 400; font-size: 16px; display: block; }
.nm-cell small { color: var(--n8d); font-size: 14px; }
.nm-cell .noui { width: 36px; height: 36px; flex: none; }
.icbtn { width: 34px; height: 34px; display: inline-grid; place-items: center; background: none; border: 0; color: var(--ncf); cursor: pointer; border-radius: var(--r-ctl); }
.icbtn:hover { background: var(--n3a); color: var(--nff); }
.icbtn:disabled { opacity: .3; cursor: default; background: none; }
.icbtn svg { width: 22px; height: 22px; }
.openbtn { border: 0; background: #7b2fbe; color: var(--nff); height: 30px; padding: 0 16px; border-radius: var(--r-ctl); cursor: pointer; font-size: 14px; white-space: nowrap; }
.openbtn:hover { background: #8f3fd6; }
.prog { width: 130px; height: 6px; background: var(--n44); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 10px; }
.prog i { display: block; height: 100%; background: #3d8bfd; transition: width .1s linear; }
.muted { color: var(--n8a); }
.sb-flag { font-size: 12px; color: #9cc3ff; background: #172741; border: 1px solid #2f5fa8; padding: 2px 8px; border-radius: 10px; margin-left: 8px; white-space: nowrap; }
.sb-flag.off { color: var(--n99); background: var(--n26); border-color: var(--n44); }



/* ───────────── App page bits (tally grid, placeholder hero) ───────────── */
.xgrid { display: grid; gap: 3px; }
.xgrid div { background: var(--n3a); border-radius: 2px; aspect-ratio: 1; }
.xgrid div.on { background: #3d8bfd; }
.xgrid .hd { background: none; font-size: 12px; color: var(--naa); display: flex; align-items: center; justify-content: center; aspect-ratio: auto; }
.tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tally div { background: var(--n1d); border-radius: 6px; padding: 28px 10px; text-align: center; font-size: 20px; border: 2px solid var(--n33); }
.tally div.pgm { background: #6b1414; border-color: #e5534b; } .tally div.pvw { background: #154a1d; border-color: #5cb85c; }
.app-hero { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.app-hero .ico { width: 64px; height: 64px; }

/* ───────────── Mockup controls ───────────── */
.mk-fab {
  position: fixed; right: 16px; bottom: 44px; z-index: 80; border: 1px solid var(--n3b); background: rgba(20,20,20,.92); color: var(--ncf);
  border-radius: 18px; padding: 7px 14px; cursor: pointer; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.mk-fab:hover { color: var(--nff); border-color: var(--n55); }
.mk-panel {
  position: fixed; right: 16px; bottom: 86px; z-index: 81; width: 340px; background: #f4f4f2; color: var(--n1b); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.6); display: none; font-size: 13px; max-height: calc(100vh - 120px); overflow: auto;
}
.mk-panel.show { display: block; }
.mk-panel h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.mk-panel .lead { color: var(--n66); margin: 0 0 12px; line-height: 1.4; }
.mk-panel label.grp { display: block; font-weight: 700; margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--n55); }
.mk-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-seg button { border: 1px solid var(--ncc); background: var(--nff); color: var(--n22); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.mk-seg button.on { background: var(--n1d); color: var(--nff); border-color: var(--n1d); }
.mk-panel .desc { color: var(--n66); margin-top: 6px; line-height: 1.4; }
.mk-panel ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.55; color: var(--n33); }
.mk-panel .reset { margin-top: 14px; border: 0; background: #c63c3c; color: var(--nff); border-radius: 8px; padding: 7px 12px; cursor: pointer; }

/* ───────────── Narrow screens ───────────── */
.top-menu { display: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ncc); cursor: pointer; place-items: center; flex: none; margin-left: -6px; }
.top-menu:hover { background: var(--n1c); color: var(--nff); }
.scrim { display: none; }
.sb-item { touch-action: pan-y; -webkit-touch-callout: none; }

/* Tablet / small laptop: the expanded sidebar floats over the page instead of squeezing it. */
@media (min-width: 761px) and (max-width: 1100px) {
  .shell.open .rail { position: fixed; left: 0; top: 0; bottom: 0; box-shadow: 12px 0 40px rgba(0,0,0,.55); }
  .shell.open .main { margin-left: var(--rail-w); }
}
@media (max-width: 1000px) {
  .r-split { grid-template-columns: 1fr; }
  .r-split > .div { display: none; }
  .set-grid { grid-template-columns: 1fr; }
  .cfg { grid-template-columns: 1fr; }
  .cfg > .div { display: none; }
  .inspector h3 { margin: 16px 12px 24px; }
}

/* Phone: the sidebar becomes a drawer opened from the menu button in the header. */
@media (max-width: 760px) {
  :root { --top-h: 56px; }
  .rail {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 84vw); z-index: 60;
    transform: translateX(-102%); transition: transform .25s cubic-bezier(.3,.7,.3,1);
  }
  .shell.drawer .rail { transform: none; box-shadow: 0 0 50px rgba(0,0,0,.7); }
  .sb-item .lbl { opacity: 1; }
  .rail-toggle svg { display: none; }
  .rail-toggle::before { content: '✕'; font-size: 18px; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .shell.drawer .scrim { opacity: 1; pointer-events: auto; }
  .top-menu { display: grid; }
  .topbar { padding: 0 14px; gap: 8px; }
  .page-title { font-size: 20px; }
  .brand { height: 11px; }

  .r-subbar { font-size: 15px; }
  .r-viewtg { display: none; }
  .r-left-in { margin: 10px 6px; padding: 10px; }
  .r-tab.wide { min-width: 0; }
  .p-card { grid-template-columns: 1fr 64px; padding: 16px 12px; }
  .p-card > div:nth-child(3) { grid-column: 1 / -1; margin-top: 14px; }
  .p-card h5, .p-card .pid { margin-bottom: 8px; }
  .dd { padding: 0 10px; font-size: 14px; }
  .p-hint { font-size: 14px; }
  .dev-wrap { padding: 12px 6px; }
  .warnbox { padding: 14px; font-size: 14px; }

  .toolbar { gap: 6px; }
  .chipbtn { font-size: 11px; padding: 0 8px; gap: 6px; }
  .tb-right { gap: 12px; font-size: 18px; }
  .optrow { font-size: 14px; }
  .optrow > span[style] { display: none; }
  .canvas { left: 10px; top: 10px; }
  .canvas-wrap { min-height: 420px; }

  .set-grid { padding: 12px; gap: 14px; }
  .frow .l { width: 160px; }
  .logs { height: 300px; font-size: 12px; }
  .bb { padding: 0 14px; font-size: 14px; }

  .pk { padding: 12px; gap: 12px; }
  .pk-nav { display: flex; gap: 4px; padding: 6px; overflow-x: auto; }
  .pk-nav .net { display: none; }
  .pk-nav a { font-size: 15px; margin: 0; padding: 8px 12px; gap: 8px; white-space: nowrap; }
  .pk-main { padding: 20px 14px; }
  .pk-main h2 { font-size: 22px; margin-bottom: 18px; }
  .pk-tools { gap: 10px; padding-bottom: 20px; margin-bottom: 20px; }
  .srch { width: 100%; }
  .lbtn { padding: 0 16px; font-size: 14px; }
  .launch { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }

  .tally { grid-template-columns: repeat(2, 1fr); }
  .footer .r { display: none; }

  .mk-fab { right: 10px; bottom: 40px; }
  .mk-panel { right: 10px; left: 10px; width: auto; bottom: 82px; }
  .toast { max-width: calc(100vw - 20px); }
  .ctx { min-width: 240px; }
}

/* Phone: hidden apps fold out inline under "•••" */
.sb-item .chev {
  margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--n88); border-bottom: 2px solid var(--n88);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; flex: none; margin-right: 6px;
}
.sb-item.fold-open .chev { transform: rotate(-135deg) translate(-2px, -2px); }
@media (max-width: 760px) { .sb-item .badge { left: 46px; } }
.sb-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s cubic-bezier(.3,.7,.3,1); flex: none; }
.sb-fold.open { grid-template-rows: 1fr; }
.sb-fold-in { overflow: hidden; min-height: 0; }
.sb-fold.open .sb-fold-in { border-left: 1px solid var(--n2a); margin-left: 33px; }
.sb-sub {
  position: relative; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 18px; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none;
}
.sb-sub .ico { width: 32px; height: 32px; border-radius: 8px; }
.sb-sub .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--nb5); font-size: 15px; }
.sb-sub:hover, .sb-sub:focus-visible { background: rgba(255,255,255,.045); }
.sb-sub.active { background: rgba(255,255,255,.085); }
.sb-sub.active .lbl { color: var(--nff); }
.sb-sub.active::before {
  content: ''; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
}
.sub-pin {
  width: 34px; height: 34px; flex: none; border: 1px solid var(--n3a); background: var(--n1a); color: var(--ncc); border-radius: 9px;
  font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.sub-pin:hover { background: var(--n2a); color: var(--nff); }

/* ───────────── Sidebar identity slot (top of expanded sidebar) ───────────── */
.rail-top { gap: 8px; padding-right: 10px; }
.rail-id { flex: 1; min-width: 0; opacity: 0; pointer-events: none; transition: opacity .15s; display: flex; align-items: center; }
.shell.open .rail-id { opacity: 1; pointer-events: auto; transition-delay: .06s; }
.rail-id img { height: 15px; margin-left: 6px; }
.dev-id { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.dev-id:hover { background: var(--n1a); }
.dev-id .dot { width: 8px; height: 8px; }
.dev-id div { min-width: 0; }
.dev-id b { display: block; font-weight: 400; font-size: 15px; color: var(--nf0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-id small { display: block; font-size: 11.5px; color: var(--n88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell.open.rt-logo .topbar .brand { display: none; }
@media (max-width: 760px) {
  .rail-id { opacity: 1; pointer-events: auto; }
  .shell.rt-logo .topbar .brand { display: block; }
}

/* ───────────── Reactor views as tabs in the title bar ───────────── */
.hdr-reactor { display: flex; align-items: center; gap: 12px; height: 100%; min-width: 0; flex: 1; }
.hdr-reactor .ico { width: 30px; height: 30px; }
.hdr-app { font-size: 26px; color: var(--nff); white-space: nowrap; }
.hdr-tabs { display: flex; height: 100%; margin-left: 22px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hdr-tabs::-webkit-scrollbar { display: none; }
.hdr-tab {
  position: relative; display: flex; align-items: center; padding: 0 20px; font-size: 17px; letter-spacing: .06em; color: var(--ncf);
  cursor: pointer; white-space: nowrap; user-select: none;
}
.hdr-tab:hover { color: var(--nff); background: var(--n15); }
.hdr-tab.on { color: var(--nff); background: var(--n1d); }
.hdr-tab.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #6c84d6; }
@media (max-width: 760px) {
  .hdr-app { display: none; }
  .hdr-tabs { margin-left: 4px; }
  .hdr-tab { padding: 0 10px; font-size: 14px; letter-spacing: .02em; }
}

/* ───────────── Legacy top menu (today's paradigm) ───────────── */
.shell.legacy .rail, .shell.legacy .scrim { display: none; }
.topbar.legacy { height: 50px; padding: 0 16px 0 0; gap: 0; background: var(--n00); border-bottom: 0; }
.topbar.legacy .top-menu { display: none; }
.lg-app { display: flex; align-items: center; gap: 10px; padding: 0 18px 0 12px; height: 100%; flex: none; }
.lg-app .ico { width: 30px; height: 30px; }
.lg-app span { font-size: 31px; color: var(--nff); white-space: nowrap; }
.lg-menu { display: flex; height: 100%; flex: 1; min-width: 0; overflow: hidden; position: relative; }
.lg-item {
  display: flex; align-items: center; padding: 0 19px; font-size: 18px; letter-spacing: .1em; color: var(--ne8); cursor: pointer;
  white-space: nowrap; flex: none; user-select: none;
}
.lg-item[hidden] { display: none; }
.lg-item:hover { background: var(--n1a); }
.lg-item.on { background: var(--n2b); }
.lg-item.new { animation: lgNew 2.4s ease-out; }
@keyframes lgNew { 0%, 30% { background: #2f5fa8; color: var(--nff); } }
.lg-more { position: static; display: flex; flex: none; }
.lg-more[hidden] { display: none; }
.lg-more.on > .lg-item { background: var(--n2b); }
.lg-drop {
  display: none; position: fixed; top: 50px; min-width: 220px; background: var(--n11); border: 1px solid var(--n33); z-index: 70;
  box-shadow: 0 14px 30px rgba(0,0,0,.6); padding: 4px 0;
}
.lg-more.open .lg-drop { display: block; }
.lg-ditem { display: block; padding: 10px 18px; font-size: 16px; letter-spacing: .08em; color: var(--ne8); cursor: pointer; }
.lg-ditem:hover { background: var(--n22); }
.lg-ditem.on { background: var(--n2b); }
.lg-dev { flex: none; color: var(--naa); font-size: 15px; margin: 0 18px 0 12px; white-space: nowrap; }
.lg-dev b { color: var(--nee); font-weight: 400; margin-left: 8px; }
.topbar.legacy .brand { height: 22px; margin-left: 0; }
.lg-globe { color: #4cba52; font-size: 20px; margin-left: 10px; }
@media (max-width: 1000px) { .lg-dev { display: none; } }
@media (max-width: 760px) {
  .lg-app span { font-size: 22px; }
  .lg-item { font-size: 15px; padding: 0 12px; }
  .topbar.legacy .brand, .lg-globe { display: none; }
}

/* ───────────── Mockup guide panel ───────────── */
.mk-panel { bottom: 44px; }
.mk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.mk-head h4 { margin: 0; }
.mk-min { border: 0; background: #e2e2de; color: var(--n33); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; }
.mk-min:hover { background: #d2d2cd; }
.mk-fab[hidden] { display: none; }
.na { opacity: .45; pointer-events: none; }
.na-note { margin-top: 12px; font-style: italic; color: var(--n55); }
@media (max-width: 760px) { .mk-panel { bottom: 40px; } }

/* ───────────── Device preview stage ───────────── */
.stage { display: none; }
body.staged .shell { display: none; }
body.staged .stage {
  display: flex; position: fixed; inset: 0; align-items: center; justify-content: center; z-index: 1;
  background: radial-gradient(ellipse at 50% 40%, var(--n3a) 0%, var(--n1c) 70%);
}
.dev-wrap { display: flex; flex-direction: column; align-items: center; transform-origin: center; flex: none; }
.dev { background: var(--n0a); box-shadow: 0 0 0 2px var(--n3a), 0 40px 90px rgba(0,0,0,.65); }
.dev iframe { display: block; border: 0; background: var(--n00); }
.dev-phone { padding: 14px; border-radius: 54px; }
.dev-phone iframe { border-radius: 40px; }
.dev-tablet { padding: 18px; border-radius: 38px; }
.dev-tablet iframe { border-radius: 20px; }
.stage-cap { margin-top: 18px; color: var(--n9a); font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
body.embedded .mk-fab, body.embedded .mk-panel { display: none !important; }
@media (min-width: 761px) and (max-width: 1100px) {
  .hdr-app { display: none; }
  .hdr-tabs { margin-left: 6px; }
  .hdr-tab { padding: 0 12px; font-size: 15px; letter-spacing: .03em; }
  .topbar .brand { height: 16px; }
}

/* ───────────── Sidebar groups (proposal) ───────────── */
.sb-group { position: relative; flex: none; height: 15px; display: flex; align-items: center; padding: 0 12px 0 16px; user-select: none; -webkit-user-select: none; }
.sb-group::before { content: ''; position: absolute; left: 18px; right: 18px; top: 50%; height: 1px; background: var(--n2c); }
.sb-group:first-child { height: 4px; }
.sb-group:first-child::before { display: none; }
.sb-group .gname, .sb-group .gempty, .sb-group .g-menu { display: none; }
.sb-group.drop::before { background: var(--n5a); }
.sb-sep { position: relative; flex: none; height: 15px; }
.sb-sep::before { content: ''; position: absolute; left: 18px; right: 18px; top: 50%; height: 1px; background: var(--n2c); }
/* Expanded (and phone drawer): real headings */
.shell.open .sb-group, .shell.drawer .sb-group { height: 38px; padding-top: 12px; border-top: 1px solid var(--n1c); margin-top: 6px; }
.shell.open .sb-group:first-child, .shell.drawer .sb-group:first-child { border-top: 0; margin-top: 0; height: 28px; padding-top: 4px; }
.shell.open .sb-group::before, .shell.drawer .sb-group::before { display: none; }
.shell.open .sb-group .gname, .shell.drawer .sb-group .gname {
  display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--n7d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0; cursor: default;
}
.shell.open .sb-group .gempty, .shell.drawer .sb-group .gempty { display: block; font-size: 11px; color: var(--n4d); margin-right: 6px; white-space: nowrap; font-style: italic; }
.shell.open .sb-group .g-menu, .shell.drawer .sb-group .g-menu {
  display: grid; place-items: center; width: 26px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--n77);
  cursor: pointer; opacity: 0; font-size: 15px; padding: 0; flex: none;
}
.shell.drawer .sb-group .g-menu { opacity: 1; }
.sb-group:hover .g-menu, .g-menu:focus-visible { opacity: 1 !important; }
.sb-group .g-menu:hover { background: var(--n22); color: var(--nff); }
.shell.open .sb-group.drop .gname, .shell.drawer .sb-group.drop .gname { color: #cfe3ff; }
.g-input {
  flex: 1; min-width: 0; height: 24px; background: var(--n15); border: 1px solid #3d8bfd; border-radius: 6px; color: var(--nff); outline: none;
  font: inherit; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 0 8px;
}
.ctx-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--n77); padding: 6px 10px 2px; }

/* ───────────── Collapsed group marker alternatives ───────────── */
.shell:not(.open):not(.drawer) .sb-group.empty { display: none; }
/* While dragging, empty groups reappear as small drop zones */
body.dragging .shell:not(.open):not(.drawer) .sb-group.empty {
  display: flex; height: 26px; margin: 4px 10px; padding: 0 4px; justify-content: center; border: 1px dashed var(--n4a); border-radius: 8px;
}
body.dragging .shell:not(.open):not(.drawer) .sb-group.empty::before, body.dragging .shell:not(.open):not(.drawer) .sb-group.empty::after { display: none; }
body.dragging .shell:not(.open):not(.drawer) .sb-group.empty .gname {
  display: block; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; color: var(--n8a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44px;
}
body.dragging .shell:not(.open):not(.drawer) .sb-group.empty.drop { border-color: #8ab4f8; }

/* Mini title */
.shell.gm-mini:not(.open):not(.drawer) .sb-group, .shell.gm-mini:not(.open):not(.drawer) .sb-group:first-child {
  height: 24px; padding: 6px 4px 0; justify-content: center;
}
.shell.gm-mini:not(.open):not(.drawer) .sb-group:first-child { height: 18px; padding-top: 0; }
.shell.gm-mini:not(.open):not(.drawer) .sb-group::before { display: none; }
.shell.gm-mini:not(.open):not(.drawer) .sb-group .gname {
  display: block; font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--n7a); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 62px; text-align: center;
}

/* Title in the line */
.shell.gm-inline:not(.open):not(.drawer) .sb-group, .shell.gm-inline:not(.open):not(.drawer) .sb-group:first-child {
  height: 22px; padding: 0 8px; justify-content: center; gap: 4px;
}
.shell.gm-inline:not(.open):not(.drawer) .sb-group::before, .shell.gm-inline:not(.open):not(.drawer) .sb-group::after {
  content: ''; display: block; position: static; flex: 1; min-width: 4px; height: 1px; background: var(--n2e);
}
.shell.gm-inline:not(.open):not(.drawer) .sb-group .gname {
  display: block; flex: none; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; color: var(--n7a); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 40px;
}
.shell.gm-mini:not(.open):not(.drawer) .sb-group.drop .gname, .shell.gm-inline:not(.open):not(.drawer) .sb-group.drop .gname { color: #cfe3ff; }

/* "+ New group" row (expanded / drawer) */
.sb-newgroup {
  flex: none; margin: 8px 14px 2px; height: 30px; border: 1px dashed var(--n33); border-radius: 8px; color: var(--n77); font-size: 13px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none;
}
.sb-newgroup:hover, .sb-newgroup:focus-visible { color: var(--ndd); border-color: var(--n55); background: var(--n15); outline: none; }

/* ───────────── Device info at the bottom of the sidebar ───────────── */
.rail-foot { flex: none; border-top: 1px solid var(--n1d); padding: 8px 0 10px; }
.dev-foot { position: relative; height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 14px; cursor: pointer; outline: none; user-select: none; }
.dev-foot:hover, .dev-foot:focus-visible { background: rgba(255,255,255,.045); }
.dev-ico { position: relative; flex: none; width: 40px; height: 40px; }
.dev-ico .ico { width: 40px; height: 40px; border-radius: 10px; }
.dev-ico .dot { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border: 2.5px solid var(--n0b); box-sizing: border-box; }
.dev-foot .dot.g { box-shadow: 0 0 8px rgba(76,186,82,.6); }
.dev-foot.off .dev-ico .ico { opacity: .6; }
.dev-txt { min-width: 0; opacity: 0; transition: opacity .15s; pointer-events: none; }
.shell.open .dev-txt, .shell.drawer .dev-txt { opacity: 1; transition-delay: .06s; }
.dev-txt b { display: block; font-weight: 400; font-size: 15px; color: var(--nf0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-txt small { display: block; font-size: 12px; color: var(--n8a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-txt em { font-style: normal; color: #6fcf75; }
.dev-foot.off .dev-txt em { color: #ff8a80; }
@media (max-width: 760px) { .dev-txt { opacity: 1; } }

/* ───────────── Projects page ───────────── */
/* Projects: the Packages list look (one bordered card, small grey headings,
   thin row lines) with Load / Save first and the same icon buttons on every
   row, so duplicate, export and delete line up. */
.pj { flex: 1; } /* fills the page, so the footer stays at the bottom */
.pj .pk2-tools { gap: 8px; }
.pj-note { margin-left: auto; color: var(--n8a); font-size: 13px; }
.pj-list { border: 1px solid var(--n33); border-radius: 6px; background: var(--n23); padding: 4px 10px 6px; }
.pj-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 110px 270px; /* fixed actions column keeps every row aligned */ align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--n30); font-size: 13px; color: var(--nee); }
.pj-row:last-child { border-bottom: 0; }
.pj-row.pj-head { color: var(--naa); font-size: 10px; padding: 6px 4px 2px; border-bottom: 0; }
.pj-row.cur { background: rgba(108,132,214,.08); border-radius: var(--r-ctl); }
.pj-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pj-name .ico { width: 30px; height: 30px; }
.pj-name > div { min-width: 0; }
.pj-name b { display: block; font-weight: 400; font-size: 14px; color: var(--nff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-name b .sb-flag { vertical-align: 1px; }
.pj-name small { display: block; color: var(--n8d); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-name .pj-meta { display: none; }
.pj-c { color: var(--n8a); white-space: nowrap; }
.pj-act { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.pj-act .ss-btn { margin-right: 4px; white-space: nowrap; flex: none; }
.pj-act .pk-ic:disabled { opacity: .3; cursor: default; background: none; }
.pj-del:not(:disabled):hover { color: #ff7b7b; }
@container (max-width: 640px) {
  .pj-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pj-row.pj-head, .pj-c { display: none; }
  .pj-name .pj-meta { display: block; }
  .pj-note { width: 100%; margin-left: 0; }
}

/* FlowGrid as it looks today (PAGES.flowgrid) */
.fg { flex: 1; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; padding: 20px; background: var(--n1e); align-items: stretch; }
.fg-nav, .fg-main { background: var(--n2a); border: 1px solid var(--n3a); border-radius: 12px; }
.fg-nav { padding: 30px 22px 22px; display: flex; flex-direction: column; gap: 4px; }
.fg-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 6px; color: var(--ne6); font-size: 17px; cursor: default; }
.fg-nav a.on { background: var(--n47); }
.fg-nav a svg { width: 18px; height: 18px; flex: none; }
.fg-nav a svg:last-child:not(:first-child) { margin-left: auto; width: 14px; }
.fg-status { margin-top: auto; border-top: 1px solid var(--n55); padding: 22px 16px 4px; display: flex; justify-content: space-between; align-items: center; font-size: 17px; color: var(--ne6); }
.fg-err svg { width: 20px; height: 20px; color: var(--nff); fill: #e5484d; stroke: var(--n2a); }
.fg-main { padding: 22px 24px; min-width: 0; }
.fg-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--n44); color: var(--nff); font-size: 17px; }
.fg-head svg { width: 20px; height: 20px; color: var(--naa); padding-right: 14px; border-right: 1px solid var(--n55); box-sizing: content-box; }
.fg-main h3 { margin: 26px 16px 4px; font-weight: 400; font-size: 21px; color: var(--nff); }
.fg-main > p { margin: 0 16px 26px; color: var(--ne6); font-size: 16px; }
.fg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }
.fg-card { border: 1px solid var(--n3f); border-radius: 12px; padding: 18px 16px; min-height: 200px; }
.fg-card h4 { margin: 0 0 20px 16px; font-weight: 400; font-size: 21px; color: var(--nff); }
.fg-card table { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--ne6); }
.fg-card th { background: var(--n1f); color: var(--nbb); font-weight: 400; text-align: left; padding: 12px 8px; }
.fg-card td { padding: 8px; border-bottom: 1px solid var(--n44); height: 28px; }
.fg-card tr.grp td { color: var(--nbb); padding-top: 20px; height: auto; }
.fg-card button:not(.ss-btn) { background: #22385f; color: #8ea3c7; border: 0; border-radius: 4px; padding: 9px 16px; font: inherit; }
.fg-log { border-bottom: 1px solid var(--n44); padding: 10px 0 12px; color: var(--nff); font-size: 16px; }

/* ───────────── Settings (as in system-manager today) ───────────── */
.ss { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; padding: 14px 32px 60px; align-items: start; width: 100%; box-sizing: border-box; }
@media (max-width: 1000px) { .ss { grid-template-columns: 1fr; padding: 14px 16px 40px; } .ss-nav { position: static !important; } }
.ss-nav { position: sticky; top: 14px; }
.ss-srch { background: var(--n11); height: var(--h-ctl); display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r-ctl); }
.ss-srch svg { width: 17px; height: 17px; flex: none; }
.ss-srch input { flex: 1; background: none; border: 0; outline: none; color: var(--nee); font: inherit; font-size: 14px; min-width: 0; }
.ss-lbl { text-transform: uppercase; letter-spacing: .2em; font-size: 11.2px; color: var(--n88); margin: 20px 10px 8px; }
.ss-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--nbb); font-size: 15.4px; letter-spacing: .09em; cursor: pointer; border-left: 2px solid transparent; }
.ss-nav a svg { width: 17px; height: 17px; flex: none; }
.ss-nav a:hover { color: var(--nff); }
.ss-nav a.on { color: var(--nff); font-weight: 600; border-color: #3d8bfd; background: linear-gradient(90deg, #1b2a40, transparent); }
.ss-main { min-width: 0; container-type: inline-size; }
.ss-sec + .ss-sec { border-top: 1px solid var(--n33); margin-top: 40px; }
.ss-grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; align-items: start; }
@container (min-width: 900px) { .ss-grid { grid-template-columns: 1fr 1fr; } .ss-card.span { grid-column: 1 / -1; } }
.ss-sep { border-top: 1px solid var(--n33); margin-top: 12px; padding-top: 12px; }
.ss-btn.dim { opacity: .45; }
.ss-link { color: #3d8bfd; cursor: pointer; }
.ss-mem { position: relative; display: flex; justify-content: space-between; font-size: 11.2px; color: var(--n99); padding: 12px 0 10px; }
.ss-mem i { position: absolute; left: 0; bottom: 0; height: 8px; background: #3bb54a; }
.ss-head { display: flex; align-items: center; gap: 14px; margin: 30px 0 18px; scroll-margin-top: 14px; }
.ss-sec:first-child .ss-head { margin-top: 0; }
.ss-hic { width: 40px; height: 40px; border-radius: 8px; background: var(--n2c); display: grid; place-items: center; color: var(--nff); flex: none; }
.ss-hic svg { width: 20px; height: 20px; }
.ss-head h3 { margin: 0; font-weight: 700; font-size: 21px; color: var(--nff); }
.ss-head p { margin: 2px 0 0; color: var(--n9a); font-size: 14px; }
.ss-card { background: var(--n23); border: 1px solid var(--n33); border-radius: 6px; margin-bottom: 16px; min-width: 0; }
.ss-card h4 { margin: 0; padding: 10px 14px; font-weight: 500; font-size: 17.5px; letter-spacing: .0125em; color: var(--nff); border-bottom: 1px solid var(--n33); display: flex; justify-content: space-between; align-items: center; }
.ss-b { padding: 12px 14px; font-size: 14px; color: var(--ndd); }
.ss-b h5 { margin: 6px 0 8px; font-size: 14px; color: var(--nff); }
.ss-b h5.ss-sub { font-size: 17.5px; font-weight: 500; letter-spacing: .0125em; }
.ss-b p { margin: 8px 0; }
.ss-kv { display: grid; grid-template-columns: auto 1fr auto 1fr; column-gap: 20px; }
.ss-kv > * { padding: 7px 0; border-bottom: 1px solid var(--n33); font-size: 12.25px; }
.ss-kv span { color: var(--n99); } .ss-kv b { font-weight: 400; text-align: right; font-family: ui-monospace, Menlo, monospace; color: var(--nee); }
.ss-lic { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-size: 14px; flex-wrap: wrap; }
.ss-lic em { font-style: normal; font-size: 10.5px; background: var(--n3a); border-radius: 12px; padding: 5px 10px; margin-left: 6px; color: var(--ndd); }
.ss-btns { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.ss-btn { border: 0; color: var(--nff); height: var(--h-ctl); padding: 0 16px; border-radius: var(--r-ctl); font: inherit; font-size: 14px; cursor: pointer; }
/* Text buttons centre their label (and any icon) with flex; line-height 1 keeps the caps on the middle. */
.ss-btn, .pk-upload, .pk-install, .openbtn, .btn-g { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
.ss-btn svg { width: 12px; height: 12px; flex: none; }
.ss-btn.green { background: #3bb54a; } .ss-btn.blue { background: #1a8cff; } .ss-btn.orange { background: #f5a00a; } .ss-btn.red { background: #e5484d; } .ss-btn.grey { background: var(--n4a); }
.ss-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--n33); }
.ss-row:last-child { border-bottom: 0; }
.ss-row > div { display: flex; flex-direction: column; }
.ss-row small { color: var(--n88); font-size: 11.2px; margin-top: 4px; }
.ss-maint .ss-row small { font-size: 14px; }
.mono2 { font-family: ui-monospace, Menlo, monospace; color: var(--nee); }
.ss-note { color: var(--naa); font-size: 14px; line-height: 1.5; }
.ss-tabs { display: flex; gap: 4px; padding: 6px 14px 0; border-bottom: 1px solid var(--n33); }
.ss-tabs span { padding: 6px 12px; font-size: 12.25px; font-weight: 500; letter-spacing: .09em; color: var(--naa); border-bottom: 2px solid transparent; }
.ss-tabs span.on { color: #3d8bfd; border-color: #3d8bfd; }
.ss-radio { display: flex; gap: 22px; padding: 4px 0; }
.ss-radio label { display: flex; align-items: center; gap: 8px; }
.ss-radio i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--n88); box-sizing: border-box; }
.ss-radio i.on { border-color: #3d8bfd; box-shadow: inset 0 0 0 3px var(--n23); background: #3d8bfd; }
.ss-input { flex: 1; background: var(--n11); color: var(--n77); display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--h-ctl); padding: 4px 10px; font-size: 14px; border-radius: var(--r-ctl); }
.ss-b .yellow-box { font-size: 14px; font-weight: 700; padding: 8px 14px; }
.ss-card em.ok { font-style: normal; font-size: 10.5px; background: #3bb54a; color: var(--nff); border-radius: 10px; padding: 2px 8px; margin-left: 6px; }
.ss-logs { height: 260px; font-family: Menlo, ui-monospace, monospace; }
.ss-logs .in { color: #34e2e2; font-weight: 700; }
.ss-x { color: var(--naa); font-size: 14px; }
.ss-seg { display: inline-flex; border: 1px solid var(--n44); border-radius: var(--r-ctl); overflow: hidden; font-size: 12px; }
.ss-seg > * { display: flex; align-items: center; height: calc(var(--h-ctl) - 2px); padding: 0 12px; line-height: 1; font-weight: 500; letter-spacing: .09em; white-space: nowrap; }
.ss-seg b { background: #3bb54a; color: var(--nff); }
.ss-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ss-stat { background: var(--n11); border-radius: 4px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; }
.ss-stat span { font-size: 10px; color: rgba(255, 255, 255, .55); text-transform: uppercase; letter-spacing: .04em; }
.ss-stat b { font-weight: 600; font-size: 23.8px; color: #3bb54a; }
.ss-stat b.sm { font-size: 15.4px; line-height: 28.56px; } .ss-stat b.white { color: var(--nff); }
.ss-stat small.mono { font-family: ui-monospace, Menlo, monospace; }
.ss-stat small { font-size: 10px; color: var(--n77); }
.ss-stat i { position: absolute; left: 0; bottom: 0; height: 3px; background: #3bb54a; }
/* Packages on narrow screens: no gear column or sidebar tag (both are in the ⋮ menu), compact versions. */
@container (max-width: 560px) {
  .pk-row { grid-template-columns: 26px minmax(0, 1fr) auto 30px; }
  .pk-row > .pk-ic, .pk-row.pk-head span:nth-child(2), .pk-sb { display: none; }
  .pk-row .pk-ver { min-width: 0; }
  .pk-row .pk-ver i { display: none; }
  .pk-dotbtn { width: 26px; }
  .pk-row.pk-head span:nth-child(4) { min-width: 0; }
  .pk2 { padding: 18px 14px 40px; }
}
.pk-name > a, .pk-name > span:not(.pk-sb) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* HTTP Advanced (PAGES.http): FlowGrid's shell (.fg) with its own font and parts */
.fg.ha { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; grid-template-columns: 270px minmax(0, 1fr); }
.fg.ha .fg-nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg.ha .fg-nav { gap: 2px; padding-top: 26px; }
.fg-grp { display: flex; justify-content: space-between; align-items: center; color: var(--nff); font-size: 17px; margin: 14px 0 4px; padding-right: 10px; }
.fg-grp:first-child { margin-top: 0; }
.fg-grp svg { width: 16px; height: 16px; color: var(--ndd); }
.fg.ha .fg-nav a { font-size: 16px; padding: 9px 16px; }
.fg.ha .fg-nav a svg { width: 14px; height: 14px; }
.fg.ha .fg-nav a.live svg { color: #3bb54a; }
.ha-sep { border-top: 1px solid var(--n44); margin: 14px 0 8px; }
.fg.ha .fg-head b { font-weight: 600; }
.ha-title { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 16px; }
.ha-title h3 { margin: 0; font-size: 24px; font-weight: 600; color: var(--nff); }
.ha-title span { display: flex; align-items: center; gap: 4px; }
.ha-title .ss-btn { margin-right: 4px; }
.ha-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; align-items: start; }
.ha-cols > div { display: grid; gap: 10px; }
.fg.ha .fg-card { padding: 22px 24px; min-height: 0; }
.fg.ha .fg-card h4 { margin: 0 0 6px; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; align-items: center; }
.fg.ha .fg-card h4 svg.q { width: 20px; height: 20px; color: var(--nbb); }
.ha-sub { margin: 0 0 18px; color: var(--n99); font-size: 13px; line-height: 1.5; }
.fg.ha label { display: block; color: var(--ndd); font-size: 14px; margin: 14px 0 6px; }
.ha-in { background: var(--n1e); border: 1px solid var(--n55); border-radius: 2px; padding: 9px 12px; font-size: 14px; color: var(--nee); }
.ha-in.tall { min-height: 42px; }
.ha-th { display: grid; grid-template-columns: 1fr 1fr; padding: 22px 8px 10px; font-size: 14px; color: var(--ndd); border-bottom: 1px solid var(--n44); }
.ha-add { display: flex; justify-content: center; padding: 12px 0 0; }
.ha-param { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px; color: var(--nee); font-size: 16px; }
.ha-param svg { width: 16px; height: 16px; }

/* Ember+ device core (PAGES.emberp) on FlowGrid's shell (.fg) */
.fg.em .fg-nav { gap: 6px; }
.fg.em .fg-grp { font-size: 20px; margin-bottom: 8px; }
.em-sel { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--n11); border: 1px solid var(--n3a); border-radius: var(--r-ctl); height: var(--h-ctl); box-sizing: border-box; padding: 0 10px; font-size: 13px; color: var(--nee); white-space: nowrap; }
.em-sel svg { width: 13px; height: 13px; color: var(--naa); flex: none; }
.em-sel span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fg.em .fg-nav .em-sel { margin-bottom: 8px; }
.fg.em .em-card { min-height: 0; padding: 16px 16px 30px; }
.em-sws { display: flex; gap: 24px; flex-wrap: wrap; font-size: 15px; color: var(--nee); }
.em-sw { display: flex; align-items: center; gap: 8px; }
.fg.em .em-card h4 { margin: 22px 0 16px; font-size: 22px; }
.em-conn { display: flex; align-items: center; gap: 8px; }
.em-conn .em-sel { width: 290px; }

/* Tailscale / WireGuard (chimp layout, PAGES.tailscale / .wireguard) on FlowGrid's shell */
.fg.cp .fg-nav { padding: 30px 22px; gap: 2px; }
.fg.cp .fg-nav a { font-size: 16px; padding: 9px 10px; gap: 10px; }
/* Active item as in chimp's sidebar: a grey tint of the text colour, medium weight. */
.fg.cp .fg-nav a.on { background: color-mix(in oklab, var(--nff) 15%, transparent); font-weight: 500; }
.fg.cp .fg-nav a[data-act] { cursor: pointer; }
.fg.cp .fg-nav a[data-act]:not(.on):hover { background: color-mix(in oklab, var(--nff) 8%, transparent); }
.fg.cp .fg-nav a svg { width: 20px; height: 20px; }
.cp-sp { border-top: 1px solid var(--n55); margin: 4px 0; }
.cp-title { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 16px; }
.cp-title h2 { margin: 0; font-size: 19px; font-weight: 600; color: var(--nff); }
.cp-r .ss-btn, .cp-title .ss-btn, .cp-acts .ss-btn { white-space: nowrap; }
.cp-tun, .cp-card { border: 1px solid var(--n55); border-radius: 12px; padding: 16px; margin-bottom: 12px; color: var(--nee); font-size: 14px; }
.fg-head + .cp-card { margin-top: 24px; }
.cp-card h4 { margin: 4px 8px 16px; font-size: 16px; font-weight: 600; color: var(--nff); }
.cp-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-l, .cp-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-l h3 { margin: 0 4px 0 0; font-size: 16px; font-weight: 500; color: var(--nff); }
.cp-badge { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--n3a); color: var(--ndd); }
.cp-badge.ok { background: #16a34a; color: var(--nff); }
.cp-badge.bad { background: #c9302c; color: var(--nff); }
.cp-ch { margin: 0 8px 12px; } .cp-ch h4 { margin: 0; }
.cp-empty { margin: 0 8px; color: var(--n88); }
.cp-card > .cp-tun:last-child { margin-bottom: 0; }
.cp-tab { width: 100%; border-collapse: collapse; }
.cp-tab th { text-align: left; font-weight: 500; color: var(--n99); padding: 6px 8px; border-bottom: 1px solid var(--n44); }
.cp-tab td { padding: 8px; border-bottom: 1px solid var(--n33); }
.cp-tab tr:last-child td { border-bottom: 0; }
.cp-rows { padding: 6px 16px; }
.cp-rows .cp-acts { margin: 8px 0 10px; }
.cp-in { flex: 0 1 120px; color: var(--nee); }
.cp-tree { line-height: 1.9; padding: 16px 24px; }
.cp-card .app-hero h4 { margin: 0 0 4px; }
.cp-sub { margin: -8px 8px 12px; color: var(--n99); }
.fg-main > .cp-lead { margin: -8px 0 16px; font-size: 14px; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cp-grid .cp-card { margin: 0; }
.cp-wide { flex: 1; }
.cp-list { border: 1px solid var(--n44); border-radius: 8px; margin: 0 8px; }
.cp-li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--n44); }
.cp-li:last-child { border-bottom: 0; }
.cp-li.on { background: color-mix(in oklab, var(--nff) 6%, transparent); }
.cp-li b { font-weight: 500; }
.cp-li small { display: block; font-size: 11px; color: var(--n88); }
.cp-li i { font-size: 12px; color: var(--n88); }
.cp-mono { font-family: ui-monospace, Menlo, monospace; }
.cp-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 14px 8px 4px; }
.cp-kv span { color: var(--n99); } .cp-kv b { font-weight: 400; overflow-wrap: anywhere; }
.cp-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--n44); margin-top: 14px; padding-top: 10px; }
.cp-foot label { display: flex; align-items: center; gap: 8px; }
.cp-acts { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* Phone navigation (addMobileNav): below 768px of page width a page's side
   menu becomes a dropdown with the current item, as in the chimp layout. */
.content { container-type: inline-size; container-name: page; }
.mnav { display: none; position: relative; }
.mnav-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 48px; padding: 0 14px; background: var(--n1f); border: 1px solid var(--n55); border-radius: 8px; color: var(--nee); font: inherit; font-size: 16px; cursor: pointer; }
.mnav-btn > svg { width: 16px; height: 16px; color: var(--naa); flex: none; }
.mnav-cur { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mnav-cur svg { width: 18px; height: 18px; flex: none; }
.mnav-cur svg:not(:first-child) { display: none; } /* drop a submenu chevron */
.mnav-pop { display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; min-width: 224px; max-height: 320px; overflow-y: auto; background: var(--n26); border: 1px solid var(--n55); border-radius: 8px; padding: 4px 0; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.mnav.open .mnav-pop { display: block; }
.mnav-pop > a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--nee); font-size: 14px; border-bottom: 1px solid var(--n3a); cursor: pointer; border-left: 0; background: none; letter-spacing: 0; }
.mnav-pop > a:last-child { border-bottom: 0; }
.mnav-pop > a.on { background: var(--n33); }
.mnav-pop > a svg { width: 14px; height: 14px; flex: none; }
.mnav-pop > a svg:not(:first-child) { display: none; }
.mnav-pop > .fg-grp { margin: 8px 14px 2px; font-size: 12px; color: var(--n99); text-transform: uppercase; letter-spacing: .06em; }
.mnav-pop > .fg-grp svg { display: none; }
@container page (max-width: 767px) {
  /* dropdown row as tall as it needs, the main card fills the rest down to the bottom */
  .fg { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; gap: 10px; padding: 8px; align-items: stretch; }
  .fg > .mnav { align-self: start; }
  .fg > .mnav { display: block; background: var(--n2a); border: 1px solid var(--n3a); border-radius: 12px; padding: 8px; }
  .fg > .mnav .mnav-pop { left: 8px; top: calc(100% - 4px); }
  .fg-nav { display: none !important; }
  .fg-head > svg { display: none; }
  .fg-main { padding: 16px; }
  .fg-cards, .ha-cols { grid-template-columns: 1fr; }
  .ss { grid-template-columns: 1fr; padding: 12px 12px 40px; }
  .ss > .mnav { display: block; }
  .ss-nav { display: none !important; }
  .ss-kv { grid-template-columns: auto 1fr; }
  .ss-row { flex-wrap: wrap; }
  .ss-row .ss-input { min-width: 0; flex: 1 1 100%; }
}

/* Reactor bottom tab bar (rxBar): only below 768px of page width. The Tree
   pane exists only there. */
.rx-bar { display: none; }
.cfg-tree { display: none; }
.rx-tree { list-style: none; margin: 0; padding: 14px 16px; font-size: 16px; color: var(--ndd); line-height: 2; }
.rx-tree ul { list-style: none; margin: 0; padding-left: 18px; }
@container page (max-width: 767px) {
  .rx { grid-template-columns: 1fr !important; }
  .rx > .div { display: none; }
  .rx [data-pane] { display: none; }
  .rx[data-tab="panels"] [data-pane="panels"], .rx[data-tab="devices"] [data-pane="devices"],
  .rx[data-tab="tree"] [data-pane="tree"], .rx[data-tab="controller"] [data-pane="controller"],
  .rx[data-tab="inspector"] [data-pane="inspector"] { display: block; }
  .rx[data-tab="controller"] [data-pane="controller"] { display: flex; }
  .page:has(> .rx-bar) > .footer { display: none; }
  .rx-bar { display: flex; position: sticky; bottom: 0; z-index: 20; background: var(--n14); border-top: 1px solid var(--n2a); padding: 6px 0 8px; }
  .rx-bar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: var(--n8a); font: inherit; font-size: 11px; cursor: pointer; padding: 4px 0; }
  .rx-bar button svg { width: 22px; height: 22px; }
  .rx-bar button.on { color: var(--nff); }
}
@media (max-width: 760px) { body:has(.rx-bar) .mk-fab { bottom: 80px; } } /* clear the Reactor tab bar */
/* "Reactor entry" experiment: Reactor views indented under it, only where labels show */
.sb-item.rx-sub { transition: background .15s, padding .2s; }
.shell.open .sb-item.rx-sub, .shell.drawer .sb-item.rx-sub { padding-left: 30px; }