:root {
  color-scheme: dark;
  --bg: #07110f;
  --panel: rgba(13, 28, 24, 0.86);
  --panel-strong: #10251f;
  --line: rgba(120, 203, 173, 0.16);
  --muted: #8ca49b;
  --text: #ecf8f3;
  --mint: #70e8bd;
  --mint-strong: #27d49a;
  --amber: #f3b761;
  --danger: #f07373;
  --blue: #6ab9ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    linear-gradient(rgba(87, 160, 134, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 160, 134, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 34% 6%, #163c30 0, transparent 30%),
    var(--bg);
  background-size: 34px 34px, 34px 34px, auto, auto;
}

button { font: inherit; }
button, select, textarea { color: inherit; }
button { cursor: pointer; }
.topbar-button { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(16, 37, 31, .78); font-size: .72rem; }
.topbar-button.primary, button.primary { color: #06130f; border-color: transparent; background: linear-gradient(145deg, #9affd9, #26ca94); font-weight: 800; }
button.secondary { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.03); }
button:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

.ambient {
  position: fixed;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .08;
  pointer-events: none;
}

.ambient-one { top: -18rem; right: -10rem; background: #44f0b4; }
.ambient-two { bottom: -22rem; left: 10%; background: #46a8ff; }

.topbar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  padding: 14px clamp(20px, 3vw, 48px);
  border-bottom: 1px solid var(--line);
  background: rgba(7, 17, 15, .88);
  backdrop-filter: blur(18px);
}

.brand, .topbar-actions, .chief-card, .director-card, .panel-heading, .lia-card { display: flex; align-items: center; }
.brand { gap: 13px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(112, 232, 189, .5);
  border-radius: 13px;
  color: #07110f;
  background: linear-gradient(145deg, #9affd9, #26ca94);
  box-shadow: 0 0 35px rgba(39, 212, 154, .18);
  font-weight: 900;
}

.brand strong, .brand span { display: block; }
.brand strong { letter-spacing: -.02em; }
.brand span { margin-top: 2px; color: var(--muted); font-size: .76rem; }
.topbar-actions { gap: 10px; }
.project-pill, .live-pill, .truth-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(16, 37, 31, .78);
}
.project-pill { display: flex; align-items: center; gap: 8px; padding: 8px 13px; }
.project-pill span { color: var(--muted); font-size: .72rem; }
.project-pill select { padding: 0; border: 0; color: var(--mint); background: transparent; font-size: .84rem; font-weight: 800; }
.live-pill { display: flex; align-items: center; gap: 8px; padding: 9px 13px; color: var(--muted); font-size: .78rem; }
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px currentColor; }
.live-pill.connected { color: var(--mint); border-color: rgba(112, 232, 189, .3); }
.live-pill.connected i { background: var(--mint); }
.live-pill.error { color: var(--danger); }
.live-pill.error i { background: var(--danger); }

.layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, .75fr);
  align-items: start;
  gap: 24px;
  width: min(1580px, calc(100% - 40px));
  margin: 30px auto 18px;
}

.office, .panel, .metrics article {
  border: 1px solid var(--line);
  background: linear-gradient(155deg, rgba(17, 40, 33, .88), rgba(8, 20, 17, .9));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .22);
}
.office { grid-column: 1; grid-row: 1 / span 2; min-height: 720px; padding: clamp(22px, 3vw, 38px); border-radius: 25px; overflow: hidden; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.eyebrow, .role { color: var(--mint); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.65rem, 3vw, 2.6rem); letter-spacing: -.045em; }
.truth-badge { padding: 8px 12px; color: var(--mint); font-size: .72rem; white-space: nowrap; }
.truth-badge::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--mint); }

