:root {
  color-scheme: dark;
  --bg: #080c17;
  --bg-elevated: #0d1424;
  --panel: rgba(15, 23, 40, .86);
  --panel-strong: #121c30;
  --line: rgba(157, 184, 224, .14);
  --line-strong: rgba(157, 184, 224, .25);
  --text: #eef4ff;
  --muted: #8f9db7;
  --muted-2: #5e6a84;
  --cyan: #65d6c5;
  --cyan-soft: rgba(101, 214, 197, .14);
  --yellow: #f0b35a;
  --danger: #ff7d7d;
  --shadow: 0 24px 60px rgba(0, 0, 0, .28);
  --radius-lg: 22px;
  --radius-md: 14px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -10%, rgba(101, 214, 197, .10), transparent 33rem),
    radial-gradient(circle at 95% 8%, rgba(138, 168, 255, .08), transparent 28rem),
    var(--bg);
  font-family: var(--font);
  letter-spacing: -.01em;
}

button, select { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.app-shell { width: min(1680px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 22px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 26px; }
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  color: #091018; background: linear-gradient(135deg, var(--cyan), #a3f0df 58%, var(--yellow));
  font-size: 13px; font-weight: 900; letter-spacing: .08em; box-shadow: 0 8px 24px rgba(101, 214, 197, .18);
}
.eyebrow { margin: 0 0 6px; color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 760; letter-spacing: -.045em; }
h1 span { color: var(--muted); font-weight: 470; }
h2 { margin-bottom: 7px; font-size: 19px; font-weight: 720; letter-spacing: -.03em; }
h3 { margin-bottom: 0; font-size: 14px; font-weight: 680; }
.muted { color: var(--muted); font-size: 12px; line-height: 1.55; }

.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.connection-status, .world-mode, .live-badge, .event-count, .count-badge {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
}
.status-dot, .mode-pulse, .build-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(240,179,90,.11); }
.connection-status[data-state="connected"] .status-dot { background: var(--cyan); box-shadow: 0 0 0 4px rgba(101,214,197,.11); }
.connection-status[data-state="error"] .status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,125,125,.11); }

