:root { --ink: #1c1c1c; --muted: #6b6b6b; --line: #e3e3e3; --bg: #fafafa; --accent: #1f5fbf; --bad: #b3261e; --ok: #1e7f4f; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
header { display: flex; gap: 1.5rem; align-items: center; padding: .6rem 1.2rem; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
header .user-menu { margin-left: auto; }
/* Pages in a left sidebar; on a narrow screen it becomes a scrollable row. */
.layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); align-items: start; }
.layout > * { min-width: 0; }
#nav { display: flex; flex-direction: column; gap: .1rem; padding: 1rem .6rem; position: sticky; top: 3.2rem; }
#nav a { color: var(--muted); text-decoration: none; padding: .45rem .7rem; border-radius: 6px; border-left: 3px solid transparent; }
#nav a:hover { background: #f0f0f0; color: var(--ink); }
#nav a.active { color: var(--ink); background: #fff; border-left-color: var(--accent); font-weight: 600; }
@media (max-width: 760px) { header { flex-wrap: wrap; gap: .6rem 1rem; } .layout { grid-template-columns: minmax(0, 1fr); } #nav { flex-direction: row; overflow-x: auto; position: static; padding: .4rem .6rem; border-bottom: 1px solid var(--line); } #nav a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; border-radius: 0; } #nav a.active { border-bottom-color: var(--accent); background: none; } }
header .brand { display: inline-flex; align-items: center; gap: .5rem; }
/* The person menu matches data.nua.space's and monitor.nua.space's. */
.user-menu { margin-left: auto; position: relative; }
.user-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 999px; padding: 3px 3px 3px 12px; cursor: pointer; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { border-color: var(--line); background: #f1f1f1; }
.user-name { font-weight: 600; }
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: #0f766e; color: #fff; font-size: 12px; font-weight: 700; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #fff; box-shadow: 0 8px 24px rgb(16 24 40 / 0.14); z-index: 30; }
.user-dropdown > * + * { margin-top: 4px; }
#environments { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: .8rem; }
#environments .env { padding: .15rem .7rem; color: var(--muted); text-decoration: none; }
#environments a.env:hover { background: #f4f4f4; color: var(--ink); }
#environments .env.current { color: #fff; background: var(--muted); font-weight: 600; }
body[data-environment="production"] header { border-bottom: 3px solid var(--bad); }
body[data-environment="production"] #environments .env.current { background: var(--bad); }
body[data-environment="staging"] header { border-bottom: 3px solid #c58a00; }
body[data-environment="staging"] #environments .env.current { background: #c58a00; }
main { max-width: 1180px; padding: 1.2rem 1.6rem; min-width: 0; }
h1 { font-size: 1.3rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.05rem; margin: 1.4rem 0 .6rem; }
.muted { color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .8rem 1rem; }
.tile .n { font-size: 1.6rem; font-weight: 600; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: .85rem; background: #f4f4f4; }
tr:last-child td { border-bottom: 0; }
code { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f1f1; padding: 0 .25rem; border-radius: 3px; }
pre { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: #f4f4f4; padding: .6rem; border-radius: 6px; overflow: auto; max-height: 24rem; }
form.inline { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .8rem; margin: .6rem 0; }
form.inline label { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); gap: .2rem; }
input, select, textarea { font: inherit; padding: .35rem .5rem; border: 1px solid #c9c9c9; border-radius: 4px; min-width: 9rem; }
textarea { min-width: 24rem; min-height: 6rem; }
button { font: inherit; padding: .4rem .8rem; border-radius: 4px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
button.quiet { background: #fff; color: var(--accent); }
button.danger { background: #fff; color: var(--bad); border-color: var(--bad); }
button:disabled { opacity: .5; cursor: default; }
.pill { display: inline-block; padding: 0 .45rem; border-radius: 999px; font-size: .78rem; background: #ececec; }
.pill.ok { background: #dff3e7; color: var(--ok); }
.pill.bad { background: #f9dedc; color: var(--bad); }
.pill.warn { background: #fdefc7; color: #7a5300; }
#toast { position: fixed; right: 1rem; bottom: 1rem; background: var(--ink); color: #fff; padding: .6rem .9rem; border-radius: 6px; max-width: 32rem; white-space: pre-wrap; }
#toast.bad { background: var(--bad); }
.secret { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff8dc; border: 1px solid #e6d28a; padding: .6rem; border-radius: 6px; word-break: break-all; }
a.link { color: var(--accent); cursor: pointer; text-decoration: underline; }
.job-io { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.io-panel { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1rem; }
.io-panel > h3 { font-size: .85rem; margin: 0 0 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: .8rem; align-items: start; }
.preview { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .8rem; display: flex; flex-direction: column; gap: .65rem; }
.preview-heading, .preview-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.preview-heading strong { font-size: .85rem; font-weight: 500; }
.media-format { color: var(--muted); background: #f4f4f4; border-radius: 4px; padding: .15rem .4rem; font-size: .7rem; letter-spacing: .04em; }
.preview-load { display: flex; flex-direction: column; gap: .65rem; align-items: center; justify-content: center; min-height: 150px; width: 100%; padding: 1.4rem; color: var(--accent); background: #f6f8fc; border: 1px dashed #cdd8e8; border-radius: 6px; }
.preview-load:hover:not(:disabled) { background: #edf3fc; border-color: var(--accent); }
.preview-load:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.preview-load svg { width: 30px; height: 30px; }
.preview-slot { width: 100%; min-width: 0; border-radius: 6px; overflow: hidden; background: #f4f4f4; }
.preview .preview-slot:empty { display: none; }
.preview img, .preview video { display: block; width: 100%; max-height: 480px; object-fit: contain; }
.preview audio { display: block; width: 100%; }
.preview-meta { color: var(--muted); font-size: .78rem; }
.preview-details { color: var(--muted); font-size: .78rem; }
.preview-details summary { cursor: pointer; }
.model-fold summary { cursor: pointer; width: max-content; }
.preview-details dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .7rem; margin: .6rem 0 0; }
.preview-details dd { margin: 0; overflow-wrap: anywhere; }
.preview-details code { font-size: inherit; }
.preview-note, .preview-error, .empty-output { margin: 0; padding: 1rem; color: var(--muted); background: #f6f6f6; border-radius: 6px; font-size: .85rem; overflow-wrap: anywhere; }
.preview-error { color: var(--bad); }
.job-input-summary { margin-bottom: 1rem; }
.job-input-summary:last-child { margin-bottom: 0; }
.job-input-summary h4 { font-size: .8rem; margin: 0 0 .4rem; color: var(--muted); font-weight: 500; }
.prompt-block { margin-bottom: .8rem; }
.prompt-block:last-child { margin-bottom: 0; }
.prompt-block summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.prompt-copy, .prompt-excerpt { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font-size: 14px; margin: .35rem 0 0; }
.prompt-excerpt { display: block; }
.prompt-block[open] .prompt-excerpt { display: none; }
.parameter-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.parameter-tag { display: inline-flex; gap: .4rem; flex-wrap: wrap; background: #f6f6f6; border: 1px solid #ededed; border-radius: 5px; padding: .3rem .5rem; overflow-wrap: anywhere; max-width: 100%; font-size: .78rem; }
.parameter-tag span { color: var(--muted); }
.parameter-tag strong { font-weight: 500; }
.request-json { margin-top: 1.4rem; }
.request-json summary { cursor: pointer; font-size: 1.05rem; font-weight: 600; }
@media (max-width: 760px) { .job-io { grid-template-columns: minmax(0, 1fr); } }
.gap-top { margin-top: .8rem; }
/* Deactivated rows stay listed, greyed. */
tr.off td { color: var(--muted); opacity: .65; }
/* A form of a few labelled fields, one per row, label beside its field. */
form.stacked { max-width: 46rem; }
form.stacked label { display: grid; grid-template-columns: 15rem 1fr; align-items: center; gap: 1rem; margin: .4rem 0; }
form.stacked button[type=submit] { display: block; margin: .6rem 0 0 auto; }
/* A row's action buttons sit at its right edge. */
td:last-child:has(button) { text-align: right; white-space: nowrap; }
input.secret { -webkit-text-security: disc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* One item per line inside a cell (a key part and its hint, a model), never
   broken between its words; a wide table scrolls inside its box, so the
   page itself never scrolls sideways. */
td .line { white-space: nowrap; }
.scroll-x { overflow-x: auto; max-width: 100%; }

/* The Providers page hides deactivated rows unless "Show deactivated" is on. */
.hide-off tr.off{display:none}
/* A heading with a small switch on the right of the same line. */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
label.toggle{display:inline-flex;gap:.4rem;align-items:center;font-size:.85rem;color:var(--muted);cursor:pointer;white-space:nowrap}
/* Checkboxes keep their own size, not the text inputs' width and padding. */
input[type=checkbox]{min-width:0;padding:0;margin:0}
/* The small label in front of each line of a Models table Provider cell. */
.hint{display:inline-block;min-width:3.6em;font-size:12px}
/* A provider's key parts: names in one column, values aligned in the next.
   The names take at least the width of the longest, "asset library", so values
   start at the same place in every provider's row, not only within one. */
.key-grid{display:grid;grid-template-columns:minmax(6em,max-content) max-content;column-gap:.6rem;row-gap:.25rem;align-items:baseline;white-space:nowrap}
.key-grid code{justify-self:start}
/* A model id stays on one line, so its column widens to fit it. */
.nowrap{white-space:nowrap}
/* Playground: the form beside the request it builds; stacked when narrow. */
[hidden]{display:none!important}
.pg-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem;align-items:start}
.pg-form{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1rem;min-width:0}
.pg-form h3{font-size:.85rem;margin:1rem 0 .5rem;color:var(--muted);font-weight:600}
.pg-row{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.4rem .8rem;align-items:start;margin:.45rem 0}
.pg-row > span{color:var(--muted);font-size:.85rem;padding-top:.35rem}
.pg-row textarea,.pg-row select,.pg-row input{width:100%;min-width:0}
.pg-params{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.6rem .8rem}
.pg-param{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem;min-width:0}
.pg-param > span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.pg-param input,.pg-param select{width:100%;min-width:0}
.pg-size{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.pg-edges{display:flex;align-items:center;gap:.3rem}
.pg-edges input{width:6rem}
.pg-scales{display:flex;gap:.3rem}
.pg-param small,.pg-note{font-size:.75rem;line-height:1.35}
.pg-note{margin:.3rem 0;padding-left:1.1rem}
p.pg-note{padding-left:0}
.pg-summary{margin:.2rem 0 .6rem}
.pg-uploads{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
.pg-form button[type=submit]{display:block;margin:1rem 0 0 auto}
button.link-button{background:none;border:0;color:var(--bad);padding:0 .1rem;cursor:pointer}
.pg-preview{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem;min-width:0;position:sticky;top:4rem}
.pg-preview summary{cursor:pointer;font-weight:600;font-size:.85rem}
.pg-preview pre{max-height:32rem;margin:.5rem 0 0}
.pg-thread{display:flex;flex-direction:column;gap:.5rem;margin:.8rem 0}
.pg-message{border:1px solid var(--line);border-radius:8px;padding:.5rem .7rem;background:#fafafa}
.pg-message.user{background:#f6f8fc;border-color:#d8e2f2}
.pg-message > div,.pg-reply{white-space:pre-wrap;overflow-wrap:anywhere}
.pg-reply{max-width:28rem;max-height:9rem;overflow:auto;font-size:.85rem}
.pg-failure{color:var(--bad);font-size:.8rem;min-width:12rem;max-width:22rem;overflow-wrap:anywhere}
.pg-runs .parameter-tags{min-width:11rem}
.pg-runs .parameter-tag{white-space:nowrap}
.preview-inline{min-width:10rem}
.preview-load.small{min-height:0;padding:.5rem .7rem;flex-direction:row;font-size:.8rem}
.preview-load.small svg{width:18px;height:18px}
.preview-inline .preview-slot:empty{display:none}
.preview-inline img,.preview-inline video{display:block;max-width:18rem;max-height:14rem;object-fit:contain}
.preview-inline audio{display:block;width:16rem}
td details pre{max-width:28rem;max-height:16rem}
@media (max-width: 900px){.pg-layout{grid-template-columns:minmax(0,1fr)}.pg-preview{position:static}.pg-row{grid-template-columns:minmax(0,1fr)}.pg-row > span{padding-top:0}}

/* Playground chat: conversations on the left, the thread with its composer
   in the middle, settings on the right. Below 1100px the settings slide in
   over the thread; below 760px so do the conversations. */
main.wide { max-width: none; }
.chat { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 19rem; height: calc(100vh - 6rem); min-height: 30rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; position: relative; }
.chat.no-settings { grid-template-columns: 15rem minmax(0, 1fr); }
.chat.no-settings .chat-settings { display: none; }
.chat-side { display: flex; flex-direction: column; gap: .5rem; padding: .7rem; border-right: 1px solid var(--line); background: #f7f7f8; min-height: 0; }
.chat-new { width: 100%; text-align: left; }
.chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .1rem; min-height: 0; }
.chat-list-empty, .chat-side-note { font-size: .78rem; margin: .3rem; }
.chat-item { display: flex; align-items: center; border-radius: 6px; }
.chat-item:hover, .chat-item.active { background: #e9e9ec; }
.chat-item .chat-icon { visibility: hidden; }
.chat-item:hover .chat-icon, .chat-item.active .chat-icon { visibility: visible; }
.chat-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; background: none; border: 0; color: var(--ink); padding: .4rem .5rem; text-align: left; }
.chat-open > span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-icon { min-width: 0; padding: .15rem .4rem; border-color: transparent; background: none; color: var(--muted); line-height: 1.2; }
.chat-icon:hover { color: var(--ink); background: #e0e0e4; }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-main.dropping { outline: 2px dashed var(--accent); outline-offset: -6px; }
.chat-top { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-bottom: 1px solid var(--line); }
.chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-model { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.chat-side-toggle { display: none; }
.chat-thread { flex: 1; overflow-y: auto; padding: 1.2rem max(1rem, calc((100% - 48rem) / 2)); display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; }
.chat-empty { margin: auto; text-align: center; }
.chat-empty h2 { font-size: 1.3rem; }
.chat-msg { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.chat-msg.user { align-items: flex-end; }
.chat-bubble { background: #f0f2f6; border-radius: 16px; padding: .55rem .85rem; max-width: min(36rem, 85%); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-images { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.chat-images img { width: 7rem; height: 7rem; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.chat-chip { font-size: .75rem; color: var(--muted); background: #f0f2f6; border-radius: 999px; padding: .1rem .55rem; }
.chat-images-out { display: flex; flex-wrap: wrap; gap: .6rem; }
.chat-generated { margin: 0; max-width: min(28rem, 100%); }
.chat-generated img { display: block; max-width: 100%; max-height: 28rem; border-radius: 10px; border: 1px solid var(--line); background: #f4f4f4; }
.chat-generated figcaption { display: flex; align-items: center; gap: .5rem; font-size: .75rem; margin-top: .25rem; }
.chat-generated a.chat-action { text-decoration: none; }
.chat-actions { display: flex; gap: .2rem; min-height: 1.4rem; opacity: 0; transition: opacity .1s; }
.chat-msg:hover .chat-actions, .chat-msg:focus-within .chat-actions, .chat-msg:last-child .chat-actions { opacity: 1; }
.chat-action { min-width: 0; padding: .1rem .45rem; font-size: .78rem; background: none; border: 1px solid transparent; color: var(--muted); }
.chat-action:hover { border-color: var(--line); color: var(--ink); }
.chat-waiting { font-size: .9rem; }
.chat-cursor { display: inline-block; width: .5rem; height: 1rem; margin-left: .15rem; vertical-align: text-bottom; background: var(--ink); animation: chat-blink 1s steps(2) infinite; }
@keyframes chat-blink { 50% { opacity: 0; } }
.chat-failure { color: var(--bad); background: #fdf1f0; border: 1px solid #f3c8c4; border-radius: 8px; padding: .5rem .7rem; font-size: .85rem; overflow-wrap: anywhere; }
.chat-note { font-size: .8rem; }
.chat-details { font-size: .78rem; color: var(--muted); }
.chat-details summary { cursor: pointer; width: max-content; }
.chat-facts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .4rem 0; }
.chat-raw { max-height: 20rem; margin: .4rem 0 0; }
.chat-edit { width: min(36rem, 100%); display: flex; flex-direction: column; gap: .4rem; }
.chat-edit textarea { width: 100%; min-width: 0; }
.chat-edit-actions { display: flex; justify-content: flex-end; gap: .4rem; }
.chat-composer { padding: .5rem max(1rem, calc((100% - 48rem) / 2)) .7rem; border-top: 1px solid var(--line); }
.chat-attachments { display: flex; flex-wrap: wrap; gap: .4rem; }
.chat-attachments:not(:empty) { margin-bottom: .4rem; }
.chat-thumb { position: relative; }
.chat-thumb img { width: 4rem; height: 4rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.chat-thumb.uploading img { opacity: .4; }
.chat-thumb button { position: absolute; top: -.4rem; right: -.4rem; min-width: 0; padding: 0 .35rem; border-radius: 999px; font-size: .75rem; line-height: 1.3; background: var(--ink); border-color: var(--ink); }
.chat-input { display: flex; align-items: flex-end; gap: .4rem; border: 1px solid #c9c9c9; border-radius: 14px; padding: .35rem .4rem; background: #fff; }
.chat-input:focus-within { border-color: var(--accent); }
.chat-input textarea { flex: 1; min-width: 0; min-height: 0; border: 0; resize: none; padding: .35rem .3rem; max-height: 15rem; outline: none; }
.chat-input button { border-radius: 10px; }
.chat-hint { font-size: .72rem; margin: .3rem .2rem 0; }
.chat-settings { border-left: 1px solid var(--line); overflow-y: auto; background: #fff; min-height: 0; }
.chat-form { padding: .7rem .9rem; display: flex; flex-direction: column; gap: .55rem; }
.chat-settings-head { display: flex; justify-content: space-between; align-items: center; }
.chat-ceiling, .chat-summary { font-size: .78rem; margin: 0; }
.chat-field { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--muted); }
.chat-field code { font-size: 11px; }
.chat-field input, .chat-field select, .chat-field textarea { width: 100%; min-width: 0; color: var(--ink); }
.chat-field textarea { min-height: 0; }
#chat-options { display: flex; flex-direction: column; gap: .55rem; }
.chat-schema { display: flex; flex-direction: column; gap: .3rem; margin-top: .3rem; }
.chat-preview summary { cursor: pointer; font-size: .82rem; color: var(--muted); }
.chat-preview pre { max-height: 20rem; font-size: 11px; }
/* Markdown in a reply. */
.md { overflow-wrap: anywhere; line-height: 1.55; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .7rem; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 1rem 0 .5rem; line-height: 1.3; }
.md h1 { font-size: 1.3rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1.05rem; } .md h4, .md h5, .md h6 { font-size: .95rem; }
.md ul, .md ol { margin: 0 0 .7rem; padding-left: 1.4rem; }
.md li > p { margin: 0; }
.md li + li { margin-top: .2rem; }
.md blockquote { margin: 0 0 .7rem; padding-left: .8rem; border-left: 3px solid var(--line); color: var(--muted); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
.md a { color: var(--accent); }
.md code { font-size: 12.5px; }
.md-code { margin: 0 0 .7rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.md-code-head { display: flex; justify-content: space-between; align-items: center; padding: .2rem .3rem .2rem .7rem; background: #f0f0f2; font-size: .75rem; color: var(--muted); }
.md-copy { min-width: 0; padding: .1rem .5rem; font-size: .75rem; background: none; border-color: transparent; color: var(--muted); }
.md-copy:hover { color: var(--ink); border-color: var(--line); }
.md-code pre { margin: 0; border-radius: 0; max-height: 32rem; }
.md-code pre code { background: none; padding: 0; }
.md-table { overflow-x: auto; margin: 0 0 .7rem; }
.md-table table { width: auto; min-width: 50%; }
.md-center { text-align: center; } .md-right { text-align: right; }
.pg-message > .md { white-space: normal; }
@media (max-width: 1100px) {
  .chat, .chat.no-settings { grid-template-columns: 15rem minmax(0, 1fr); }
  .chat .chat-settings { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: min(20rem, 100%); z-index: 3; box-shadow: -8px 0 24px rgb(16 24 40 / 0.14); }
  .chat.show-settings .chat-settings { display: block; }
}
@media (max-width: 760px) {
  main.wide { padding: .6rem; }
  .chat, .chat.no-settings { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 9rem); }
  .chat-side { display: none; position: absolute; top: 0; left: 0; bottom: 0; width: min(17rem, 85%); z-index: 3; box-shadow: 8px 0 24px rgb(16 24 40 / 0.14); }
  .chat.show-side .chat-side { display: flex; }
  .chat-side-toggle { display: inline-block; }
  .chat-item .chat-icon { visibility: visible; }
  .chat-actions { opacity: 1; }
  .chat-bubble { max-width: 92%; }
}

/* Overview statistics: KPI cards, charts, and tables of the selected range. */
:root{--media:#2f6fd6;--chat:#8fa3bf;--warn:#c58a00;--soft:#f3f5f8;--card-shadow:0 1px 2px rgb(16 24 40/.06)}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;box-shadow:var(--card-shadow)}
.card>h3{margin:0 0 .2rem;font-size:.95rem}
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1rem;align-items:start}.grid2>*{min-width:0}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}.grid3>*{min-width:0}
@media(max-width:900px){.grid3{grid-template-columns:1fr}}
.filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.chip-filter{display:inline-flex;align-items:center;gap:.35rem;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem;font-size:.85rem}
.chip-filter .x{color:var(--muted);text-decoration:none;font-weight:700;line-height:1}.chip-filter .x:hover{color:var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}@media(max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem .6rem;box-shadow:var(--card-shadow);display:grid;gap:.15rem}
.kpi .lab{font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kpi .n{font-size:1.75rem;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .sub{font-size:.8rem;color:var(--muted)}
.kpi .sub b{color:var(--ink);font-weight:600}
.kpi.bad .n{color:var(--bad)}
.spark path.l{fill:none;stroke-width:1.6}.spark path.a{opacity:.12}
.s-media path.l{stroke:var(--media)}.s-media path.a{fill:var(--media)}
.s-chat path.l{stroke:#5d7393}.s-chat path.a{fill:#5d7393}
.s-bad path.l{stroke:var(--bad)}.s-bad path.a{fill:var(--bad)}
.s-warn path.l{stroke:var(--warn)}.s-warn path.a{fill:var(--warn)}
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;margin:.2rem 0 1rem}
.toolbar .left{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.seg{display:inline-flex;background:var(--soft);border-radius:8px;padding:3px;gap:2px}
.seg a{padding:.3rem .8rem;border-radius:6px;color:var(--muted);text-decoration:none;font-weight:500}
.seg a.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgb(16 24 40/.12)}
.live{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px #dff3e7}
.legend{display:flex;gap:1rem;font-size:.8rem;color:var(--muted);margin-bottom:.3rem}
.key{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.35rem;vertical-align:-1px}
.k-media{background:var(--media)}.k-chat{background:var(--chat)}.k-bad{background:var(--bad)}.k-bad2{background:#e7a39d}
.c-media{fill:var(--media)}.c-chat{fill:var(--chat)}.c-bad{fill:var(--bad)}.c-bad2{fill:#e7a39d}
.c-grid{stroke:#eef0f3}.c-axis{stroke:var(--line)}.c-txt{fill:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums}
table.t{border:0;border-radius:0;background:transparent}
table.t th{background:transparent;border-bottom:1px solid var(--line);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;padding:.4rem .6rem}
table.t td{border-bottom:1px solid #f0f1f3;padding:.5rem .6rem;vertical-align:middle}
table.t tr:hover td{background:#fafbfc}
.mono{font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace}
.kind{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--muted)}
.kind i{width:8px;height:8px;border-radius:50%;display:inline-block}.kind.kd-media i{background:var(--media)}.kind.kd-chat i{background:var(--chat)}
.prov{display:inline-flex;align-items:center;gap:.5rem}
.chip{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;background:#6b6b6b}
.p-openrouter{background:#6b5bd6}.p-byteplus{background:#1f7ae0}.p-kie{background:#0f8a6c}.p-vertexai{background:#d9573a}.p-token360{background:#7a6a4f}.p-mediakit{background:#2b9bb0}
.meter{display:inline-flex;align-items:center;gap:.5rem}
.bar{fill:#edf0f4}.f-ok{fill:var(--ok)}.f-warn{fill:var(--warn)}.f-bad{fill:var(--bad)}.f-acc{fill:var(--media)}
.dim{color:#b5bac1}
.ten small{color:var(--muted);margin-left:.35rem}
.models{display:flex;flex-wrap:wrap;gap:.3rem}.models span{font:11.5px ui-monospace,Menlo,monospace;background:var(--soft);border-radius:4px;padding:.05rem .35rem}
.foot{font-size:.78rem;color:var(--muted);margin-top:.5rem}
.idle{font-size:.8rem;color:var(--muted);margin-top:.5rem}
.reasons{display:grid;gap:.55rem}
.reason{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .6rem;font-size:.85rem}
.reason .who{color:var(--muted);font-size:.75rem}
.reason svg{grid-column:1/-1}
.pagehead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.statusline{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin:-.4rem 0 1rem}
.statusline b{color:var(--ink);font-variant-numeric:tabular-nums}
.acct{display:grid;gap:.1rem}.acct .sub2{font:12px ui-monospace,Menlo,monospace;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16rem}
.c-hit{fill:transparent}
g.on .c-hit{fill:#f1f3f6}
.c-wrap{position:relative}
.c-tip{position:absolute;pointer-events:none;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgb(16 24 40/.14);padding:.45rem .6rem;font-size:.8rem;display:grid;gap:.2rem;white-space:nowrap;z-index:5}
.c-tip span{display:flex;align-items:center;gap:.4rem}.c-tip span b{margin-left:auto;padding-left:1rem;font-variant-numeric:tabular-nums}
.reason-bar{grid-column:1/-1;display:block}.reason-bar svg{display:block;width:100%}
.meter svg{flex:none}
.top tr.extra{display:none}.top.show-all tr.extra{display:table-row}
.toolbar input[type=datetime-local]{min-width:0}
button.twisty{background:none;border:0;color:var(--muted);padding:0 .35rem 0 0;min-width:0;font-size:.8rem}
table.t tr.subrow td{background:var(--soft);font-size:.85rem}
.expandable{display:flex;align-items:center}
table.t tr.subrow td:first-child{padding-left:1.6rem}
.fold summary { cursor: pointer; font-size: .8rem; }

/* Tenants & keys: one card per tenant, a head band, a facts line, then Keys, Concurrency and Request rate. */
.pagehead h1{margin:.2rem 0 .6rem}
.pagehead .actions{display:flex;gap:.5rem;align-items:center}
button.sm{padding:.22rem .6rem;font-size:.8rem;border-radius:5px}
button.quiet.sm{border-color:#cfd4db;color:var(--ink)}
button.quiet.sm:hover{background:var(--soft)}
button.danger.sm{border-color:#e4b7b3}
button.textlink{background:none;border:0;padding:0;color:var(--accent);font-size:inherit;cursor:pointer}
button.textlink:hover{text-decoration:underline}
.tcard{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--card-shadow);margin-top:1rem;overflow:hidden}
.thead{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.8rem 1.1rem;border-bottom:1px solid var(--line)}
.thead h2{margin:0;font-size:1.1rem}
.thead .slug{font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.thead .right{margin-left:auto;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.tlinks{display:inline-flex;gap:.8rem;margin-right:.6rem}
.tlinks a{color:var(--accent);text-decoration:none;font-size:.85rem}
.tlinks a:hover{text-decoration:underline}
.tmeta{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;padding:.45rem 1.1rem;font-size:.85rem;color:var(--muted);background:#fafbfc;border-bottom:1px solid var(--line)}
.tmeta code{font-size:12px;display:inline-block;max-width:28rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.tsec{padding:.8rem 1.1rem 1rem}
.tsec+.tsec{border-top:1px solid var(--line)}
.tsec .section-head{margin-bottom:.4rem;align-items:center}
.tsec h3{margin:0;font-size:.95rem}
.tsec .section-head .muted{font-size:.8rem}
/* A small form that unfolds under a heading when its button is pressed. */
.panel{background:var(--soft);border-radius:8px;padding:.7rem .9rem;margin:.5rem 0 .8rem;display:flex;gap:.7rem;flex-wrap:wrap;align-items:end}
.panel.tpanel{margin:.6rem 1.1rem}
.panel label{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--muted)}
.panel input,.panel select{background:#fff;min-width:11rem}
.panel .grow{flex:1}
.panel .grow input{width:100%;min-width:0}
.panel button{margin-left:auto}
.panel button+button{margin-left:0}
/* The one-time key, inside the tenant it belongs to. */
.tcard .secret{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:.5rem 0 .8rem}
.secret .k{flex:1;min-width:0;overflow-wrap:anywhere}
.secret .k b{font-weight:600}
.keyname{display:grid;gap:.05rem;white-space:nowrap}
td.when{white-space:nowrap}
.keyname .sub2{font:12px ui-monospace,Menlo,monospace;color:var(--muted);white-space:nowrap}
td.acts{text-align:right;white-space:nowrap}
td.acts button+button{margin-left:.3rem}
.empty{color:var(--muted);font-size:.85rem;padding:.3rem 0}
/* Caps and rates: a small number box; a changed cap grows a Save button. */
input.cap{width:4.6rem;min-width:0;text-align:right;padding:.2rem .45rem;font-variant-numeric:tabular-nums}
input.cap:focus{border-color:var(--accent);outline:none}
tr.dirty input.cap{border-color:var(--accent);background:#f3f7ff}
button.save{display:none}
tr.dirty button.save{display:inline-block}
table.t tr.sub td:first-child{padding-left:1.6rem}
.scope{font-size:.85rem}
.scope .sub2{display:block;font:12px ui-monospace,Menlo,monospace;color:var(--muted)}
table.t tr.add td{background:#fafbfc;border-bottom:0}
tr.add input,tr.add select{background:#fff;padding:.25rem .45rem;min-width:0}
tr.add input.model{width:16rem;font:12.5px ui-monospace,Menlo,monospace}
tr.add select{width:12rem}
label.check{display:inline-flex;align-items:center;gap:.25rem;font-size:.8rem;color:var(--muted)}
.waiting{color:var(--warn);font-weight:600}
/* Overview: tenants against their cap, under the assignments. */
.subhead{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;margin:.9rem 0 .2rem}
@media (max-width:760px){
  .thead{padding:.7rem .9rem}.tmeta{padding:.4rem .9rem}.tsec{padding:.7rem .9rem .8rem}
  .thead .right{margin-left:0;width:100%}
  .panel label{flex:1 1 100%}.panel input,.panel select{min-width:0;width:100%}
  .panel button{margin-left:0}
  .panel.tpanel{margin:.6rem .9rem}
  .tmeta code{max-width:12rem}
  tr.add input.model{width:11rem}tr.add select{width:9rem}
}
/* Tenants & keys: tabs and search above one row per tenant; a row opens its card. */
.envnote{margin:-.3rem 0 .8rem;font-size:.85rem}
.tbar{display:flex;gap:.8rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:.4rem 0 .8rem}
.tshow{display:inline-flex;gap:.35rem;align-items:center;color:var(--muted);font-size:.85rem;margin-right:auto}
.tbar input[type=search]{min-width:16rem;padding:.35rem .6rem;border:1px solid var(--line);border-radius:6px;font:inherit}
.tlist tr.trow{cursor:pointer}
.tlist tr.trow:hover td,.tlist tr.trow.open td{background:#f6f8fc}
.tlist tr.trow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tlist .caret{display:inline-block;width:.9rem;color:var(--muted)}
.tlist tr.tdetail>td{padding:0 .6rem .8rem;background:#f6f8fc}
.tlist tr.tdetail .tcard{margin-top:0}
@media (max-width:760px){.tbar input[type=search]{min-width:0;width:100%}}

/* Playground: the Overview call-to-action and the "back to console" nav link. */
a.btn-link{display:inline-block;font:inherit;padding:.4rem .8rem;border-radius:4px;border:1px solid var(--accent);background:var(--accent);color:#fff;text-decoration:none;font-weight:500}
a.btn-link:hover{opacity:.92}
#nav a.nav-back{margin-top:.6rem;color:var(--muted)}
/* The Overview provider picker: `*`, each provider type, and its credentials indented beneath it. */
.pick { position: relative; }
.pick summary { list-style: none; cursor: pointer; padding: .35rem 1.8rem .35rem .5rem; border: 1px solid #c9c9c9; border-radius: 4px; background: #fff; min-width: 9rem; position: relative; }
.pick summary::-webkit-details-marker { display: none; }
.pick summary::after { content: ""; position: absolute; right: .7rem; top: calc(50% - 5px); width: 6px; height: 6px; border: solid var(--ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.pick-menu { position: absolute; left: 0; top: calc(100% + 4px); min-width: 100%; max-height: 24rem; overflow-y: auto; display: flex; flex-direction: column; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgb(16 24 40 / .14); z-index: 30; }
.pick-menu p { margin: .3rem .5rem; }
.pick-menu button { text-align: left; white-space: nowrap; background: none; border: 0; border-radius: 4px; color: var(--ink); padding: .3rem .6rem; }
.pick-menu button:hover { background: #f0f0f0; }
.pick-menu button.pick-type { font-weight: 600; margin-top: 2px; }
.pick-menu button.pick-cred { padding-left: 2rem; }
.pick-menu button.on { background: var(--accent); color: #fff; }
/* The Overview's panels dim while a changed filter's numbers load; the round refresh button spins. */
#ov-stats { transition: opacity .15s; }
#ov-stats.updating { opacity: .45; }
button.icon-btn { width: 32px; height: 32px; padding: 0; min-width: 0; border-radius: 50%; border: 1px solid #c9c9c9; background: #fff; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
button.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
button.icon-btn.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }