:root {
  --ink: #0c0e11;
  --stage: #14171c;
  --slate: #232831;
  --slate-2: #2d3440;
  --ember: #ff7710;
  --ember-soft: #ff9b52;
  --mint: #51d6a3;
  --signal: #ffcb57;
  --danger: #ff6868;
  --text: #f5f6f8;
  --muted: #929aa8;
  --line: rgba(255, 255, 255, 0.09);
  --rail: 248px;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  color: var(--text);
  background: var(--ink);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 72% -10%, rgba(255, 119, 16, 0.08), transparent 30rem), var(--ink); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; top: -60px; left: 16px; padding: 10px 14px; color: var(--ink); background: var(--ember); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.shell { min-height: 100vh; }
.rail { position: fixed; inset: 0 auto 0 0; z-index: 10; width: var(--rail); display: flex; flex-direction: column; padding: 24px 14px 18px; border-right: 1px solid var(--line); background: rgba(12, 14, 17, 0.96); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 27px; border-bottom: 1px solid var(--line); }
.brand b, .brand small, .rail-foot b, .rail-foot small { display: block; }
.brand b { font-size: 15px; letter-spacing: .02em; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 11px; letter-spacing: .15em; }
.brand-mark { display: inline-flex; align-items: flex-end; justify-content: center; gap: 3px; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--ember); box-shadow: 0 8px 24px rgba(255, 119, 16, .22); }
.brand-mark i { width: 3px; border-radius: 4px; background: var(--ink); animation: beat 1.8s ease-in-out infinite; }
.brand-mark i:nth-child(1) { height: 8px; }
.brand-mark i:nth-child(2) { height: 17px; animation-delay: -.45s; }
.brand-mark i:nth-child(3) { height: 11px; animation-delay: -.9s; }
.brand-mark.large { width: 46px; height: 46px; padding: 10px; }
.primary-nav { display: grid; gap: 5px; margin-top: 20px; }
.nav-item { display: grid; grid-template-columns: 29px 1fr; grid-template-rows: auto auto; width: 100%; padding: 11px 12px; border: 1px solid transparent; border-radius: 11px; text-align: left; background: transparent; cursor: pointer; transition: .18s ease; }
.nav-item > span { grid-row: 1 / 3; align-self: center; color: var(--muted); font-size: 18px; }
.nav-item b { font-size: 13px; font-weight: 650; }
.nav-item small { margin-top: 3px; color: #747c89; font-size: 10px; }
.nav-item:hover { background: rgba(255, 255, 255, .035); }
.nav-item.is-active { border-color: rgba(255, 119, 16, .2); background: linear-gradient(90deg, rgba(255, 119, 16, .14), rgba(255, 119, 16, .025)); }
.nav-item.is-active > span, .nav-item.is-active b { color: var(--ember-soft); }
.rail-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--line); }
.rail-foot b { font-size: 11px; }
.rail-foot small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(255, 203, 87, .1); }
.workspace { min-height: 100vh; margin-left: var(--rail); padding: 0 38px 60px; }
.topbar { position: sticky; top: 0; z-index: 8; display: flex; justify-content: space-between; align-items: center; min-height: 88px; padding: 14px 0; border-bottom: 1px solid var(--line); background: rgba(12, 14, 17, .84); backdrop-filter: blur(18px); }
.eyebrow, .section-kicker { margin: 0 0 5px; color: var(--ember); font-family: Consolas, monospace; font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.topbar h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.window-select { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.window-select select, .icon-button { height: 34px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--stage); }
.window-select select { padding: 0 30px 0 10px; }
.icon-button { width: 34px; cursor: pointer; }
.icon-button:hover { border-color: rgba(255, 119, 16, .5); color: var(--ember); }
.chip { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; }
.chip[data-tone="fresh"] { border-color: rgba(81, 214, 163, .25); color: var(--mint); background: rgba(81, 214, 163, .07); }
.chip[data-tone="stale"] { border-color: rgba(255, 203, 87, .25); color: var(--signal); }
.state-region { min-height: 0; }
.state-message { display: none; margin-top: 14px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--stage); font-size: 12px; }
.state-region[data-active="loading"] [data-state="loading"], .state-region[data-active="empty"] [data-state="empty"], .state-region[data-active="stale"] [data-state="stale"], .state-region[data-active="error"] [data-state="error"], .state-region[data-active="forbidden"] [data-state="forbidden"], .state-region[data-active="signed-out"] [data-state="signed-out"] { display: flex; align-items: center; gap: 9px; }
.spinner { width: 13px; height: 13px; border: 2px solid var(--slate-2); border-top-color: var(--ember); border-radius: 50%; animation: spin .8s linear infinite; }
.page { display: none; }
.page.is-active { display: block; }
.intro-row { display: flex; justify-content: space-between; align-items: end; padding: 31px 0 20px; }
.intro-row h2, .panel h2, .module-hero h2 { margin: 0; font-size: 17px; font-weight: 650; }
.intro-row > div > p:last-child, .module-hero > p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.as-of { margin: 0; color: var(--muted); text-align: right; font-family: Consolas, monospace; font-size: 10px; line-height: 1.6; }
.as-of span { color: #656d79; }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.metric-card { position: relative; min-height: 114px; padding: 17px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(35, 40, 49, .63), rgba(20, 23, 28, .82)); }
.metric-card::after { content: ""; position: absolute; right: -30px; bottom: -42px; width: 95px; height: 95px; border: 1px solid rgba(255, 255, 255, .035); border-radius: 50%; }
.metric-card.is-primary { border-color: rgba(255, 119, 16, .25); background: linear-gradient(145deg, rgba(255, 119, 16, .13), rgba(20, 23, 28, .88)); }
.metric-card > span { display: block; color: var(--muted); font-size: 10px; }
.metric-card strong { display: flex; align-items: baseline; gap: 7px; margin-top: 12px; font-family: Consolas, monospace; font-size: 28px; font-weight: 600; letter-spacing: -.05em; }
.metric-card strong i { font: inherit; font-style: normal; }
.metric-card strong em { color: #5d6571; font-size: 14px; font-style: normal; }
.metric-card small { display: block; margin-top: 7px; color: #69717d; font-size: 9px; }
.panel { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(20, 23, 28, .74); }
.pulse-panel { margin-top: 11px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 19px; }
.panel-header h2 { font-size: 14px; }
.live-label { color: var(--muted); font-size: 9px; }
.live-label i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.pulse-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pulse-track::before { content: ""; position: absolute; z-index: 0; top: 19px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, var(--ember), var(--mint) 75%, var(--danger)); opacity: .35; }
.pulse-track > div { position: relative; z-index: 1; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; min-height: 50px; padding: 7px 11px 7px 7px; border: 1px solid var(--line); border-radius: 11px; background: var(--stage); }
.pulse-track span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--ember); background: rgba(255, 119, 16, .1); font-family: Consolas, monospace; font-size: 9px; }
.pulse-track b { font-size: 10px; font-weight: 550; }
.pulse-track strong { font-family: Consolas, monospace; font-size: 19px; }
.pulse-track [data-pulse="failed"] span { color: var(--danger); background: rgba(255, 104, 104, .08); }
.queue-forecast { display: grid; grid-template-columns: .8fr 1fr 1.35fr 1.25fr .7fr; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.queue-forecast > div { padding: 10px 12px; border-left: 2px solid var(--slate-2); }
.queue-forecast .forecast-primary { border-left-color: var(--ember); background: linear-gradient(90deg, rgba(255, 119, 16, .07), transparent); }
.queue-forecast span, .queue-forecast small { display: block; color: var(--muted); font-size: 9px; }
.queue-forecast strong { display: flex; align-items: baseline; gap: 6px; margin: 7px 0 5px; font-family: Consolas, monospace; font-size: 18px; font-weight: 550; }
.queue-forecast strong i, .queue-forecast small i { font: inherit; font-style: normal; }
.queue-forecast strong em { color: #646c78; font-size: 10px; font-style: normal; }
.two-column { display: grid; grid-template-columns: 1.12fr .88fr; gap: 11px; margin-top: 11px; }
.text-button { border: 0; color: var(--muted); background: transparent; font-size: 9px; cursor: pointer; }
.text-button:hover { color: var(--ember); }
.funnel-chart { display: grid; gap: 10px; }
.funnel-row { display: grid; grid-template-columns: 65px 1fr 38px; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; }
.funnel-bar { height: 7px; overflow: hidden; border-radius: 99px; background: var(--slate); }
.funnel-bar i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--ember), var(--ember-soft)); transition: width .45s ease; }
.funnel-row strong { color: var(--text); text-align: right; font-family: Consolas, monospace; }
.rate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rate-pair > div { min-height: 126px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--stage); }
.rate-pair span, .rate-pair small { display: block; color: var(--muted); font-size: 9px; line-height: 1.5; }
.rate-pair strong { display: block; margin: 15px 0 8px; font-family: Consolas, monospace; font-size: 30px; font-weight: 550; }
.lower-grid { grid-template-columns: .88fr 1.12fr; }
.attention-list { display: grid; gap: 8px; }
.attention-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 10px; }
.attention-item b { color: var(--signal); font-family: Consolas, monospace; font-size: 16px; }
.attention-item.is-clear b { color: var(--mint); }
.definitions-panel details { padding: 10px 0; border-top: 1px solid var(--line); }
.definitions-panel details:first-of-type { border-top: 0; }
.definitions-panel summary { color: #d8dbe0; font-size: 10px; cursor: pointer; }
.definitions-panel p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.module-page { padding-top: 32px; }
.module-hero { max-width: 650px; margin-bottom: 24px; }
.module-hero h2 { font-size: 22px; }
.module-empty { display: grid; place-items: center; min-height: 300px; text-align: center; }
.module-empty[hidden] { display: none !important; }
.module-empty > span { color: var(--ember); font-size: 28px; }
.module-empty h3 { margin: 14px 0 6px; font-size: 14px; }
.module-empty p { margin: 0; color: var(--muted); font-size: 11px; }
.metric-grid.compact { grid-template-columns: repeat(4, 1fr); margin-bottom: 11px; }
.feedback-summary { max-width: 760px; }
.feedback-workspace { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(440px, 1.28fr); gap: 11px; }
.feedback-queue, .feedback-thread-panel { min-height: 560px; }
.feedback-ticket-list { display: grid; gap: 7px; max-height: 650px; overflow: auto; }
.feedback-ticket { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 11px; text-align: left; background: var(--stage); cursor: pointer; }
.feedback-ticket strong { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }
.feedback-ticket span { color: var(--muted); font-size: 9px; }
.feedback-ticket b { color: var(--signal); font-size: 9px; font-weight: 600; }
.feedback-ticket:hover, .feedback-ticket.is-active { border-color: rgba(255, 119, 16, .42); background: linear-gradient(100deg, rgba(255, 119, 16, .11), var(--stage)); }
.feedback-placeholder { padding: 20px 8px; color: var(--muted); text-align: center; font-size: 10px; }
.feedback-placeholder.is-error { color: var(--danger); }
.module-empty.compact { min-height: 360px; }
.feedback-thread-heading { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.feedback-thread-heading h3 { margin: 0; font-size: 15px; }
.feedback-thread-heading p { margin: 6px 0 0; color: var(--muted); font-size: 9px; }
.feedback-admin-form { margin: 12px 0; }
.feedback-admin-form fieldset { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; align-items: end; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.feedback-admin-form legend { padding: 0 5px; color: var(--muted); font-size: 9px; }
.feedback-admin-form label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; }
.feedback-admin-form input, .feedback-admin-form select { width: 100%; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--ink); }
.feedback-admin-form button { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; }
.feedback-message-list { display: grid; gap: 9px; max-height: 300px; margin: 0; padding: 5px 3px 12px; overflow: auto; list-style: none; }
.feedback-message { max-width: 88%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; background: var(--slate); }
.feedback-message.is-staff { justify-self: end; border-color: rgba(255, 119, 16, .25); border-radius: 12px 12px 3px 12px; background: rgba(255, 119, 16, .09); }
.feedback-message span { color: var(--muted); font-size: 8px; }
.feedback-message p { margin: 6px 0 0; color: #e6e8eb; font-size: 11px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-reply-form { padding-top: 12px; border-top: 1px solid var(--line); }
.feedback-reply-form > label { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 650; }
.feedback-reply-form textarea { width: 100%; padding: 11px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--ink); }
.feedback-reply-form > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feedback-reply-form small { color: var(--muted); font-size: 8px; line-height: 1.5; }
.feedback-reply-form .primary-button { width: auto; min-width: 100px; margin-top: 8px; padding: 0 16px; }
.release-center { margin-bottom: 28px; }
.release-center-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 20px 0 12px; padding: 18px 20px; border: 1px solid rgba(255, 119, 16, .18); border-radius: 14px; background: linear-gradient(90deg, rgba(255, 119, 16, .08), rgba(20, 23, 28, .78) 38%, rgba(20, 23, 28, .62)); }
.release-center-heading h2 { margin: 0; font-size: 16px; }
.release-center-heading > div > p:last-child { max-width: 760px; margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.release-center-heading .text-button { flex: 0 0 auto; }
.release-rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(12, 14, 17, .62); }
.release-rail::before { content: ""; position: absolute; top: 50%; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, var(--signal), var(--ember) 42%, var(--mint)); opacity: .3; }
.release-rail-node { position: relative; z-index: 1; min-height: 92px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(20, 23, 28, .96); }
.release-rail-node::before { content: ""; position: absolute; top: 15px; right: 15px; width: 7px; height: 7px; border: 2px solid var(--stage); border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1px rgba(81, 214, 163, .28), 0 0 12px rgba(81, 214, 163, .24); }
.release-rail-node.is-gate::before { background: var(--signal); box-shadow: 0 0 0 1px rgba(255, 203, 87, .28), 0 0 12px rgba(255, 203, 87, .22); }
.release-rail-node span, .release-rail-node small { display: block; color: var(--muted); font-size: 8px; }
.release-rail-node strong { display: block; margin: 12px 18px 6px 0; overflow: hidden; font: 600 15px Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.release-rail-node small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.release-signing-warning { margin: 8px 1px 12px; color: var(--signal); font-size: 9px; line-height: 1.5; }
.release-workshop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 11px; }
.release-panel { min-height: 580px; }
.release-step { color: var(--muted); font: 8px Consolas, monospace; letter-spacing: .04em; }
.release-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.release-form label { display: grid; align-content: start; gap: 6px; color: var(--muted); font-size: 9px; }
.release-form input, .release-form select, .release-form textarea { width: 100%; min-height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--ink); }
.release-form input[type="file"] { padding: 7px 8px; color: #c3c8d0; font-size: 8px; }
.release-form input[type="file"]::file-selector-button { margin-right: 8px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ember-soft); background: var(--stage); cursor: pointer; }
.release-form textarea { padding-block: 9px; resize: vertical; line-height: 1.55; }
.release-form .wide { grid-column: 1 / -1; }
.release-form .primary-button { margin-top: 0; }
.release-secondary-action { grid-column: 1 / -1; min-height: 39px; border: 1px solid rgba(255, 119, 16, .32); border-radius: 9px; color: var(--ember-soft); background: rgba(255, 119, 16, .07); cursor: pointer; }
.release-secondary-action:hover { background: rgba(255, 119, 16, .12); }
.release-preview-summary { min-height: 48px; margin: 13px 0 10px; padding: 11px 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); background: rgba(12, 14, 17, .38); font-size: 9px; line-height: 1.55; }
.release-preview-summary.is-ready { border-style: solid; border-color: rgba(81, 214, 163, .24); color: #d8e5df; background: rgba(81, 214, 163, .05); }
.release-preview-summary.is-error { border-style: solid; border-color: rgba(255, 104, 104, .28); color: var(--danger); }
.release-delta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.release-delta-grid > section { min-width: 0; min-height: 154px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--stage); }
.release-delta-grid header { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.release-delta-grid header span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: var(--mint); background: rgba(81, 214, 163, .08); font: 12px Consolas, monospace; }
.release-delta-grid [data-delta="changed"] header span { color: var(--signal); background: rgba(255, 203, 87, .08); }
.release-delta-grid [data-delta="removed"] header span { color: var(--danger); background: rgba(255, 104, 104, .08); }
.release-delta-grid header strong { font-size: 9px; }
.release-delta-grid header b { color: var(--muted); font: 10px Consolas, monospace; }
.release-delta-grid ul { display: grid; gap: 6px; max-height: 126px; margin: 9px 0 0; padding: 0; overflow: auto; list-style: none; }
.release-delta-grid li { color: #c8ccd3; font-size: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.resource-release-panel > .primary-button { margin-top: 11px; }
.release-action:disabled { color: #676e79; border-color: var(--line); background: #1b1f25; cursor: not-allowed; }
.release-form .form-message { margin: 0; }
.release-history { margin-top: 11px; }
.release-history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.release-history-grid > section { min-width: 0; }
.release-history-grid h3 { margin: 0 0 9px; color: #dfe2e7; font-size: 10px; }
.release-history-list { display: grid; gap: 7px; max-height: 370px; overflow: auto; }
.release-history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--stage); }
.release-history-item.is-current { border-color: rgba(81, 214, 163, .23); background: linear-gradient(90deg, rgba(81, 214, 163, .06), var(--stage) 35%); }
.release-history-item strong, .release-history-item span, .release-history-item small { display: block; }
.release-history-item strong { overflow: hidden; font: 10px Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.release-history-item span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.release-history-item small { grid-column: 1 / -1; color: #747c89; font-size: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.release-history-item button { align-self: start; min-height: 32px; padding: 0 9px; border: 1px solid rgba(255, 119, 16, .26); border-radius: 8px; color: var(--ember-soft); background: rgba(255, 119, 16, .06); cursor: pointer; font-size: 8px; }
.release-history-item button:disabled { border-color: var(--line); color: var(--mint); background: rgba(81, 214, 163, .04); cursor: default; }
.control-workspace { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr); gap: 11px; }
.control-catalog, .control-request-panel { min-height: 470px; }
.control-list, .approval-list { display: grid; gap: 8px; max-height: 480px; overflow: auto; }
.control-placeholder { margin: 0; padding: 22px 8px; color: var(--muted); text-align: center; font-size: 10px; }
.control-placeholder.is-error { color: var(--danger); }
.control-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--stage); }
.control-item strong, .control-item span { display: block; }
.control-item strong { font-size: 11px; }
.control-item span { margin-top: 4px; color: var(--muted); font: 9px Consolas, monospace; }
.control-item > b { align-self: start; color: var(--mint); font-size: 9px; }
.control-item > b.is-disabled { color: var(--danger); }
.control-item p { grid-column: 1 / -1; margin: 0; color: #c4c8cf; font-size: 10px; line-height: 1.6; }
.control-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.control-form label, .approval-actions label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; }
.control-form input, .control-form select, .control-form textarea, .approval-actions input { width: 100%; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--ink); }
.control-form input, .control-form select, .approval-actions input { height: 38px; }
.control-form textarea { padding-block: 10px; resize: vertical; }
.control-form .wide { grid-column: 1 / -1; }
.control-form .primary-button { margin: 2px 0 0; }
.approval-panel { margin-top: 11px; }
.approval-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 310px; }
.approval-item { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; text-align: left; background: var(--stage); cursor: pointer; }
.approval-item:hover, .approval-item.is-active { border-color: rgba(255, 119, 16, .4); background: rgba(255, 119, 16, .07); }
.approval-item strong { font-size: 10px; overflow-wrap: anywhere; }
.approval-item span { color: var(--muted); font: 8px Consolas, monospace; }
.approval-item p { margin: 2px 0 0; color: #c4c8cf; font-size: 9px; }
.approval-actions { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto auto; align-items: end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.approval-actions button { height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--slate); cursor: pointer; font-size: 9px; }
.approval-actions .danger-button { border-color: rgba(255, 104, 104, .35); color: var(--danger); background: rgba(255, 104, 104, .07); }
.approval-actions .execute-button { border-color: rgba(255, 119, 16, .35); color: var(--ember-soft); background: rgba(255, 119, 16, .08); }
.control-note { margin: -8px 0 14px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.audit-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.audit-item { display: grid; grid-template-columns: 44px 1fr auto; align-items: start; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--stage); }
.audit-item > b { color: var(--ember); font: 10px Consolas, monospace; }
.audit-item strong, .audit-item span { display: block; }
.audit-item strong { font-size: 10px; }
.audit-item span, .audit-item code { color: var(--muted); font: 8px Consolas, monospace; }
.audit-item p { margin: 5px 0 0; color: #c4c8cf; font-size: 9px; }
.ops-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 11px; }
.ops-summary article { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, rgba(35, 40, 49, .66), rgba(20, 23, 28, .82)); }
.ops-summary span, .ops-summary small { display: block; color: var(--muted); font-size: 9px; }
.ops-summary strong { display: block; margin: 7px 0 4px; font: 24px Consolas, monospace; }
.review-workspace { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(430px, 1.18fr); gap: 11px; }
.review-queue-panel, .review-action-panel { min-height: 500px; }
.review-list { display: grid; gap: 8px; max-height: 590px; overflow: auto; }
.review-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 11px; text-align: left; background: var(--stage); cursor: pointer; }
.review-item:hover, .review-item.is-active { border-color: rgba(255, 119, 16, .42); background: linear-gradient(100deg, rgba(255, 119, 16, .1), var(--stage)); }
.review-item strong { font-size: 11px; overflow-wrap: anywhere; }
.review-item b { color: var(--signal); font: 9px Consolas, monospace; }
.review-item span, .review-item small { color: var(--muted); font-size: 8px; }
.review-item small { grid-column: 1 / -1; }
.review-item.is-hard-overdue b { color: var(--danger); }
.review-action-panel .control-form[hidden] { display: none !important; }
.review-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink); }
.review-detail div { min-width: 0; }
.review-detail span, .review-detail strong { display: block; }
.review-detail span { color: var(--muted); font-size: 8px; }
.review-detail strong { margin-top: 4px; overflow-wrap: anywhere; font: 10px Consolas, monospace; }
.control-form > button, .task-danger-zone button, .settlement-form button { min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--slate); cursor: pointer; font-size: 9px; }
.control-form > .execute-button, .task-danger-zone .execute-button, .settlement-form .execute-button { border-color: rgba(255, 119, 16, .35); color: var(--ember-soft); background: rgba(255, 119, 16, .08); }
.control-form > .danger-button, .task-danger-zone .danger-button { border-color: rgba(255, 104, 104, .35); color: var(--danger); background: rgba(255, 104, 104, .07); }
.task-control-panel { margin-top: 11px; }
.task-control-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.task-control-form label, .partner-create-form label, .settlement-form label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; }
.task-control-form input, .partner-create-form input, .settlement-form input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--ink); }
.task-control-form .wide, .partner-create-form .wide { grid-column: 1 / -1; }
.task-danger-zone { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; border: 1px solid rgba(255, 203, 87, .16); border-radius: 11px; background: rgba(255, 203, 87, .025); }
.finance-workspace, .finance-lower-grid { display: grid; grid-template-columns: minmax(430px, 1.08fr) minmax(330px, .92fr); gap: 11px; margin-top: 11px; }
.demo-command-panel { position: relative; margin-top: 11px; overflow: hidden; border-color: rgba(255, 119, 16, .2); background: linear-gradient(120deg, rgba(255, 119, 16, .065), rgba(20, 23, 28, .78) 42%); }
.demo-command-panel::before { content: "LIVE"; position: absolute; top: 18px; right: 132px; color: rgba(255, 119, 16, .08); font: 700 44px/1 Consolas, monospace; letter-spacing: -.08em; pointer-events: none; }
.demo-command-grid { display: grid; grid-template-columns: minmax(330px, .78fr) minmax(440px, 1.22fr); gap: 18px; }
.demo-config-form { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 9px; padding-right: 18px; border-right: 1px solid var(--line); }
.demo-form-heading { grid-column: 1 / -1; margin-bottom: 4px; }
.demo-form-heading span, .demo-form-heading strong { display: block; }
.demo-form-heading span { color: var(--ember-soft); font-size: 10px; font-weight: 700; }
.demo-form-heading strong { margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.55; }
.demo-config-form label { display: grid; gap: 5px; color: var(--muted); font-size: 8px; }
.demo-config-form input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: rgba(12, 14, 17, .9); }
.demo-config-form .demo-space-access-control { display: flex; align-items: center; gap: 9px; }
.demo-config-form .demo-space-access-control input { width: 18px; height: 18px; padding: 0; }
.demo-config-form .wide { grid-column: 1 / -1; }
.demo-config-form .primary-button { height: 38px; margin-top: 2px; }
.demo-runway-board { min-width: 0; }
.demo-runway-heading { display: flex; align-items: start; justify-content: space-between; margin-bottom: 8px; }
.demo-runway-heading span, .demo-runway-heading strong { display: block; }
.demo-runway-heading span { color: var(--muted); font-size: 8px; }
.demo-runway-heading strong { margin-top: 4px; font-size: 12px; }
.demo-account-list { display: grid; gap: 8px; max-height: 326px; overflow: auto; }
.demo-account-card { --demo-cost-ratio: 0%; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(12, 14, 17, .72); }
.demo-account-card.is-paused { opacity: .72; }
.demo-account-card header { min-width: 0; }
.demo-account-card header strong, .demo-account-card header span { display: block; }
.demo-account-card header strong { overflow: hidden; text-overflow: ellipsis; font: 11px Consolas, monospace; white-space: nowrap; }
.demo-account-card header span { margin-top: 4px; color: var(--muted); font-size: 8px; }
.demo-account-state { align-self: start; color: var(--mint); font: 9px Consolas, monospace; }
.demo-account-card.is-paused .demo-account-state { color: var(--signal); }
.demo-cost-copy { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; }
.demo-cost-copy b { color: var(--text); font: 9px Consolas, monospace; }
.demo-cost-runway { position: relative; grid-column: 1 / -1; height: 9px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 99px; background: repeating-linear-gradient(90deg, var(--slate) 0, var(--slate) calc(25% - 1px), rgba(255,255,255,.08) 25%); }
.demo-cost-runway::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: 80%; width: 1px; background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.demo-cost-runway span { display: block; width: var(--demo-cost-ratio); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--ember) 72%, var(--danger)); transition: width .4s ease; }
.demo-account-meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.demo-account-meta span { padding: 6px 7px; border-radius: 7px; color: var(--muted); background: rgba(255, 255, 255, .025); font-size: 8px; }
.demo-account-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.demo-account-actions button { min-height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--slate); cursor: pointer; font-size: 8px; }
.demo-account-actions .refill-button { border-color: rgba(255, 119, 16, .3); color: var(--ember-soft); background: rgba(255, 119, 16, .08); }
.demo-account-actions .pause-button { color: var(--signal); }
.demo-account-actions button:disabled { opacity: .5; cursor: wait; }
.demo-cost-warning { margin: 15px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--signal); font-size: 9px; }
.supplier-finance-center { position: relative; margin-top: 11px; overflow: hidden; border-color: rgba(81, 214, 163, .17); background: linear-gradient(135deg, rgba(81, 214, 163, .035), rgba(20, 23, 28, .82) 34%, rgba(255, 119, 16, .025)); }
.supplier-finance-center::after { content: "READ ONLY"; position: absolute; top: 20px; right: 148px; color: rgba(81, 214, 163, .055); font: 700 38px/1 Consolas, monospace; letter-spacing: -.07em; pointer-events: none; }
.supplier-finance-heading { position: relative; z-index: 1; display: flex; align-items: start; justify-content: space-between; gap: 22px; }
.supplier-finance-heading h2 { margin: 0; font-size: 15px; }
.supplier-finance-heading p:last-child { max-width: 660px; margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.supplier-finance-heading .text-button { min-height: 32px; padding: 0 8px; }
.supplier-scope-ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 17px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); }
.supplier-scope-ledger > div { display: grid; grid-template-columns: 29px 1fr; gap: 2px 8px; min-width: 0; padding: 11px 12px; background: rgba(12, 14, 17, .86); }
.supplier-scope-ledger span { grid-row: 1 / 3; color: var(--ember); font: 10px Consolas, monospace; }
.supplier-scope-ledger strong { font-size: 9px; }
.supplier-scope-ledger small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-safety-note { margin: 11px 0 0; padding: 8px 11px; border-left: 2px solid var(--mint); color: var(--muted); background: linear-gradient(90deg, rgba(81, 214, 163, .055), transparent); font-size: 8px; }
.supplier-status-key { display: flex; justify-content: flex-end; gap: 13px; margin: 10px 2px 7px; color: var(--muted); font-size: 8px; }
.supplier-status-key span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--muted); }
.supplier-status-key span:nth-child(2)::before { background: var(--signal); }
.supplier-status-key span:nth-child(3)::before { background: var(--mint); }
.supplier-account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.supplier-account-card { --supplier-balance-ratio: 0%; position: relative; min-width: 0; padding: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(12, 14, 17, .76); }
.supplier-account-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--muted); }
.supplier-account-card.is-fresh::before { background: linear-gradient(90deg, var(--mint), transparent 82%); box-shadow: 0 0 13px rgba(81, 214, 163, .25); }
.supplier-account-card.is-stale::before { background: linear-gradient(90deg, var(--signal), transparent 82%); }
.supplier-account-card.is-unconfigured { background: repeating-linear-gradient(135deg, rgba(12, 14, 17, .78) 0, rgba(12, 14, 17, .78) 12px, rgba(255,255,255,.012) 12px, rgba(255,255,255,.012) 24px); }
.supplier-account-card > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.supplier-account-card > header span, .supplier-account-card > header strong { display: block; }
.supplier-account-card > header span { color: var(--ember); font: 8px Consolas, monospace; text-transform: uppercase; }
.supplier-account-card > header strong { margin-top: 4px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-account-card > header b { flex: none; color: var(--muted); font-size: 8px; }
.supplier-account-card.is-fresh > header b { color: var(--mint); }
.supplier-account-card.is-stale > header b { color: var(--signal); }
.supplier-balance-copy { margin-top: 16px; }
.supplier-balance-copy span, .supplier-balance-copy small { display: block; color: var(--muted); font-size: 8px; }
.supplier-balance-copy strong { display: block; margin: 8px 0 5px; overflow: hidden; font: 23px Consolas, monospace; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.supplier-balance-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-balance-rail { position: relative; height: 8px; margin-top: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 99px; background: var(--slate); }
.supplier-balance-rail::after { content: ""; position: absolute; z-index: 1; top: -2px; bottom: -2px; left: 50%; width: 1px; background: var(--signal); box-shadow: 0 0 7px var(--signal); }
.supplier-balance-rail span { display: block; width: var(--supplier-balance-ratio); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--danger), var(--signal) 48%, var(--mint) 52%); transition: width .35s ease; }
.supplier-component-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 10px; }
.supplier-component-list > div { min-width: 0; padding: 7px; border-radius: 7px; background: rgba(255,255,255,.025); }
.supplier-component-list span, .supplier-component-list b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-component-list span { color: var(--muted); font-size: 7px; }
.supplier-component-list b { margin-top: 4px; font: 8px Consolas, monospace; }
.supplier-component-list p { grid-column: 1 / -1; margin: 0; padding: 8px; color: var(--muted); text-align: center; font-size: 8px; }
.supplier-account-meta { display: grid; gap: 4px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.supplier-account-meta span { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.supplier-account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.supplier-account-actions button, .supplier-threshold-form button { min-height: 32px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--slate); cursor: pointer; font-size: 8px; }
.supplier-account-actions button:first-child { border-color: rgba(81, 214, 163, .2); color: var(--mint); background: rgba(81, 214, 163, .055); }
.supplier-account-actions button:disabled, .supplier-threshold-form button:disabled { opacity: .45; cursor: not-allowed; }
.supplier-threshold-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px; margin-top: 8px; }
.supplier-threshold-form label { display: grid; gap: 5px; color: var(--muted); font-size: 7px; }
.supplier-threshold-form input { width: 100%; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--ink); }
.supplier-threshold-form button { padding: 0 9px; color: var(--ember-soft); }
.supplier-threshold-form p { grid-column: 1 / -1; min-height: 12px; margin: 0; color: var(--signal); font-size: 7px; }
.supplier-finance-depth { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); gap: 9px; margin-top: 9px; }
.supplier-monthly-panel, .supplier-alert-panel { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(12, 14, 17, .62); }
.supplier-monthly-panel > header, .supplier-alert-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.supplier-monthly-panel header span, .supplier-alert-panel header span { color: var(--ember); font: 7px Consolas, monospace; letter-spacing: .08em; }
.supplier-monthly-panel h3, .supplier-alert-panel h3 { margin: 4px 0 0; font-size: 10px; }
.supplier-monthly-panel label { display: grid; gap: 4px; color: var(--muted); font-size: 7px; }
.supplier-monthly-panel input { height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); color-scheme: dark; background: var(--ink); }
.supplier-alert-panel header b { color: var(--muted); font-size: 7px; font-weight: 400; }
.supplier-monthly-analysis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 9px; }
.supplier-monthly-analysis article { min-width: 0; padding: 9px; border-left: 2px solid var(--slate-2); background: rgba(255,255,255,.02); }
.supplier-monthly-analysis article:first-child { border-left-color: var(--mint); }
.supplier-monthly-analysis article:nth-child(2) { border-left-color: var(--ember); }
.supplier-monthly-analysis span, .supplier-monthly-analysis small { display: block; color: var(--muted); font-size: 7px; }
.supplier-monthly-analysis strong { display: block; margin: 7px 0 5px; overflow: hidden; font: 13px Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.supplier-monthly-analysis > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 7px; }
.supplier-alert-list { display: grid; gap: 6px; max-height: 170px; margin-top: 9px; overflow: auto; }
.supplier-alert-item { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; padding: 8px; border: 1px solid rgba(255, 203, 87, .15); border-radius: 8px; background: rgba(255, 203, 87, .025); }
.supplier-alert-item strong, .supplier-alert-item span { display: block; }
.supplier-alert-item strong { color: var(--signal); font-size: 8px; }
.supplier-alert-item.is-resolved strong { color: var(--mint); }
.supplier-alert-item span, .supplier-alert-item time { color: var(--muted); font-size: 7px; }
.supplier-alert-item b { color: var(--text); font: 7px Consolas, monospace; }
.supplier-alert-item time { grid-column: 1 / -1; }
.operations-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 11px; }
.operations-runtime-panel, .operations-evidence-panel { min-height: 330px; }
.operations-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.operations-metric-grid > div { min-height: 104px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: radial-gradient(circle at 85% 12%, rgba(255, 119, 16, .1), transparent 46%), var(--stage); }
.operations-metric-grid span, .operations-metric-grid small, .operations-workload span, .operations-workload small { display: block; color: var(--muted); font-size: 8px; }
.operations-metric-grid strong { display: block; margin: 15px 0 8px; font: 21px Consolas, monospace; font-weight: 550; }
.operations-workload { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 9px; padding-top: 11px; border-top: 1px solid var(--line); }
.operations-workload > div { padding: 9px 11px; border-left: 2px solid var(--slate-2); background: linear-gradient(90deg, rgba(255, 255, 255, .025), transparent); }
.operations-workload > div:first-child { border-left-color: var(--ember); }
.operations-workload strong { display: block; margin: 7px 0 4px; font: 15px Consolas, monospace; }
.operations-evidence-list { display: grid; gap: 8px; }
.operations-evidence-placeholder { padding: 26px 8px; color: var(--muted); text-align: center; font-size: 9px; }
.operations-evidence-item { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--stage); }
.operations-evidence-item strong { font-size: 10px; }
.operations-evidence-item b { color: var(--signal); font: 9px Consolas, monospace; }
.operations-evidence-item.is-healthy b { color: var(--mint); }
.operations-evidence-item.is-critical b { color: var(--danger); }
.operations-evidence-item small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }
.operations-evidence-labels { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.renderer-fleet { margin-top: 11px; scroll-margin-top: 100px; }
.renderer-fleet-legend { display: grid; grid-template-columns: minmax(190px, 1.2fr) minmax(210px, 1.25fr) 100px 150px 70px; gap: 10px; padding: 0 12px 7px; color: var(--muted); font-size: 8px; }
.renderer-node-list { display: grid; gap: 7px; }
.renderer-node-item { position: relative; display: grid; grid-template-columns: minmax(190px, 1.2fr) minmax(210px, 1.25fr) 100px 150px 70px; align-items: center; gap: 10px; padding: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--stage); }
.renderer-node-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--muted); }
.renderer-node-item.is-online::before { background: var(--mint); box-shadow: 0 0 12px rgba(81, 214, 163, .35); }
.renderer-node-item.is-degraded::before { background: var(--signal); }
.renderer-node-item.is-offline { opacity: .68; }
.renderer-node-item strong, .renderer-node-item span { display: block; }
.renderer-node-item strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.renderer-node-item span { margin-top: 4px; color: var(--muted); font: 8px Consolas, monospace; overflow-wrap: anywhere; }
.renderer-node-item time { color: var(--muted); font-size: 8px; }
.renderer-node-item > b { justify-self: start; padding: 5px 7px; border: 1px solid rgba(81, 214, 163, .2); border-radius: 999px; color: var(--mint); font-size: 8px; }
.renderer-node-item.is-degraded > b { border-color: rgba(255, 203, 87, .22); color: var(--signal); }
.renderer-node-item.is-offline > b { border-color: rgba(255, 104, 104, .22); color: var(--danger); }
.operations-alert-panel, .audit-panel { margin-top: 11px; }
.operations-alert-head { display: grid; grid-template-columns: minmax(220px, 1.4fr) 140px 140px 110px; gap: 10px; padding: 0 12px 7px; color: var(--muted); font-size: 8px; }
.operations-alert-list { display: grid; gap: 7px; }
.operations-alert-item { display: grid; grid-template-columns: minmax(220px, 1.4fr) 140px 140px 110px; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(255, 193, 92, .2); border-radius: 10px; background: linear-gradient(90deg, rgba(255, 193, 92, .065), var(--stage) 35%); }
.operations-alert-item.is-critical { border-color: rgba(255, 104, 104, .27); background: linear-gradient(90deg, rgba(255, 104, 104, .075), var(--stage) 35%); }
.operations-alert-copy strong, .operations-alert-copy span { display: block; }
.operations-alert-copy strong { font-size: 10px; }
.operations-alert-copy span, .operations-alert-item time { margin-top: 5px; color: var(--muted); font-size: 8px; }
.operations-alert-item a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border: 1px solid rgba(255, 119, 16, .28); border-radius: 8px; color: var(--ember-soft); background: rgba(255, 119, 16, .07); font-size: 8px; text-decoration: none; }
.operations-alert-clear { padding: 24px; border: 1px dashed rgba(95, 224, 183, .24); border-radius: 10px; color: var(--mint); text-align: center; font-size: 10px; }
.provider-cost-panel, .partner-panel { min-height: 510px; }
.cost-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.cost-summary article { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink); }
.cost-summary span, .cost-summary small { display: block; color: var(--muted); font-size: 8px; }
.cost-summary strong { display: block; margin: 7px 0 4px; font: 18px Consolas, monospace; }
.cost-list, .partner-list, .finance-list { display: grid; gap: 7px; max-height: 350px; overflow: auto; }
.cost-item, .partner-item, .finance-item { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--stage); }
.cost-item strong, .partner-item strong, .finance-item strong { font-size: 10px; }
.cost-item b, .partner-item b, .finance-item b { color: var(--ember-soft); font: 10px Consolas, monospace; }
.cost-item span, .partner-item span, .finance-item span, .cost-item small, .partner-item small, .finance-item small { color: var(--muted); font-size: 8px; }
.cost-item small, .partner-item small, .finance-item small { grid-column: 1 / -1; overflow-wrap: anywhere; }
.partner-item.is-paused b, .finance-item.is-negative b { color: var(--danger); }
.partner-create-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 13px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.partner-create-form label:nth-of-type(3), .partner-create-form button { grid-column: 1 / -1; }
.partner-create-form .primary-button { margin-top: 0; }
.finance-lower-grid { grid-template-columns: 1fr 1fr; }
.settlement-item { width: 100%; text-align: left; cursor: pointer; }
.settlement-item:hover, .settlement-item.is-active { border-color: rgba(255, 119, 16, .4); background: rgba(255, 119, 16, .06); }
.settlement-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.settlement-form .form-message { grid-column: 1 / -1; }
.login-panel { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5, 6, 8, .84); backdrop-filter: blur(14px); }
.login-panel[hidden] { display: none; }
.login-card { width: min(430px, 100%); padding: 30px; border: 1px solid rgba(255, 119, 16, .2); border-radius: 17px; background: linear-gradient(145deg, #1b1f25, #111419); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.login-card h2 { margin: 12px 0 8px; font-size: 21px; }
.login-card > p:not(.section-kicker):not(.form-message) { margin: 0 0 22px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.login-card label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; }
.login-card input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--ink); }
.code-row { display: grid; grid-template-columns: 1fr 110px; align-items: end; gap: 9px; margin-top: 13px; }
.code-row button, .primary-button { height: 42px; border: 1px solid rgba(255, 119, 16, .35); border-radius: 9px; background: rgba(255, 119, 16, .08); cursor: pointer; }
.primary-button { width: 100%; margin-top: 18px; border: 0; color: #15110e; background: var(--ember); font-weight: 700; }
.form-message { min-height: 18px; margin: 10px 0 0; color: var(--signal); font-size: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes beat { 0%, 100% { transform: scaleY(.7); } 50% { transform: scaleY(1); } }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .pulse-track { grid-template-columns: repeat(3, 1fr); }
  .queue-forecast { grid-template-columns: repeat(3, 1fr); }
  .pulse-track::before { display: none; }
  .control-workspace { grid-template-columns: 1fr; }
  .release-workshop { grid-template-columns: 1fr; }
  .review-workspace, .finance-workspace { grid-template-columns: 1fr; }
  .demo-command-grid { grid-template-columns: 1fr; }
  .supplier-account-grid { grid-template-columns: 1fr; }
  .supplier-finance-depth { grid-template-columns: 1fr; }
  .operations-grid { grid-template-columns: 1fr; }
  .renderer-fleet-legend, .renderer-node-item { grid-template-columns: minmax(170px, 1.1fr) minmax(190px, 1.2fr) 90px 130px 70px; }
  .operations-runtime-panel, .operations-evidence-panel { min-height: auto; }
  .demo-config-form { padding-right: 0; padding-bottom: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .review-queue-panel, .review-action-panel, .provider-cost-panel, .partner-panel { min-height: auto; }
  .finance-lower-grid { grid-template-columns: 1fr; }
  .task-danger-zone { grid-template-columns: 1fr 1fr; }
  .control-catalog, .control-request-panel { min-height: auto; }
  .approval-actions { grid-template-columns: 1fr 1fr; }
  .approval-actions label, .approval-actions .execute-button { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --rail: 0px; }
  .rail { position: fixed; inset: auto 0 0; width: 100%; height: 68px; padding: 7px 8px; border: 0; border-top: 1px solid var(--line); }
  .brand, .rail-foot { display: none; }
  .primary-nav { grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); grid-template-columns: none; gap: 2px; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .nav-item { display: grid; place-items: center; padding: 5px 2px; text-align: center; }
  .nav-item > span { grid-row: auto; font-size: 15px; }
  .nav-item b { font-size: 8px; white-space: nowrap; }
  .nav-item small { display: none; }
  .workspace { margin: 0; padding: 0 14px 92px; }
  .topbar { min-height: 73px; }
  .eyebrow { display: none; }
  .topbar h1 { font-size: 16px; }
  .window-select { font-size: 0; }
  .chip { display: none; }
  .intro-row { align-items: start; padding-top: 24px; }
  .as-of { max-width: 135px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-card { min-height: 105px; }
  .pulse-track { grid-template-columns: 1fr 1fr; }
  .queue-forecast { grid-template-columns: 1fr 1fr; }
  .queue-forecast .forecast-primary { grid-column: 1 / -1; }
  .two-column, .lower-grid { grid-template-columns: 1fr; }
  .rate-pair { grid-template-columns: 1fr; }
  .metric-grid.compact { grid-template-columns: repeat(2, 1fr); }
  .feedback-workspace { grid-template-columns: 1fr; }
  .feedback-queue, .feedback-thread-panel { min-height: auto; }
  .feedback-admin-form fieldset { grid-template-columns: 1fr 1fr; }
  .feedback-admin-form fieldset label:nth-of-type(3), .feedback-admin-form button { grid-column: 1 / -1; }
  .control-workspace { grid-template-columns: 1fr; }
  .release-center-heading { align-items: stretch; flex-direction: column; }
  .release-center-heading .text-button { width: 100%; }
  .release-action { min-height: 44px; }
  .release-rail { grid-template-columns: 1fr; }
  .release-rail::before { top: 8%; bottom: 8%; left: 26px; right: auto; width: 1px; height: auto; }
  .release-workshop, .release-history-grid { grid-template-columns: 1fr; }
  .release-panel { min-height: auto; }
  .release-form, .release-delta-grid { grid-template-columns: 1fr; }
  .release-form .wide, .release-secondary-action { grid-column: auto; }
  .release-delta-grid > section { min-height: auto; }
  .control-catalog, .control-request-panel { min-height: auto; }
  .approval-list { grid-template-columns: 1fr; }
  .approval-actions { grid-template-columns: 1fr 1fr; }
  .approval-actions label, .approval-actions .execute-button { grid-column: 1 / -1; }
  .audit-item { grid-template-columns: 36px 1fr; }
  .audit-item code { grid-column: 2; }
  .ops-summary { grid-template-columns: 1fr; }
  .review-workspace, .finance-workspace, .finance-lower-grid { grid-template-columns: 1fr; }
  .demo-config-form input { height: 44px; }
  .demo-account-actions button { min-height: 44px; }
  .supplier-finance-heading { align-items: stretch; flex-direction: column; }
  .supplier-finance-heading h2 { font-size: 18px; }
  .supplier-finance-heading p:last-child { font-size: 12px; }
  .supplier-finance-heading .text-button { min-height: 44px; text-align: left; }
  .supplier-finance-center .section-kicker, .supplier-finance-center .control-note,
  .supplier-finance-heading .text-button, .supplier-finance-center .control-placeholder { font-size: 11px; }
  .supplier-scope-ledger, .supplier-monthly-analysis { grid-template-columns: 1fr; }
  .supplier-scope-ledger span { font-size: 12px; }
  .supplier-scope-ledger strong { font-size: 13px; }
  .supplier-scope-ledger small { font-size: 11px; white-space: normal; }
  .supplier-safety-note, .supplier-status-key { font-size: 11px; }
  .supplier-status-key { justify-content: flex-start; overflow-x: auto; }
  .supplier-account-card > header span, .supplier-account-card > header b { font-size: 11px; }
  .supplier-account-card > header strong { font-size: 15px; }
  .supplier-balance-copy span, .supplier-balance-copy small { font-size: 11px; }
  .supplier-component-list span, .supplier-account-meta span { font-size: 11px; }
  .supplier-component-list b { font-size: 12px; }
  .supplier-component-list p { font-size: 11px; }
  .supplier-account-actions button { min-height: 44px; font-size: 12px; }
  .supplier-threshold-form { grid-template-columns: 1fr; }
  .supplier-threshold-form label, .supplier-threshold-form p { font-size: 11px; }
  .supplier-threshold-form button, .supplier-threshold-form p { grid-column: auto; min-height: 44px; }
  .supplier-threshold-form button { font-size: 12px; }
  .supplier-threshold-form p { min-height: 12px; }
  .supplier-threshold-form input, .supplier-monthly-panel input { min-height: 44px; font-size: 12px; }
  .supplier-monthly-panel header span, .supplier-alert-panel header span,
  .supplier-monthly-panel label, .supplier-alert-panel header b { font-size: 11px; }
  .supplier-monthly-panel h3, .supplier-alert-panel h3 { font-size: 14px; }
  .supplier-monthly-analysis span, .supplier-monthly-analysis small,
  .supplier-monthly-analysis > p { font-size: 11px; }
  .supplier-monthly-analysis strong { font-size: 15px; }
  .supplier-alert-item strong, .supplier-alert-item span,
  .supplier-alert-item time, .supplier-alert-item b { font-size: 11px; }
  .operations-grid { grid-template-columns: 1fr; }
  .operations-metric-grid, .operations-workload { grid-template-columns: 1fr 1fr; }
  .operations-alert-head { display: none; }
  .operations-alert-item { grid-template-columns: 1fr 1fr; }
  .operations-alert-copy { grid-column: 1 / -1; }
  .operations-alert-item a { min-height: 44px; }
  .renderer-fleet-legend { display: none; }
  .renderer-node-item { grid-template-columns: 1fr auto; gap: 10px 14px; }
  .renderer-node-item > div:nth-of-type(2), .renderer-node-item > div:nth-of-type(3), .renderer-node-item time { grid-column: 1 / -1; }
  .renderer-node-item > div:nth-of-type(2), .renderer-node-item > div:nth-of-type(3) { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .renderer-node-item > div:nth-of-type(2) span, .renderer-node-item > div:nth-of-type(3) span { margin-top: 0; }
  .renderer-node-item > b { grid-column: 2; grid-row: 1; }
  .task-control-form, .partner-create-form, .settlement-form { grid-template-columns: 1fr; }
  .task-control-form .wide, .partner-create-form .wide, .partner-create-form label:nth-of-type(3), .partner-create-form button, .settlement-form .form-message { grid-column: auto; }
  .task-danger-zone { grid-template-columns: 1fr; }
  .cost-summary { grid-template-columns: 1fr; }
}

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

/* Directory controls use the existing control-room palette. */
.directory-panel, .directory-detail { margin-bottom: 18px; }
.directory-detail[hidden] { display: none; }
.directory-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.directory-filters label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; flex: 1 1 140px; }
.directory-filters .search-wide { flex: 2 1 240px; }
.directory-filters input, .directory-filters select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; color: var(--text); background: var(--stage); border: 1px solid var(--line); border-radius: 7px; font: inherit; }
.directory-panel button, .directory-detail button { min-height: 38px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--slate); color: var(--text); cursor: pointer; }
.directory-panel button[type="submit"], #user-tasks { background: var(--ember); color: #141414; border-color: var(--ember); font-weight: 650; }
.directory-panel button:disabled, .directory-detail button:disabled { opacity: .45; cursor: not-allowed; }
.directory-panel button:hover:not(:disabled), .directory-detail button:hover:not(:disabled) { border-color: var(--ember); }
.directory-panel :focus-visible, .directory-detail :focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.directory-panel [role="status"] { color: var(--muted); font-size: 12px; min-height: 18px; margin: 16px 0 10px; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.data-table th { color: var(--muted); font-weight: 500; white-space: nowrap; padding: 12px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); max-width: 250px; overflow-wrap: anywhere; }
.data-table td small { display: block; color: var(--muted); font-size: 10px; margin-top: 6px; }
.data-table .table-action { white-space: nowrap; color: var(--ember); background: transparent; }
.pagination { display: flex; justify-content: end; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; }
.pagination > span { margin-right: auto; color: var(--muted); }
.detail-grid { display: grid; grid-template-columns: 100px minmax(0, 1fr) 100px minmax(0, 1fr); gap: 14px 20px; font-size: 12px; }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { margin: 0; overflow-wrap: anywhere; }
.directory-detail h3 { font-size: 14px; margin-top: 24px; }
.directory-detail p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.record-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; overflow-wrap: anywhere; }
.record-row small { color: var(--muted); }
.sensitive-note { border-top: 1px solid var(--line); margin-top: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 720px) { .detail-grid { grid-template-columns: 90px minmax(0, 1fr); } .directory-filters button { flex: 1 1 120px; } }