.game-shell { margin-top: 28px; padding: 18px; border: 1px solid rgba(106, 185, 255, .2); border-radius: 22px; background: linear-gradient(145deg, rgba(5, 18, 16, .9), rgba(11, 31, 26, .82)); }
.game-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.game-heading h2 { margin: 5px 0 0; font-size: 1.2rem; }
.zoom-controls { display: flex; align-items: center; gap: 6px; }
.zoom-controls button, .zoom-controls output { min-width: 34px; min-height: 32px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.035); font-size: .65rem; text-align: center; }
.game-viewport { position: relative; height: 510px; overflow: auto; border: 1px solid rgba(120, 203, 173, .16); border-radius: 18px; background: radial-gradient(circle at 50% 50%, rgba(47, 105, 83, .22), transparent 65%), #071411; scrollbar-color: rgba(112,232,189,.25) transparent; }
.game-viewport:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.game-scene { --scene-scale: 1; position: relative; width: 920px; height: 560px; transform: scale(var(--scene-scale)); transform-origin: top left; transition: transform .2s ease; }
.floor-grid { position: absolute; inset: 32px 42px; border: 1px solid rgba(112,232,189,.13); border-radius: 22px; background: linear-gradient(30deg, rgba(112,232,189,.055) 12%, transparent 12.5%, transparent 87%, rgba(112,232,189,.055) 87.5%), linear-gradient(150deg, rgba(112,232,189,.055) 12%, transparent 12.5%, transparent 87%, rgba(112,232,189,.055) 87.5%), linear-gradient(30deg, rgba(112,232,189,.055) 12%, transparent 12.5%, transparent 87%, rgba(112,232,189,.055) 87.5%), linear-gradient(150deg, rgba(112,232,189,.055) 12%, transparent 12.5%, transparent 87%, rgba(112,232,189,.055) 87.5%), linear-gradient(60deg, rgba(106,185,255,.04) 25%, transparent 25.5%, transparent 75%, rgba(106,185,255,.04) 75%); background-size: 80px 140px; box-shadow: inset 0 0 80px rgba(0,0,0,.3); transform: skewY(-2deg); }
.station { position: absolute; display: grid; place-items: center; width: 106px; height: 62px; border: 1px solid rgba(120,203,173,.18); border-radius: 13px; color: #769a8d; background: linear-gradient(145deg, rgba(25,57,46,.9), rgba(8,25,21,.96)); box-shadow: 0 12px 0 #06110e, 0 18px 30px rgba(0,0,0,.25); transform: rotate(-2deg) skewX(-4deg); }
.station::before { content: ""; position: absolute; width: 24px; height: 16px; top: 13px; border: 2px solid rgba(112,232,189,.25); border-radius: 4px; background: rgba(106,185,255,.08); }
.station span { margin-top: 28px; font-size: .56rem; letter-spacing: .05em; text-transform: uppercase; }
.station-entry { left: 42px; top: 438px; }
.station-queue { left: 180px; top: 438px; }
.station-board { left: 90px; top: 282px; }
.station-docs { left: 244px; top: 280px; }
.station-code { left: 397px; top: 280px; }
.station-terminal { left: 552px; top: 280px; }
.station-qa { left: 706px; top: 280px; }
.station-review { left: 90px; top: 116px; }
.station-lia { left: 274px; top: 112px; border-color: rgba(106,185,255,.36); }
.station-chief { left: 446px; top: 82px; border-color: rgba(243,183,97,.4); }
.station-blocked { left: 626px; top: 112px; border-color: rgba(240,115,115,.35); }
.station-support { left: 770px; top: 112px; }
.station-coffee { left: 360px; top: 438px; border-color: rgba(243,183,97,.3); }
.station-delivery { left: 540px; top: 438px; }
.station-exit { left: 738px; top: 438px; }
.agent-layer { position: absolute; inset: 0; pointer-events: none; }
.game-agent { --agent-x: 70px; --agent-y: 430px; position: absolute; z-index: 4; left: 0; top: 0; width: 68px; min-height: 88px; padding: 0; border: 0; color: var(--text); background: transparent; transform: translate(var(--agent-x), var(--agent-y)); transition: transform 1.05s cubic-bezier(.2,.82,.25,1); pointer-events: auto; }
.game-agent[data-motion="walking"] .sprite { animation: sprite-walk .38s ease-in-out infinite alternate; }
.game-agent[data-alert="attention"] .sprite { box-shadow: 0 0 0 3px rgba(243,183,97,.22), 0 0 28px rgba(243,183,97,.28); }
.game-agent[data-alert="critical"] .sprite { box-shadow: 0 0 0 3px rgba(240,115,115,.28), 0 0 28px rgba(240,115,115,.34); }
.game-agent[data-presence="absent"] { opacity: .46; filter: grayscale(.7); }
.sprite { position: relative; display: grid; place-items: center; width: 48px; height: 52px; margin: 0 auto; border: 2px solid rgba(255,255,255,.22); border-radius: 16px 16px 13px 13px; color: #06130f; background: linear-gradient(145deg, #9afad7, #32bb8c); box-shadow: 0 11px 0 rgba(0,0,0,.25), 0 16px 30px rgba(0,0,0,.35); font-size: .9rem; font-weight: 900; }
.game-agent[data-provider="claude"] .sprite { color: #1a1007; background: linear-gradient(145deg, #ffd596, #cf8249); }
.game-agent[data-provider="lia"] .sprite { color: #061318; background: linear-gradient(145deg, #b5e9ff, #4fa8df); }
.game-agent[data-provider="subagent"] .sprite { color: #130c19; background: linear-gradient(145deg, #e0c0ff, #9a6bd1); }
.sprite::before, .sprite::after { content: ""; position: absolute; bottom: -9px; width: 12px; height: 12px; border-radius: 3px; background: inherit; }
.sprite::before { left: 7px; } .sprite::after { right: 7px; }
.game-agent strong { display: block; max-width: 68px; margin-top: 11px; overflow: hidden; color: var(--text); font-size: .58rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 4px #000; }
.game-agent .agent-state-dot { position: absolute; right: 5px; top: -3px; width: 11px; height: 11px; border: 2px solid #071411; border-radius: 50%; background: var(--mint); }
.game-agent[data-presence="stale"] .agent-state-dot { background: var(--amber); }
.game-agent[data-presence="absent"] .agent-state-dot { background: var(--danger); }
.game-help { margin: 12px 2px 0; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.agent-a11y-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.agent-a11y-list button { padding: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); text-align: left; text-overflow: ellipsis; white-space: nowrap; background: rgba(255,255,255,.025); font-size: .62rem; }
@keyframes sprite-walk { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-7px) rotate(2deg); } }

.command-map { position: relative; width: min(840px, 100%); margin: 38px auto 0; }
.chief-card {
  position: relative;
  z-index: 2;
  width: min(600px, 94%);
  min-height: 168px;
  margin: 0 auto;
  padding: 18px 22px 18px 9px;
  overflow: hidden;
  border: 1px solid rgba(112, 232, 189, .32);
  border-radius: 24px;
  background: linear-gradient(125deg, rgba(32, 71, 58, .92), rgba(11, 28, 24, .94));
}
.chief-card img { align-self: flex-end; width: 135px; height: 150px; margin: 0 20px -18px 0; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .45)); }
.chief-copy { position: relative; z-index: 2; }
.chief-copy h2 { margin: 8px 0; font-size: 1.55rem; }
.chief-copy p { max-width: 340px; margin-bottom: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.chief-glow { position: absolute; width: 210px; height: 210px; left: -35px; bottom: -75px; border-radius: 50%; background: rgba(66, 238, 177, .18); filter: blur(36px); }
.human-badge { position: absolute; top: 14px; right: 14px; color: var(--amber); font-size: .62rem; letter-spacing: .12em; }
.command-line { height: 56px; position: relative; }
.command-line::before { content: ""; position: absolute; top: 0; bottom: 18px; left: 50%; width: 1px; background: var(--line); }
.command-line::after { content: ""; position: absolute; bottom: 17px; left: 25%; right: 25%; height: 1px; background: var(--line); }

.directors { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.director-card { min-height: 150px; gap: 15px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(9, 25, 20, .84); flex-wrap: wrap; }
.director-card[data-presence="stale"] { border-color: rgba(243, 183, 97, .48); }
.director-card.needs-attention { box-shadow: inset 0 0 0 1px rgba(243, 183, 97, .3); }
.director-card.critical { border-color: rgba(240, 115, 115, .68); box-shadow: inset 0 0 28px rgba(240, 115, 115, .08); }
.avatar { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; font-size: 1.15rem; font-weight: 900; }
.codex-avatar { color: #061310; background: linear-gradient(145deg, #9afad7, #3bd09e); }
.claude-avatar { color: #181007; background: linear-gradient(145deg, #ffd596, #d98d50); }
.director-copy { min-width: 0; }
.director-copy h3 { margin: 5px 0; font-size: 1.02rem; }
.director-copy p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.status-tag { align-self: flex-start; margin-left: auto; padding: 5px 8px; border-radius: 7px; font-size: .6rem; text-transform: uppercase; }
.status-tag.disconnected { color: #eaa1a1; background: rgba(240, 115, 115, .1); }
.status-tag.connected { color: var(--mint); background: rgba(112, 232, 189, .1); }
.agent-runtime { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; width: 100%; padding-top: 12px; border-top: 1px solid var(--line); }
.agent-runtime::before { content: ""; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px rgba(106, 185, 255, .55); }
.agent-runtime strong { font-size: .72rem; }
.agent-runtime span { grid-column: 2; color: var(--muted); font-size: .62rem; line-height: 1.45; }
.lia-card { width: min(520px, 94%); gap: 14px; margin: 20px auto 0; padding: 14px 16px; border: 1px solid rgba(106, 185, 255, .24); border-radius: 17px; background: rgba(10, 28, 28, .82); }
.lia-avatar { color: #061318; background: linear-gradient(145deg, #a8e2ff, #55aee8); }
.lia-card h3 { margin: 4px 0; font-size: .95rem; }
.lia-card p { margin: 0; color: var(--muted); font-size: .68rem; }
.lia-sequence { margin-left: auto; color: var(--blue); font-size: .68rem; }

.departments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 34px; }
.departments article { position: relative; min-height: 112px; padding: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: rgba(8, 22, 18, .72); }
.departments article > span { position: absolute; right: 10px; top: 7px; color: rgba(112, 232, 189, .12); font-size: 2rem; font-weight: 900; }
.departments strong, .departments small { display: block; position: relative; }
.departments strong { margin-top: 30px; font-size: .8rem; }
.departments small { margin-top: 8px; color: var(--muted); font-size: .66rem; }

.priority-panel, .side-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.priority-panel { grid-column: 2; grid-row: 1; }
.side-panel { grid-column: 2; grid-row: 2; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metrics article { min-width: 0; padding: 15px; border-radius: 16px; }
.metrics span, .metrics small, .metrics strong { display: block; }
.metrics span { min-height: 30px; color: var(--muted); font-size: .65rem; }
.metrics strong { margin: 2px 0; color: var(--mint); font-size: 1.5rem; }
.metrics small { color: #61776f; font-size: .58rem; }
.panel { border-radius: 20px; padding: 20px; }
.owner-queues { padding-bottom: 14px; }
.queue-total { padding: 5px 8px; border-radius: 999px; color: var(--blue); background: rgba(106, 185, 255, .1); font-size: .62rem; }
.queue-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 15px; }
.queue-tabs button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 8px 10px; border: 1px solid rgba(120, 203, 173, .1); border-radius: 10px; color: var(--muted); text-align: left; background: rgba(6, 18, 15, .5); cursor: pointer; }
.queue-tabs button span { overflow: hidden; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.queue-tabs button strong { display: grid; flex: 0 0 auto; place-items: center; min-width: 22px; height: 22px; border-radius: 7px; color: var(--muted); background: rgba(255, 255, 255, .04); font-size: .65rem; }
.queue-tabs button.has-items strong { color: var(--mint); background: rgba(112, 232, 189, .1); }
.queue-tabs button[aria-selected="true"] { color: var(--text); border-color: rgba(112, 232, 189, .38); background: rgba(112, 232, 189, .09); }
.queue-tabs button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.queue-detail { margin-top: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(6, 18, 15, .52); }
.queue-detail-heading { display: flex; align-items: center; justify-content: space-between; }
.queue-detail-heading strong { font-size: .72rem; }
.queue-detail-heading span { color: var(--mint); font-size: .68rem; }
.queue-detail ul { display: grid; gap: 7px; max-height: 150px; margin: 10px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.queue-detail li { display: flex; justify-content: space-between; gap: 8px; padding: 8px; border-radius: 9px; background: rgba(255, 255, 255, .025); }
.queue-detail li { cursor: pointer; }
.queue-detail li:hover { background: rgba(112,232,189,.07); }
.queue-detail li button { display: contents; color: inherit; text-align: left; }
.queue-detail li strong, .queue-detail li span { display: block; }
.queue-detail li strong { font-size: .65rem; }
.queue-detail li span, .queue-detail li small, .queue-detail > p { color: var(--muted); font-size: .57rem; }
.queue-detail li span { margin-top: 4px; }
.queue-detail > p { margin: 10px 0 0; }
.queue-detail > p[hidden] { display: none; }
.task-history { display: grid; gap: 7px; max-height: 210px; margin: 14px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.task-history button { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: inherit; text-align: left; background: rgba(6, 18, 15, .52); }
.task-history strong, .task-history span { display: block; }
.task-history strong { font-size: .68rem; }
.task-history span { margin-top: 4px; color: var(--muted); font-size: .59rem; }
.history-panel .panel-note[hidden] { display: none; }
.timeline-panel { flex: 1; min-height: 510px; }
.panel-heading { justify-content: space-between; align-items: flex-start; }
.panel h2 { margin: 4px 0 0; font-size: 1.15rem; }
.panel-note { margin: 12px 0 18px; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.timeline { display: flex; flex-direction: column; gap: 9px; max-height: 445px; margin: 0; padding: 0 3px 0 0; overflow-y: auto; list-style: none; }
.event-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px; border: 1px solid rgba(120, 203, 173, .1); border-radius: 12px; background: rgba(6, 18, 15, .55); }
.event-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: var(--mint); background: rgba(112, 232, 189, .1); font-size: .72rem; font-weight: 900; }
.event-main strong, .event-main span { display: block; }
.event-main strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.event-main span { margin-top: 4px; color: var(--muted); font-size: .62rem; }
.event-time { color: #61776f; font-size: .58rem; }
.empty-state { display: grid; place-items: center; min-height: 210px; padding: 30px; text-align: center; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); }
.empty-state strong, .empty-state span { display: block; }
.empty-state strong { color: var(--text); font-size: .82rem; }
.empty-state span { max-width: 250px; margin-top: -50px; font-size: .68rem; line-height: 1.5; }
.empty-state[hidden] { display: none; }

.queues { display: grid; grid-template-columns: 1fr 1fr; padding: 0; overflow: hidden; }
.queue-column { min-height: 105px; padding: 17px; }
.queue-column + .queue-column { border-left: 1px solid var(--line); }
.queue-column strong, .queue-column small { display: block; }
.queue-column strong { margin: 8px 0 5px; font-size: .86rem; }
.queue-column small { color: var(--muted); font-size: .63rem; line-height: 1.4; }
.queue-column.approval .eyebrow { color: var(--amber); }

body > footer { display: flex; justify-content: space-between; width: min(1580px, calc(100% - 40px)); margin: 0 auto; padding: 10px 2px 22px; color: #61776f; font-size: .66rem; }

.modal { width: min(680px, calc(100% - 24px)); max-height: min(86vh, 820px); padding: 0; overflow: auto; border: 1px solid rgba(112,232,189,.28); border-radius: 22px; color: var(--text); background: #0a1c17; box-shadow: 0 34px 120px rgba(0,0,0,.72); }
.modal::backdrop { background: rgba(1,7,5,.78); backdrop-filter: blur(5px); }
.modal form, .modal > article { padding: 22px; }
.modal header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.modal h2 { margin: 5px 0 0; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 1.25rem; }
.modal label { display: grid; gap: 7px; color: var(--muted); font-size: .7rem; }
.modal textarea, .modal select { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: rgba(5,16,13,.8); resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 14px; }
.modal form > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal form > footer button { padding: 10px 14px; border-radius: 10px; }
.form-status { min-height: 20px; margin: 12px 0 0; color: var(--amber); font-size: .68rem; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.detail-grid div { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.detail-grid span, .detail-grid strong { display: block; }
.detail-grid span { color: var(--muted); font-size: .6rem; }
.detail-grid strong { margin-top: 5px; overflow-wrap: anywhere; font-size: .72rem; }
.detail-section { margin-top: 16px; }
.detail-section h3 { margin-bottom: 8px; font-size: .78rem; }
.detail-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.detail-list li { padding: 9px; border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .64rem; line-height: 1.45; }
.history-more { width: 100%; min-height: 40px; margin-top: 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--mint); background: rgba(112,232,189,.06); font-size: .65rem; }
.history-more[hidden] { display: none; }
.task-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.task-actions button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.035); font-size: .65rem; }
.task-actions button.danger { color: #f2a2a2; border-color: rgba(240,115,115,.3); }
.task-actions button.approve { color: var(--mint); border-color: rgba(112,232,189,.3); }
.task-actions button:disabled { opacity: .42; cursor: not-allowed; }

@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; }
  .office, .priority-panel, .side-panel { grid-column: 1; grid-row: auto; }
  .office { min-height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media (max-width: 680px) {
  .topbar { align-items: flex-start; gap: 12px; }
  .topbar-actions { flex-direction: column; align-items: flex-end; }
  .topbar-button { padding: 7px 9px; }
  .project-pill span { display: none; }
  .layout { width: min(100% - 22px, 1580px); margin-top: 15px; }
  .office { padding: 18px 13px; border-radius: 19px; }
  .section-heading { display: block; }
  .truth-badge { display: inline-block; margin-top: 12px; }
  .chief-card { align-items: flex-end; min-height: 150px; padding-right: 12px; }
  .chief-card img { width: 100px; height: 125px; margin-right: 8px; }
  .chief-copy p { font-size: .7rem; }
  .human-badge { display: none; }
  .directors, .departments { grid-template-columns: 1fr; }
  .game-shell { padding: 12px; margin-top: 18px; }
  .game-heading { align-items: flex-start; }
  .zoom-controls { flex-wrap: wrap; justify-content: flex-end; }
  .game-viewport { height: 430px; }
  .agent-a11y-list { grid-template-columns: 1fr; }
  .command-line { display: none; }
  .directors { margin-top: 18px; }
  .lia-card { width: 100%; }
  .departments { grid-template-columns: 1fr 1fr; margin-top: 18px; }
  .departments article { min-height: 94px; }
  .metrics { grid-template-columns: 1fr 1fr 1fr; }
  .metrics article { padding: 11px; }
  .metrics span { min-height: 38px; }
  .metrics strong { font-size: 1.2rem; }
  body > footer { width: calc(100% - 24px); }
  .form-grid, .detail-grid { grid-template-columns: 1fr; }
}

body.motion-off .game-agent, body.motion-off .sprite { transition: none !important; animation: none !important; }

/* ── Escritório 3D dentro do viewport do mapa ─────────────────────────────── */
/* O canvas ocupa o viewport inteiro. `display:block` é obrigatório: canvas é
   inline por padrão e o baseline gera uma faixa de alguns pixels embaixo. */
.cena3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 18px; }
/* Sem 3D o viewport rola para caber o mapa 2D. Com 3D não há o que rolar — a
   câmera é que se move — e a rolagem só atrapalharia o arrasto do OrbitControls. */
.viewport-3d { overflow: hidden; }
.viewport-3d .floor-grid { display: none; }

/* ── Telefone: 390x844 é o alvo real, não uma média ───────────────────────── */
/*
   O painel foi desenhado em duas colunas para desktop. Em 390px de largura as
   duas colunas viram 195px cada, e aí mapa e filas ficam ilegíveis — foi
   exatamente o que o Codex viu. Abaixo de 760px vira uma coluna só.

   A ordem importa mais que o tamanho: no telefone o Philipi quer saber O QUE
   PRECISA DELE, não olhar o escritório. Então as filas sobem para o topo e o
   mapa desce. O 3D continua lá para quem quiser rolar até ele.
*/
@media (max-width: 760px) {
  .layout { display: flex; flex-direction: column; gap: 14px; width: calc(100% - 20px); }
  /* No telefone os wrappers cedem lugar à ordem operacional: estado,
     aprovações, mapa e só depois a atividade detalhada. */
  .office, .priority-panel, .side-panel { display: contents; }
  .metrics { order: 1; }
  .owner-queues { order: 2; }
  .section-heading { order: 3; }
  .game-shell { order: 4; }
  .timeline-panel { order: 5; }
  .history-panel { order: 6; }
  .queues { order: 7; }
  .command-map { order: 8; }
  .queues { grid-template-columns: 1fr; }
  .queue-tabs { grid-template-columns: 1fr 1fr; }
  .departments { grid-template-columns: 1fr 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .agent-a11y-list { grid-template-columns: 1fr; }
  .game-viewport { height: 62vh; min-height: 300px; }
  /* Alvo de toque: 44px é o mínimo que se acerta com o polegar. */
  /* 44px nos DOIS eixos. Só a altura não resolve: um botão de 34px de largura
     continua difícil de acertar com o polegar, e o de zoom é justamente o que
     mais se usa no telefone. */
  .zoom-controls button, .topbar-button, .queue-tabs button { min-height: 44px; min-width: 44px; }
  /* Manchas decorativas de fundo transbordam a viewport e criam rolagem
     horizontal fantasma no telefone. São enfeite: recortar não custa nada. */
  .ambient { max-width: 100vw; }
  body { overflow-x: hidden; }
  .topbar { flex-wrap: wrap; gap: 8px; }
  .event-item { grid-template-columns: 26px minmax(0, 1fr); }
  .event-item time { grid-column: 2; }
}

/* 390x844 exato: a barra do navegador come altura, então o mapa encolhe mais
   e a lista textual — que é o equivalente acessível — nunca some. */
@media (max-width: 430px) {
  .layout { width: calc(100% - 16px); }
  .office { padding: 14px 10px; }
  .game-shell { padding: 10px; }
  .game-viewport { height: 54vh; min-height: 260px; }
  .departments { grid-template-columns: 1fr; }
  .chief-card img { width: 78px; height: 98px; }
  h1, .office h1 { font-size: 1.18rem; }
}

/* ── O ESCRITÓRIO PASSA A SER O ASSUNTO DA TELA ────────────────────────────
   O Philipi comparou o painel oficial com a prévia e preferiu a prévia. O
   motivo não é paleta nem enfeite: na prévia o escritório ocupa a tela, no
   oficial ele era um cartão de 510px espremido debaixo de um título enorme,
   numa página que rola.

   Isto é CSS puro de propósito. O `app.js` depende de cada id do `index.html`
   — mexer na estrutura para ganhar layout quebraria aprovar, criar missão e
   agir em tarefa. O visual muda, os controles ficam todos. */

.layout { width: min(1780px, calc(100% - 28px)); margin-top: 16px; gap: 18px; }

/* Título de página vira etiqueta. Ele custava ~120px de altura para dizer o
   que a barra superior já diz. */
.section-heading { align-items: center; margin-bottom: 12px; }
.section-heading .eyebrow { font-size: 9px; }
.office h1#office-title { font-size: 1.05rem; margin: 2px 0 0; }
.office { padding: 16px; }
.game-shell { margin-top: 12px; }
.game-heading { margin-bottom: 10px; }

/* O palco. `min-height` garante que continue utilizável em tela baixa, e o
   teto evita que num monitor 4K ele vire um campo de futebol vazio. */
.game-viewport { height: clamp(360px, 66vh, 820px); }

/* Com o palco grande, a ajuda e a lista textual ficam compactas embaixo dele
   em vez de empurrar tudo. A lista continua sendo o equivalente acessível. */
.game-help { margin: 8px 0 0; font-size: 11.5px; }
.agent-a11y-list { margin-top: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }

@media (max-width: 1280px) {
  .agent-a11y-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* No telefone o palco não pode comer a tela: as filas vêm primeiro, e a regra
   de 760px já reordena. Aqui só se garante que ele não estoure. */
@media (max-width: 760px) {
  .game-viewport { height: clamp(260px, 52vh, 460px); }
  .agent-a11y-list { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   APP SHELL — o layout que o Philipi escolheu

   Ele comparou este painel com a prévia e escolheu a prévia. Isto é a
   estrutura dela: tela cheia, sem rolagem de página, escritório no centro
   ocupando o que sobra, barra lateral à esquerda, filas à direita, trilho de
   etapas no rodapé.

   Escopado em `body.app-shell` de propósito: as regras antigas de `.layout`
   continuam no arquivo e não brigam, porque aquele elemento deixou de existir.

   `min-height: 0` em TODA coluna não é detalhe — item de grid não encolhe sem
   isso, e foi exatamente o que já custou 6 FPS e um navegador travado neste
   projeto. Aqui é obrigatório, não opcional.
   ══════════════════════════════════════════════════════════════════════════ */

body.app-shell {
  --navy-deep: #060d18; --navy: #0e1c2e; --navy-2: #14263c; --linha: #1f3a5a;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--navy-deep);
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr) 372px;
  grid-template-rows: 62px minmax(0, 1fr) 76px;
  grid-template-areas:
    "top  top    top"
    "rail palco  central"
    "foot foot   foot";
}

.app-shell > .topbar   { grid-area: top;   background: linear-gradient(180deg, #10233a, #0b1728); border-bottom: 1px solid var(--linha); padding: 0 18px; gap: 16px; }
.app-shell > .rail     { grid-area: rail;  background: #0a1524; border-right: 1px solid var(--linha); }
.app-shell > .palco    { grid-area: palco; background: var(--navy-deep); }
.app-shell > .central  { grid-area: central; background: #0a1524; border-left: 1px solid var(--linha); }
.app-shell > .pipeline { grid-area: foot;  background: #0a1524; border-top: 1px solid var(--linha); }
.app-shell > .rail, .app-shell > .central { overflow: auto; min-height: 0; padding: 14px 12px; }
.app-shell > .palco { min-height: 0; display: flex; flex-direction: column; padding: 12px 14px 8px; }

/* ── barra superior ─────────────────────────────────────────────────────── */
.app-shell .metrics { display: flex; gap: 18px; margin-left: auto; background: none; border: 0; padding: 0; }
.app-shell .metrics article { background: none; border: 0; padding: 0; text-align: right; min-width: 96px; }
.app-shell .metrics span { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #6d87a3; display: block; min-height: 0; }
.app-shell .metrics strong { display: block; font-size: 1.05rem; color: #eef3f8; font-variant-numeric: tabular-nums; }
.app-shell .metrics small { font-size: 9px; color: #4f6580; }
.app-shell .topbar-actions { display: flex; gap: 8px; align-items: center; }

/* ── barra lateral ──────────────────────────────────────────────────────── */
.rail-group { margin-bottom: 18px; }
.rail-title { display: block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #6d87a3; font-weight: 700; margin: 0 4px 8px; }
.app-shell .rail .project-pill { display: block; width: 100%; }
.app-shell .rail .project-pill select { width: 100%; background: var(--navy-2); border: 1px solid var(--linha); color: #eef3f8; border-radius: 8px; padding: 9px 10px; font-size: 13px; }
.app-shell .rail .departments { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; }
.app-shell .rail .departments article { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num nome" "num cont"; gap: 0 9px; padding: 8px 10px; min-height: 0; border: 1px solid var(--linha); border-radius: 8px; background: var(--navy); }
.app-shell .rail .departments span { grid-area: num; align-self: center; font-size: 10px; color: #4f6580; }
.app-shell .rail .departments strong { grid-area: nome; font-size: 12.5px; color: #c8d8ea; }
.app-shell .rail .departments small { grid-area: cont; font-size: 10px; color: #6d87a3; }
.app-shell .rail .chief-card { display: flex; gap: 10px; align-items: center; padding: 10px; min-height: 0; border: 1px solid var(--linha); border-radius: 10px; background: var(--navy); }
.app-shell .rail .chief-card img { width: 42px; height: 54px; object-fit: contain; margin: 0; }
.app-shell .rail .chief-copy h2 { font-size: 14px; margin: 1px 0; }
.app-shell .rail .chief-copy p { font-size: 10.5px; color: #6d87a3; margin: 0; }
.app-shell .rail .directors { grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
.app-shell .rail .director-card, .app-shell .rail .lia-card { padding: 10px; margin-top: 8px; }

/* ── palco ──────────────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.app-shell .game-viewport { flex: 1 1 auto; min-height: 220px; height: auto; border-radius: 14px; border-color: var(--linha); background: var(--navy-deep); }
.app-shell .hud { display: flex; gap: 8px; margin-top: 8px; }
.app-shell .game-help { margin: 6px 0 0; font-size: 11px; color: #6d87a3; }
.app-shell .agent-a11y-list { margin-top: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex: none; max-height: 92px; overflow: auto; }

/* ── coluna das filas ───────────────────────────────────────────────────── */
.app-shell .central .panel { background: var(--navy); border: 1px solid var(--linha); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.app-shell .central .panel-heading h2 { font-size: 14px; }
.app-shell .queue-tabs { grid-template-columns: 1fr 1fr; gap: 6px; }

/* ── trilho de etapas ───────────────────────────────────────────────────── */
.pipeline { display: flex; align-items: center; gap: 0; padding: 0 18px; }
.pipeline .etapa { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 0 6px; }
.pipeline .etapa span { font-size: 10.5px; color: #6d87a3; font-weight: 600; }
.pipeline .barra { height: 4px; border-radius: 3px; background: #16283f; overflow: hidden; }
.pipeline .barra i { display: block; height: 100%; border-radius: 3px; }
/* Larguras por classe, não por `style=""`: atributo de estilo é bloqueado pelo
   CSP do control-plane mesmo com hash. */
.p-fila { width: 20%; background: #6d87a3; }
.p-analise { width: 45%; background: #2d7ff9; }
.p-construindo { width: 78%; background: #2bb3a3; }
.p-revisao { width: 30%; background: #f2a14b; }
.p-testes { width: 15%; background: #8b6fd6; }
.p-concluido { width: 62%; background: #3fbf7f; }
.pipeline-note { font-size: 10.5px; color: #4f6580; margin-left: 14px; white-space: nowrap; }

/* ── telefone: uma coluna, filas primeiro ───────────────────────────────── */
@media (max-width: 900px) {
  body.app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(320px, 58vh) auto auto;
    grid-template-areas: "top" "central" "palco" "rail" "foot";
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }
  .app-shell > .rail, .app-shell > .central { overflow: visible; border: 0; }
  .app-shell > .central { border-bottom: 1px solid var(--linha); }
  .app-shell .metrics { margin-left: 0; width: 100%; justify-content: space-between; }
  .app-shell .topbar { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 10px; }
  .app-shell .agent-a11y-list { grid-template-columns: 1fr; }
  .pipeline { flex-wrap: wrap; gap: 8px; padding: 10px 12px; height: auto; }
  .pipeline .etapa { flex: 1 1 30%; }
}

/* ── Correções medidas na primeira montagem do shell ──────────────────────
   Três coisas quebraram porque regras antigas, escritas para o layout de
   documento, continuam válidas e mais específicas em alguns pontos. */

/* 1. As métricas transbordavam a barra de 62px: `small` empilhava uma terceira
      linha. Vira uma linha só, com o rótulo curto. */
.app-shell .topbar { overflow: hidden; }
.app-shell .metrics article { display: flex; align-items: baseline; gap: 6px; text-align: left; min-width: 0; }
.app-shell .metrics span { font-size: 9px; letter-spacing: .1em; white-space: nowrap; }
.app-shell .metrics strong { font-size: .95rem; }
.app-shell .metrics small { display: none; }

/* 2. `.departments article { min-height: 94px }` vinha do layout antigo e fazia
      cada departamento ocupar quase cem pixels numa coluna de 244px. */
.app-shell .rail .departments article { min-height: 0; padding: 7px 9px; }
.app-shell .rail .departments strong { font-weight: 600; }

/* 3. Rolagem horizontal na lateral: algum filho herdou largura do layout de
      documento. Trava a horizontal e deixa só a vertical, que é a útil. */
.app-shell > .rail { overflow-x: hidden; }
.app-shell .rail > * { max-width: 100%; }
.app-shell .rail .director-card, .app-shell .rail .lia-card, .app-shell .rail .chief-card { width: 100%; margin-left: 0; margin-right: 0; }
.app-shell .rail .agent-runtime { grid-template-columns: 1fr; gap: 2px; padding-top: 8px; }
.app-shell .rail .director-card h3, .app-shell .rail .lia-card h3 { font-size: 13px; margin: 1px 0; }
.app-shell .rail .connector-detail, .app-shell .rail .lia-detail { font-size: 10px; }
.app-shell .rail .agent-activity { font-size: 11px; }
.app-shell .rail .agent-description { font-size: 10px; }

/* A barra media 78px numa linha de 62: o conteúdo definia a altura em vez de
   caber nela. Fixa a altura e alinha, senão ela empurra o palco para baixo. */
.app-shell > .topbar { height: 62px; align-items: center; }
.app-shell .brand strong { font-size: 14px; }
.app-shell .brand span { font-size: 10.5px; }

/* Rolagem horizontal na coluna das filas: as abas em duas colunas não cabiam
   com o padding do painel. */
.app-shell > .central { overflow-x: hidden; }
.app-shell .central > * { max-width: 100%; }
.app-shell .queue-tabs button { min-width: 0; padding: 8px 9px; }
.app-shell .queue-tabs button span { font-size: 10.5px; }
.app-shell .priority-panel { display: contents; }

/* ══════════════════════════════════════════════════════════════════════════
   PALETA DO SHELL — o verde do tema antigo estava vazando

   O Philipi apontou: cores fora de contexto. Ele tinha razão, e a causa é
   estrutural, não pontual. A folha antiga foi escrita para um tema VERDE e
   guarda isso em variáveis (`--mint`, `--panel`, `--line`). O shell é
   AZUL-MARINHO. Como as variáveis continuavam com os valores verdes, cada
   regra herdada pintava verde em cima do marinho — rótulo, borda, pílula,
   anel de foco.

   Remapear as variáveis no escopo do shell conserta tudo de uma vez e mantém
   uma fonte única de verdade. Remendar regra a regra deixaria o próximo
   componente errado de novo.
   ══════════════════════════════════════════════════════════════════════════ */

body.app-shell {
  --bg: #060d18;
  --panel: #0e1c2e;
  --panel-strong: #14263c;
  --line: #1f3a5a;
  --muted: #7d97b5;
  --text: #eef3f8;
  --mint: #2bb3a3;
  --mint-strong: #35d6c1;
  --amber: #f2a14b;
  --danger: #e5645e;
  --blue: #2d7ff9;
}

/* Rótulo de seção não é destaque. `.eyebrow, .role` usavam a cor de acento, e
   por isso "COMANDO GERAL", "ENGENHARIA" e "OPERAÇÕES" saíam em verde forte
   competindo com o conteúdo. Rótulo orienta; ele não grita. */
.app-shell .eyebrow,
.app-shell .role,
.app-shell .rail-title { color: var(--muted); font-weight: 700; letter-spacing: .14em; }

/* O seletor de projeto estava dentro de uma pílula arredondada com fundo e
   borda próprios — um anel verde em volta de um campo quadrado. Na lateral ele
   é um campo de largura cheia, e a pílula não faz sentido nenhum. */
.app-shell .rail .project-pill { border: 0; background: none; padding: 0; border-radius: 0; }
.app-shell .rail .project-pill select { font-weight: 600; color: var(--text); }

/* Avatares de 56px numa coluna de 244px viravam blocos de cor gritando. */
.app-shell .rail .avatar { width: 34px; height: 34px; border-radius: 10px; font-size: .82rem; }

/* Cartões da lateral: fundo e borda do marinho, sem o verde herdado. */
.app-shell .rail .director-card,
.app-shell .rail .lia-card,
.app-shell .rail .chief-card,
.app-shell .rail .departments article { background: var(--panel); border-color: var(--line); }

/* Estado do conector: legível sem virar semáforo. */
.app-shell .status-tag { font-size: 9.5px; padding: 3px 8px; letter-spacing: .08em; }

/* O trilho de etapas e o rodapé herdavam o verde do tema antigo. */
.app-shell .pipeline .etapa span { color: var(--muted); }

/* ─────────────────────────────────────────────────────────────────────────
   O portão — tela de login da Central publicada.

   Some por completo no modo local. Quando aparece, cobre tudo: não existe
   meio-termo entre "entrou" e "não entrou", e deixar o painel meio visível
   atrás só passaria a impressão de que dá para espiar.
   ───────────────────────────────────────────────────────────────────────── */
.portao {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(106, 185, 255, 0.10), transparent 70%),
    var(--bg);
}
.portao[hidden] { display: none; }

.portao-cartao {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 28px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.portao-marca {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--blue), #2f6fae);
  color: #06121f;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
}

.portao-cartao h1 { margin: 0; font-size: 19px; letter-spacing: .01em; }
.portao-sub { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; }

.portao-cartao label {
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.portao-cartao input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-strong);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.portao-cartao input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: transparent;
}

.portao-cartao button {
  margin-top: 14px;
  padding: 11px 14px;
  border: 0;
  border-radius: 9px;
  background: var(--blue);
  color: #06121f;
  font: inherit;
  font-weight: 650;
  font-size: 14px;
  cursor: pointer;
}
.portao-cartao button:hover:not(:disabled) { filter: brightness(1.08); }
.portao-cartao button:disabled { opacity: .55; cursor: progress; }
.portao-cartao button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Reserva a altura da mensagem para o cartão não pular quando o erro aparece. */
.portao-erro {
  min-height: 17px;
  margin: 10px 0 0;
  color: var(--danger);
  font-size: 12.5px;
  line-height: 1.35;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEGUNDO CÉREBRO

   Nenhuma cor nova: só `--panel`, `--panel-strong`, `--line`, `--muted`,
   `--text`, `--blue` e `--mint`, que o shell já define. `--danger` NÃO aparece
   uma vez sequer neste bloco, e isso é regra, não coincidência — vermelho numa
   lista de ideias vira cobrança, e cobrança faz fechar a aba.
   ══════════════════════════════════════════════════════════════════════════ */

/*
   O campo de captura é o único elemento fixo desta coluna.

   `sticky` só funciona porque ele é filho DIRETO de `.central`, que é quem
   rola: dentro do cartão, o alcance da fixação terminaria junto com o cartão.
   As margens negativas cancelam o padding da coluna (14px / 12px) para ele
   encostar nas três bordas — sem elas, o conteúdo rolaria por trás e apareceria
   naquela faixa de 14px. `max-width: none` desfaz o `.app-shell .central > *`
   logo acima, que senão impediria o sangramento lateral.
*/
.app-shell .central > .cerebro-captura {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  gap: 6px;
  max-width: none;
  margin: -14px -12px 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.cerebro-captura > label {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cerebro-campo { display: flex; gap: 6px; }
.cerebro-campo input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: var(--panel-strong);
  font: inherit;
  font-size: 13px;
}
.cerebro-campo input::placeholder { color: var(--muted); opacity: .85; }
.cerebro-campo input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.cerebro-campo button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  color: #06121f;
  background: var(--blue);
  font-weight: 700;
  font-size: 12.5px;
}
.cerebro-campo button:hover:not(:disabled) { filter: brightness(1.08); }
.cerebro-campo button:disabled { opacity: .55; cursor: progress; }
.cerebro-campo button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cerebro-dica { margin: 0; color: var(--muted); font-size: 10px; }
/* Altura reservada para a confirmação não empurrar a lista a cada anotação. */
.cerebro-status { min-height: 14px; margin: 0; color: var(--mint); font-size: 11px; }
/* Aviso é âmbar, nunca vermelho: informa sem repreender. */
.cerebro-status.aviso { color: var(--amber); }

.cerebro-pilhas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.cerebro-pilhas button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--panel-strong);
  text-align: left;
}
.cerebro-pilhas button span { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.cerebro-pilhas button strong {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 22px;
  height: 20px;
  border-radius: 6px;
  color: var(--muted);
  background: rgba(255, 255, 255, .05);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.cerebro-pilhas button[aria-pressed="true"] { color: var(--text); border-color: var(--blue); background: rgba(45, 127, 249, .13); }
.cerebro-pilhas button[aria-pressed="true"] strong { color: var(--text); }
.cerebro-pilhas button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.cerebro-busca { display: grid; gap: 5px; margin-top: 10px; }
.cerebro-busca label {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cerebro-busca input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel-strong);
  font: inherit;
  font-size: 12px;
}
.cerebro-busca input::placeholder { color: var(--muted); opacity: .85; }
.cerebro-busca input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }

.cerebro-lista-cabecalho { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.cerebro-lista-cabecalho strong { font-size: 11.5px; }
.cerebro-lista-cabecalho span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
/* Teto de rolagem igual ao das outras listas da coluna: a coluna inteira já
   rola, e uma lista sem teto empurraria todo o resto do painel para fora. */
.cerebro-lista { display: grid; gap: 7px; max-height: 340px; margin: 8px 0 0; padding: 0; overflow-y: auto; list-style: none; }

.ideia {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: 9px;
  background: var(--panel-strong);
}
/* A faixa da esquerda diz onde a ideia está sem escrever nada.
   ACERVO É AZUL, a cor de referência do painel — não cinza de descartado. */
.ideia[data-state="ativa"] { border-left-color: var(--mint); }
.ideia[data-state="guardada"] { border-left-color: var(--blue); }
.ideia[data-state="concluida"] { border-left-color: var(--line); }
/* Marca discreta e temporária no que acabou de ser anotado: confirma que a
   ideia chegou em algum lugar, que é a única dúvida de quem anota correndo. */
.ideia-nova { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(45, 127, 249, .28); }
.ideia-titulo { font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
/* Duas linhas de nota bastam para lembrar do que se trata. O resto continua
   guardado no log — a lista é para reconhecer, não para ler por inteiro. */
.ideia-nota {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.ideia-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.ideia-etiquetas span { padding: 2px 6px; border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, .05); font-size: 9.5px; }
.ideia-meta { color: var(--muted); font-size: 10px; }
.ideia-meta b { color: var(--blue); font-weight: 600; }
.ideia[data-state="ativa"] .ideia-meta b { color: var(--mint); }
.ideia[data-state="concluida"] .ideia-meta b { color: var(--muted); }
.ideia-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.ideia-acoes button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  font-size: 10.5px;
}
.ideia-acoes button:hover:not(:disabled) { color: var(--text); border-color: var(--blue); }
.ideia-acoes button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ideia-acoes button:disabled { opacity: .5; cursor: progress; }

.cerebro-vazio { margin: 10px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.cerebro-vazio[hidden] { display: none; }

/* No telefone a coluna inteira rola com a página, e não sozinha: `sticky`
   passaria a grudar na viewport e a flutuar por cima do resto. Aqui o campo
   volta a ser um cartão comum — ele já é a primeira coisa da coluna, e a coluna
   é a primeira coisa depois da barra superior. */
@media (max-width: 900px) {
  .app-shell .central > .cerebro-captura {
    position: static;
    margin: 0 0 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  /* 44px é o alvo mínimo do polegar, nos dois eixos. */
  .cerebro-campo button, .ideia-acoes button, .cerebro-pilhas button { min-height: 44px; min-width: 44px; }
}