:root { color-scheme: light; --bg:#f8f9fb; --ink:#202936; --muted:#687383; --line:#e3e7ed; --accent:#345ddd; --soft:#eef2ff; font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-size:14px; line-height:1.55; }
[hidden] { display:none !important; } a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
button,input,textarea { font:inherit; } button,.button { cursor:pointer; border:1px solid var(--line); border-radius:7px; background:white; padding:9px 15px; color:var(--ink); font-weight:550; transition:background .15s, transform .15s; }
button:hover,.button:hover { background:#f0f3f9; text-decoration:none; } button:active { transform:translateY(1px); } button:disabled { opacity:.45; cursor:default; }
.primary { background:var(--accent); color:white; border-color:var(--accent); } .primary:hover { background:#284ab7; } :focus-visible { outline:3px solid #94acf8; outline-offset:3px; }
.sidebar { background:white; border-right:1px solid var(--line); width:238px; position:fixed; inset:0 auto 0 0; padding:30px 20px 22px; display:flex; flex-direction:column; }
.brand { display:flex; gap:12px; align-items:center; color:var(--ink); font-size:19px; font-weight:650; letter-spacing:-.6px; padding:0 7px; }
.brand:hover { text-decoration:none; } .brand-mark { font-family:Georgia,serif; font-size:32px; color:white; background:var(--accent); border-radius:11px; width:42px; height:44px; text-align:center; line-height:40px; }
.brand-sub { display:block; font-size:9px; letter-spacing:2.8px; color:var(--muted); margin-top:-3px; }
.workspace-label { border:1px solid var(--line); margin:31px 0 25px; padding:10px; border-radius:6px; font-size:12px; color:#596475; } .dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#4e9378; margin-right:8px; }
.nav-label,.small-label { font-size:10px; font-weight:650; color:var(--muted); letter-spacing:1.35px; } .nav-label { padding:0 12px; margin:14px 0 10px; } nav .nav-label { margin-top:32px; }
nav a { display:flex; align-items:center; gap:11px; color:#596475; padding:10px 12px; border-radius:6px; margin:3px 0; font-size:13px; } nav a>span:first-child { width:17px; font-size:20px; line-height:22px; }
nav a:hover { background:var(--bg); text-decoration:none; } nav a[aria-current="page"] { background:var(--soft); color:var(--accent); font-weight:600; } .nav-note { font-size:9px; margin-left:auto; color:var(--muted); }
.sidebar-bottom { margin-top:auto; border-top:1px solid var(--line); padding:20px 10px 0; font-size:11px; color:var(--muted); } #connections { margin:12px 0 22px; } .connection { display:flex; align-items:center; padding:4px 0; } .connection span:last-child { margin-left:auto; font-size:10px; } .dot.bad { background:#c58136; }
.workspace { margin-left:238px; min-height:100vh; display:flex; flex-direction:column; } .topbar { height:67px; flex-shrink:0; border-bottom:1px solid var(--line); background:white; display:flex; align-items:center; justify-content:space-between; padding:0 38px; font-size:12px; color:var(--muted); } .slash { margin:0 12px; color:#b9c0cd; } #breadcrumb { color:var(--ink); }
.mode,.tag { display:inline-block; font-size:10px; font-weight:550; background:#f1f3f6; color:#5b6677; border:1px solid var(--line); padding:3px 8px; border-radius:5px; } .mode::before { content:""; display:inline-block; width:5px; height:5px; background:var(--accent); border-radius:50%; margin-right:7px; }
main { padding:42px 44px; width:100%; max-width:1410px; margin:0 auto; flex:1; } .page-heading { display:flex; gap:20px; justify-content:space-between; align-items:center; margin-bottom:34px; } .eyebrow { color:var(--muted); font-size:10px; font-weight:600; letter-spacing:1.7px; margin:0 0 9px; }
h1 { font-size:32px; letter-spacing:-1px; line-height:1.2; margin:0 0 12px; font-weight:600; } h2 { font-size:23px; letter-spacing:-.6px; margin:0 0 10px; font-weight:600; } h3 { font-size:14px; margin:0 0 7px; } p { margin:0 0 12px; } .page-heading p:last-child { color:var(--muted); margin:0; }
.section-bar { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:15px 0; display:flex; align-items:center; justify-content:space-between; gap:10px; } .section-bar .tag { margin-left:12px; } .quiet { background:transparent; border:0; padding:3px 8px; color:var(--muted); font-size:12px; }
.helper { font-size:12px; color:var(--muted); margin:12px 0 16px; } .table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; text-align:left; } th { font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); padding:12px; font-weight:600; border-bottom:1px solid var(--line); }
td { border-bottom:1px solid var(--line); padding:20px 12px; font-size:12px; vertical-align:top; } td:first-child { width:45%; } tr:hover td { background:#f1f4f9; } .document-title { border:0; background:none; padding:0; text-align:left; font-size:14px; font-weight:600; color:var(--ink); } .document-title:hover { color:var(--accent); background:none; }
.excerpt { color:var(--muted); margin:5px 0 0; max-width:420px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tag-list { display:flex; gap:4px; flex-wrap:wrap; } .tag-list .tag { font-size:10px; } .pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; font-size:12px; color:var(--muted); } .pagination button { padding:6px 10px; font-size:11px; margin-left:6px; }
.state { padding:66px 20px; text-align:center; color:#556175; border-bottom:1px solid var(--line); } .state span { display:block; font-size:12px; color:var(--muted); margin-top:8px; } .footnote { font-size:11px; color:var(--muted); margin:24px 0; }
footer { padding:20px 44px; font-size:11px; color:var(--muted); display:flex; justify-content:space-between; border-top:1px solid var(--line); }
input,textarea { display:block; width:100%; border:1px solid #d6dce6; border-radius:6px; padding:10px 12px; background:white; color:var(--ink); } textarea { resize:vertical; } input::placeholder,textarea::placeholder { color:#929baa; } label { display:block; font-size:12px; color:#536074; font-weight:550; } label input,label textarea { margin-top:7px; font-weight:400; }
.search-box { display:flex; align-items:center; background:white; border:1px solid #c9d2e4; border-radius:9px; padding:7px 8px 7px 17px; margin-top:8px; box-shadow:0 3px 8px #26324a05; } .search-box>span { font-size:28px; color:#7b8cae; } .search-box input { border:0; padding:10px 13px; font-size:15px; min-width:0; } .search-box button { white-space:nowrap; }
summary { cursor:pointer; color:#596881; font-size:12px; padding:12px 0; } .filters { margin:10px 0; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .full { grid-column:1 / -1; }
.result { padding:24px 0; border-bottom:1px solid var(--line); animation:appear .2s ease-out; } .result-top { display:flex; justify-content:space-between; align-items:center; gap:20px; } .score { font:11px ui-monospace,monospace; color:var(--muted); } .result p { color:#5b6677; white-space:pre-wrap; overflow-wrap:anywhere; margin:10px 0 13px; max-width:900px; } .result-meta { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:11px; }
.context { margin-top:20px; border-top:1px solid var(--line); } pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:16px; background:#edf0f5; font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; border-radius:6px; max-height:450px; overflow:auto; } code { font-size:11px; overflow-wrap:anywhere; }
.info-line { display:flex; gap:25px; padding:18px 20px; background:var(--soft); border-left:3px solid #8ca4ef; margin-bottom:30px; color:#56698e; font-size:12px; } .info-line strong { white-space:nowrap; color:#3d568d; } .cache-entry { padding:16px 0; border-bottom:1px solid var(--line); } .cache-entry summary { display:flex; align-items:center; justify-content:space-between; gap:16px; } .cache-entry summary>div { min-width:0; } .cache-entry code { display:block; color:var(--muted); font-size:10px; margin-top:6px; } .ttl { white-space:nowrap; color:#3e785f; background:#edf5ef; padding:4px 9px; border-radius:5px; font-size:11px; } .ttl.expired { background:#f4efe8; color:#947346; }
.server-row { display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--line); padding:18px 0; }
.server-row span { color:var(--accent); text-align:right; }
.server-actions { display:flex; flex-wrap:wrap; gap:10px; margin:25px 0 12px; }
.elastic-intro { display:flex; gap:25px; align-items:center; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .elastic-symbol { font-size:58px; color:var(--accent); } .elastic-intro p { color:var(--muted); max-width:630px; margin:0; } .steps { padding-left:25px; max-width:850px; } .steps li { padding:20px 0 8px 12px; } .steps li::marker { color:var(--accent); font-weight:600; } .steps p { color:var(--muted); font-size:13px; }
dialog { width:min(660px, calc(100vw - 32px)); border:1px solid var(--line); border-radius:12px; padding:28px; color:var(--ink); max-height:90vh; overflow-y:auto; box-shadow:0 24px 100px #14233e30; } dialog::backdrop { background:#1c2a4355; } dialog[open] { animation:appear .18s ease-out; } .dialog-heading { display:flex; justify-content:space-between; gap:20px; margin-bottom:22px; } .icon-button { padding:0 7px; font-size:24px; line-height:30px; align-self:start; background:transparent; border:0; color:var(--muted); } .optional { font-weight:400; color:#929baa; margin-left:4px; } .dialog-actions { display:flex; justify-content:space-between; align-items:center; gap:15px; border-top:1px solid var(--line); padding-top:20px; margin-top:24px; } .dialog-actions span { color:var(--muted); font-size:11px; } .document-content { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; }
#notice { padding:12px 16px; border:1px solid #b9d5c5; background:#eff7f1; color:#376349; border-radius:6px; margin-bottom:25px; } #notice.error,.error { color:#a33434; background:#fff1f0; padding:12px; border-radius:6px; border-color:#eac6c4; } .error { margin-top:16px; font-size:12px; } .skip { position:fixed; top:-100px; z-index:10; background:white; padding:12px; } .skip:focus { top:0; }
@keyframes appear { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.rag-ingestion { display:grid; grid-template-columns:1fr 1fr; gap:32px; padding:18px 0; }
.rag-ingestion label { margin-top:14px; }
.file-picker { display:flex; align-items:center; gap:10px; min-height:42px; margin-top:7px; padding:5px 8px; border:1px dashed #c5cedd; border-radius:6px; background:white; transition:border-color .15s, background .15s; }
.file-picker.dragover { border-color:var(--accent); background:var(--soft); }
.file-picker .file-input { flex:1; min-width:0; width:auto; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--muted); font-size:12px; }
.file-input::file-selector-button { margin-right:10px; padding:7px 11px; border:1px solid var(--line); border-radius:5px; background:#f7f8fb; color:var(--ink); cursor:pointer; font:inherit; font-weight:550; }
.file-input::file-selector-button:hover { background:#edf1f8; }
.file-drop-hint { color:var(--muted); font-size:11px; white-space:nowrap; }
select { display:block; width:100%; font:inherit; margin-top:7px; padding:10px 12px; border:1px solid #d6dce6; border-radius:6px; background:white; color:var(--ink); }
.rag-question { margin-top:32px; }
.rag-answer { white-space:pre-wrap; overflow-wrap:anywhere; font-size:16px; line-height:1.8; margin:20px 0; }
.rag-evidence { border-bottom:1px solid var(--line); padding:12px 0; }
.rag-evidence blockquote { margin:12px 0; padding-left:16px; border-left:2px solid var(--line); white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); }
#detail-rag { margin-bottom:18px; }
.sidebar { gap:0; padding:22px 16px 16px; }
.sidebar .workspace-label { margin:18px 0 12px; padding:8px; }
.sidebar>.nav-label { margin:0 0 5px; }
.sidebar>.brand,.sidebar>.workspace-label,.sidebar>.nav-label,.sidebar-bottom { flex-shrink:0; }
.sidebar nav { flex:1; min-height:0; overflow-y:auto; }
.sidebar nav .nav-label { margin:12px 0 6px; }
.sidebar nav a { padding:8px 10px; margin:1px 0; font-size:12px; }
.sidebar nav a>span:first-child { line-height:18px; }
nav a>span.lab-number { font:11px ui-monospace,monospace; color:var(--muted); }
.sidebar-bottom { padding-top:12px; }
#connections { margin:6px 0 10px; }
.api-access summary { font-size:11px; padding:9px 0; }
.api-access input { font-size:11px; padding:7px; }
.api-access button { padding:5px 9px; font-size:11px; margin:8px 0; }
.api-access p { font-size:10px; }
.lab-document { max-width:740px; }
.lab-columns { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:32px; }
.lab-panel { padding:22px 0; min-width:0; }
.lab-panel h2 { font-size:18px; }
.lab-panel label+label,.lab-divider label+label { margin-top:14px; }
.lab-panel .form-grid label { margin-top:0; }
.lab-panel button[type=submit],.lab-panel>button,.lab-divider>button { margin-top:18px; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
.lab-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:17px 0; }
.lab-actions #detail-rag { margin:0; }
.lab-divider { border-top:1px solid var(--line); margin-top:24px; padding-top:24px; }
.check-label { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:400; margin:14px 0; }
.check-label input { width:auto; margin:0; flex-shrink:0; }
.lab-message { color:var(--muted); font-size:13px; margin:12px 0; overflow-wrap:anywhere; }
.lab-message:empty { display:none; }
.lab-message[data-error=true] { color:#a33434; }
.lab-message[data-busy=true] { color:var(--accent); }
.lab-output { min-width:0; }
.lab-output table td:first-child { width:auto; }
.lab-output td { padding:12px; }
.lab-output .state { padding:32px 12px; }
.lab-output h2 { font-size:18px; margin-top:24px; }
.lab-output h3 { margin-top:18px; }
.lab-output .result { padding:18px 0; }
.lab-output pre { max-height:350px; }
.lab-output .result-meta { flex-wrap:wrap; }
.code-input { font:12px/1.6 ui-monospace,monospace; tab-size:2; }
.lifecycle { list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin:22px 0 0; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; }
.lifecycle li { display:flex; gap:14px; align-items:center; }
.lifecycle li:not(:last-child)::after { content:'›'; color:#929baa; }
.lifecycle [aria-current=step] { color:var(--accent); font-weight:650; }
.evaluation-case { padding:22px 0; border-bottom:1px solid var(--line); }
.evaluation-case legend { font-size:15px; font-weight:600; padding-top:20px; }
.evaluation-case .remove-case { margin-top:12px; }
.status-text { font-weight:600; color:var(--ink); }
.status-text[data-tone=good] { color:#376349; }
.status-text[data-tone=bad] { color:#a33434; }
.status-text[data-tone=pending] { color:#836325; }
.graph-relationship { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0; font-weight:550; }
.graph-relationship span { font-size:12px; color:var(--muted); font-weight:400; }
.agent-answer { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; font-size:15px; }
.approval-review { padding:20px; background:#fff; border:1px solid var(--line); margin:20px 0; }
.approval-review h2 { font-size:18px; }
.approval-review blockquote { margin:12px 0; color:var(--muted); white-space:pre-wrap; }
.run-loader { display:flex; gap:10px; align-items:end; margin:22px 0; }
.run-loader label { flex:1; min-width:0; }
.run-id { font:12px ui-monospace,monospace; }
.run-loader button { flex-shrink:0; }
.lab-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.lab-toolbar h2 { margin:0; font-size:18px; }
.trace-summary { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; }
@media (max-width:1000px) { .lab-columns { grid-template-columns:1fr; gap:10px; } }
@media (max-width:700px) { .sidebar nav { flex:none; overflow-x:auto; overflow-y:hidden; } .lab-actions { align-items:stretch; } .run-loader { flex-wrap:wrap; } .run-loader label { flex-basis:100%; } .lab-panel .form-grid { grid-template-columns:1fr; } }
@media (max-width:700px) { .sidebar .sidebar-bottom { display:block; border:0; padding:0; } .sidebar-bottom>.small-label,.sidebar-bottom>#connections,.sidebar-bottom>a { display:none; } .api-access summary { padding:5px 8px 0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
@media (max-width:700px) { .rag-ingestion { grid-template-columns:1fr; gap:24px; } }
@media (min-width:1500px) { main { padding-top:55px; } }
@media (max-width:1000px) { .sidebar { width:205px; padding:25px 12px; } .workspace { margin-left:205px; } main { padding:30px 25px; } .topbar { padding:0 25px; } .nav-note { display:none; } }
@media (max-width:700px) { .sidebar { position:static; width:auto; padding:16px; border-right:0; border-bottom:1px solid var(--line); } .brand { font-size:17px; } .brand-mark { width:35px; height:36px; font-size:27px; line-height:32px; } .workspace-label,.nav-label,.sidebar-bottom { display:none; } nav { display:flex; gap:4px; overflow:auto; margin-top:16px; } nav a { font-size:11px; padding:8px; white-space:nowrap; } nav a>span:first-child { display:none; } .workspace { margin-left:0; } .topbar { padding:0 18px; height:52px; font-size:11px; } main { padding:28px 18px; } h1 { font-size:28px; } .page-heading { align-items:flex-start; flex-direction:column; gap:18px; margin-bottom:25px; } th,td { padding:12px 8px; } table { min-width:610px; } .search-box { padding-left:10px; } .search-box input { font-size:13px; padding:10px; } .search-box button { padding:9px 10px; } .form-grid { grid-template-columns:1fr; } .info-line { flex-direction:column; gap:7px; } .dialog-actions { align-items:flex-start; flex-direction:column; } footer { padding:18px; font-size:10px; } .elastic-symbol { display:none; } .elastic-intro { padding:24px 0; } dialog { padding:22px; } .cache-entry summary { align-items:flex-start; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
/* Voice uses the same quiet workspace, with recording state as its visual focus. */
.voice-recorder { padding: 20px 0; border-top: 1px solid var(--line, #dfe4ec); border-bottom: 1px solid var(--line, #dfe4ec); margin: 20px 0; }
.voice-recording-line, .voice-options, .voice-save-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.voice-recording-line { margin-bottom: 16px; }
#voice-state { font-weight: 650; min-width: 105px; }
#voice-state.recording { color: #b32737; }
#voice-state.recording::before { content: ''; display: inline-block; width: 8px; height: 8px; background: currentColor; border-radius: 50%; margin-right: 8px; }
#voice-level { width: 100px; height: 12px; }
.voice-options { margin-top: 18px; }
.voice-options label { margin: 0; }
.voice-options .check { display: flex; align-items: center; gap: 8px; }
.voice-options input[type="checkbox"] { width: auto; }
.voice-import { margin: 14px 0; }
.voice-import summary { cursor: pointer; }
.voice-import .file-picker { margin-top: 12px; }
.voice-notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.voice-notes-grid > div { min-width: 0; }
.voice-notes-grid textarea { width: 100%; min-height: 300px; line-height: 1.65; resize: vertical; }
.voice-notes-grid .section-bar { min-height: 78px; flex-wrap: wrap; gap: 8px; }
.voice-notes-grid .section-bar label { margin: 0; }
.voice-save-row { align-items: end; margin: 24px 0 16px; }
.voice-save-row label { flex: 1; max-width: 480px; margin: 0; }
#voice-message.error { color: #ae2636; }
@media (max-width: 760px) {
  .voice-notes-grid { grid-template-columns: 1fr; gap: 8px; }
  .voice-save-row { align-items: stretch; flex-direction: column; }
  .voice-save-row label { max-width: none; }
  .voice-import input { max-width: 100%; }
}