.button, .icon-button, select {
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: .2s ease;
}
.button { padding: 10px 14px; font-size: 11px; font-weight: 760; }
.button:hover, .icon-button:hover, select:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.button-ghost { color: var(--muted); background: rgba(255,255,255,.025); }
.button-primary { color: #081018; border-color: transparent; background: linear-gradient(135deg, var(--cyan), #9ce4d4); box-shadow: 0 8px 20px rgba(101,214,197,.15); }
.icon-button { width: 31px; height: 31px; color: var(--muted); background: rgba(255,255,255,.03); }
select { padding: 7px 10px; color: var(--muted); background: #111b2e; font-size: 11px; font-weight: 700; }

.main-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .65fr); gap: 18px; align-items: stretch; }
.panel-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(17, 27, 47, .93), rgba(9, 14, 26, .93)); box-shadow: var(--shadow); }
.world-card { min-width: 0; padding: 22px; }
.inspector-card { min-width: 0; padding: 22px; overflow: hidden; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.section-heading.compact { align-items: center; }
.heading-tools { display: flex; align-items: center; gap: 7px; }
.subheading { margin-top: 18px; }

.world-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 21px 0 13px; }
.legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted-2); font-size: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; }
.dot-working { background: var(--cyan); }
.dot-walking { background: #8aa8ff; }
.dot-approval { background: var(--yellow); }
.dot-blocked { background: var(--danger); }
.mode-pulse { width: 6px; height: 6px; background: var(--cyan); box-shadow: 0 0 0 4px rgba(101,214,197,.10); }

.office-map {
  position: relative; min-height: 630px; overflow: hidden; border: 1px solid rgba(157,184,224,.15); border-radius: 18px;
  background: linear-gradient(145deg, #101b2f, #0a1220 72%); isolation: isolate;
}
.map-noise { position: absolute; inset: 0; z-index: -2; opacity: .32; background-image: radial-gradient(rgba(255,255,255,.10) .7px, transparent .7px); background-size: 15px 15px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.map-grid-lines { position: absolute; inset: 0; z-index: -1; opacity: .33; background-image: linear-gradient(rgba(132,158,199,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(132,158,199,.08) 1px, transparent 1px); background-size: 52px 52px; }
.map-route { position: absolute; z-index: 0; border: 1px dashed rgba(101,214,197,.16); border-radius: 50%; pointer-events: none; }
.route-a { width: 70%; height: 62%; top: 20%; left: 15%; transform: rotate(-8deg); }
.route-b { width: 35%; height: 58%; top: 20%; left: 33%; transform: rotate(29deg); border-color: rgba(240,179,90,.14); }
.room-layer, .agent-layer { position: absolute; inset: 0; }
.room { position: absolute; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; width: 24%; min-width: 112px; height: 17%; min-height: 88px; padding: 12px; transform: translate(-50%, -50%); border: 1px solid rgba(157,184,224,.13); border-radius: 15px; background: linear-gradient(145deg, rgba(23, 37, 62, .88), rgba(12, 21, 37, .82)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.room.small { width: 19%; height: 13%; min-height: 72px; }
.room::before { content: ""; position: absolute; top: 0; left: 13px; right: 13px; height: 2px; border-radius: 99px; background: var(--room-accent); opacity: .8; }
.room-label { max-width: 90%; color: #dce8fa; font-size: 10px; font-weight: 750; line-height: 1.25; }
.room-id { color: var(--muted-2); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.room-occupancy { display: flex; align-items: center; justify-content: space-between; margin-top: auto; color: var(--muted-2); font-size: 9px; }
.occupancy-dot { width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--room-accent); box-shadow: 0 0 9px var(--room-accent); }

.agent-token { position: absolute; z-index: 7; display: flex; align-items: center; gap: 7px; padding: 4px 8px 4px 4px; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: var(--text); background: rgba(7, 12, 23, .93); box-shadow: 0 8px 18px rgba(0,0,0,.3); cursor: pointer; transition: left 900ms cubic-bezier(.2,.8,.2,1), top 900ms cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s, opacity .2s; }
.agent-token:hover, .agent-token.active { border-color: var(--agent-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent-color) 22%, transparent), 0 12px 24px rgba(0,0,0,.32); }
.agent-token[data-status="blocked"] { border-color: rgba(255,125,125,.65); }
.agent-token[data-status="waiting_approval"] { border-color: rgba(240,179,90,.75); }
.agent-token[data-status="offline"] { opacity: .5; filter: grayscale(.5); }
.agent-avatar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #07101b; background: var(--agent-color); font-size: 8px; font-weight: 950; letter-spacing: .05em; }
.agent-copy { display: grid; gap: 1px; text-align: left; }
.agent-name { color: #e6efff; font-size: 10px; font-weight: 800; }
.agent-status { max-width: 92px; overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.agent-token[data-status="walking"] .agent-avatar { animation: avatar-bob .55s ease-in-out infinite alternate; }
.agent-token[data-status="working"] .agent-avatar { box-shadow: 0 0 0 4px rgba(101,214,197,.12); }
.agent-token[data-status="blocked"] .agent-avatar { animation: alert-pulse 1s ease-in-out infinite; }
.agent-token[data-status="waiting_approval"] .agent-avatar { box-shadow: 0 0 0 4px rgba(240,179,90,.13); }
@keyframes avatar-bob { from { transform: translateY(1px); } to { transform: translateY(-2px); } }
@keyframes alert-pulse { 50% { box-shadow: 0 0 0 6px rgba(255,125,125,.15); } }
.map-caption { position: absolute; right: 15px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 6px; color: rgba(143,157,183,.52); font-size: 9px; letter-spacing: .04em; }
.caption-line { width: 21px; height: 1px; background: rgba(101,214,197,.45); }

.live-badge { padding: 5px 7px; border: 1px solid rgba(101,214,197,.25); border-radius: 7px; color: var(--cyan); background: var(--cyan-soft); font-size: 9px; }
.count-badge { justify-content: center; min-width: 25px; height: 22px; border-radius: 8px; color: var(--cyan); background: var(--cyan-soft); }
.agent-inspector { min-height: 196px; padding: 17px 0 4px; }
.inspector-hero { display: flex; align-items: center; gap: 12px; }
.inspector-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; color: #07101b; background: var(--agent-color); font-size: 14px; font-weight: 950; box-shadow: 0 12px 26px color-mix(in srgb, var(--agent-color) 22%, transparent); }
.inspector-name { margin-bottom: 4px; font-size: 18px; font-weight: 760; letter-spacing: -.04em; }
.inspector-role { color: var(--muted); font-size: 11px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; padding: 6px 9px; border-radius: 8px; color: var(--cyan); background: var(--cyan-soft); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.status-pill[data-status="blocked"] { color: var(--danger); background: rgba(255,125,125,.12); }
.status-pill[data-status="waiting_approval"] { color: var(--yellow); background: rgba(240,179,90,.12); }
.status-pill[data-status="walking"] { color: #9db6ff; background: rgba(138,168,255,.12); }
.inspector-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.meta-box { padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.meta-label { display: block; margin-bottom: 4px; color: var(--muted-2); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.meta-value { display: block; overflow: hidden; color: #dce8fa; font-size: 11px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.inspector-summary { margin: 13px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.task-subheading { margin-top: 17px; }
.task-inspector { min-height: 150px; padding: 10px 0 6px; }
.task-empty, .task-muted { color: var(--muted-2); font-size: 10px; line-height: 1.45; }
.task-inspector-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-id { overflow: hidden; color: #dce8fa; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.task-state { flex: 0 0 auto; padding: 5px 7px; border-radius: 7px; color: var(--cyan); background: var(--cyan-soft); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.task-state[data-state="blocked"] { color: var(--danger); background: rgba(255,125,125,.12); }
.task-state[data-state="approval_pending"] { color: var(--yellow); background: rgba(240,179,90,.12); }
.task-state[data-state="completed"] { color: var(--muted); background: rgba(143,157,183,.12); }
.task-summary { margin: 9px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.task-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.task-facts span { min-width: 0; overflow: hidden; color: #cbd8ec; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.task-facts b { display: block; margin-bottom: 3px; color: var(--muted-2); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.task-alert { display: flex; gap: 6px; margin-top: 8px; padding: 7px 8px; border-radius: 8px; font-size: 9px; line-height: 1.35; }
.task-alert b { flex: 0 0 auto; text-transform: uppercase; }
.task-alert-danger { color: var(--danger); background: rgba(255,125,125,.09); }
.task-alert-warning { color: var(--yellow); background: rgba(240,179,90,.09); }
.task-inspector-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 9px; color: var(--muted-2); font-size: 8px; }
.task-artifact { color: var(--cyan); font-weight: 760; text-decoration: none; }
.task-artifact-path { max-width: 160px; overflow: hidden; color: var(--muted); font-family: ui-monospace, monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.task-artifact:hover { text-decoration: underline; }
.task-queue { display: grid; gap: 5px; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line); }
.task-queue-heading { display: flex; justify-content: space-between; gap: 6px; color: var(--muted-2); font-size: 8px; text-transform: uppercase; }
.task-queue-heading span { text-transform: none; }
.task-queue-item { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 6px; width: 100%; padding: 5px 6px; border: 1px solid transparent; border-radius: 7px; color: #cbd8ec; background: rgba(255,255,255,.02); cursor: pointer; font-size: 8px; text-align: left; }
.task-queue-item:hover, .task-queue-item.active { border-color: var(--line); background: rgba(255,255,255,.05); }
.task-queue-item small { color: var(--muted-2); font-size: 8px; }
.task-queue-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.task-queue-dot[data-state="blocked"] { background: var(--danger); }
.task-queue-dot[data-state="approval_pending"] { background: var(--yellow); }
.approval-subheading { margin-top: 15px; }
.approval-station { min-height: 74px; padding: 9px 0 5px; }
.approval-empty { display: flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: 9px; }
.approval-empty-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); }
.approval-card { padding: 9px; border: 1px solid rgba(240,179,90,.3); border-radius: 10px; background: rgba(240,179,90,.07); }
.approval-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.approval-request-id { color: var(--yellow); font-family: ui-monospace, monospace; font-size: 8px; }
.approval-surface { color: var(--muted-2); font-size: 8px; text-transform: uppercase; }
.approval-card strong { display: block; color: #dce8fa; font-size: 10px; line-height: 1.35; }
.approval-card p { max-height: 36px; margin: 5px 0; overflow: hidden; color: var(--muted); font-family: ui-monospace, monospace; font-size: 8px; line-height: 1.35; }
.approval-meta { display: flex; justify-content: space-between; gap: 6px; color: var(--muted-2); font-size: 8px; }
.approval-actions { display: flex; gap: 6px; margin-top: 9px; }
.approval-button { flex: 1; padding: 7px 6px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 8px; font-weight: 800; }
.approval-approve { border-color: rgba(101,214,197,.4); color: #07101b; background: var(--cyan); }
.approval-deny { border-color: rgba(255,125,125,.35); color: var(--danger); background: rgba(255,125,125,.1); }
.approval-button:disabled { cursor: not-allowed; opacity: .45; }
.inspector-divider { height: 1px; margin: 5px 0 17px; background: var(--line); }
.roster-list { display: grid; gap: 5px; max-height: 296px; margin-top: 12px; overflow: auto; padding-right: 3px; }
.roster-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: 1px solid transparent; border-radius: 11px; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.roster-item:hover, .roster-item.active { border-color: var(--line); background: rgba(255,255,255,.035); }
.roster-avatar { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 9px; color: #07101b; background: var(--agent-color); font-size: 8px; font-weight: 950; }
.roster-copy { min-width: 0; display: grid; gap: 2px; }
.roster-name { color: #dce8fa; font-size: 10px; font-weight: 760; }
.roster-room { overflow: hidden; color: var(--muted-2); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.roster-state { width: 6px; height: 6px; margin-left: auto; flex: 0 0 auto; border-radius: 50%; background: var(--cyan); }
.roster-state[data-status="blocked"] { background: var(--danger); }
.roster-state[data-status="waiting_approval"] { background: var(--yellow); }

.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.metric-card { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(15,23,40,.69); }
.metric-highlight { border-color: rgba(101,214,197,.23); background: linear-gradient(120deg, rgba(101,214,197,.10), rgba(15,23,40,.72)); }
.metric-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; color: var(--cyan); background: var(--cyan-soft); font-size: 20px; }
.metric-icon.warning { color: var(--yellow); background: rgba(240,179,90,.12); }
.metric-icon.danger { color: var(--danger); background: rgba(255,125,125,.12); }
.metric-label { display: block; margin-bottom: 3px; color: var(--muted-2); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.metric-card strong { display: block; font-size: 20px; letter-spacing: -.04em; }
.metric-trend { margin-left: auto; color: var(--cyan); font-size: 9px; font-weight: 760; }
.metric-trend.neutral { color: var(--muted); }
.warning-text { color: var(--yellow); }
.danger-text { color: var(--danger); }

.services-card { margin-top: 18px; padding: 20px 22px; }
.read-only-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(101,214,197,.2); border-radius: 8px; color: var(--cyan); background: var(--cyan-soft); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.service-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.service-item { min-width: 0; min-height: 168px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
.service-portal { grid-column: span 4; border-color: rgba(101,214,197,.2); background: linear-gradient(145deg, rgba(101,214,197,.08), rgba(255,255,255,.02)); }
.service-pipeline { grid-column: span 4; border-color: rgba(255,141,180,.2); background: linear-gradient(145deg, rgba(255,141,180,.07), rgba(255,255,255,.02)); }
.service-routine { grid-column: span 4; }
.service-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.service-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.service-title h3 { overflow: hidden; color: #dce8fa; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.service-kicker { display: block; margin-bottom: 3px; color: var(--muted-2); font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.service-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 9px; color: var(--cyan); background: var(--cyan-soft); font-size: 15px; }
.service-pipeline .service-icon { color: #ff8db4; background: rgba(255,141,180,.12); }
.service-status { flex: 0 0 auto; padding: 5px 7px; border-radius: 7px; color: var(--cyan); background: var(--cyan-soft); font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.service-status[data-status="protected"] { color: var(--yellow); background: rgba(240,179,90,.12); }
.service-status[data-status="error"] { color: var(--danger); background: rgba(255,125,125,.12); }
.service-status[data-status="unavailable"], .service-status[data-status="disabled"] { color: var(--muted); background: rgba(143,157,183,.12); }
.service-summary { min-height: 38px; margin: 14px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.service-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; color: var(--muted-2); font-size: 9px; }
.service-footer a { color: var(--cyan); font-weight: 760; text-decoration: none; }
.service-footer a:hover { text-decoration: underline; }
.service-cron { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-flow { display: flex; align-items: center; gap: 4px; min-height: 43px; overflow: auto; padding-bottom: 2px; }
.stage-chip { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 5px 6px; border: 1px solid rgba(255,141,180,.18); border-radius: 7px; color: #e6efff; background: rgba(255,141,180,.08); font-size: 8px; font-weight: 700; }
.stage-chip b { color: #ff8db4; font-size: 7px; }
.stage-arrow { flex: 0 0 auto; color: var(--muted-2); font-size: 10px; }
.service-facts { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; margin: 11px 0 13px; }
.service-facts span { min-width: 0; overflow: hidden; color: #cbd8ec; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.service-facts b { display: block; margin-bottom: 4px; color: var(--muted-2); font-size: 8px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.service-empty { grid-column: 1 / -1; padding: 25px 0; color: var(--muted-2); font-size: 11px; text-align: center; }

.service-kanban { grid-column: span 4; border-color: rgba(138,168,255,.2); background: linear-gradient(145deg, rgba(138,168,255,.07), rgba(255,255,255,.02)); }
.kanban-task-list { display: grid; gap: 6px; max-height: 82px; overflow: auto; margin: 10px 0 12px; }
.kanban-task { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 6px; border: 1px solid rgba(157,184,224,.1); border-radius: 7px; background: rgba(255,255,255,.025); }
.kanban-task-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--cyan); }
.kanban-task-dot[data-status="blocked"] { background: var(--danger); }
.kanban-task-dot[data-status="review"] { background: var(--yellow); }
.kanban-task-dot[data-status="done"] { background: var(--muted-2); }
.kanban-task-copy { min-width: 0; display: grid; gap: 2px; }
.kanban-task-copy b { overflow: hidden; color: #dce8fa; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-task-copy small { color: var(--muted-2); font-size: 8px; }
.kanban-task-id { margin-left: auto; color: var(--muted-2); font-size: 8px; }
.kanban-empty { padding: 12px 0; color: var(--muted-2); font-size: 10px; }

.bottom-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 18px; margin-top: 18px; }
.timeline-card, .principles-card { min-width: 0; padding: 20px 22px; }
.timeline-heading { align-items: flex-start; }
.timeline-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.timeline-filter { width: 76px; min-height: 27px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #111b2e; font-size: 9px; }
.timeline-filter:focus { border-color: var(--cyan); outline: none; }
.timeline-filter.task-filter { width: 92px; }
.timeline-filter::placeholder { color: var(--muted-2); }
.timeline-list { display: grid; gap: 0; max-height: 300px; margin-top: 15px; overflow: auto; padding-right: 7px; }
.timeline-empty { padding: 28px 0; color: var(--muted-2); font-size: 11px; text-align: center; }
.timeline-item { position: relative; display: grid; grid-template-columns: 17px 1fr auto; gap: 9px; width: 100%; padding: 0 0 14px; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.timeline-item:hover .timeline-summary { color: #dce8fa; }
.timeline-item::before { content: ""; position: absolute; top: 14px; bottom: 0; left: 5px; width: 1px; background: var(--line); }
.timeline-item:last-child::before { display: none; }
.timeline-marker { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 2px; border: 3px solid #112038; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 1px rgba(101,214,197,.4); }
.timeline-marker[data-status="blocked"] { background: var(--danger); box-shadow: 0 0 0 1px rgba(255,125,125,.4); }
.timeline-marker[data-status="waiting_approval"] { background: var(--yellow); box-shadow: 0 0 0 1px rgba(240,179,90,.4); }
.timeline-agent { display: block; margin-bottom: 2px; color: #dce8fa; font-size: 10px; font-weight: 800; }
.timeline-summary { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
.timeline-time { color: var(--muted-2); font-size: 9px; white-space: nowrap; }
.event-count { color: var(--muted-2); font-size: 9px; text-transform: none; letter-spacing: 0; }
.principles-card { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(24, 37, 60, .85), rgba(12, 18, 32, .9)); }
.principles-card::after { content: ""; position: absolute; right: -25px; bottom: -55px; width: 170px; height: 170px; border: 1px solid rgba(101,214,197,.14); border-radius: 50%; box-shadow: 0 0 0 22px rgba(101,214,197,.025), 0 0 0 44px rgba(101,214,197,.02); }
.principles-card h2 { max-width: 270px; margin-top: 20px; font-size: 24px; letter-spacing: -.05em; }
.principles-card > .muted { max-width: 410px; }
.principle-list { display: grid; gap: 9px; margin-top: 22px; }
.principle-list div { display: flex; align-items: center; gap: 9px; color: #dce8fa; font-size: 11px; }
.principle-list span { color: var(--cyan); font-size: 9px; font-weight: 800; }
.principle-list strong { font-weight: 650; }
.build-note { display: flex; align-items: center; gap: 7px; margin-top: 27px; color: var(--muted-2); font-size: 9px; }
.build-dot { width: 5px; height: 5px; background: var(--cyan); box-shadow: none; }
.app-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--muted-2); font-size: 9px; letter-spacing: .03em; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: min(380px, calc(100% - 44px)); padding: 12px 14px; border: 1px solid rgba(101,214,197,.22); border-radius: 12px; color: #dce8fa; background: #111d31; box-shadow: var(--shadow); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .25s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.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; }

@media (max-width: 1180px) {
  .main-grid, .bottom-grid { grid-template-columns: 1fr; }
  .service-portal, .service-pipeline, .service-routine, .service-kanban { grid-column: span 6; }
  .inspector-card { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr); column-gap: 20px; }
  .inspector-card > .section-heading:first-child, .inspector-card > .inspector-divider { grid-column: 1 / -1; }
  .inspector-card > .subheading { margin-top: 0; }
  .roster-list { max-height: 230px; }
}
@media (max-width: 760px) {
  .app-shell { width: min(100% - 24px, 680px); padding-top: 16px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar-actions { width: 100%; justify-content: flex-start; }
  .world-card, .inspector-card, .timeline-card, .principles-card, .services-card { padding: 16px; border-radius: 17px; }
  .service-portal, .service-pipeline, .service-routine, .service-kanban { grid-column: span 12; }
  .office-map { min-height: 540px; }
  .room { min-width: 90px; height: 15%; padding: 8px; }
  .room.small { min-width: 82px; }
  .room-label { font-size: 8px; }
  .room-id, .room-occupancy { font-size: 8px; }
  .agent-token { padding-right: 5px; }
  .agent-copy { display: none; }
  .agent-avatar { width: 29px; height: 29px; }
  .world-toolbar { align-items: flex-start; flex-direction: column; }
  .timeline-heading { display: block; }
  .timeline-actions { justify-content: flex-start; margin-top: 10px; }
  .timeline-filter { flex: 1 1 82px; }
  .timeline-filter.task-filter { flex-basis: 105px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-card { padding: 11px; }
  .metric-card strong { font-size: 17px; }
  .inspector-card { display: block; }
  .inspector-card > .subheading { margin-top: 18px; }
}
@media (max-width: 430px) {
  .metrics-grid { gap: 7px; }
  .metric-card { gap: 7px; }
  .metric-icon { width: 27px; height: 27px; font-size: 16px; }
  .metric-label { font-size: 8px; }
  .metric-trend { display: none; }
  .app-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Painel de decisões: tokens Meta do DESIGN.md, sem alterar o mundo legado. */
.business-decisions-panel {
  --decision-canvas: #ffffff;
  --decision-soft: #f1f4f7;
  --decision-ink: #1c1e21;
  --decision-charcoal: #444950;
  --decision-border: #dee3e9;
  --decision-primary: #0064e0;
  margin-bottom: 24px; padding: 32px; border: 1px solid var(--decision-border);
  border-radius: 32px; background: var(--decision-canvas); color: var(--decision-ink);
  font-family: "Optimistic VF", var(--font); line-height: 1.5;
}
.decision-panel-heading, .decision-card-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.decision-kicker { color: var(--decision-charcoal); font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.business-decisions-panel h2 { color: var(--decision-ink); font-size: 28px; font-weight: 300; line-height: 1.21; }
.decision-total { min-width: 44px; padding: 8px 16px; border-radius: 100px; text-align: center; background: var(--decision-ink); color: var(--decision-canvas); font-size: 18px; font-weight: 700; }
.decision-source { color: var(--decision-charcoal); font-size: 14px; margin: 8px 0 24px; }
.business-decisions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.decision-card { border: 1px solid var(--decision-border); border-radius: 24px; padding: 24px; overflow-wrap: anywhere; }
.decision-card h3 { color: var(--decision-ink); font-size: 24px; font-weight: 500; line-height: 1.25; margin: 16px 0; }
.decision-card p { font-size: 16px; }
.decision-card code { color: var(--decision-charcoal); font-size: 12px; }
.decision-stage { border-radius: 100px; padding: 8px 16px; color: var(--decision-ink); background: var(--decision-soft); font-size: 12px; font-weight: 700; }
.decision-stage[data-ready="true"] { background: var(--decision-primary); color: var(--decision-canvas); }
.decision-facts { display: flex; flex-wrap: wrap; gap: 24px; padding: 16px 0; font-size: 14px; }
.decision-facts span { display: grid; gap: 4px; }
.decision-facts b { font-size: 12px; color: var(--decision-charcoal); }
.decision-card .decision-waiting, .decision-empty { color: var(--decision-charcoal); font-size: 14px; }
.decision-actions { padding: 8px 0 16px; }
.decision-review { display: inline-block; padding: 14px 30px; border-radius: 100px; background: #000000; color: #ffffff; font-size: 14px; font-weight: 700; text-decoration: none; }
.decision-review:hover { background: var(--decision-charcoal); }
.decision-review:focus-visible { outline: 3px solid var(--decision-primary); outline-offset: 4px; }
.decision-card .decision-safety { margin-bottom: 0; color: var(--decision-charcoal); font-size: 12px; line-height: 1.5; }
.decision-source-warning { color: var(--decision-ink); background: #ffe200; padding: 16px; border-radius: 16px; }
@media (max-width: 760px) {
  .business-decisions-panel { padding: 24px; border-radius: 24px; }
  .decision-card { padding: 16px; }
}