:root {
  --font-ui: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
  --bg: #020914;
  --bg-soft: #061322;
  --panel: #081625;
  --panel-raised: #0b1b2d;
  --panel-muted: #07121f;
  --line: #17314a;
  --line-bright: #24506b;
  --text: #f1f7ff;
  --muted: #8397ad;
  --muted-strong: #a8bbce;
  --accent: #26e4d3;
  --accent-blue: #4c9dff;
  --accent-soft: #113e4a;
  --danger: #ff526d;
  --amber: #f5c866;
  --shadow: 0 22px 70px rgba(0, 7, 19, .34);
  --radius-sm: 7px;
  --radius-md: 9px;
  --radius-lg: 11px;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font-ui);
  letter-spacing: .005em;
  color-scheme: dark;
}

button, input, select, textarea { font: inherit; }
button { transition: border-color .18s ease, background .18s ease, transform .18s ease, opacity .18s ease; }
button:not(:disabled):hover { transform: translateY(-1px); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.shell {
  display: flex;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at 78% -20%, rgba(21, 69, 113, .25), transparent 38%), var(--bg);
}

.sidebar {
  width: 310px;
  flex: 0 0 310px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: 28px 20px 22px;
  border-right: 0;
  background: rgba(3, 12, 24, .9);
  transition: width .22s ease, flex-basis .22s ease, padding .22s ease;
}

.brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 0 0 52px;
}

