/* ============================================================
   Babylon — HUD build.
   Accent green #4ADE80 is the client's own Voice Connected token.
   Dark is the designed mode; light is the daylight adaptation.
   The UI mockups are pinned dark in both, because the app is.
   ============================================================ */

:root {
  --ground: #E9EEEB;
  --deep: #DFE6E2;
  --panel: #FFFFFF;
  --panel-2: #F2F6F3;
  --line: #C9D4CD;
  --line-2: #DDE5DF;
  --ink: #071310;
  --ink-2: #3C4B45;
  --muted: #586961;

  --green: #10693F;
  --green-soft: #2E8F5E;
  --green-wash: rgba(16, 105, 63, 0.10);
  --amber: #8A5300;
  --red: #A4231C;

  --band: #0C4F32;
  --band-ink: #E8F6EE;
  --band-ink-2: #9CCDB0;

  --hud: "Chakra Petch", "Arial Narrow", sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, Consolas, monospace;
  --app: "Inter", "Helvetica Neue", Arial, sans-serif;

  --edge: clamp(1rem, 4.5vw, 3.5rem);
  --stack: clamp(3.5rem, 8vw, 6.5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #05080A;
    --deep: #040708;
    --panel: #0A1014;
    --panel-2: #0E171C;
    --line: #17262D;
    --line-2: #101B21;
    --ink: #DDE9E4;
    --ink-2: #93A6A0;
    --muted: #71857D;

    --green: #4ADE80;
    --green-soft: #7CEAA4;
    --green-wash: rgba(74, 222, 128, 0.09);
    --amber: #F0A93B;
    --red: #FF6259;

    --band: #4ADE80;
    --band-ink: #03150A;
    --band-ink-2: #0A3B1F;
  }
}

:root[data-theme="dark"] {
  --ground: #05080A;
  --deep: #040708;
  --panel: #0A1014;
  --panel-2: #0E171C;
  --line: #17262D;
  --line-2: #101B21;
  --ink: #DDE9E4;
  --ink-2: #93A6A0;
  --muted: #71857D;

  --green: #4ADE80;
  --green-soft: #7CEAA4;
  --green-wash: rgba(74, 222, 128, 0.09);
  --amber: #F0A93B;
  --red: #FF6259;

  --band: #4ADE80;
  --band-ink: #03150A;
  --band-ink-2: #0A3B1F;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: 78rem; margin: 0 auto; padding: 0 var(--edge); }
.narrow { max-width: 62rem; }

h1, h2, h3, h4 { font-family: var(--hud); margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- HUD primitives ---------- */

.chamfer {
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.brackets { position: relative; }
.brackets::before,
.brackets::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid var(--green);
  opacity: 0.75;
  pointer-events: none;
}
.brackets::before { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.brackets::after { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }

.tick {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--green) 0, var(--green) 64px, var(--line) 64px, var(--line) 100%);
  opacity: 0.8;
}

/* ---------- ByteFoundry strip ---------- */

.bf-strip { background: var(--deep); border-bottom: 1px solid var(--line-2); }
.bf-strip a {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.bf-strip a:hover { color: var(--ink-2); }
.bf-strip img { display: block; }
.bf-strip b { color: #F36523; font-weight: 600; }

/* ---------- hero lockup ---------- */

.lockup {
  display: block;
  width: min(308px, 80%);
  height: auto;
  margin-bottom: 1.75rem;
}

/* ---------- top bar ---------- */

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--deep);
}

.topbar .inner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0;
}

.mark { display: block; width: 1.5rem; height: 1.5rem; color: var(--green); flex: none; }

.wordmark {
  font-family: var(--hud);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.topbar .meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ---------- hero ---------- */

.hero { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; }

/* forward hero — home only: centered, the station large behind the words.
   No other page centers; this is the vision geometry. */
.hero.forward { text-align: center; padding: clamp(3rem, 6vw, 5rem) 0; }
.hero.forward h1 { font-size: clamp(2.1rem, 4.8vw, 3.9rem); max-width: 28ch; margin-left: auto; margin-right: auto; }
.hero.forward h1 span { display: block; }
.hero.forward .lockup { width: 232px; height: auto; display: block; margin: 0 auto; }
.hero.forward .lede { max-width: 58ch; margin-left: auto; margin-right: auto; }
.hero.forward .station {
  left: 50%; right: auto; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(26rem, 46vw, 42rem); opacity: 0.2;
}

/* the station — home hero art, an original wheel station in line-work */
.hero .station {
  position: absolute; top: 50%; right: clamp(-5rem, -3vw, -1rem);
  transform: translateY(-50%);
  width: clamp(20rem, 34vw, 34rem); height: auto;
  color: var(--green); opacity: 0.42; pointer-events: none;
}
.hero .shell { position: relative; }
.station .rot { transform-origin: 240px 240px; animation: station-spin 240s linear infinite; }
.station .beacon { animation: station-beacon 4s ease-in-out infinite; }
@keyframes station-spin { to { transform: rotate(360deg); } }
@keyframes station-beacon { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }
@media (max-width: 56rem) { .hero .station { display: none; } }

.hero h1 {
  font-weight: 700;
  font-size: clamp(2.4rem, 7.4vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  max-width: 17ch;
}

.hero h1 span { color: var(--green); }

.hero .lede {
  margin-top: 1.6rem;
  max-width: 56ch;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--ink-2);
  line-height: 1.55;
}

.readouts {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  border: 1px solid var(--line);
  border-right: 0;
}

.readout { border-right: 1px solid var(--line); padding: 0.95rem 1.1rem 1.1rem; }

.readout .k {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.readout .v {
  font-family: var(--hud);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-top: 0.2rem;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.readout .v small { font-size: 0.72em; color: var(--ink-2); }

/* ---------- sections ---------- */

.band { padding: var(--stack) 0; border-top: 1px solid var(--line-2); }
.band.alt { background-color: var(--panel); }

.kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  max-width: 8rem;
}

.band h2 {
  font-weight: 700;
  font-size: clamp(1.7rem, 3.9vw, 2.8rem);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  max-width: 22ch;
}

.band h3 {
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.intro {
  margin-top: 1.1rem;
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 1.05rem;
}

.intro + .intro { margin-top: 0.9rem; }

/* ---------- generic cards ---------- */

.cards {
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.card {
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 1.35rem 1.35rem 1.5rem;
}

.alt .card { background: var(--ground); }

.card .tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.8rem;
}

.card h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.02rem;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.45rem;
}

.card p { color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; }

/* ---------- verb table ---------- */

.verbs { margin-top: 2.75rem; overflow-x: auto; }

table.verbs-t {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}

table.verbs-t th {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  font-weight: 400;
  padding: 0 1.25rem 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

table.verbs-t td {
  padding: 1rem 1.25rem 1rem 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  vertical-align: top;
}

table.verbs-t td.v {
  font-family: var(--hud);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}

table.verbs-t td.n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--green);
  white-space: nowrap;
}

.glyph {
  display: inline-block;
  width: 1.4rem;
  text-align: center;
  color: var(--green);
  font-family: var(--mono);
}

.glyph.hot { color: var(--red); }
.glyph.warm { color: var(--amber); }

/* ---------- rules list ---------- */

.rules { margin-top: 2.75rem; display: grid; gap: 0; }

.rule-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line-2);
  align-items: start;
}

.rule-row:last-child { border-bottom: 1px solid var(--line-2); }

.rule-row .no {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--green);
  padding-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.rule-row h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.04rem;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.35rem;
}

.rule-row p { color: var(--ink-2); max-width: 68ch; font-size: 0.97rem; }
.rule-row p b { color: var(--ink); font-weight: 600; }

/* ---------- claim band ---------- */

.claim { background: var(--band); color: var(--band-ink); padding: clamp(3.5rem, 8vw, 6rem) 0; }

.claim h2 {
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5.6vw, 4rem);
  line-height: 1.0;
  max-width: 17ch;
}

.claim p { margin-top: 1.5rem; max-width: 54ch; font-size: clamp(1rem, 1.6vw, 1.15rem); }
.claim .fine { margin-top: 2rem; font-family: var(--mono); font-size: 0.75rem; color: var(--band-ink-2); }

/* ---------- programs ---------- */

.programs { margin-top: 2.5rem; }

.program {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 2rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}

.program:last-child { border-bottom: 1px solid var(--line); }

.program .name {
  font-family: var(--hud);
  font-weight: 600;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.program .where {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  grid-row: 1;
  grid-column: 2;
  white-space: nowrap;
}

.program .what { grid-column: 1; color: var(--ink-2); font-size: 0.97rem; max-width: 64ch; }

/* ---------- not built ---------- */

.notyet { margin-top: 2.25rem; }

.notyet div {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-2);
}

.notyet dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  padding-top: 0.2rem;
}

.notyet dd { margin: 0; color: var(--ink-2); font-size: 0.97rem; }

@media (max-width: 42rem) {
  .notyet div { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .rule-row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
}

/* ---------- feature pins on the home mockup ---------- */
.app .pin {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border: 1.5px solid rgba(74, 222, 128, 0.85); border-radius: 50%;
  background: rgba(74, 222, 128, 0.12);
  box-shadow: 0 0 0 3px rgba(7, 7, 9, 0.6);
  display: grid; place-items: center; z-index: 3;
  animation: pin-pulse 3s ease-in-out infinite;
}
.app .pin::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; }
.app .pin span {
  position: absolute; left: 50%; bottom: 145%; transform: translateX(-50%);
  background: #070709; border: 1px solid #4ADE80; color: #DDE9E4;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.3rem 0.55rem; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}
.app .pin.flip span { left: auto; right: 0; transform: none; }
.app .pin:hover, .app .pin:focus-visible { border-style: solid; }
.app .pin:hover span, .app .pin:focus-visible span { opacity: 1; }
@keyframes pin-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } }

/* ---------- figure frame for mockups ---------- */

.figure { margin: 2.75rem 0 0; }

.figure .frame {
  border: 1px solid var(--line);
  background: #070709;
  padding: 10px;
  overflow-x: auto;
}

