:root {
  color-scheme: dark;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #050a12;
  color: #e8f2ff;
  --line: #20334b;
  --muted: #7188a4;
  --cyan: #61d9f4;
  --panel: rgba(7, 17, 31, .82);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 1080px; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #102746 0, #07111f 42%, #03060c 100%); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1480px, 100%); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; }
.topbar { height: 74px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(4, 12, 23, .9); backdrop-filter: blur(16px); }
.brand { display: flex; gap: 12px; align-items: center; letter-spacing: .08em; }
.brand-mark { width: 38px; height: 38px; border: 1px solid #52c8ff; color: #7ddcff; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 0 22px rgba(69, 202, 255, .4); font-weight: 700; }
.brand strong { display: block; font-size: 16px; }.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: .13em; }
.status-wrap { display: flex; align-items: center; gap: 8px; color: #8aa1bd; font-size: 12px; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #f1b955; box-shadow: 0 0 10px #f1b955; }.status-dot.online { background: #48e0a4; box-shadow: 0 0 10px #48e0a4; }.status-dot.offline { background: #ff687d; box-shadow: 0 0 10px #ff687d; }
.model-picker { padding-left: 10px; border-left: 1px solid #31445e; }.model-picker select, .model-custom { max-width: 190px; border: 1px solid #28435e; border-radius: 7px; background: #07111f; color: #a9bfd7; padding: 5px 8px; font-size: 11px; }.model-picker select:focus, .model-custom:focus { outline: none; border-color: var(--cyan); }.model-custom { width: 150px; }
.main { flex: 1; display: flex; flex-direction: column; padding: 20px 24px 18px; }.hidden { display: none !important; }.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; }
.setup-notice { border: 1px solid #71562b; background: rgba(99, 70, 25, .25); color: #ffd995; border-radius: 12px; padding: 13px 16px; margin-bottom: 16px; font-size: 13px; }.setup-notice p { margin: 7px 0 0; color: #d6ba7b; }.login-form { display: flex; gap: 10px; margin-top: 14px; }.login-form input { flex: 1; min-width: 0; padding: 12px; border: 1px solid #31506d; border-radius: 8px; background: #07111f; color: #e8f2ff; }.login-form button { padding: 0 20px; border: 0; border-radius: 8px; background: #55d8f6; color: #032033; font-weight: 700; }.login-error { min-height: 1.2em; color: #ff8794; }
.workspace { min-height: calc(100vh - 112px); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(350px, .9fr); gap: 16px; }
.chat-panel, .ops-panel { min-height: 0; border: 1px solid rgba(40, 67, 94, .8); background: var(--panel); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .24); }.chat-panel { display: flex; flex-direction: column; padding: 20px 22px 16px; }.ops-panel { display: flex; flex-direction: column; padding: 18px; overflow: hidden; }
.panel-heading, .ops-heading, .trace-heading, .dock-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.panel-heading h1, .ops-heading h2 { margin: 4px 0 0; font-size: 17px; font-weight: 600; }.eyebrow { color: #56d5ef; font-size: 9px; letter-spacing: .18em; }.live-pill, .ops-state { padding: 6px 9px; border: 1px solid #24536a; border-radius: 99px; color: #7ee4c1; font-size: 10px; white-space: nowrap; }.live-pill span { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #48e0a4; }
.messages { flex: 1; min-height: 260px; overflow-y: auto; padding: 22px 2px 18px; display: flex; flex-direction: column; gap: 14px; }.message { max-width: 80%; padding: 13px 16px; border-radius: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; font-size: 14px; }.message.assistant { align-self: flex-start; border: 1px solid #24415c; background: rgba(13, 31, 51, .74); }.message.user { align-self: flex-end; border: 1px solid #176e86; background: linear-gradient(135deg, #0c546e, #123657); }.message .label { margin-bottom: 5px; color: #72d9ff; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }.message.user .label { color: #8de5d0; }
.composer { display: flex; gap: 12px; align-items: stretch; }.composer textarea { flex: 1; resize: none; border: 1px solid #28435e; border-radius: 12px; outline: none; background: rgba(4, 13, 24, .88); color: #f0f6ff; padding: 13px 14px; line-height: 1.5; }.composer textarea:focus, .compact-form input:focus, .compact-form textarea:focus, .compact-form select:focus, .delegate-form textarea:focus, .delegate-form select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(67, 200, 238, .12); outline: none; }.composer button { width: 98px; border: 1px solid #3bd0e5; border-radius: 12px; color: #04121e; background: #6ce0f1; font-weight: 700; }.composer button:disabled, button:disabled { opacity: .45; cursor: wait; }.composer kbd { display: block; margin-top: 6px; color: #1b5968; font-size: 9px; font-weight: 400; }.hint { margin-top: 9px; color: #56708d; text-align: right; font-size: 11px; }
.ops-heading { flex: 0 0 auto; }.ops-tabs { display: flex; gap: 4px; padding: 12px 0 10px; border-bottom: 1px solid #20334b; }.ops-tab-button { flex: 1; padding: 8px 6px; border: 0; border-radius: 7px; background: transparent; color: #7188a4; font-size: 11px; }.ops-tab-button.active { background: #12324b; color: #8be7fb; }.ops-tab-content { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 2px; }.table-stage { position: relative; min-height: 224px; margin-bottom: 12px; border: 1px solid #1e4057; border-radius: 18px; background: radial-gradient(circle, rgba(26, 102, 129, .42), rgba(6, 17, 31, .9) 63%); overflow: hidden; }.table-glow { position: absolute; inset: 20% 16%; border-radius: 50%; background: rgba(69, 213, 239, .1); filter: blur(24px); }.table-core { position: absolute; inset: 70px 24%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border: 1px solid #2c7184; border-radius: 50%; background: rgba(3, 14, 26, .82); text-align: center; }.table-core span { color: #6f95ae; font-size: 9px; letter-spacing: .13em; }.table-core strong { max-width: 170px; margin-top: 7px; color: #d9f6ff; font-size: 13px; font-weight: 500; }.table-seats { position: absolute; inset: 10px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; align-content: space-between; pointer-events: none; }.seat-card { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px; border: 1px solid #285b71; border-radius: 10px; background: rgba(7, 22, 37, .92); color: #e5f7ff; text-align: left; pointer-events: auto; }.seat-card:nth-child(even) { justify-content: flex-end; text-align: right; }.seat-card strong, .seat-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.seat-card strong { font-size: 10px; }.seat-card small { color: #7194ae; font-size: 9px; }.seat-avatar, .provider-icon { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border: 1px solid #3aa9c3; border-radius: 50%; color: #8de9ff; background: #0b3045; font-size: 11px; }
.trace-heading { margin-bottom: 8px; color: #d9f3ff; font-size: 11px; }.muted { color: #6d849b; font-size: 10px; }.decision-trace { display: flex; flex-direction: column; gap: 9px; }.empty-state { padding: 14px; border: 1px dashed #31536d; border-radius: 9px; color: #708aa4; font-size: 11px; }.trace-item { display: grid; grid-template-columns: 12px 1fr; gap: 8px; padding: 9px; border-left: 1px solid #2e6277; background: rgba(14, 34, 52, .56); border-radius: 0 8px 8px 0; }.trace-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #62d9ed; box-shadow: 0 0 8px #62d9ed; }.trace-item strong, .trace-item small { display: block; }.trace-item strong { color: #ccefff; font-size: 11px; }.trace-item small { color: #6d94aa; font-size: 9px; }.trace-item p, .decision-card p, .delegation-item p { margin: 6px 0 0; color: #a9bfd1; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }.decision-card { padding: 10px; border: 1px solid #5b7c3b; border-radius: 9px; background: rgba(47, 79, 39, .24); }.decision-card span { color: #b9e691; font-size: 10px; letter-spacing: .08em; }
.compact-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }.compact-form label, .tab-intro { display: flex; flex-direction: column; gap: 5px; color: #94b1c7; font-size: 10px; }.compact-form input, .compact-form select, .compact-form textarea, .delegate-form textarea, .delegate-form select { width: 100%; border: 1px solid #28435e; border-radius: 8px; background: #07111f; color: #e8f2ff; padding: 8px 9px; font-size: 11px; }.primary-action, .secondary-action { width: 100%; padding: 9px; border: 1px solid #3bd0e5; border-radius: 8px; background: #52cfe7; color: #04121e; font-weight: 700; font-size: 11px; }.secondary-action { background: #16384c; color: #a7e5f4; }.agent-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }.agent-check { display: flex; gap: 6px; align-items: center; padding: 6px; border: 1px solid #24445d; border-radius: 7px; background: rgba(8, 24, 40, .7); }.agent-check input { accent-color: #50d1e8; }.agent-check strong, .agent-check small { display: block; }.agent-check strong { color: #c5eafa; font-size: 10px; }.agent-check small { color: #6e8da4; font-size: 8px; }
.tab-intro { margin-bottom: 10px; }.tab-intro strong { color: #d4f2ff; font-size: 12px; }.tab-intro span { color: #6d849b; line-height: 1.5; }.org-tree { display: flex; flex-direction: column; gap: 10px; }.org-group h3 { margin: 0 0 5px; color: #67d7ec; font-size: 10px; font-weight: 500; }.org-members { display: flex; flex-direction: column; gap: 5px; }.org-member { display: flex; align-items: center; gap: 8px; padding: 7px; border: 1px solid #24445d; border-radius: 8px; background: rgba(8, 24, 40, .7); }.org-member strong, .org-member small { display: block; }.org-member strong { color: #caeaf4; font-size: 10px; }.org-member small { margin-top: 2px; color: #6d8ba2; font-size: 8px; }.org-member .agent-status { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #f1b955; }.org-member .agent-status.idle { background: #5a87a4; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.wide-field { grid-column: 1 / -1; }
.provider-grid { display: flex; flex-direction: column; gap: 7px; }.provider-card { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid #24445d; border-radius: 9px; background: rgba(8, 24, 40, .7); }.provider-info { min-width: 0; flex: 1; }.provider-info strong, .provider-info small { display: block; }.provider-info strong { color: #d3f1ff; font-size: 11px; }.provider-info small { margin-top: 3px; overflow: hidden; color: #6e8da4; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.provider-status { padding: 4px 6px; border-radius: 5px; background: #2e3c46; color: #91a4af; font-size: 9px; }.provider-status.ready { background: #214d42; color: #8fe8c1; }.provider-note { margin-top: 12px; color: #70899f; font-size: 10px; line-height: 1.55; }
.command-dock { flex: 0 0 auto; margin-top: 10px; padding-top: 12px; border-top: 1px solid #20334b; }.dock-heading { margin-bottom: 7px; color: #d4f2ff; font-size: 11px; }.delegate-form { display: flex; flex-direction: column; gap: 7px; }.delegate-form textarea { resize: vertical; min-height: 54px; }.delegate-log { display: flex; flex-direction: column; gap: 6px; max-height: 130px; margin-top: 8px; overflow-y: auto; }.delegation-item { padding: 8px; border-left: 2px solid #55d8f6; background: rgba(17, 43, 60, .58); border-radius: 0 7px 7px 0; }.delegation-item.blocked { border-left-color: #f18484; }.delegation-item div { display: flex; justify-content: space-between; }.delegation-item strong { color: #c9edfa; font-size: 10px; }.delegation-item small { color: #7e9bb0; font-size: 9px; }
@media (max-width: 1120px) { body { min-width: 0; }.workspace { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr); }.topbar { padding: 0 16px; }.main { padding-left: 14px; padding-right: 14px; } }
@media (max-width: 820px) { .workspace { display: flex; flex-direction: column; }.chat-panel { min-height: 540px; }.ops-panel { min-height: 720px; }.status-text { display: none; } }