.brand-lockup { position: relative; display: block; flex: 1 1 auto; width: auto; max-width: calc(100% - 44px); min-width: 0; height: auto; margin: 0; object-fit: contain; object-position: left center; }
.sheet-control { display: grid; place-items: center; padding: 0; overflow: hidden; border: 1px solid #1d6b86; background: #071728; line-height: 0; box-shadow: 0 0 18px rgba(38, 228, 211, .08); }
.sidebar-toggle { position: relative; flex: 0 0 32px; width: 32px; height: 32px; margin-left: auto; border-radius: 8px; cursor: pointer; }
.sidebar-toggle img { position: absolute; top: 50%; left: 50%; display: block; width: 30px; height: 30px; margin: 0; padding: 0; object-fit: contain; object-position: center; transform: translate(-50%, -50%); }
.sidebar-toggle:hover, .sheet-control:hover { border-color: var(--accent); filter: brightness(1.18); }
.shell.sidebar-collapsed .sidebar { width: 84px; flex-basis: 84px; padding-inline: 13px; }
.shell.sidebar-collapsed .brand { display: grid; width: 100%; grid-template-columns: 32px; justify-content: center; align-items: center; padding-bottom: 52px; }
.shell.sidebar-collapsed .brand-lockup, .shell.sidebar-collapsed .side-label, .shell.sidebar-collapsed .nav-label, .shell.sidebar-collapsed .system-card-copy, .shell.sidebar-collapsed .version { display: none; }
.shell.sidebar-collapsed .sidebar-toggle { align-self: center; margin: 0; transform: none; }
.shell.sidebar-collapsed .sidebar-toggle img { transform: translate(-50%, -50%); }
.shell.sidebar-collapsed .nav-item { justify-content: center; padding-inline: 0; }
.shell.sidebar-collapsed .nav-item img { width: 28px; height: 28px; }
.shell.sidebar-collapsed .system-card { justify-content: center; padding: 9px; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #287a9a;
  border-radius: 10px;
  color: var(--accent);
  background: #0a2b45;
  box-shadow: 0 0 22px rgba(38, 228, 211, .16);
}

.accent { color: var(--accent); }
.side-label, .eyebrow, .block-label, .metric-label {
  color: #6fa0b6;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
}

.side-label { padding: 0 14px 14px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0;
  padding: 14px 15px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
}

.nav-item img { width: 24px; height: 24px; object-fit: contain; opacity: .72; }
.nav-item.active, .nav-item:hover {
  border-color: #1d3d57;
  color: var(--text);
  background: #0b1b2d;
  box-shadow: inset 3px 0 0 var(--accent), 0 12px 30px rgba(0, 0, 0, .16);
}
.nav-item.active img { opacity: 1; }
.side-spacer { flex: 1; }

.system-card {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 23px;
  padding: 14px;
  border: 1px solid #1b3b57;
  border-radius: 10px;
  background: #071728;
}
.system-card[role="button"] { cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.system-card[role="button"]:hover, .system-card[role="button"]:focus-visible { border-color: #1ccfd0; background: #0a1c2d; outline: none; transform: translateY(-1px); }

.system-card strong, .system-card small { display: block; }
.system-card img { width: 42px; height: 42px; object-fit: contain; }
.system-card strong { font-size: 14px; }
.system-card small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.pulse, .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(38, 228, 211, .12); }
.version { padding: 0 14px; color: #607a92; font-size: 10px; letter-spacing: .09em; }

.main { display: flex; flex-direction: column; width: 100%; max-width: 1500px; height: 100%; min-height: 0; margin: 0 auto; padding: 42px 54px 28px; overflow: hidden; }
.topbar { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; margin-bottom: 31px; }
.topbar h1 { margin: 6px 0 0; font-size: 31px; font-weight: 750; letter-spacing: -.045em; }
.top-actions { display: flex; align-items: center; gap: 16px; }
.mode-pill { display: flex; align-items: center; gap: 11px; padding: 10px 17px; border: 1px solid #167d78; border-radius: 22px; color: #80f5e7; background: #08272d; box-shadow: 0 0 22px rgba(38, 228, 211, .08); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.mode-pill .dot { width: 7px; height: 7px; box-shadow: none; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #1d6b86; border-radius: 9px; color: #9eb5c9; background: #071728; font-size: 17px; }
.icon-button img { width: 28px; height: 28px; object-fit: contain; transform: none; }
.icon-button:hover { border-color: var(--accent); color: var(--text); filter: brightness(1.18); }

.metrics { display: grid; flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 17px; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); }
.metric-card { display: flex; align-items: flex-start; gap: 23px; min-height: 134px; padding: 22px 23px; }
.metric-icon { display: block; flex: 0 0 68px; width: 68px; height: 68px; padding: 14px; border-radius: 14px; object-fit: contain; }
.metric-card strong { display: block; margin: 4px 0 4px; font-size: 27px; font-weight: 750; letter-spacing: -.04em; }
.metric-foot { color: var(--muted); font-size: 12px; }
.good { color: var(--accent); }

.workspace { display: grid; flex: 1 1 auto; grid-template-columns: 386px minmax(0, 1fr); gap: 16px; min-height: 0; align-items: stretch; overflow: hidden; }
.panel { padding: 23px; }
.create-panel { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.panel h2 { margin: 5px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.panel-icon { width: 36px; height: 36px; object-fit: contain; }
.muted { color: var(--muted); }
.create-panel > .muted { margin: 13px 0 28px; font-size: 12px; line-height: 1.65; }
label { display: block; margin-top: 16px; color: var(--muted-strong); font-size: 11px; }
.field-label { display: inline-flex; align-items: center; gap: 7px; }
.field-label img { width: 20px; height: 20px; object-fit: contain; filter: brightness(1.25) saturate(1.12); }
.control-with-icon { position: relative; display: block; }
.control-with-icon > img { position: absolute; z-index: 1; left: 11px; top: 50%; width: 22px; height: 22px; object-fit: contain; filter: brightness(1.25) saturate(1.12); transform: translateY(-44%); pointer-events: none; }
.control-with-icon input, .control-with-icon select { padding-left: 39px; }
input, select, textarea { display: block; width: 100%; margin-top: 8px; padding: 12px 13px; border: 1px solid #1d3b55; border-radius: var(--radius-sm); outline: none; color: var(--text); background: #061322; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(76, 157, 255, .14); }
textarea { min-height: 94px; resize: vertical; }
.form-actions { display: grid; gap: 10px; margin-top: 21px; }
.primary, .secondary, .approve, .danger, .execute, .verify { border-radius: 7px; padding: 12px 14px; font-weight: 750; cursor: pointer; }
.primary { display: flex; justify-content: space-between; border: 1px solid #24bfc8; color: #001a20; background: linear-gradient(100deg, #25d7c6, #3288ed); box-shadow: 0 8px 25px rgba(38, 228, 211, .13); }
.secondary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #31516b; color: #b2c5d8; background: transparent; }
.secondary img { width: 23px; height: 23px; object-fit: contain; }
.secondary:hover { border-color: #4c718f; background: #102338; }
.alert { margin-top: 14px; padding: 10px; border-radius: 7px; font-size: 12px; }
.error { border: 1px solid #793047; color: #ffabb8; background: #351322; }
.hidden { display: none !important; }

.settings-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0, 5, 14, .72); backdrop-filter: blur(8px); }
.settings-modal { width: min(720px, 100%); max-height: min(680px, calc(100dvh - 48px)); overflow-y: auto; padding: 24px; border: 1px solid #24506b; border-radius: 13px; background: #071523; box-shadow: 0 28px 90px rgba(0, 0, 0, .55); }
.control-backdrop { position: fixed; z-index: 19; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0, 5, 14, .72); backdrop-filter: blur(8px); }
.control-modal { width: min(700px, 100%); max-height: min(680px, calc(100dvh - 48px)); overflow-y: auto; padding: 24px; border: 1px solid #24506b; border-radius: 13px; background: #071523; box-shadow: 0 28px 90px rgba(0, 0, 0, .55); }
.control-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.control-modal h2 { margin: 4px 0 0; font-size: 24px; }
.control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.control-card { padding: 14px; border: 1px solid #1d3b55; border-radius: var(--radius-sm); background: #061322; }
.control-card strong { display: block; color: var(--text); font-size: 13px; }
.control-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.control-card .stage-status { display: inline-flex; margin-bottom: 8px; color: #7df5df; font: 10px var(--font-mono); text-transform: uppercase; }
.control-card .stage-status.pending { color: #d7b76c; }
.control-card .stage-status.blocked { color: #ff9daa; }
.node-grid { display: grid; gap: 10px; }
.node-card { padding: 14px; border: 1px solid #1d3b55; border-radius: var(--radius-sm); background: #061322; }
.node-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.node-card-header strong { color: var(--text); font-size: 14px; }
.node-status { color: #7df5df; font: 10px var(--font-mono); text-transform: uppercase; }
.node-status.offline { color: #ffb2bd; }
.node-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 12px; }
.node-card-meta span { color: var(--muted); font-size: 11px; }
.node-card-meta strong { display: block; margin-top: 3px; color: var(--text); font-size: 12px; font-weight: 500; }
.node-services { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.history-list { display: grid; gap: 8px; margin-top: 14px; }
.history-tools { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(145px, .8fr); gap: 8px; margin-top: 10px; }
.history-tools input, .history-tools select { min-width: 0; height: 35px; padding: 0 10px; border: 1px solid #1d3b55; border-radius: var(--radius-sm); color: var(--text); background: #061322; font: 11px var(--font-ui); }
.history-item { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; padding: 11px 12px; border: 1px solid #1d3b55; border-radius: var(--radius-sm); color: inherit; text-align: left; background: #061322; cursor: pointer; }
.history-item:hover, .history-item:focus-visible { border-color: var(--accent); background: #0a1d2d; outline: none; }
.history-item strong { color: var(--text); font-size: 12px; }
.history-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.history-item .status-badge { flex: 0 0 auto; }
.event-list { display: grid; gap: 7px; margin-top: 14px; }
.event-item { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 11px; border-left: 2px solid #24668d; background: #061322; }
.event-item { width: 100%; border-top: 0; border-right: 0; border-bottom: 0; color: inherit; text-align: left; cursor: pointer; }
.event-item:hover, .event-item:focus-visible { background: #0a1d2d; outline: none; }
.event-item strong { color: #b3d3e7; font: 10px var(--font-mono); text-transform: uppercase; }
.event-item small { color: var(--muted); font-size: 10px; }
.event-detail { display: grid; gap: 16px; min-height: 0; }
.event-modal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.event-modal-meta strong { color: #e8f5ff; font: 12px var(--font-mono); text-transform: uppercase; }
.event-modal-meta small { color: var(--muted); font: 10px var(--font-mono); }
.event-modal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.event-modal-stat { min-width: 0; padding: 10px 11px; border: 1px solid #1d3b55; border-radius: 7px; background: #061322; }
.event-modal-stat span { display: block; color: #66839b; font: 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.event-modal-stat strong { display: block; margin-top: 5px; overflow: hidden; color: #d9ecf7; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.event-modal-section { min-width: 0; padding: 12px; border: 1px solid #1d3b55; border-radius: 8px; background: #061322; }
.event-modal-section .section-row { align-items: center; gap: 12px; }
.event-modal-section p { margin: 8px 0 0; color: #b4c9d9; font-size: 12px; line-height: 1.55; }
.event-modal-list { display: grid; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; }
.event-modal-list li { padding-left: 11px; border-left: 2px solid #24668d; color: #b4c9d9; font-size: 11px; line-height: 1.5; }
.event-modal-list li strong { color: #7df5df; font: 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.event-modal-timeline { display: grid; gap: 7px; margin-top: 9px; }
.event-modal-timeline-item { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid rgba(38, 79, 105, .55); }
.event-modal-timeline-item:first-child { border-top: 0; padding-top: 0; }
.event-modal-timeline-item strong { color: #7df5df; font: 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.event-modal-timeline-item span { color: #b4c9d9; font-size: 11px; line-height: 1.45; }
.event-modal-raw { margin: 0; max-height: 250px; overflow: auto; color: #a7c6d9; font: 10px/1.55 var(--font-mono); white-space: pre-wrap; word-break: break-word; }
.modal-backdrop { position: fixed; z-index: 21; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0, 5, 14, .76); backdrop-filter: blur(8px); }
.manual-modal, .event-modal { width: min(760px, 100%); max-height: min(720px, calc(100dvh - 48px)); overflow: hidden; padding: 24px; border: 1px solid #24506b; border-radius: 13px; background: #071523; box-shadow: 0 28px 90px rgba(0, 0, 0, .58); }
.manual-modal { width: min(680px, 100%); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.manual-modal h2, .event-modal h2 { margin: 4px 0 0; font-size: 24px; }
.modal-intro { margin: 14px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.manual-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.manual-form label { margin: 0; }
.manual-summary { grid-column: 1 / -1; }
.manual-summary textarea { min-height: 112px; }
.manual-form .form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.manual-form .form-actions .primary { flex: 1 1 260px; }
.manual-form .form-actions .secondary { flex: 0 1 auto; }
.manual-modal #form-error { margin-top: 14px; }
.event-modal .event-detail { max-height: calc(min(720px, 100dvh - 48px) - 105px); overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
.policy-list { display: grid; gap: 10px; }
.policy-row { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid #1d3b55; border-radius: var(--radius-sm); background: #061322; }
.policy-row img { width: 28px; height: 28px; object-fit: contain; }
.policy-row strong { display: block; font-size: 12px; }
.policy-row p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.settings-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.settings-modal h2 { margin: 4px 0 0; font-size: 24px; }
.settings-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #1d6b86; border-radius: 9px; background: #071728; cursor: pointer; }
.settings-close img { width: 28px; height: 28px; object-fit: contain; }
.settings-close:hover { border-color: var(--accent); filter: brightness(1.18); }
.settings-intro { margin: 14px 0 20px; color: var(--muted); font-size: 12px; }
.settings-intro code { color: var(--accent); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-grid label { margin-top: 0; }
.settings-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 45px; padding: 0 13px; border: 1px solid #1d3b55; border-radius: var(--radius-sm); background: #061322; }
.settings-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.settings-safety { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 13px; border: 1px solid #4e452b; border-radius: var(--radius-sm); background: #17150e; }
.settings-safety img { width: 34px; height: 34px; object-fit: contain; }
.settings-safety strong { font-size: 12px; }
.settings-safety p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.locked-pill { margin-left: auto; color: var(--amber); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.settings-status { margin-top: 14px; padding: 10px 12px; border: 1px solid #1b6b63; border-radius: var(--radius-sm); color: #8df4e7; background: #0b2b2b; font-size: 12px; }
.settings-status.error { border-color: #793047; color: #ffabb8; background: #351322; }
.settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.settings-footer > div { display: flex; gap: 8px; }
.settings-runtime { color: #6f8aa0; font: 11px var(--font-mono); }
.settings-save { align-items: center; }

.result-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
#result-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.empty-state { position: relative; height: 100%; min-height: 0; display: grid; place-content: center; overflow: hidden; text-align: center; color: var(--muted); }
.empty-state::before, .empty-state::after { position: absolute; content: ""; left: 50%; top: 50%; width: 440px; height: 440px; border: 1px dotted rgba(79, 126, 157, .24); border-radius: 50%; transform: translate(-50%, -48%); }
.empty-state::after { width: 300px; height: 300px; }
.empty-orbit { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 15px; filter: drop-shadow(0 0 12px rgba(38, 228, 211, .45)); }
.empty-orbit img { width: 48px; height: 48px; object-fit: contain; }
.empty-state h2, .empty-state p { position: relative; z-index: 1; }
.empty-state h2 { margin: 0 0 8px; color: var(--text); font-size: 20px; }
.empty-state p { max-width: 350px; margin: 0 auto; font-size: 12px; line-height: 1.65; }

.result-heading { align-items: center; }
.status-badge { border-radius: 20px; padding: 7px 11px; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.status-badge.pending { color: var(--amber); background: #342b17; }
.status-badge.approved, .status-badge.executed { color: var(--accent); background: #12352e; }
.status-badge.rejected { color: #ff9cac; background: #3b1d24; }
.result-meta { display: flex; gap: 16px; margin: 8px 0 22px; color: #637d96; font: 11px var(--font-mono); }
.analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.analysis-block, .evidence-section, .timeline-section, .approval-section { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-muted); }
.analysis-block { padding: 16px; }
.analysis-block p { margin: 10px 0 0; color: #d6e3ef; font-size: 13px; }
.evidence-section, .timeline-section, .approval-section { margin-top: 12px; padding: 16px; }
.evidence-section ul { margin: 10px 0 0; padding-left: 18px; color: #b7c7d7; font-size: 12px; }
.evidence-section li { margin: 6px 0; }
.section-row { display: flex; justify-content: space-between; }
.timeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 15px; }
.timeline-item { min-height: 89px; padding: 9px 5px 0; border-top: 2px solid var(--accent); }
.timeline-item.blocked { border-color: var(--danger); }
.timeline-stage { display: block; color: var(--accent); text-transform: uppercase; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.timeline-item.blocked .timeline-stage { color: var(--danger); }
.timeline-item p { margin: 7px 0; color: #94a9bc; font-size: 10px; line-height: 1.45; }
.approval-section { display: flex; align-items: end; justify-content: space-between; gap: 18px; border-color: #4e452b; background: #17150e; }
.approval-section p { max-width: 430px; margin: 7px 0 0; font-size: 11px; }
.approval-actions { display: flex; min-width: 360px; gap: 7px; }
.approval-actions input { min-width: 0; margin: 0; }
.approve { border: 0; color: #061713; background: var(--accent); }
.danger { border: 0; color: #ffb2b6; background: #3b1d24; }
.execute, .verify { border: 1px solid var(--accent); color: var(--accent); background: #12352e; }
button:disabled { cursor: not-allowed; opacity: .45; }
footer { display: flex; flex: 0 0 auto; justify-content: space-between; padding: 18px 2px; color: #60758a; font-size: 10px; }
footer span { display: inline-flex; align-items: center; gap: 7px; }
footer img { width: 18px; height: 18px; object-fit: contain; }

@media (max-width: 1200px) {
  .sidebar { width: 238px; flex-basis: 238px; }
  .main { padding-right: 32px; padding-left: 32px; }
  .workspace { grid-template-columns: 350px minmax(0, 1fr); }
}
@media (max-width: 950px) {
  .sidebar { width: 205px; flex-basis: 205px; }
  .main { padding: 30px 24px; }
  .workspace { grid-template-columns: 1fr; overflow-y: auto; overscroll-behavior: contain; }
  .create-panel, .result-panel { height: auto; overflow: visible; }
  .create-panel { order: 1; min-height: 0; }
  .result-panel { order: 0; }
  #result-content { overflow: visible; }
}
@media (max-width: 650px) {
  .sidebar { display: none; }
  .main { padding: 16px 12px; }
  .topbar { align-items: center; margin-bottom: 16px; }
  .topbar h1 { margin-top: 4px; }
  .top-actions { gap: 8px; }
  .mode-pill { padding: 8px 11px; font-size: 9px; letter-spacing: .08em; }
  .icon-button { width: 36px; height: 36px; }
  .metrics { gap: 8px; margin-bottom: 10px; }
  .metric-card { min-height: 88px; gap: 12px; padding: 12px; }
  .metric-icon { flex-basis: 44px; width: 44px; height: 44px; padding: 9px; border-radius: 10px; }
  .metric-card strong { margin-top: 2px; font-size: 22px; }
  .workspace { gap: 10px; }
  .panel { padding: 16px; }
  .metrics, .analysis-grid { grid-template-columns: 1fr; }
  .topbar h1 { font-size: 25px; }
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .approval-section { display: block; }
  .approval-actions { min-width: 0; margin-top: 15px; flex-wrap: wrap; }
  .approval-actions input { flex: 1 1 100%; }
  .approval-actions button { flex: 1 1 calc(50% - 4px); }
  footer { display: block; }
  footer span { display: block; margin-top: 5px; }
  .settings-backdrop { padding: 12px; }
  .settings-modal { max-height: calc(100dvh - 24px); padding: 17px; }
  .control-backdrop { padding: 12px; }
  .control-modal { max-height: calc(100dvh - 24px); padding: 17px; }
  .settings-grid { grid-template-columns: 1fr; }
  .control-grid { grid-template-columns: 1fr; }
  .history-tools { grid-template-columns: 1fr; }
  .settings-footer { display: block; }
  .settings-footer > div { margin-top: 12px; }
  .settings-footer button { flex: 1; }
}