.figure figcaption {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.figure figcaption .lead { color: var(--green); text-transform: uppercase; letter-spacing: 0.14em; }

/* ============================================================
   APP MOCKUP — reproduces the shipping client chrome.
   Colours are the client's real tokens; pinned dark in both
   themes because Babylon has no light theme.
   ============================================================ */

.app {
  --s950: #070709;
  --s900: #1a1a1e;
  --s800: #222327;
  --s700: #28282d;
  --s600: #2c2d32;
  --s500: #36373e;
  --s400: #6d6f78;
  --s300: #80848e;
  --bab500: #476de8;
  --bab400: #7b96ef;

  font-family: var(--app);
  display: grid;
  grid-template-columns: 48px 240px minmax(0, 1fr) 224px;
  height: 560px;
  min-width: 60rem;
  background: var(--s700);
  color: #e4e4e7;
  font-size: 14px;
  line-height: 1.45;
  border: 1px solid #000;
}

.app.board-mode { grid-template-columns: 48px 240px minmax(0, 1fr); height: 520px; position: relative; }

.app * { box-sizing: border-box; }

/* server rail */
.rail { background: var(--s950); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }

.rail .tile {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: #fff;
  position: relative;
}

.rail .tile.on { border-radius: 12px; }
.rail .tile.on::before {
  content: ""; position: absolute; left: -12px; top: 2px;
  width: 4px; height: 36px; border-radius: 0 4px 4px 0; background: #fff;
}

/* sidebar */
.side { background: var(--s900); display: flex; flex-direction: column; min-width: 0; }

.side .head {
  height: 48px; display: flex; align-items: center; padding: 0 16px;
  border-bottom: 1px solid var(--s700); background: rgba(26,26,30,0.5);
  font-weight: 600; font-size: 15px; color: #fff; gap: 6px;
}

.side .head .chev { margin-left: auto; color: var(--s300); font-size: 11px; }

.side .tree { flex: 1; overflow: hidden; padding: 8px; display: flex; flex-direction: column; gap: 2px; }

.cat {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px 4px; margin-top: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a1a1aa;
}
.cat:first-child { margin-top: 0; }

.chan {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 4px; color: #d4d4d8; font-size: 14px;
}
.chan.on { background: rgba(40,40,45,0.5); color: #fff; }
.chan .ic { width: 20px; text-align: center; color: #a1a1aa; font-size: 15px; }
.chan .ic.voice { color: #60a5fa; }
.chan .cnt { margin-left: auto; font-size: 11px; color: #a1a1aa; background: var(--s800); border-radius: 3px; padding: 0 4px; }

.vpart { display: flex; align-items: center; gap: 8px; padding: 2px 8px 2px 32px; font-size: 12px; color: #d4d4d8; }
.vpart .av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #fff; }
.vpart .av.spk { box-shadow: 0 0 0 2px #22c55e; }
.vpart .live { font-size: 9px; font-weight: 700; background: #ef4444; color: #fff; border-radius: 3px; padding: 1px 4px; }

/* comms rail */
.comms { border-top: 1px solid var(--s700); padding: 8px; font-size: 12px; }

.comms .hd {
  display: flex; align-items: center; gap: 6px; padding: 0 4px 4px;
  color: #71717a; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.comms .hd .rx { font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; font-weight: 400; margin-left: auto; }
.comms .hd .more { color: #a1a1aa; letter-spacing: 0; }

.rxb {
  margin-bottom: 4px; border-radius: 4px; padding: 4px 8px; font-weight: 600; font-size: 11.5px;
  background: rgba(239,68,68,0.35); color: #fecaca;
}

.net { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 4px; }
.net:hover { background: rgba(40,40,45,0.6); }

.cap {
  width: 20px; height: 18px; border: 1px solid var(--s600); border-radius: 3px;
  display: grid; place-items: center; font-family: var(--mono); font-size: 10px; color: #a1a1aa;
  flex: none;
}
.cap.vb { width: 16px; font-family: inherit; }
.cap.dim { color: #52525b; border-color: var(--s600); }
.cap.hot { border-color: rgba(220,38,38,0.7); color: #f87171; }
.cap.warm { border-color: rgba(245,158,11,0.7); color: #fbbf24; }
.cap.fire { border-color: transparent; color: #09090b; font-weight: 700; }

.net .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.net .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d4d4d8; }
.net .tier { font-size: 10px; color: #a1a1aa; border: 1px solid var(--s600); border-radius: 3px; padding: 0 3px; }
.net .sq { color: #71717a; font-size: 11px; width: 14px; text-align: center; }
.net .px { color: var(--bab400); font-size: 11px; }

.trunc { margin-top: 6px; padding: 0 4px; color: #f59e0b; font-size: 11px; line-height: 1.35; }

/* voice panel */
.vp { border-top: 1px solid var(--s700); background: rgba(34,35,39,0.5); padding: 8px 12px; }
.vp .r1 { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #4ade80; }
.vp .r1 .d { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.vp .r2 { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #a1a1aa; margin-top: 2px; }
.vp .r3 { display: flex; gap: 4px; margin-top: 6px; }
.vp .r3 span {
  flex: 1; text-align: center; border-radius: 4px; padding: 4px 0; font-size: 12px; color: #a1a1aa; background: var(--s800);
}
.vp .r3 span.dg { background: rgba(239,68,68,0.2); color: #f87171; }
.vp .r4 { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: #d4d4d8; }
.vp .r4 .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* user panel */
.up { border-top: 1px solid var(--s700); background: rgba(7,7,9,0.5); padding: 8px; display: flex; align-items: center; gap: 8px; }
.up .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; position: relative; }
.up .av::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: #10b981; border: 2px solid var(--s950); }
.up .nm { min-width: 0; }
.up .nm b { display: block; font-size: 13px; font-weight: 600; color: #f4f4f5; }
.up .nm span { display: block; font-size: 11px; color: #a1a1aa; }
.up .acts { margin-left: auto; display: flex; gap: 6px; color: #a1a1aa; font-size: 12px; }

/* chat pane */
.main { background: var(--s700); display: flex; flex-direction: column; min-width: 0; }

.main .head {
  height: 48px; flex: none; display: flex; align-items: center; gap: 6px;
  padding: 0 16px; border-bottom: 1px solid var(--s700); background: var(--s800);
}
.main .head .h { color: #a1a1aa; font-size: 16px; }
.main .head b { color: #fff; font-weight: 600; }
.main .head .sep { color: #52525b; margin: 0 4px; }
.main .head .topic { color: #a1a1aa; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.feed { flex: 1; overflow: hidden; padding: 8px 16px 0; }

.divider { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.divider .l { flex: 1; height: 1px; background: var(--s600); }
.divider span { font-size: 11px; font-weight: 500; color: #a1a1aa; }

.msg { display: flex; gap: 12px; padding: 2px 0; }
.msg.grp { margin-top: 10px; }
.msg .g { width: 40px; flex: none; }
.msg .g .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; margin-top: 2px; }
.msg .bd { min-width: 0; flex: 1; }
.msg .hdr { display: flex; align-items: baseline; gap: 8px; }
.msg .hdr b { font-size: 15px; font-weight: 500; }
.msg .hdr time { font-size: 12px; color: #a1a1aa; }
.msg .tx { font-size: 16px; line-height: 1.375; color: #dcddde; }
.msg .tx code { background: rgba(0,0,0,0.3); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.85em; font-family: var(--mono); }
.msg .tx strong { font-weight: 700; color: #fff; }

.replyref {
  display: flex; align-items: center; gap: 4px; margin-bottom: 4px;
  border-left: 2px solid var(--s500); padding-left: 8px; font-size: 12px; color: #a1a1aa;
}
.replyref b { font-weight: 500; color: #d4d4d8; }

.reacts { display: flex; gap: 4px; margin-top: 4px; }
.reacts span {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--s800); border: 1px solid transparent; border-radius: 8px;
  padding: 1px 6px; font-size: 12px; color: #b5bac1;
}
.reacts span.mine { border-color: var(--bab500); background: rgba(71,109,232,0.15); color: #c7d2fe; }

.typing { height: 24px; padding: 0 16px; font-size: 12px; color: #a1a1aa; display: flex; align-items: center; }

.composer { padding: 0 16px 16px; }
.composer .box {
  background: var(--s700); border: 1px solid var(--s600); border-radius: 8px;
  padding: 8px 16px; display: flex; align-items: center; gap: 12px; color: #72767d; font-size: 15px;
}
.composer .box .plus { color: #a1a1aa; }
.composer .box .right { margin-left: auto; display: flex; gap: 10px; color: #a1a1aa; font-size: 13px; }

/* member list */
.members { background: var(--s900); padding: 12px 8px; min-width: 0; }
.members .grp { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a1a1aa; padding: 12px 8px 4px; }
.members .grp:first-child { padding-top: 0; }
.members .m { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 4px; }
.members .m .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; position: relative; flex: none; }
.members .m .av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--s900); }
.members .m .av.on::after { background: #10b981; }
.members .m .av.idle::after { background: #f59e0b; }
.members .m .av.dnd::after { background: #ef4444; }
.members .m .av.off::after { background: #71717a; }
.members .m .nm { min-width: 0; }
.members .m .nm b { display: block; font-size: 14px; font-weight: 500; }
.members .m .nm span { display: block; font-size: 12px; color: #a1a1aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.members .m.dim { opacity: 0.4; }

/* comms board overlay */
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); padding: 24px; display: grid; }
.boardcard {
  margin: 0 auto; width: 100%; max-width: 48rem; background: var(--s900);
  border: 1px solid var(--s700); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden;
}
.boardcard .bh { padding: 16px 20px; border-bottom: 1px solid var(--s700); display: flex; align-items: baseline; gap: 12px; }
.boardcard .bh .t { display: block; font-family: var(--app); font-size: 16px; font-weight: 600; color: #fff; margin: 0; }
.boardcard .bh p { font-size: 12px; color: #a1a1aa; }
.boardcard .bh .x { margin-left: auto; font-size: 12px; color: #a1a1aa; border: 1px solid var(--s600); border-radius: 4px; padding: 3px 10px; }
.boardcard .bb { padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }

.netcard { border: 1px solid var(--s700); border-radius: 6px; background: var(--s800); overflow: hidden; }
.netcard .top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.netcard .top .nm { font-weight: 600; color: #fff; font-size: 13px; flex: 1; }
.netcard .top .px { color: var(--bab400); font-size: 11px; }
.netcard .top .reach { font-size: 11px; color: #a1a1aa; font-variant-numeric: tabular-nums; }
.netcard .fire { background: rgba(239,68,68,0.25); color: #fecaca; font-weight: 600; font-size: 12px; padding: 5px 12px; display: flex; gap: 12px; }
.netcard .fire .t { margin-left: auto; font-variant-numeric: tabular-nums; }
.netcard .who { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.netcard .who .p { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.netcard .who .p .n { color: #d4d4d8; }
.netcard .who .p .why { margin-left: auto; font-size: 11px; }
.netcard .who .p .why.inch { color: #d4d4d8; }
.netcard .who .p .why.mon { color: var(--bab400); }
.netcard .who .p .why.ent { color: #71717a; }

/* ---------- anatomy diagram ---------- */

.anatomy {
  margin-top: 2.75rem;
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  overflow-x: auto;
}

.alt .anatomy { background: var(--ground); }

.anatomy svg { display: block; width: 100%; min-width: 40rem; height: auto; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 1.75rem 0 3rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

footer .inner { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; align-items: center; }
footer .mark { width: 1rem; height: 1rem; }
footer .sp { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- catalogue ---------- */
.area { margin-top: 3.25rem; }
.area h3 { font-size: 1.25rem; }
.area .sub, .sub { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 0.35rem; }
.feat { margin: 1.25rem 0 0; }
.feat div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.25rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line-2); }
.feat dt { font-family: var(--hud); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--ink); margin: 0; padding-top: 0.1rem; }
.feat dd { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
.feat dd code, .notyet dd code { font-family: var(--mono); font-size: 0.85em; }
.chip { display: inline-block; font-family: var(--mono); font-weight: 400; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.12rem 0.4rem; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); margin-left: 0.45rem; vertical-align: middle; white-space: nowrap; }
.chip.part { color: var(--amber); border-color: var(--amber); }
.chip.api { color: var(--ink-2); }
.chip.lab { color: var(--green); border-color: var(--green); }
.jump { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.jump a { color: var(--green); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.jump a:hover { border-color: var(--green); }
.aud { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.net .tier.mon { color: #4ade80; border-color: #4ade80; }
.net .tier.live { color: #fbbf24; border-color: #fbbf24; }
.net .cnt { color: #a1a1aa; font-size: 11px; }
@media (max-width: 42rem) { .feat div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } }

/* ---------- scenes ---------- */
.scenes { margin-top: 2.75rem; display: grid; gap: 1rem; }
.scene { border: 1px solid var(--line); background: var(--panel); padding: 1.5rem 1.6rem 1.4rem; }
.scene .who { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin-bottom: 0.6rem; }
.scene h3 { font-size: 1.3rem; }
.scene p { color: var(--ink-2); margin-top: 0.8rem; max-width: 72ch; font-size: 1rem; }
.scene p code { font-family: var(--mono); font-size: 0.85em; }
.scene .uses { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; max-width: none; }
.use { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.22rem 0.5rem; border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; border-radius: 2px; }
a.use:hover { border-color: var(--green); color: var(--green); }
.use.next { border-style: dashed; color: var(--muted); }
.graph { border: 1px solid var(--line); background: var(--panel); padding: 1rem; }
.graph svg { width: 100%; height: auto; display: block; }
.feat div:target { background: var(--green-wash); outline: 1px solid var(--green); outline-offset: 4px; }

/* ============================================================
   Site-wide additions (WEB-6 redesign): nav, definitions,
   disclosure, status legend, level cards.
   ============================================================ */

.topbar .nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.35rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.topbar .nav a { color: var(--ink-2); text-decoration: none; padding: 0.45rem 0.8rem; border: 1px solid var(--line); border-bottom-width: 2px; white-space: nowrap; }
.topbar .nav a:hover { color: var(--ink); border-color: var(--green); }
.topbar .nav a[aria-current="page"] { color: var(--band-ink); background: var(--green); border-color: var(--green); }
/* Six links + the wordmark need ~54rem on one line; between that and the
   old 42rem breakpoint the nav wrapped mid-row and links landed under the
   pointer's remembered position ("click Features, hit Apps").
   Below 56rem the nav takes its designed full-width second row instead. */
@media (max-width: 56rem) { .topbar .inner { flex-wrap: wrap; } .topbar .nav { margin-left: 0; width: 100%; padding-top: 0.5rem; } }

/* first-use definitions: dotted underline, plain-words title on hover */
dfn { font-style: normal; font-weight: 600; color: var(--ink); text-decoration: underline dotted var(--green); text-underline-offset: 3px; cursor: help; }

/* disclosure blocks keep the numbers out of the way */
details.more { margin-top: 1.25rem; border: 1px solid var(--line); background: var(--panel-2); }
.alt details.more { background: var(--ground); }
details.more summary { cursor: pointer; padding: 0.7rem 1rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "+ "; }
details[open].more summary::before { content: "− "; }
details.more > :not(summary) { padding: 0 1rem 1rem; color: var(--ink-2); font-size: 0.95rem; }
details.more p + p { margin-top: 0.6rem; }
details.more ul { margin: 0; padding-left: 1.1rem; }
details.more li + li { margin-top: 0.35rem; }

/* status legend on the features page */
.legend { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.92rem; color: var(--ink-2); align-items: center; }
.legend .chip { margin-left: 0; margin-right: 0.35rem; }

/* collapsible catalogue areas */
details.area { margin-top: 1.5rem; border-top: 1px solid var(--line); }
details.area summary { cursor: pointer; padding: 1.1rem 0; list-style: none; display: flex; align-items: baseline; gap: 1rem; }
details.area summary::-webkit-details-marker { display: none; }
details.area summary h2, details.area summary h3 { font-size: 1.25rem; margin: 0; }
details.area summary .sub { margin: 0; }
details.area summary .n { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
/* WEB-30 follow-up: the bare "+" read as decoration — the expand affordance
   is now a labelled chip, and the whole row washes on hover so it reads as
   clickable everywhere, not just at the marker. */
details.area summary { flex-wrap: wrap; }
details.area summary:hover { background: var(--green-wash); }
details.area summary::after { content: "expand +"; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); border: 1px solid var(--green); padding: 0.3rem 0.7rem; white-space: nowrap; flex: none; }
details[open].area summary::after { content: "collapse −"; }
details.area summary:hover::after { background: var(--green); color: var(--band-ink); }
details.area .feat { margin-top: 0; padding-bottom: 1rem; }

/* level cards */
.levels { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.level { border: 1px solid var(--line); background: var(--panel-2); padding: 1.4rem 1.4rem 1.5rem; }
.alt .level { background: var(--ground); }
.level .tag { display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--green); margin-bottom: 0.6rem; }
.level h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.level p { color: var(--ink-2); font-size: 0.97rem; }
.level p + p { margin-top: 0.6rem; }

/* roadmap */
.road { margin-top: 2rem; }
.road h3 { margin-top: 2.25rem; font-size: 1.15rem; }
.road ul { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.road li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); font-size: 0.97rem; }
.road li .st { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding-top: 0.25rem; }
.road li .st.built { color: var(--green); }
.road li .st.test { color: var(--amber); }
.road li .st.doing { color: var(--green-soft); }

/* text links inside copy */
.band a:not(.use):not(.tab):not(.pin):not(.jump a), .claim a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.claim a { color: var(--band-ink); }

/* buttons */
.ctas { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn { display: inline-block; padding: 0.75rem 1.2rem; border: 1px solid var(--green); color: var(--green); text-decoration: none; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.btn:hover { background: var(--green-wash); }
.btn.solid { background: var(--green); color: var(--band-ink); }
.btn.solid:hover { background: var(--green-soft); }

/* the four page cards on Home */
.tabs { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.tab { display: block; border: 1px solid var(--line); border-bottom: 3px solid var(--line); background: var(--ground); padding: 1.4rem 1.4rem 1.5rem; color: inherit; text-decoration: none; }
.tab:hover { border-color: var(--green); }
.tab .tag { display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--green); margin-bottom: 0.7rem; }
.tab h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.tab p { color: var(--ink-2); font-size: 0.97rem; }
.band a.tab { text-decoration: none; color: inherit; }

/* ============================================================
   In-page tabs, no JavaScript: panes show on :target; with no
   target the first pane shows. Browsers without :has() get the
   plain scroll instead.
   ============================================================ */
.tabbed > .pane { display: none; }
.tabbed > .pane:target { display: block; }
.tabbed:not(:has(> .pane:target)) > .pane:first-of-type { display: block; }
@supports not selector(:has(a)) { .tabbed > .pane { display: block; } }
.pane { scroll-margin-top: 0.75rem; }
.tabbar { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 2.25rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.tabbar a { color: var(--ink-2); text-decoration: none; padding: 0.5rem 0.85rem; border: 1px solid var(--line); border-bottom-width: 2px; }
.tabbar a:hover { color: var(--ink); border-color: var(--green); }
.tabbar a[aria-current="true"] { color: var(--band-ink); background: var(--green); border-color: var(--green); }
.band .tabbar a { text-decoration: none; }
.hero .legend { margin-top: 2rem; }

/* ============================================================
   FEATURES-PAGE FIGURES (WEB-31) — per-section mockup extras.
   All selectors namespaced .mk-<section>-*, scoped under .app.
   ============================================================ */

/* -- chat -- */
.app .mk-chat-img {
  margin-top: 6px; width: 220px; height: 104px; border-radius: 6px;
  border: 1px solid var(--s600);
  background:
    radial-gradient(120px 60px at 70% 20%, rgba(123,150,239,0.35), transparent 70%),
    radial-gradient(140px 80px at 20% 85%, rgba(34,197,94,0.22), transparent 70%),
    linear-gradient(160deg, var(--s600), var(--s950));
}

/* -- voice -- */
.app .mk-voice-stage { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; align-content: start; overflow: hidden; }
.app .mk-voice-tile { background: var(--s900); border: 1px solid var(--s800); border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 12px; font-size: 13px; color: #d4d4d8; }
.app .mk-voice-tile .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: #fff; }
.app .mk-voice-tile .av.spk { box-shadow: 0 0 0 3px #22c55e; }
.app .mk-voice-tile.spk { border-color: rgba(34,197,94,0.6); }
.app .mk-voice-tile .nm { display: flex; align-items: center; gap: 6px; }
.app .mk-voice-ic { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; }
.app .mk-voice-off { position: relative; font-style: normal; font-size: 11px; }
.app .mk-voice-off::after { content: ""; position: absolute; left: -2px; top: 48%; width: calc(100% + 4px); height: 2px; background: #f87171; border-radius: 1px; transform: rotate(-45deg); }
.app .mk-voice-fly { position: absolute; left: 296px; top: 254px; width: 184px; background: var(--s950); border: 1px solid var(--s600); border-radius: 6px; padding: 10px 12px; box-shadow: 0 10px 28px rgba(0,0,0,0.6); font-size: 12px; z-index: 2; }
.app .mk-voice-fly b { display: block; color: #fff; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.app .mk-voice-fly .lbl { display: flex; justify-content: space-between; color: #a1a1aa; font-size: 11px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.app .mk-voice-slider { position: relative; height: 4px; border-radius: 2px; background: var(--s500); margin: 2px 0 6px; }
.app .mk-voice-slider::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 68%; border-radius: 2px; background: var(--bab500); }
.app .mk-voice-slider::after { content: ""; position: absolute; left: 68%; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.app .mk-voice-meter { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10px; color: #71717a; letter-spacing: 0.04em; text-transform: uppercase; }
.app .mk-voice-meter .bar { flex: 1; height: 5px; border-radius: 2px; background: var(--s950); position: relative; }
.app .mk-voice-meter .bar::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 58%; border-radius: 2px; background: #22c55e; }
.app .mk-voice-meter .bar::after { content: ""; position: absolute; left: 40%; top: -2px; width: 2px; height: 9px; background: #e4e4e7; border-radius: 1px; }

/* -- comms -- */
.app .mk-comms-cutin { margin-bottom: 4px; border-radius: 4px; padding: 4px 8px; font-weight: 600; font-size: 11.5px; background: rgba(245,158,11,0.3); color: #fbbf24; }
.app .mk-comms-role { flex: none; width: 14px; height: 14px; border-radius: 3px; display: grid; place-items: center; font-size: 9px; color: #fbbf24; background: rgba(245,158,11,0.18); border: 1px solid rgba(245,158,11,0.6); }

/* -- share -- */
/* screen-share stage figure */
.app .mk-share-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; }
.app .mk-share-big { position: relative; flex: 1; min-height: 0; background: var(--s950); border: 1px solid var(--s600); border-radius: 8px; overflow: hidden; }
.app .mk-share-scr { position: absolute; inset: 18px 22px; background: var(--s900); border: 1px solid var(--s500); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden; }
.app .mk-share-scr .bar { flex: none; height: 14px; background: var(--s700); border-bottom: 1px solid var(--s500); }
.app .mk-share-scr .cols { flex: 1; display: flex; min-height: 0; }
.app .mk-share-scr .nav { width: 22%; background: var(--s800); border-right: 1px solid var(--s500); }
.app .mk-share-scr .doc { flex: 1; min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.app .mk-share-scr .doc span { display: block; height: 7px; border-radius: 2px; background: var(--s500); }
.app .mk-share-scr .doc .blk { height: 42px; width: 88%; border-radius: 3px; background: linear-gradient(100deg, rgba(71,109,232,0.35), rgba(71,109,232,0.1)); }
.app .mk-share-tag { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; background: rgba(7,7,9,0.85); border-radius: 4px; padding: 3px 8px; font-size: 12px; }
.app .mk-share-tag b { font-weight: 600; color: #f4f4f5; }
.app .mk-share-tag .q { font-size: 10px; color: var(--s400); }
.app .mk-share-live { font-size: 9px; font-weight: 700; background: #ef4444; color: #fff; border-radius: 3px; padding: 1px 4px; }
.app .mk-share-pop { position: absolute; right: 12px; top: 12px; width: 180px; background: var(--s900); border: 1px solid var(--s600); border-radius: 6px; padding: 8px 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.app .mk-share-pop .t { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a1a1aa; }
.app .mk-share-pop .sl { position: relative; height: 4px; border-radius: 2px; background: var(--s600); margin: 10px 0 8px; }
.app .mk-share-pop .sl .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 70%; border-radius: 2px; background: var(--bab500); }
.app .mk-share-pop .sl .knob { position: absolute; left: 70%; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.app .mk-share-pop .n { font-size: 11px; color: #a1a1aa; }
.app .mk-share-strip { flex: none; display: flex; gap: 8px; }
.app .mk-share-tile { position: relative; flex: 1 1 0; min-width: 0; max-width: 136px; height: 74px; background: var(--s800); border: 1px solid var(--s600); border-radius: 6px; display: grid; place-items: center; overflow: hidden; }
.app .mk-share-tile .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; margin-bottom: 12px; }
.app .mk-share-tile .av.spk { box-shadow: 0 0 0 2px #22c55e; }
.app .mk-share-tile .nm { position: absolute; left: 6px; bottom: 4px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #d4d4d8; background: rgba(7,7,9,0.7); border-radius: 3px; padding: 1px 5px; }
.app .mk-share-tile.you .mini { position: absolute; inset: 6px 6px 18px; background: var(--s900); border: 1px solid var(--s500); border-radius: 3px; }
.app .mk-share-tile.you .mini::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--s700); }
.app .mk-share-tile.you .mini::after { content: ""; position: absolute; left: 6px; top: 10px; width: 55%; height: 14px; border-radius: 2px; background: linear-gradient(100deg, rgba(71,109,232,0.35), rgba(71,109,232,0.1)); }
.app .mk-share-tile.you .mk-share-live { position: absolute; right: 4px; top: 4px; }

/* -- moderation -- */
/* moderation figure — override matrix */
.app .mk-moderation-matrix { margin: 14px 16px 8px; border: 1px solid var(--s600); border-radius: 6px; background: var(--s800); overflow: hidden; font-size: 13px; }
.app .mk-moderation-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px 72px; align-items: center; border-top: 1px solid var(--s700); }
.app .mk-moderation-row:first-child { border-top: 0; }
.app .mk-moderation-row .r { padding: 7px 12px; color: #d4d4d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .mk-moderation-row.hd { background: rgba(7,7,9,0.35); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a1a1aa; }
.app .mk-moderation-row.hd span { text-align: center; }
.app .mk-moderation-row.hd .r { text-align: left; }
.app .mk-moderation-cell { justify-self: center; width: 22px; height: 22px; margin: 5px 0; border: 1px solid var(--s600); border-radius: 4px; display: grid; place-items: center; font-size: 12px; color: var(--s400); }
.app .mk-moderation-cell.a { color: #4ade80; border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.08); }
.app .mk-moderation-cell.d { color: #f87171; border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.08); }
.app .mk-moderation-more { padding: 0 16px; font-size: 11px; color: #71717a; }

/* moderation figure — effective inspector */
.app .mk-moderation-insp { background: var(--s900); border-left: 1px solid var(--s950); padding: 12px; font-size: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; }
.app .mk-moderation-insp .hd { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a1a1aa; }
.app .mk-moderation-insp .who { display: flex; align-items: center; gap: 8px; }
.app .mk-moderation-insp .who .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; flex: none; }
.app .mk-moderation-insp .who b { display: block; font-size: 13.5px; font-weight: 600; color: #f4f4f5; }
.app .mk-moderation-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 10.5px; border: 1px solid var(--s600); border-radius: 3px; padding: 1px 5px; color: #d4d4d8; }
.app .mk-moderation-badge i { width: 8px; height: 8px; border-radius: 2px; }
.app .mk-moderation-insp .chain { font-family: var(--mono); font-size: 10.5px; color: #a1a1aa; }
.app .mk-moderation-bit { border-top: 1px solid var(--s700); padding-top: 8px; }
.app .mk-moderation-bit .b1 { display: flex; align-items: center; gap: 6px; color: #e4e4e7; font-weight: 500; }
.app .mk-moderation-bit .b1 .v { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; }
.app .mk-moderation-bit .b1 .v.a { color: #4ade80; }
.app .mk-moderation-bit .b1 .v.d { color: #f87171; }
.app .mk-moderation-bit .src { margin-top: 2px; font-size: 11px; color: #a1a1aa; }

/* -- apps -- */
.app .mk-apps-kan { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; overflow: hidden; }
.app .mk-apps-col { background: var(--s800); border: 1px solid var(--s600); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow: hidden; }
.app .mk-apps-col .ch { display: flex; align-items: baseline; gap: 6px; padding: 0 2px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a1a1aa; }
.app .mk-apps-col .ch .n { margin-left: auto; font-size: 11px; color: #71717a; background: var(--s700); border-radius: 3px; padding: 0 5px; font-variant-numeric: tabular-nums; }
.app .mk-apps-card { background: var(--s900); border: 1px solid var(--s700); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.app .mk-apps-card.sel { border-color: var(--bab500); box-shadow: 0 0 0 1px rgba(71,109,232,0.35); }
.app .mk-apps-card .t { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }
.app .mk-apps-card .d { font-size: 12px; color: #a1a1aa; line-height: 1.35; }
.app .mk-apps-card .r { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.app .mk-apps-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; border-radius: 3px; padding: 1px 6px; }
.app .mk-apps-due { margin-left: auto; font-size: 11px; color: #a1a1aa; white-space: nowrap; font-variant-numeric: tabular-nums; }
.app .mk-apps-av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 600; color: #fff; flex: none; }
.app .mk-apps-add { font-size: 12px; color: #71717a; padding: 2px; }

/* -- desktop -- */
/* settings-pane mockup (features page, desktop section) */
.app .mk-desktop-pane { flex: 1; overflow: hidden; padding: 12px 20px 0; }
.app .mk-desktop-pane .cat { padding-left: 0; padding-right: 0; }
.app .mk-desktop-val { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; color: #d4d4d8; font-variant-numeric: tabular-nums; }
.app .mk-desktop-row { display: flex; gap: 10px; margin: 2px 0 4px; }
.app .mk-desktop-sw { width: 88px; font-size: 11px; color: #a1a1aa; }
.app .mk-desktop-sw .box { height: 46px; border: 2px solid var(--s600); border-radius: 6px; padding: 8px 8px 0; margin-bottom: 4px; }
.app .mk-desktop-sw .box i { display: block; height: 6px; border-radius: 3px; margin-bottom: 5px; width: 75%; }
.app .mk-desktop-sw .box i + i { width: 45%; }
.app .mk-desktop-sw.on { color: #fff; }
.app .mk-desktop-sw.on .box { border-color: var(--bab500); }
.app .mk-desktop-sw.off { opacity: 0.45; }
.app .mk-desktop-soon { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--s500); border-radius: 3px; padding: 0 4px; color: #a1a1aa; margin-left: 2px; }
.app .mk-desktop-seg { display: inline-flex; border: 1px solid var(--s600); border-radius: 6px; overflow: hidden; margin: 2px 0 2px; }
.app .mk-desktop-seg span { padding: 5px 14px; font-size: 12px; color: #a1a1aa; background: var(--s800); }
.app .mk-desktop-seg span.on { background: var(--bab500); color: #fff; font-weight: 600; }
.app .mk-desktop-slide { position: relative; height: 4px; border-radius: 2px; background: var(--s500); margin: 10px 0 2px; max-width: 340px; }
.app .mk-desktop-slide i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--bab500); }
.app .mk-desktop-slide b { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.app .mk-desktop-sess { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--s600); border-radius: 6px; background: var(--s800); margin-top: 6px; max-width: 420px; }
.app .mk-desktop-sess .ic { font-size: 15px; color: #a1a1aa; }
.app .mk-desktop-sess .nm b { display: block; font-size: 13px; font-weight: 600; color: #f4f4f5; }
.app .mk-desktop-sess .nm span { display: block; font-size: 11px; color: #a1a1aa; }
.app .mk-desktop-btn { margin-left: auto; font-size: 12px; color: #f87171; border: 1px solid rgba(239,68,68,0.4); border-radius: 4px; padding: 3px 10px; }
.app .mk-desktop-note { margin: 6px 0 0; font-size: 11px; color: #71717a; max-width: 420px; }

/* ============================================================
   BUILD-APPS PAGE (WEB-37) — seam diagram, code figure, op-sheet.
   ============================================================ */
.figure .mk-seam-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; padding: 18px; font-family: var(--app); color: #e4e4e7; min-width: 40rem; }
.figure .mk-seam-box { background: #1a1a1e; border: 1px solid #28282d; border-radius: 8px; padding: 12px 14px; }
.figure .mk-seam-box .t, .figure .mk-seam-core .t { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #4ade80; }
.figure .mk-seam-box .s, .figure .mk-seam-core .s { display: block; font-size: 11px; color: #71717a; margin-top: 2px; }
.figure .mk-seam-box ul { margin: 10px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: #a1a1aa; }
.figure .mk-seam-box li { padding: 3px 0; border-top: 1px solid #222327; }
.figure .mk-seam-mid { display: flex; flex-direction: column; justify-content: center; gap: 8px; text-align: center; }
.figure .mk-seam-arrow { font-family: var(--mono); font-size: 10px; color: #71717a; white-space: nowrap; }
.figure .mk-seam-core { background: #0e171c; border: 1px solid #4ade80; border-radius: 8px; padding: 10px 16px; }
.figure .mk-seam-foot { padding: 0 18px 14px; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #71717a; }
.figure .mk-code { margin: 0; padding: 18px 20px; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #d4d4d8; overflow-x: auto; }
.figure .mk-code .c { color: #6e827a; }
.figure .mk-code .g { color: #4ade80; }
.app .mk-opsheet-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.app .mk-opsheet-row { display: grid; grid-template-columns: 130px minmax(0,1fr) auto; align-items: center; gap: 10px; background: var(--s800); border: 1px solid var(--s600); border-radius: 6px; padding: 8px 12px; font-size: 13px; }
.app .mk-opsheet-row .role { color: #a1a1aa; }
.app .mk-opsheet-row .who { font-weight: 500; }
.app .mk-opsheet-row .st { font-size: 11px; color: #4ade80; }
.app .mk-opsheet-row .st.done { color: #71717a; }
.app .mk-opsheet-row.open { border-style: dashed; border-color: #4ade80; background: transparent; }
.app .mk-opsheet-foot { margin-top: 10px; padding: 0 4px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: #71717a; }
.app .mk-opsheet-foot .here { display: flex; }
.app .mk-opsheet-foot .here i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--s900); }
.app .mk-opsheet-foot .here i + i { margin-left: -5px; }

/* ============================================================
   COMMS MECHANISM FIGURES (WEB-35)
   ============================================================ */

/* -- fade -- */
/* level-strip diagram: what a higher rank talking does (comms page) */
.figure .mk-fade-panel { font-family: var(--app); max-width: 46rem; min-width: 34rem; margin: 0 auto; background: #1a1a1e; border: 1px solid #28282d; border-radius: 8px; padding: 10px 12px 12px; color: #e4e4e7; font-size: 13px; line-height: 1.45; }
.figure .mk-fade-hd { display: flex; align-items: center; gap: 6px; padding: 0 8px 6px; color: #71717a; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.figure .mk-fade-hd .mk-fade-rx { margin-left: auto; font-weight: 400; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.figure .mk-fade-hd .mk-fade-more { color: #a1a1aa; letter-spacing: 0; }
.figure .mk-fade-row { display: grid; grid-template-columns: 8px 92px 34px 56px minmax(0, 1fr) 132px; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; }
.figure .mk-fade-row + .mk-fade-row { margin-top: 2px; }
.figure .mk-fade-dot { width: 8px; height: 8px; border-radius: 50%; }
.figure .mk-fade-nm { color: #d4d4d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.figure .mk-fade-badge { justify-self: start; font-size: 10px; color: #a1a1aa; border: 1px solid #2c2d32; border-radius: 3px; padding: 0 3px; white-space: nowrap; }
.figure .mk-fade-badge.live { color: #fbbf24; border-color: #fbbf24; }
.figure .mk-fade-badge.mon { color: #4ade80; border-color: #4ade80; }
.figure .mk-fade-sq { justify-self: start; font-size: 11px; color: #71717a; }
.figure .mk-fade-wave { display: flex; align-items: center; gap: 2px; height: 30px; min-width: 180px; }
.figure .mk-fade-wave i { flex: none; width: 4px; min-height: 2px; border-radius: 2px; background: #4ade80; }
.figure .mk-fade-wave.dim i { opacity: 0.38; }
.figure .mk-fade-flat { display: flex; align-items: center; height: 30px; min-width: 180px; }
.figure .mk-fade-flat i { width: 100%; height: 2px; border-radius: 1px; background: #36373e; }
.figure .mk-fade-st { text-align: right; font-size: 11px; color: #a1a1aa; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* graph figure (comms page) — command-structure tree, diagram panel */
.figure .mk-graph-panel { min-width: 34rem; padding: 20px 24px; font-family: var(--app); color: #e4e4e7; }
.figure .mk-graph-hd { display: flex; align-items: baseline; gap: 12px; }
.figure .mk-graph-t { font-size: 15px; font-weight: 600; color: #fff; }
.figure .mk-graph-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: #71717a; }
.figure .mk-graph-body { display: flex; gap: 26px; margin-top: 20px; }
.figure .mk-graph-flow { display: flex; gap: 8px; align-items: stretch; }
.figure .mk-graph-lbl { writing-mode: vertical-rl; align-self: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #a1a1aa; }
.figure .mk-graph-line { position: relative; width: 2px; background: #6d6f78; }
.figure .mk-graph-line::after { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #6d6f78; }
.figure .mk-graph-tree { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 13px; }
.figure .mk-graph-kids { display: flex; justify-content: center; position: relative; padding-top: 16px; }
.figure .mk-graph-kids::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 16px; background: #36373e; }
.figure .mk-graph-branch { display: flex; flex-direction: column; align-items: center; position: relative; padding: 16px 12px 0; }
.figure .mk-graph-branch::before { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 16px; border-top: 2px solid #36373e; }
.figure .mk-graph-branch::after { content: ""; position: absolute; top: 0; left: 50%; width: 50%; height: 16px; border-top: 2px solid #36373e; border-left: 2px solid #36373e; }
.figure .mk-graph-branch:first-child::before { border-top: 0; }
.figure .mk-graph-branch:last-child::after { border-top: 0; }
.figure .mk-graph-node { display: flex; align-items: center; gap: 8px; background: #1a1a1e; border: 1px solid #36373e; border-radius: 6px; padding: 7px 12px; white-space: nowrap; }
.figure .mk-graph-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.figure .mk-graph-nm { font-weight: 600; color: #f4f4f5; }
.figure .mk-graph-rk { font-family: var(--mono); font-size: 10px; color: #a1a1aa; border: 1px solid #2c2d32; border-radius: 3px; padding: 0 4px; }
.figure .mk-graph-refused { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: #f87171; }
.figure .mk-graph-noloop { position: relative; width: 22px; height: 22px; border: 1px solid rgba(239,68,68,0.6); border-radius: 4px; display: grid; place-items: center; font-size: 13px; flex: none; }
.figure .mk-graph-noloop::after { content: ""; position: absolute; left: -3px; top: 48%; width: calc(100% + 6px); height: 2px; background: #f87171; border-radius: 1px; transform: rotate(-45deg); }

/* -- comms page: the key strip and the three calls -- */
.figure .mk-keys-panel { --s950: #070709; --s900: #1a1a1e; --s800: #222327; --s700: #28282d; --s600: #2c2d32; --s500: #36373e; --s400: #6d6f78; --bab500: #476de8; --bab400: #7b96ef; font-family: var(--app); background: var(--s900); border: 1px solid #000; color: #e4e4e7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; padding: 16px 16px 0; min-width: 40rem; font-size: 13px; line-height: 1.45; }
.figure .mk-keys-panel * { box-sizing: border-box; }
.figure .mk-keys-col { display: flex; flex-direction: column; min-width: 0; }
.figure .mk-keys-slot { min-height: 30px; }
.figure .mk-keys-tree { display: flex; flex-direction: column; gap: 2px; }
.figure .mk-keys-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid transparent; border-radius: 4px; font-size: 12.5px; color: #d4d4d8; white-space: nowrap; }
.figure .mk-keys-row i { font-style: normal; font-family: var(--mono); font-size: 11px; color: #52525b; }
.figure .mk-keys-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.figure .mk-keys-row .on { margin-left: auto; font-size: 10px; color: #4ade80; }
.figure .mk-keys-row.dim { opacity: 0.35; }
.figure .mk-keys-row.tx { border-color: rgba(34,197,94,0.65); background: rgba(34,197,94,0.08); color: #fff; }
.figure .mk-keys-col.up .mk-keys-row.rx { border-color: rgba(245,158,11,0.6); background: rgba(245,158,11,0.1); }
.figure .mk-keys-col.all .mk-keys-row.rx { border-color: rgba(123,150,239,0.6); background: rgba(71,109,232,0.12); }
.figure .mk-keys-col.emg .mk-keys-row.rx { border-color: rgba(239,68,68,0.6); background: rgba(239,68,68,0.1); }
.figure .mk-keys-why { margin: 10px 0 12px; font-size: 11.5px; color: #a1a1aa; }
.figure .mk-keys-why b { color: #e4e4e7; font-weight: 600; }
.figure .mk-keys-dock { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 2px -16px 0; padding: 10px 16px; border-top: 1px solid var(--s700); background: rgba(34,35,39,0.5); }
.figure .mk-keys-key { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }
.figure .mk-keys-key b { color: #f4f4f5; font-weight: 600; white-space: nowrap; }
.figure .mk-keys-key .d { color: #71717a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* comms page — connect two nets figure (mk-patch) */
.figure .mk-patch-wrap { display: flex; flex-direction: column; gap: 14px; height: auto; min-width: 40rem; padding: 28px 32px; background: var(--s900); }
.figure .mk-patch-row { display: flex; align-items: stretch; }
.figure .mk-patch-card { flex: 1 1 0; min-width: 0; }
.app .mk-patch-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.app .mk-patch-live { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: #86efac; background: rgba(34,197,94,0.16); }
.app .mk-patch-live .via { margin-left: auto; font-weight: 400; font-size: 11px; color: #a1a1aa; }
.app .mk-patch-spk { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.35); flex: none; }
.figure .mk-patch-link { flex: 0 0 176px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.figure .mk-patch-link::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--bab500); }
.app .mk-patch-chip { position: relative; z-index: 1; font-size: 11px; font-weight: 600; color: var(--bab400); background: var(--s900); border: 1px solid var(--bab500); border-radius: 4px; padding: 3px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.app .mk-patch-note { text-align: center; font-size: 11.5px; color: #a1a1aa; }

/* -- levels (comms page: three one-click setups, side by side) -- */
.figure .mk-levels-row { display: flex; align-items: flex-start; gap: 12px; min-width: 42rem; }
.figure .mk-levels-pane { flex: 1 1 0; min-width: 0; }
.figure .mk-levels-tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #4ade80; padding: 2px 2px 8px; }
.figure .app.mk-levels-app { display: flex; flex-direction: column; height: auto; min-width: 0; }
.figure .mk-levels-sub { margin-left: 12px; }
.app .mk-levels-board { margin-top: 8px; border: 1px solid var(--s600); border-radius: 6px; background: var(--s800); overflow: hidden; font-size: 11px; }
.app .mk-levels-board .h { padding: 4px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a1a1aa; background: rgba(7,7,9,0.35); }
.app .mk-levels-board .r { display: flex; align-items: center; gap: 6px; padding: 3px 8px; color: #d4d4d8; }
.app .mk-levels-board .r:last-child { padding-bottom: 6px; }
.app .mk-levels-board .r .reach { margin-left: auto; color: #a1a1aa; font-variant-numeric: tabular-nums; }

/* board close-up figure (comms page) */
.figure .mk-board-panel { display: block; height: auto; min-width: 40rem; background: var(--s950); border: 0; padding: 14px 10px; }
.app .mk-board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.app .mk-board-av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 600; color: #fff; flex: none; }
.app .mk-board-av.spk { box-shadow: 0 0 0 2px #22c55e; }
.app .mk-board-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #4ade80; border: 1px solid rgba(34,197,94,0.5); border-radius: 3px; padding: 2px 7px; }
.app .mk-board-live i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }

/* ============================================================
   FEATURES SECOND FIGURES (WEB-36)
   ============================================================ */

/* -- chat 2: media (lightbox, voice message, upload) -- */
.app .mk-chat2-gal { margin-top: 6px; display: grid; grid-template-columns: repeat(2, 148px); gap: 4px; }
.app .mk-chat2-gal i { display: block; height: 78px; border-radius: 4px; border: 1px solid var(--s600); }
.app .mk-chat2-lb { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.app .mk-chat2-lb .img { width: 340px; height: 196px; border-radius: 4px; box-shadow: 0 16px 40px rgba(0,0,0,0.7); background: radial-gradient(200px 100px at 68% 22%, rgba(123,150,239,0.4), transparent 70%), radial-gradient(220px 130px at 18% 88%, rgba(34,197,94,0.25), transparent 70%), linear-gradient(155deg, var(--s500), var(--s950)); }
.app .mk-chat2-lb .fn { display: flex; align-items: baseline; gap: 10px; font-size: 12px; }
.app .mk-chat2-lb .fn b { color: #f4f4f5; font-weight: 600; }
.app .mk-chat2-lb .fn span { color: #a1a1aa; font-variant-numeric: tabular-nums; }
.app .mk-chat2-lbx { position: absolute; top: 10px; right: 14px; color: #d4d4d8; font-size: 14px; }
.app .mk-chat2-voice { margin-top: 4px; display: inline-flex; align-items: center; gap: 10px; background: var(--s800); border: 1px solid var(--s600); border-radius: 8px; padding: 8px 12px; }
.app .mk-chat2-voice .pl { width: 26px; height: 26px; border-radius: 50%; background: var(--bab500); color: #fff; display: grid; place-items: center; font-size: 10px; flex: none; }
.app .mk-chat2-voice .wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.app .mk-chat2-voice .wave i { width: 3px; border-radius: 1.5px; background: var(--s400); }
.app .mk-chat2-voice .wave i.p { background: var(--bab400); }
.app .mk-chat2-voice .t { font-size: 11px; color: #a1a1aa; font-variant-numeric: tabular-nums; }
.app .mk-chat2-up { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; background: var(--s800); border: 1px solid var(--s600); border-radius: 8px; padding: 8px 12px; font-size: 12px; }
.app .mk-chat2-up .ic { width: 30px; height: 30px; border-radius: 4px; background: var(--s600); display: grid; place-items: center; font-size: 14px; flex: none; }
.app .mk-chat2-up .meta { flex: 1; min-width: 0; }
.app .mk-chat2-up .meta b { display: block; color: #e4e4e7; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .mk-chat2-up .bar { display: block; margin-top: 5px; height: 4px; border-radius: 2px; background: var(--s600); position: relative; overflow: hidden; }
.app .mk-chat2-up .bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: 2px; background: var(--bab500); }
.app .mk-chat2-up .pct { color: #a1a1aa; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app .mk-chat2-up .x { color: #a1a1aa; font-size: 13px; }

/* voice figure 2 — audio settings pane (reuses the settings shell + .mk-desktop-* controls) */
.app .mk-voice2-sel { display: flex; align-items: center; gap: 8px; max-width: 340px; margin: 2px 0 0; background: var(--s800); border: 1px solid var(--s600); border-radius: 6px; padding: 7px 12px; font-size: 13px; color: #e4e4e7; }
.app .mk-voice2-sel i { margin-left: auto; font-style: normal; font-size: 11px; color: #a1a1aa; }
.app .mk-voice2-test { flex: none; font-size: 12px; color: #d4d4d8; background: var(--s800); border: 1px solid var(--s600); border-radius: 6px; padding: 6px 12px; }
.app .mk-voice2-meter { position: relative; max-width: 340px; height: 10px; border-radius: 3px; background: var(--s950); margin: 8px 0 2px; overflow: hidden; }
.app .mk-voice2-meter::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 62%; background: #22c55e; }
.app .mk-voice2-meter::after { content: ""; position: absolute; left: 40%; top: 0; width: 2px; height: 100%; background: #f4f4f5; }
.app .mk-voice2-tog { position: relative; flex: none; width: 36px; height: 20px; border-radius: 10px; background: #22c55e; }
.app .mk-voice2-tog::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }

/* -- comms figure 2: the net editor -- */
.app .mk-comms2-add { margin-top: 6px; padding: 4px 8px; text-align: center; font-size: 12px; color: #71717a; border: 1px dashed var(--s600); border-radius: 4px; }
.app .mk-comms2-pane { flex: 1; min-height: 0; overflow: hidden; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; font-size: 12px; }
.app .mk-comms2-fields { display: flex; gap: 8px; }
.app .mk-comms2-fields .f { flex: 1; min-width: 0; background: var(--s800); border: 1px solid var(--s600); border-radius: 6px; padding: 6px 10px; }
.app .mk-comms2-fields .l { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a1a1aa; }
.app .mk-comms2-fields b { font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.app .mk-comms2-fields .h { display: block; font-size: 10px; color: #71717a; }
.app .mk-comms2-fields .sw { display: inline-block; width: 16px; height: 16px; border-radius: 4px; margin-top: 3px; }
.app .mk-comms2-grid { border: 1px solid var(--s600); border-radius: 6px; background: var(--s800); overflow: hidden; font-size: 13px; }
.app .mk-comms2-row { display: grid; grid-template-columns: minmax(0, 1fr) 86px 86px; align-items: center; border-top: 1px solid var(--s700); }
.app .mk-comms2-row:first-child { border-top: 0; }
.app .mk-comms2-row .r { padding: 6px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .mk-comms2-row.hd { background: rgba(7,7,9,0.35); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a1a1aa; }
.app .mk-comms2-row.hd span { text-align: center; }
.app .mk-comms2-row.hd .r { text-align: left; }
.app .mk-comms2-clamp { color: #fbbf24; border-color: rgba(245,158,11,0.6); background: rgba(245,158,11,0.08); }
.app .mk-comms2-note { font-size: 11px; color: #fbbf24; }
.app .mk-comms2-note u { text-underline-offset: 2px; }

/* -- share, second figure: the picker -- */
.app .mk-share2-stage { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.app .mk-share2-scrim { position: absolute; inset: 0; background: rgba(7,7,9,0.62); }
.app .mk-share2-modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(430px, calc(100% - 48px)); background: var(--s900); border: 1px solid var(--s600); border-radius: 8px; padding: 14px 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.65); font-size: 12px; }
.app .mk-share2-modal .t { font-size: 14px; font-weight: 600; color: #fff; }
.app .mk-share2-sec { margin: 10px 0 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #a1a1aa; }
.app .mk-share2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.app .mk-share2-grid.w3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app .mk-share2-cell { border: 1px solid var(--s600); border-radius: 6px; padding: 5px; background: var(--s800); min-width: 0; }
.app .mk-share2-cell.sel { border-color: var(--bab500); box-shadow: 0 0 0 2px rgba(71,109,232,0.45); }
.app .mk-share2-cell .lb { display: block; margin-top: 4px; font-size: 10.5px; color: #d4d4d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .mk-share2-cell.sel .lb { color: #fff; }
.app .mk-share2-th { position: relative; height: 56px; border-radius: 3px; background: var(--s950); overflow: hidden; }
.app .mk-share2-th::before, .app .mk-share2-th::after { content: ""; position: absolute; }
.app .mk-share2-th.m1::before { left: 8%; top: 12%; width: 56%; height: 66%; background: var(--s700); border-top: 4px solid var(--s600); border-radius: 2px; }
.app .mk-share2-th.m1::after { right: 6%; top: 28%; width: 34%; height: 58%; background: linear-gradient(100deg, rgba(71,109,232,0.4), rgba(71,109,232,0.12)); border-top: 4px solid var(--s600); border-radius: 2px; }
.app .mk-share2-th.m2::before { left: 24%; top: 20%; width: 52%; height: 54%; background: var(--s800); border-top: 4px solid var(--s600); border-radius: 2px; }
.app .mk-share2-th.win::before { left: 0; right: 0; top: 0; height: 9px; background: var(--s700); border-bottom: 1px solid var(--s500); }
.app .mk-share2-th.wa::after { left: 10%; top: 28%; width: 80%; height: 52%; border-radius: 2px; background: linear-gradient(100deg, rgba(71,109,232,0.4), rgba(71,109,232,0.12)); }
.app .mk-share2-th.wb::after { left: 10%; top: 26%; width: 74%; height: 56%; background: repeating-linear-gradient(var(--s500) 0 4px, transparent 4px 10px); }
.app .mk-share2-th.wc::after { left: 12%; bottom: 12%; width: 70%; height: 48%; border-radius: 2px; background: linear-gradient(to top, rgba(34,197,94,0.35), rgba(34,197,94,0.08)); }
.app .mk-share2-ft { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.app .mk-share2-ft .note { font-size: 11px; color: #71717a; margin-right: auto; }
.app .mk-share2-btn { border-radius: 4px; padding: 5px 12px; font-size: 12px; color: #a1a1aa; background: var(--s800); }
.app .mk-share2-btn.go { background: var(--bab500); color: #fff; font-weight: 600; }

.app .mk-mod2-pane { flex: 1; min-height: 0; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.app .mk-mod2-raid { border: 1px solid rgba(239,68,68,0.5); background: rgba(239,68,68,0.12); border-radius: 6px; padding: 10px 12px; font-size: 12.5px; color: #fecaca; }
.app .mk-mod2-raid b { color: #fff; font-size: 13px; }
.app .mk-mod2-raid .act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.app .mk-mod2-btn { border: 1px solid var(--s500); background: var(--s900); border-radius: 4px; padding: 3px 10px; font-size: 11.5px; color: #e4e4e7; }
.app .mk-mod2-btn.hot { border-color: rgba(239,68,68,0.6); color: #f87171; }
.app .mk-mod2-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; min-height: 0; }
.app .mk-mod2-cols .col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.app .mk-mod2-opt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--s600); background: var(--s800); border-radius: 4px; padding: 5px 10px; font-size: 12.5px; color: #a1a1aa; }
.app .mk-mod2-opt i { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--s400); }
.app .mk-mod2-opt.on { border-color: var(--bab500); background: rgba(71,109,232,0.12); color: #fff; }
.app .mk-mod2-opt.on i { border-color: var(--bab400); background: var(--bab500); box-shadow: inset 0 0 0 2px var(--s900); }
.app .mk-mod2-onpill { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: #4ade80; border: 1px solid rgba(34,197,94,0.5); border-radius: 3px; padding: 0 5px; }
.app .mk-mod2-screen { border: 1px solid var(--s600); background: var(--s800); border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #d4d4d8; }
.app .mk-mod2-screen .mk-mod2-rule { padding: 2px 0; color: #d4d4d8; }
.app .mk-mod2-screen .pend { margin-top: 6px; border-top: 1px solid var(--s700); padding-top: 6px; color: #fbbf24; font-size: 11.5px; }
.app .mk-mod2-tgl { display: flex; align-items: center; gap: 10px; border: 1px solid var(--s600); background: var(--s800); border-radius: 6px; padding: 8px 12px; font-size: 13px; }
.app .mk-mod2-tgl .nm { color: #e4e4e7; font-weight: 500; white-space: nowrap; }
.app .mk-mod2-tgl .src { margin-left: auto; font-size: 10.5px; color: #71717a; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .mk-mod2-sw { flex: none; width: 30px; height: 16px; border-radius: 8px; background: var(--s500); position: relative; }
.app .mk-mod2-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.app .mk-mod2-sw.on { background: var(--bab500); }
.app .mk-mod2-sw.on::after { left: auto; right: 2px; }
.app .mk-mod2-note { font-size: 11px; color: #71717a; }

/* -- apps, second figure: whiteboard -- */
.app .mk-apps2-canvas { position: relative; flex: 1; min-height: 0; margin: 12px 16px 16px; border: 1px solid var(--s600); border-radius: 8px; background: var(--s900); background-image: radial-gradient(var(--s600) 1px, transparent 1px); background-size: 22px 22px; overflow: hidden; }
.app .mk-apps2-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.app .mk-apps2-rail { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; flex-direction: column; gap: 2px; background: var(--s950); border: 1px solid var(--s600); border-radius: 8px; padding: 5px; box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.app .mk-apps2-tool { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; color: #a1a1aa; }
.app .mk-apps2-tool.on { background: var(--bab500); color: #fff; }
.app .mk-apps2-cur { position: absolute; z-index: 2; display: flex; align-items: flex-start; }
.app .mk-apps2-cur i { display: inline-block; font-style: normal; font-size: 14px; line-height: 1; transform: rotate(-125deg); }
.app .mk-apps2-cur b { margin: 11px 0 0 -3px; font-size: 10.5px; font-weight: 600; color: #070709; border-radius: 3px; padding: 1px 6px; white-space: nowrap; }

/* -- desk2 -- */
/* front-door mockup (features page, desktop section): connect + create-or-join */
.app .mk-desk2-stage { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px; overflow: hidden; }
.app .mk-desk2-card { width: 280px; flex: none; background: var(--s900); border: 1px solid var(--s700); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
.app .mk-desk2-card .logo { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bab400); }
.app .mk-desk2-card .t { font-size: 16px; font-weight: 600; color: #fff; }
.app .mk-desk2-card .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a1a1aa; margin-top: 2px; }
.app .mk-desk2-card .hint { margin: -4px 0 0; font-size: 11px; color: #71717a; line-height: 1.4; }
.app .mk-desk2-in { background: var(--s950); border: 1px solid var(--s600); border-radius: 6px; padding: 8px 10px; font-family: var(--mono); font-size: 12.5px; color: #e4e4e7; }
.app .mk-desk2-in.on { border-color: var(--bab500); }
.app .mk-desk2-btn { background: var(--bab500); color: #fff; border-radius: 6px; padding: 9px 10px; text-align: center; font-size: 13px; font-weight: 600; margin-top: 2px; }
.app .mk-desk2-chk { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d4d4d8; margin-top: 2px; }
.app .mk-desk2-chk .bx { width: 15px; height: 15px; flex: none; border-radius: 3px; background: var(--bab500); color: #fff; display: grid; place-items: center; font-size: 10px; }
.app .mk-desk2-then { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #71717a; white-space: nowrap; }
.app .mk-desk2-opt { border: 1px solid var(--s600); border-radius: 6px; background: var(--s800); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.app .mk-desk2-opt b { font-size: 13px; font-weight: 600; color: #f4f4f5; }
.app .mk-desk2-opt > span { font-size: 11.5px; color: #a1a1aa; line-height: 1.4; }
.app .mk-desk2-join { display: flex; gap: 8px; margin-top: 2px; }
.app .mk-desk2-join .mk-desk2-in { flex: 1; }
.app .mk-desk2-join .go { border: 1px solid var(--s500); border-radius: 6px; padding: 8px 14px; font-size: 12px; color: #d4d4d8; align-self: stretch; display: grid; place-items: center; }

/* ============================================================
   COMMS LIST FIGURES, SECOND WAVE (WEB-35) — list2/grants/badges/admit.
   ============================================================ */

/* — LIST2: the comms list itself (composes the mk-fade level-strip idiom) — */
.figure .mk-list2-row { grid-template-columns: 8px 92px 34px 56px minmax(0, 1fr) 168px; }
.figure .mk-list2-hov { background: #222327; }
.figure .mk-list2-key { justify-self: start; font-family: var(--mono); font-size: 10px; color: #a1a1aa; background: #222327; border: 1px solid #36373e; border-bottom-width: 2px; border-radius: 4px; padding: 0 6px 1px; }
.figure .mk-list2-hov .mk-list2-key { background: #1a1a1e; }
.figure .mk-list2-btns { display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.figure .mk-list2-btns em { font-style: normal; font-size: 11px; color: #71717a; white-space: nowrap; }
.figure .mk-list2-btns i { font-style: normal; font-size: 10px; color: #d4d4d8; background: #28282d; border: 1px solid #36373e; border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.figure .mk-list2-btns i.on { color: #fff; border-color: #6d6f78; }

/* -- grants (comms page: crop of the editor pane, the grant grid) -- */
.figure .app.mk-grants-crop { display: flex; flex-direction: column; height: auto; min-width: 28rem; max-width: 34rem; margin: 0 auto; }

/* ROSTERS WITH BADGES — role-badge glyphs on netcard rosters, leader pinned. */
.figure .mk-badges-wrap { display: flex; flex-direction: column; gap: 12px; height: auto; min-width: 22rem; max-width: 26rem; margin: 0 auto; background: var(--s950); border: 0; padding: 14px 10px; }
.app .mk-badges-glyph { flex: none; width: 16px; height: 16px; border: 1px solid rgba(245,158,11,0.6); background: rgba(245,158,11,0.18); border-radius: 3px; display: grid; place-items: center; }
.app .mk-badges-glyph svg { display: block; width: 10px; height: 10px; fill: none; stroke: #fbbf24; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.app .mk-badges-lead { padding-bottom: 6px; margin-bottom: 3px; border-bottom: 1px solid #28282d; }
.app .mk-badges-tag { flex: none; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: #fbbf24; border: 1px solid rgba(245,158,11,0.6); border-radius: 3px; padding: 0 4px; }

/* mk-admit — nothing shown to the unadmitted (comms page) */
.figure .mk-admit-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; padding: 18px; font-family: var(--app); color: #e4e4e7; font-size: 13px; line-height: 1.45; min-width: 38rem; max-width: 46rem; margin: 0 auto; }
.figure .mk-admit-col { display: flex; flex-direction: column; gap: 8px; }
.figure .mk-admit-who { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #a1a1aa; }
.figure .mk-admit-who.ok { color: #4ade80; }
.figure .mk-admit-side { flex: 1; background: #1a1a1e; border: 1px solid #28282d; border-radius: 8px; padding: 10px; }
.figure .mk-admit-srv { font-weight: 600; color: #fff; padding: 2px 6px 8px; border-bottom: 1px solid #28282d; margin-bottom: 6px; }
.figure .mk-admit-sec { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #71717a; }
.figure .mk-admit-sec .mk-admit-rx { font-weight: 400; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.figure .mk-admit-ch { padding: 3px 6px; font-size: 12.5px; color: #a1a1aa; }
.figure .mk-admit-net { display: flex; align-items: center; gap: 7px; padding: 4px 6px; font-size: 12.5px; }
.figure .mk-admit-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.figure .mk-admit-nm { flex: 1; color: #d4d4d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.figure .mk-admit-badge { flex: none; font-size: 10px; color: #a1a1aa; border: 1px solid #2c2d32; border-radius: 3px; padding: 0 3px; white-space: nowrap; }
.figure .mk-admit-badge.live { color: #fbbf24; border-color: #fbbf24; }
.figure .mk-admit-badge.mon { color: #4ade80; border-color: #4ade80; }
.figure .mk-admit-mid { align-self: center; display: flex; flex-direction: column; gap: 6px; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #71717a; max-width: 8.5rem; }
.figure .mk-admit-rule { color: #4ade80; }

/* ============================================================
   FEATURES MID-LIST FIGURES (WEB-36) — two per section, comms-style.
   ============================================================ */

/* -- chat 3a: formatting + who-reacted hover -- */
.app .mk-chat3a-h { font-size: 20px; font-weight: 700; color: #fff; margin: 2px 0; line-height: 1.3; }
.app .mk-chat3a-ul { margin: 4px 0 0; padding-left: 22px; }
.app .mk-chat3a-ul li { margin: 2px 0; }
.app .mk-chat3a-q { border-left: 3px solid var(--s400); padding-left: 10px; color: #b5bac1; }
.app .mk-chat3a-code { margin: 6px 0 2px; max-width: 300px; padding: 8px 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--s600); border-radius: 4px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: #d4d4d8; }
.app .mk-chat3a-code span { display: block; white-space: nowrap; }
.app .mk-chat3a-lnk { color: var(--bab400); text-decoration: underline; text-underline-offset: 2px; }
.app .mk-chat3a-hov { position: relative; display: inline-block; margin-top: 4px; }
.app .mk-chat3a-hov .reacts { margin-top: 0; }
.app .mk-chat3a-who { position: absolute; left: -2px; bottom: calc(100% + 6px); display: flex; align-items: center; gap: 8px; background: var(--s950); border: 1px solid var(--s600); border-radius: 6px; padding: 6px 10px; font-size: 12px; color: #d4d4d8; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,0.6); z-index: 2; }
.app .mk-chat3a-who .e { font-size: 16px; }
.app .mk-chat3a-who b { color: #f4f4f5; font-weight: 500; }

/* -- chat 3b: emoji picker + custom and jumbo emoji -- */
.app .mk-chat3b-jumbo { font-size: 42px; line-height: 1.2; }
.app .mk-chat3b-ce { display: inline-block; width: 22px; height: 22px; border-radius: 4px; vertical-align: -5px; border: 1px solid var(--s600); background: radial-gradient(12px 9px at 62% 30%, rgba(34,197,94,0.6), transparent 70%), linear-gradient(150deg, var(--s500), var(--s950)); }
.app .mk-chat3b-pick { position: absolute; right: 16px; bottom: 74px; width: 300px; background: var(--s900); border: 1px solid var(--s600); border-radius: 8px; box-shadow: 0 16px 40px rgba(0,0,0,0.65); padding: 10px 10px 12px; font-size: 12px; z-index: 2; }
.app .mk-chat3b-pick .top { display: flex; align-items: center; gap: 8px; }
.app .mk-chat3b-pick .q { flex: 1; background: var(--s950); border: 1px solid var(--s600); border-radius: 4px; padding: 5px 8px; color: #71717a; }
.app .mk-chat3b-pick .tone { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 4px; font-size: 15px; }
.app .mk-chat3b-tabs { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--s700); }
.app .mk-chat3b-tabs span { width: 26px; height: 24px; display: grid; place-items: center; border-radius: 4px; font-size: 15px; color: #a1a1aa; }
.app .mk-chat3b-tabs .srv { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.app .mk-chat3b-tabs .on { background: var(--s600); color: #fff; }
.app .mk-chat3b-grid { margin-top: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.app .mk-chat3b-grid i { display: block; width: 22px; height: 22px; margin: 2px auto; border-radius: 4px; border: 1px solid var(--s600); }

/* voice figure 3a — the Debug tab (bad links + why it sounds bad) */
.app .mk-voice3a-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; max-width: 520px; }
.app .mk-voice3a-grid .c { background: var(--s800); border: 1px solid var(--s600); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app .mk-voice3a-grid .c span { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .mk-voice3a-grid .c b { font-size: 15px; font-weight: 600; color: #f4f4f5; font-variant-numeric: tabular-nums; }
.app .mk-voice3a-grid .c i { font-style: normal; font-size: 10px; color: #71717a; }
.app .mk-voice3a-grid .c i.dn { color: #fbbf24; }
.app .mk-voice3a-verdict { margin-top: 12px; max-width: 520px; background: var(--s800); border: 1px solid var(--s600); border-left: 3px solid var(--bab500); border-radius: 6px; padding: 8px 12px; font-size: 12.5px; color: #e4e4e7; }
.app .mk-voice3a-warn { margin-top: 8px; max-width: 520px; display: flex; align-items: flex-start; gap: 8px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.5); border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #d4d4d8; line-height: 1.45; }
.app .mk-voice3a-warn svg { flex: none; width: 14px; height: 14px; margin-top: 1px; fill: none; stroke: #fbbf24; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app .mk-voice3a-warn b { color: #fbbf24; font-weight: 600; }
.app .mk-voice3a-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; background: var(--s800); border: 1px solid var(--s500); border-radius: 6px; padding: 6px 14px; font-size: 12px; color: #e4e4e7; }
.app .mk-voice3a-btn svg { width: 12px; height: 12px; fill: none; stroke: #a1a1aa; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* voice figure 3b — first-connect fingerprint dialog (reuses the mk-share2 modal shell) */
.app .mk-voice3b-p { margin: 8px 0 0; font-size: 12px; color: #a1a1aa; line-height: 1.5; }
.app .mk-voice3b-fp { font-family: var(--mono); font-size: 11px; line-height: 1.6; color: #e4e4e7; background: var(--s950); border: 1px solid var(--s600); border-radius: 6px; padding: 8px 10px; word-break: break-all; font-variant-numeric: tabular-nums; }

.figure .mk-comms3a-em .mk-fade-wave i { background: #f87171; }
.figure .mk-comms3a-audit { margin-top: 8px; border-top: 1px solid #28282d; padding: 8px 8px 0; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.figure .mk-comms3a-audit .t { flex: none; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #71717a; }
.figure .mk-comms3a-audit .e { font-family: var(--mono); font-size: 10.5px; color: #d4d4d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.figure .app.mk-comms3b-crop { display: flex; flex-direction: column; height: auto; min-width: 30rem; max-width: 38rem; margin: 0 auto; }
.app .mk-comms3b-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; }
.app .mk-comms3b-picker { display: flex; flex-direction: column; gap: 8px; }
.app .mk-comms3b-opt { border: 1px solid var(--s600); background: var(--s800); border-radius: 6px; padding: 8px 10px; }
.app .mk-comms3b-opt b { display: block; font-size: 13px; font-weight: 600; color: #e4e4e7; }
.app .mk-comms3b-opt span { display: block; font-size: 11px; color: #a1a1aa; line-height: 1.35; }
.app .mk-comms3b-opt.on { border-color: var(--bab500); background: rgba(71,109,232,0.12); }
.app .mk-comms3b-opt.on b { color: #fff; }
.app .mk-comms3b-prev { border: 1px dashed var(--s500); border-radius: 6px; background: var(--s900); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app .mk-comms3b-prev .t { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #a1a1aa; margin-bottom: 4px; }
.app .mk-comms3b-link { padding: 0 4px 3px 18px; font-size: 11px; color: var(--bab400); }

.app .mk-share3a-tip { position: absolute; right: 10px; top: 66px; z-index: 2; display: flex; align-items: center; gap: 6px; background: var(--s950); border: 1px solid var(--s600); border-radius: 4px; padding: 3px 8px; font-size: 11px; color: #d4d4d8; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,0.5); }
.app .mk-share3a-tip svg { flex: none; }

.app .mk-share3b-blur { filter: blur(2.5px); opacity: 0.85; }
.app .mk-share3b-toast { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; align-items: center; gap: 8px; background: rgba(7,7,9,0.92); border: 1px solid var(--s600); border-radius: 6px; padding: 8px 14px; font-size: 12px; color: #d4d4d8; white-space: nowrap; box-shadow: 0 10px 28px rgba(0,0,0,0.6); }
.app .mk-share3b-toast b { color: #fff; font-weight: 600; }
.app .mk-share3b-toast svg { flex: none; }

/* -- mod, third-wave figure A: invites list + join preview -- */
.app .mk-mod3a-pane { flex: 1; min-height: 0; padding: 12px 16px 16px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-content: start; overflow: hidden; }
.app .mk-mod3a-pane .col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.app .mk-mod3a-list { border: 1px solid var(--s600); border-radius: 6px; background: var(--s800); overflow: hidden; }
.app .mk-mod3a-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--s700); }
.app .mk-mod3a-row:first-child { border-top: 0; }
.app .mk-mod3a-code { flex: none; font-family: var(--mono); font-size: 11px; color: #e4e4e7; background: var(--s950); border: 1px solid var(--s600); border-radius: 4px; padding: 2px 7px; }
.app .mk-mod3a-row .bd { flex: 1; min-width: 0; }
.app .mk-mod3a-row .bd b { display: block; font-size: 12.5px; font-weight: 600; color: #f4f4f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .mk-mod3a-row .bd .s { display: block; font-size: 11px; color: #a1a1aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .mk-mod3a-rev { flex: none; font-size: 11px; color: #f87171; border: 1px solid rgba(239,68,68,0.4); border-radius: 4px; padding: 2px 8px; }
.app .mk-mod3a-note { font-size: 11px; color: #71717a; }
.app .mk-mod3a-prev { border: 1px solid var(--s600); border-radius: 8px; background: var(--s900); padding: 12px; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 10px 28px rgba(0,0,0,0.4); }
.app .mk-mod3a-prev .srv { display: flex; align-items: center; gap: 10px; }
.app .mk-mod3a-prev .tile { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #3BA55C; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; }
.app .mk-mod3a-prev .nm { min-width: 0; }
.app .mk-mod3a-prev .nm b { display: block; font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.25; }
.app .mk-mod3a-prev .nm span { display: block; font-size: 11px; color: #a1a1aa; }
.app .mk-mod3a-req { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: #d4d4d8; line-height: 1.35; }
.app .mk-mod3a-req svg { flex: none; width: 13px; height: 13px; margin-top: 1px; fill: none; stroke: #4ade80; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.app .mk-mod3a-join { margin-top: 2px; background: var(--bab500); color: #fff; border-radius: 6px; padding: 8px 10px; text-align: center; font-size: 12.5px; font-weight: 600; }

/* -- mod, third-wave figure B: the report queue (reuses .mk-mod2-pane, .mk-mod2-btn, .mk-mod2-note, .mk-desktop-seg) -- */
.app .mk-mod3b-q { border: 1px solid var(--s600); border-radius: 6px; background: var(--s800); overflow: hidden; }
.app .mk-mod3b-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--s700); }
.app .mk-mod3b-row:first-child { border-top: 0; }
.app .mk-mod3b-row.sel { background: rgba(71,109,232,0.07); }
.app .mk-mod3b-row .ic { flex: none; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--s600); display: grid; place-items: center; color: #a1a1aa; }
.app .mk-mod3b-row.hot .ic { color: #f87171; border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.1); }
.app .mk-mod3b-row.am .ic { color: #fbbf24; border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.08); }
.app .mk-mod3b-row .ic svg { display: block; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.app .mk-mod3b-row .bd { flex: 1; min-width: 0; }
.app .mk-mod3b-row .bd b { display: block; font-size: 13px; font-weight: 600; color: #f4f4f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .mk-mod3b-row .bd .s { display: block; font-size: 11.5px; color: #a1a1aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .mk-mod3b-row .t { flex: none; font-size: 11px; color: #71717a; font-variant-numeric: tabular-nums; }

/* -- apps, third wave: Manage Apps + board lifecycle -- */
.app .mk-apps3a-off { opacity: 0.4; }
.app .mk-apps3a-tag { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #a1a1aa; border: 1px solid var(--s500); border-radius: 3px; padding: 0 4px; }
.app .mk-apps3a-pane { flex: 1; min-height: 0; overflow: hidden; padding: 12px 20px 0; display: flex; flex-direction: column; gap: 6px; }
.app .mk-apps3a-pane .cat { padding-left: 0; padding-right: 0; }
.app .mk-apps3a-app { display: flex; align-items: center; gap: 10px; background: var(--s800); border: 1px solid var(--s600); border-radius: 6px; padding: 8px 12px; }
.app .mk-apps3a-app .ic { flex: none; width: 20px; text-align: center; font-size: 15px; color: #a1a1aa; }
.app .mk-apps3a-app .nm { flex: 1; min-width: 0; }
.app .mk-apps3a-app .nm b { display: block; font-size: 13px; font-weight: 600; color: #f4f4f5; }
.app .mk-apps3a-app .nm span { display: block; font-size: 11px; color: #a1a1aa; }
.app .mk-apps3a-btn { flex: none; font-size: 11.5px; color: #d4d4d8; border: 1px solid var(--s500); border-radius: 4px; padding: 3px 10px; }
.app .mk-apps3a-btn.go { color: var(--bab400); border-color: rgba(71,109,232,0.6); }
.app .mk-apps3a-row { display: flex; align-items: center; gap: 8px; background: var(--s800); border: 1px solid var(--s600); border-radius: 6px; padding: 6px 12px; font-size: 13px; }
.app .mk-apps3a-row .ic { flex: none; width: 20px; text-align: center; font-size: 14px; color: #a1a1aa; }
.app .mk-apps3a-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e4e4e7; }
.app .mk-apps3a-row .cat2 { font-size: 11px; color: #71717a; }
.app .mk-apps3a-row .st { font-size: 11px; color: #a1a1aa; font-variant-numeric: tabular-nums; white-space: nowrap; }
.app .mk-apps3a-row.dim .nm { color: #a1a1aa; }

/* -- apps, third wave: read-only board under moderation -- */
.app .mk-apps3b-ro { margin-left: auto; flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fbbf24; border: 1px solid rgba(245,158,11,0.6); border-radius: 3px; padding: 1px 6px; }
.app .mk-apps3b-lock { display: flex; align-items: center; gap: 10px; margin: 12px 16px 0; border: 1px solid rgba(245,158,11,0.5); background: rgba(245,158,11,0.1); border-radius: 6px; padding: 8px 12px; font-size: 12.5px; color: #fcd34d; }
.app .mk-apps3b-lock b { color: #fff; font-weight: 600; }
.app .mk-apps3b-lock svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #fbbf24; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app .mk-apps3b-lock span { min-width: 0; }

/* -- desk3a: server settings overview + delete confirm -- */
.app .mk-desk3a-media { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.app .mk-desk3a-tile { width: 56px; height: 56px; border-radius: 16px; color: #fff; font-weight: 600; font-size: 18px; display: grid; place-items: center; flex: none; }
.app .mk-desk3a-btn { font-size: 12px; color: #d4d4d8; background: var(--s800); border: 1px solid var(--s600); border-radius: 6px; padding: 5px 12px; }
.app .mk-desk3a-del { color: #f87171; }
.app .mk-desk3a-danger { margin-top: 4px; max-width: 420px; border: 1px solid rgba(239,68,68,0.4); border-radius: 6px; background: rgba(239,68,68,0.07); padding: 10px 12px; font-size: 12px; color: #d4d4d8; }
.app .mk-desk3a-danger p { margin: 0 0 8px; line-height: 1.4; }
.app .mk-desk3a-danger b { color: #fff; font-weight: 600; }
.app .mk-desk3a-row { display: flex; gap: 8px; }
.app .mk-desk3a-row .mk-desk2-in { flex: 1; }
.app .mk-desk3a-delbtn { flex: none; align-self: center; font-size: 12px; color: rgba(248,113,113,0.5); border: 1px solid rgba(239,68,68,0.25); border-radius: 4px; padding: 3px 10px; white-space: nowrap; }
.app .mk-desk3a-foot { margin: 8px 0 0; font-size: 11px; color: #71717a; }

/* -- desk3b: the F3 / F9 stat overlays -- */
.app .mk-desk3b-hud { position: absolute; top: 24px; z-index: 2; display: flex; flex-direction: column; background: rgba(7,7,9,0.85); border: 1px solid var(--s600); border-radius: 4px; padding: 7px 10px 8px; font-family: var(--mono); font-size: 10.5px; line-height: 1.7; color: #4ade80; white-space: nowrap; }
.app .mk-desk3b-hud.tl { left: 28px; }
.app .mk-desk3b-hud.tr { right: 28px; }
.app .mk-desk3b-hud b { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #a1a1aa; }
.app .mk-desk3b-hud i { display: inline-block; width: 84px; font-style: normal; color: #71717a; }

/* mk-catch — features/chat: unread, mentions, muting (WEB-46).
   Colours are the client's: amber ping wash rgba(250,166,26,.08),
   blue mention pill, red NEW line, zinc unread dot. */
.app .mk-catch-nub { position: absolute; left: -12px; top: 14px; width: 4px; height: 12px; border-radius: 0 4px 4px 0; background: #e4e4e7; }
.app .mk-catch-tbadge { position: absolute; right: -3px; bottom: -3px; min-width: 16px; height: 16px; border-radius: 8px; background: #ef4444; border: 2px solid var(--s950); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; padding: 0 3px; }
.app .mk-catch-dot { width: 6px; height: 6px; border-radius: 50%; background: #e4e4e7; flex: none; }
.app .mk-catch-badge { margin-left: auto; min-width: 16px; height: 16px; border-radius: 8px; background: #ef4444; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; padding: 0 4px; }
.app .mk-catch-new { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.app .mk-catch-new .l { flex: 1; height: 1px; background: rgba(239,68,68,0.7); }
.app .mk-catch-new span { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #f87171; }
.app .mk-catch-ping { background: rgba(250,166,26,0.08); border-left: 2px solid #faa61a; margin: 0 -16px; padding: 2px 16px 2px 14px; }
.app .mk-catch-pill { background: rgba(71,109,232,0.25); color: #7b96ef; border-radius: 3px; padding: 0 2px; font-weight: 500; }

/* mk-srch — features/chat: search + jump (WEB-46) */
.app .mk-srch-box { margin-left: auto; display: flex; align-items: center; gap: 6px; background: var(--s950); border: 1px solid var(--s600); border-radius: 4px; padding: 3px 8px; font-size: 12px; color: #a1a1aa; min-width: 0; }
.app .mk-srch-box b { color: #e4e4e7; font-weight: 400; }
.app .mk-srch-pane { background: var(--s900); border-left: 1px solid var(--s700); display: flex; flex-direction: column; min-width: 0; }
.app .mk-srch-pane .hd { height: 48px; flex: none; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--s700); font-weight: 600; font-size: 13px; color: #fff; }
.app .mk-srch-pane .rs { padding-top: 8px; overflow: hidden; }
.app .mk-srch-hit { border: 1px solid var(--s700); background: var(--s950); border-radius: 4px; padding: 8px; margin: 0 8px 8px; }
.app .mk-srch-hit .r1 { display: flex; align-items: baseline; gap: 6px; font-size: 11px; color: #a1a1aa; margin-bottom: 3px; }
.app .mk-srch-hit .r1 b { color: #fff; font-weight: 600; }
.app .mk-srch-hit .r1 .t { margin-left: auto; color: #71717a; }
.app .mk-srch-hit .tx { font-size: 12.5px; color: #d4d4d8; }
.app .mk-srch-hit mark { background: rgba(234,179,8,0.3); color: #fde047; border-radius: 2px; padding: 0 1px; }
.app .mk-srch-more { text-align: center; font-size: 11px; color: #a1a1aa; padding: 4px 0 8px; }
.app .mk-srch-flash { background: rgba(74,222,128,0.16); margin: 0 -16px; padding: 2px 16px; }
.app .mk-srch-back { flex: none; display: flex; align-items: center; justify-content: space-between; background: rgba(71,109,232,0.2); color: #bfd0f7; font-size: 12px; padding: 5px 16px; }

/* mk-dm — features/chat: direct messages (WEB-46) */
.app .mk-dm-home { width: 40px; height: 40px; border-radius: 12px; background: var(--s800); color: #4ade80; display: grid; place-items: center; position: relative; }
.app .mk-dm-home svg { width: 22px; height: 22px; }
.app .mk-dm-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; font-size: 14px; color: #d4d4d8; }
.app .mk-dm-row.on { background: rgba(40,40,45,0.5); color: #fff; }
.app .mk-dm-row .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #fff; position: relative; flex: none; }
.app .mk-dm-row .av i { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--s900); background: #10b981; }
.app .mk-dm-row .av i.off { background: #71717a; }

/* mk-hook — features/apps: the Integrations tab (WEB-46) */
.app .mk-hook-pane { padding: 14px 16px; overflow: hidden; }
.app .mk-hook-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--s600); background: var(--s900); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
.app .mk-hook-row .nm { min-width: 0; flex: 1; }
.app .mk-hook-row .nm b { display: block; font-size: 13px; font-weight: 600; color: #f4f4f5; }
.app .mk-hook-row .nm span { display: block; font-family: var(--mono); font-size: 10.5px; color: #71717a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .mk-hook-chip { background: var(--s950); border-radius: 4px; padding: 3px 8px; font-size: 11px; color: #d4d4d8; flex: none; }
.app .mk-hook-btn { background: var(--s600); border-radius: 4px; padding: 3px 8px; font-size: 11px; color: #f4f4f5; flex: none; }
.app .mk-hook-btn.ok { background: rgba(34,197,94,0.2); color: #4ade80; }
.app .mk-hook-new { display: inline-block; background: var(--bab500); color: #fff; border-radius: 4px; padding: 5px 10px; font-size: 12px; font-weight: 600; margin-top: 4px; }
.app .mk-hook-note { margin-top: 10px; font-size: 11px; color: #71717a; }

/* ============================================================
   HOME BACKGROUND ART (WEB-42) — generated SVG atmospherics.
   Product-shaped, not decorative: radio arcs + a talk waveform
   behind the hero, the net tree behind the comms band. Kept
   faint; content contrast untouched. Light default, dark swap.
   ============================================================ */
.hero.bg-arcs {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='640' viewBox='0 0 960 640'%3E%3Cg fill='none' stroke='%2310693F' stroke-opacity='0.10'%3E%3Ccircle cx='820' cy='90' r='80'/%3E%3Ccircle cx='820' cy='90' r='160'/%3E%3Ccircle cx='820' cy='90' r='250'/%3E%3Ccircle cx='820' cy='90' r='350'/%3E%3Ccircle cx='820' cy='90' r='460'/%3E%3C/g%3E%3Cg fill='%2310693F' fill-opacity='0.28'%3E%3Ccircle cx='820' cy='90' r='4'/%3E%3C/g%3E%3Cpath d='M0 600h520l14-18 14 36 14-52 14 64 14-44 12 14h358' fill='none' stroke='%2310693F' stroke-opacity='0.14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -60px top -30px;
}
.bg-net {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='440' viewBox='0 0 560 440'%3E%3Cg stroke='%2310693F' stroke-opacity='0.12'%3E%3Cpath d='M280 70 150 190M280 70 410 190M150 190 90 320M150 190 210 320M410 190 350 320M410 190 470 320'/%3E%3C/g%3E%3Cg fill='%2310693F' fill-opacity='0.16'%3E%3Ccircle cx='280' cy='70' r='9'/%3E%3Ccircle cx='150' cy='190' r='6'/%3E%3Ccircle cx='410' cy='190' r='6'/%3E%3Ccircle cx='90' cy='320' r='5'/%3E%3Ccircle cx='210' cy='320' r='5'/%3E%3Ccircle cx='350' cy='320' r='5'/%3E%3Ccircle cx='470' cy='320' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4% center;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero.bg-arcs {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='640' viewBox='0 0 960 640'%3E%3Cg fill='none' stroke='%234ADE80' stroke-opacity='0.07'%3E%3Ccircle cx='820' cy='90' r='80'/%3E%3Ccircle cx='820' cy='90' r='160'/%3E%3Ccircle cx='820' cy='90' r='250'/%3E%3Ccircle cx='820' cy='90' r='350'/%3E%3Ccircle cx='820' cy='90' r='460'/%3E%3C/g%3E%3Cg fill='%234ADE80' fill-opacity='0.22'%3E%3Ccircle cx='820' cy='90' r='4'/%3E%3C/g%3E%3Cpath d='M0 600h520l14-18 14 36 14-52 14 64 14-44 12 14h358' fill='none' stroke='%234ADE80' stroke-opacity='0.10'/%3E%3C/svg%3E");
  }
  :root:not([data-theme="light"]) .bg-net {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='440' viewBox='0 0 560 440'%3E%3Cg stroke='%234ADE80' stroke-opacity='0.09'%3E%3Cpath d='M280 70 150 190M280 70 410 190M150 190 90 320M150 190 210 320M410 190 350 320M410 190 470 320'/%3E%3C/g%3E%3Cg fill='%234ADE80' fill-opacity='0.13'%3E%3Ccircle cx='280' cy='70' r='9'/%3E%3Ccircle cx='150' cy='190' r='6'/%3E%3Ccircle cx='410' cy='190' r='6'/%3E%3Ccircle cx='90' cy='320' r='5'/%3E%3Ccircle cx='210' cy='320' r='5'/%3E%3Ccircle cx='350' cy='320' r='5'/%3E%3Ccircle cx='470' cy='320' r='5'/%3E%3C/g%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] .hero.bg-arcs {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='640' viewBox='0 0 960 640'%3E%3Cg fill='none' stroke='%234ADE80' stroke-opacity='0.07'%3E%3Ccircle cx='820' cy='90' r='80'/%3E%3Ccircle cx='820' cy='90' r='160'/%3E%3Ccircle cx='820' cy='90' r='250'/%3E%3Ccircle cx='820' cy='90' r='350'/%3E%3Ccircle cx='820' cy='90' r='460'/%3E%3C/g%3E%3Cg fill='%234ADE80' fill-opacity='0.22'%3E%3Ccircle cx='820' cy='90' r='4'/%3E%3C/g%3E%3Cpath d='M0 600h520l14-18 14 36 14-52 14 64 14-44 12 14h358' fill='none' stroke='%234ADE80' stroke-opacity='0.10'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .bg-net {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='440' viewBox='0 0 560 440'%3E%3Cg stroke='%234ADE80' stroke-opacity='0.09'%3E%3Cpath d='M280 70 150 190M280 70 410 190M150 190 90 320M150 190 210 320M410 190 350 320M410 190 470 320'/%3E%3C/g%3E%3Cg fill='%234ADE80' fill-opacity='0.13'%3E%3Ccircle cx='280' cy='70' r='9'/%3E%3Ccircle cx='150' cy='190' r='6'/%3E%3Ccircle cx='410' cy='190' r='6'/%3E%3Ccircle cx='90' cy='320' r='5'/%3E%3Ccircle cx='210' cy='320' r='5'/%3E%3Ccircle cx='350' cy='320' r='5'/%3E%3Ccircle cx='470' cy='320' r='5'/%3E%3C/g%3E%3C/svg%3E");
}