@import url("https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&display=swap");

:root {
  --bg: #eef1f4; --panel: #ffffff; --sunken: #f6f8fa; --ink: #1b2430; --muted: #687482;
  --line: #d9dfe6; --accent: #3446c4; --accent-ink: #ffffff; --accent-soft: #e8ebfb;
  --pass: #1d8a57; --fail: #cf3b3b; --warn: #b67d05; --live: #e5484d;
  --screen: #10161d; --screen-ink: #9fb0c2;
  --r-lg: 14px; --r-md: 9px; --r-sm: 6px;
  font-family: "Anuphan", "Sukhumvit Set", "Thonburi", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #12171d; --panel: #1a2129; --sunken: #151b21; --ink: #e6ebf0; --muted: #8f9baa;
          --line: #2a333e; --accent: #8191ff; --accent-ink: #0d1230; --accent-soft: #232b55;
          --pass: #4cc38a; --fail: #ff6b6b; --warn: #f2c14e; --screen: #0a0e12; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.55; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 24px; padding: 14px 28px; background: var(--panel);
          border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--ink); position: relative; }
.brand-mark::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--live); }
.tabs { display: flex; gap: 4px; }
.tabs a { padding: 7px 14px; border-radius: 99px; text-decoration: none; color: var(--muted); font-weight: 500; }
.tabs a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.tabs a:hover { color: var(--ink); }
.model-box { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
select { padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; }

/* ---------- buttons ---------- */
button, .btn { font: inherit; font-weight: 600; border: 0; border-radius: var(--r-md); padding: 8px 14px; cursor: pointer;
               background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
button.ghost, .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button.ghost:hover:not(:disabled) { background: var(--sunken); }
button.danger { background: var(--fail); color: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- layout ---------- */
.bench { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; padding: 24px 28px; align-items: start; }
@media (max-width: 980px) { .bench { grid-template-columns: 1fr; padding: 16px; } .topbar { padding: 12px 16px; gap: 12px; } .model-box { margin-left: 0; } }
h2 { font-size: 16px; margin: 0; }

/* ---------- flow list ---------- */
.flows-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.flow { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 10px; }
.flow.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.flow-title { font-weight: 600; line-height: 1.35; }
.flow-meta { font-size: 13px; color: var(--muted); margin: 4px 0 12px; display: flex; align-items: center; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; }
.dot.ok { background: var(--pass); }
.flow details summary { font-size: 13px; color: var(--muted); cursor: pointer; margin-top: 10px; }
pre { white-space: pre-wrap; background: var(--sunken); padding: 10px; border-radius: var(--r-sm); font: 13px/1.6 inherit; margin: 8px 0 0; }

/* ---------- monitor (the hero) ---------- */
.monitor { background: var(--screen); border-radius: 18px; padding: 10px; }
.monitor-bar { display: flex; align-items: center; gap: 12px; padding: 4px 6px 10px; color: var(--screen-ink); font-size: 13px; }
.rec { width: 10px; height: 10px; border-radius: 50%; background: #3a4552; flex: none; }
.rec.on { background: var(--live); box-shadow: 0 0 0 4px rgba(229, 72, 77, .25); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(229, 72, 77, .05); } }
@media (prefers-reduced-motion: reduce) { .rec.on { animation: none; } }
.monitor-title { color: #e6ebf0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor-bar .spacer { flex: 1; }
/* กรอบจอปรับตามภาพ: ภาพย่อให้พอดีทั้งกว้างและสูง ไม่ถูกตัด */
.screen { min-height: 320px; border-radius: 10px; background: #1a222b; overflow: hidden;
          display: flex; align-items: center; justify-content: center; }
.screen:has(.screen-empty:not(.hidden)) { aspect-ratio: 16 / 10; max-height: 64vh; min-height: 0; width: 100%; }
.screen img { display: block; max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto; }
.screen-empty { color: var(--screen-ink); text-align: center; padding: 24px; max-width: 34ch; }
.screen-empty b { color: #e6ebf0; display: block; font-size: 17px; margin-bottom: 4px; }

.status { font-weight: 600; padding: 3px 10px; border-radius: 99px; background: #222c37; color: #c9d3de; }
.status.pass { color: #4cc38a; } .status.fail, .status.error { color: #ff7b7b; }
.status.blocked, .status.running { color: #f2c14e; }

.readout { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 14px; background: var(--panel);
           border: 1px solid var(--line); border-radius: var(--r-lg); }
.readout div { padding: 12px 16px; border-left: 1px solid var(--line); }
.readout div:first-child { border-left: 0; }
.readout b { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.readout span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .readout { grid-template-columns: repeat(2, 1fr); } .readout div { border-left: 0; border-top: 1px solid var(--line); } }

.log-panel { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.log-panel header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.logs { max-height: 340px; overflow: auto; padding: 4px 0; font-size: 13.5px; }
.log { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 6px 16px; }
.log span { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.log.think { color: var(--muted); }
.log.bug, .log.error, .log.drift { color: var(--fail); }
.log.check, .log.finish, .log.saved { font-weight: 600; }
.log.heal, .log.compact { color: var(--warn); }
.logs-empty { padding: 18px 16px; color: var(--muted); }

/* ---------- dialog ---------- */
dialog { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; width: min(560px, calc(100vw - 32px));
         background: var(--panel); color: var(--ink); }
dialog::backdrop { background: rgba(16, 22, 29, .45); }
dialog form { padding: 22px; }
dialog h2 { font-size: 18px; margin-bottom: 14px; }
label { display: block; margin-bottom: 12px; font-size: 13.5px; color: var(--muted); }
input, textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
                  background: var(--sunken); color: var(--ink); font: inherit; font-size: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- history page ---------- */
.page { max-width: 1180px; margin: 0 auto; padding: 24px 28px 48px; }
@media (max-width: 640px) { .page { padding: 16px; } }
.page h1 { font-size: 24px; margin: 0 0 4px; }
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.summary div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.summary b { display: block; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary span { font-size: 13px; color: var(--muted); }
@media (max-width: 640px) { .summary { grid-template-columns: repeat(2, 1fr); } }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: 13px; background: var(--sunken); }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; text-align: right; }
.badge { font-weight: 600; font-size: 13px; }
.badge.pass { color: var(--pass); } .badge.fail, .badge.error { color: var(--fail); } .badge.blocked, .badge.running { color: var(--warn); }
.empty { padding: 32px; text-align: center; color: var(--muted); }

/* ---------- report page (server-rendered) ---------- */
body.report { max-width: 1000px; margin: 0 auto; padding: 24px 16px 48px; }
.report h1 { font-size: 24px; }
.report h2 { margin: 28px 0 10px; }
.report .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.report .stats div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; }
.report .stats b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.report .stats span { font-size: 12.5px; color: var(--muted); }
.report table { background: var(--panel); border: 1px solid var(--line); }
.report .bug-card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--fail); border-radius: var(--r-md); padding: 12px; margin-bottom: 10px; }
.report .bug-card img { display: block; width: 100%; max-width: 520px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.report .log { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); }
.report .log span { margin-right: 6px; }
.report .log img { display: block; max-width: 360px; width: 100%; margin-top: 6px; border-radius: 4px; border: 1px solid var(--line); }

/* ---------- guide page ---------- */
.guide { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
.toc { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.toc b { margin-bottom: 6px; }
.toc a { color: var(--muted); text-decoration: none; padding: 5px 10px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--accent); border-left-color: var(--accent); }
.doc { max-width: 72ch; }
.doc .lead { font-size: 17px; color: var(--muted); margin-top: 6px; }
.doc section { padding-top: 12px; margin-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.doc h2 { font-size: 20px; margin: 10px 0 10px; }
.doc h3 { font-size: 16px; margin: 20px 0 6px; }
.doc li { margin-bottom: 6px; }
.doc code { background: var(--sunken); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 13.5px; }
.doc pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; border: 1px solid var(--line); }
.doc .note { background: var(--accent-soft); border-radius: var(--r-md); padding: 10px 14px; }
.doc table.kv { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); margin: 12px 0; overflow: hidden; }
.doc table.kv th { width: 130px; white-space: nowrap; vertical-align: top; color: var(--ink); background: var(--sunken); }
.doc table.kv td { white-space: normal; }
.doc dl.modes dt, .doc dl.faq dt { font-weight: 600; margin-top: 14px; }
.doc dl.modes dd, .doc dl.faq dd { margin: 4px 0 0; color: var(--muted); }
@media (max-width: 860px) { .guide { grid-template-columns: 1fr; gap: 16px; } .toc { position: static; flex-direction: row; flex-wrap: wrap; }
  .toc b { width: 100%; } .toc a { border-left: 0; border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; } }

/* ---------- credit chip ---------- */
.credit-chip { background: var(--sunken); color: var(--ink); border: 1px solid var(--line); border-radius: 99px;
               padding: 6px 12px; font-weight: 500; font-size: 13px; }
.credit-chip b { font-variant-numeric: tabular-nums; }
.credit-chip:hover { border-color: var(--accent); }
.credit-chip.unset { color: var(--accent); border-style: dashed; }
.credit-chip.low { color: var(--fail); border-color: var(--fail); }

/* ---------- flow edit / delete ---------- */
.flow-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.flow-foot details { flex: 1; min-width: 0; }
.flow-tools { display: flex; gap: 2px; margin-top: 6px; }
button.link { background: none; color: var(--muted); padding: 4px 8px; font-weight: 500; font-size: 13px; border-radius: var(--r-sm); }
button.link:hover { color: var(--accent); background: var(--sunken); }
button.link.danger-link:hover { color: var(--fail); }
.dot.warn { background: var(--warn); }
input[readonly] { color: var(--muted); cursor: not-allowed; }
.note-warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--ink); border-radius: var(--r-md); padding: 8px 12px; font-size: 13.5px; }
dialog code { background: var(--sunken); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }

/* ---------- flow explorer (tree) ---------- */
.explorer .flows-head { margin-bottom: 8px; }
.explorer .flows-head h2 { display: flex; align-items: baseline; gap: 8px; }
.head-tools { display: flex; gap: 2px; }
.icon-btn { background: none; color: var(--muted); padding: 5px; border-radius: var(--r-sm); line-height: 0; }
.icon-btn:hover { color: var(--ink); background: var(--line); }
.icon-btn.danger-ico:hover { color: var(--fail); }
.flow-filter { margin: 0 0 8px; padding: 7px 10px; font-size: 14px; background: var(--panel); }
.tree-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px 0;
            min-height: 160px; max-height: calc(100vh - 230px); overflow: auto; }
.tree-box.drop-target { outline: 2px dashed var(--accent); outline-offset: -4px; }
.tree-row { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 calc(8px + var(--depth) * 16px);
            cursor: pointer; user-select: none; font-size: 14px; border-left: 2px solid transparent; position: relative; }
.tree-row:hover { background: var(--sunken); }
.tree-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.tree-row .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row .ico { color: var(--muted); display: inline-flex; flex: none; }
.tree-row .folder-ico { color: #c9a227; }
.twisty { width: 14px; flex: none; display: inline-flex; color: var(--muted); transition: transform .12s; }
.twisty.open { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .twisty { transition: none; } }
.folder-row .label { font-weight: 600; }
.count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row-tools { display: none; gap: 0; }
.folder-row:hover .row-tools, .folder-row:focus-within .row-tools { display: flex; }
.folder-row:hover .count, .folder-row:focus-within .count { display: none; }
@media (hover: none) { .row-tools { display: flex; } .folder-row .count { display: none; } }
.flow-row.selected { background: var(--accent-soft); border-left-color: var(--accent); }
.flow-row.running .label { color: var(--accent); font-weight: 600; }
.flow-row.running .label::after { content: " (กำลังรัน)"; font-weight: 400; color: var(--muted); }
.tree-row.dragging { opacity: .45; }
.folder-row.drop-target { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.flow-panel { margin: 2px 10px 8px calc(30px + var(--depth) * 16px); padding: 10px 12px; border-radius: var(--r-md);
              background: var(--sunken); border: 1px solid var(--line); }
.flow-panel .flow-meta { margin: 0 0 10px; }
.flow-panel .flow-tools { margin-top: 6px; margin-left: -8px; }
.tree-empty { padding: 12px 16px; margin: 0; }
.tree-hint { padding: 8px 14px 4px; margin: 6px 0 0; border-top: 1px solid var(--line); }
@media (max-width: 980px) { .tree-box { max-height: none; } }
.credit-chip { white-space: nowrap; }
@media (max-width: 640px) {
  #modelPrice { display: none; }
  .model-box { width: 100%; }
  .model-box select { flex: 1; min-width: 0; }
}
.bench > section { min-width: 0; }

/* ================= Test Agent (cloud) ================= */
body.role-viewer .need-editor, body:not(.role-admin) .need-admin { display: none !important; }
.wrap { white-space: normal !important; min-width: 220px; }

/* user menu */
.user-menu { position: relative; }
.user-menu summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 6px; border-radius: 99px; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover { background: var(--sunken); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; }
.user-name { color: var(--ink); font-weight: 500; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu .menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line);
                   border-radius: var(--r-md); padding: 10px 12px; min-width: 220px; z-index: 20; box-shadow: 0 8px 24px rgba(16,22,29,.12);
                   display: flex; flex-direction: column; gap: 6px; }
.user-menu .menu p { margin: 0 0 4px; }
.user-menu .menu a, .user-menu .menu .link { padding: 4px 0; text-align: left; justify-content: flex-start; }
a.link { color: var(--muted); padding: 4px 8px; font-size: 13px; text-decoration: none; border-radius: var(--r-sm); font-weight: 500; }
a.link:hover { color: var(--accent); background: var(--sunken); }

/* toasts */
#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 50; width: min(520px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--r-md); font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.toast.error { background: var(--fail); color: #fff; }

/* login */
body.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth-card { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.auth-card h1 { font-size: 22px; margin: 22px 0 16px; }
.auth-card button[type=submit] { width: 100%; justify-content: center; padding: 11px; }
.form-error { color: var(--fail); font-size: 14px; min-height: 1.2em; margin: 0 0 10px; }

/* monitor extras */
.phase { color: var(--screen-ink); font-size: 13px; margin: 8px 6px 2px; min-height: 1.4em; }
.queue { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 12px; margin-bottom: 10px; font-size: 13.5px; color: var(--muted); }
.status.queued { color: #9fb0c2; } .status.stopped, .status.cancelled { color: #c9d3de; }
.runners { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 14px; }
.runners h3 { margin: 0 0 6px; font-weight: 600; }
.runners p { margin: 0; }
.runner-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
.runner-row .muted { margin-left: auto; }
.badge.queued, .badge.cancelled, .badge.stopped { color: var(--muted); }

/* report */
.report h1 { margin-bottom: 4px; }
.verdict { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin: 16px 0; border-radius: var(--r-lg);
           background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted); }
.verdict b { font-size: 22px; }
.verdict.pass { border-left-color: var(--pass); } .verdict.pass b { color: var(--pass); }
.verdict.fail, .verdict.error { border-left-color: var(--fail); } .verdict.fail b, .verdict.error b { color: var(--fail); }
.verdict.blocked, .verdict.running { border-left-color: var(--warn); } .verdict.blocked b { color: var(--warn); }
.report .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.report .stats div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; }
.report .stats b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.report .stats span { font-size: 12.5px; color: var(--muted); }
.report h2 { margin: 28px 0 10px; }
.report .bug-card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px; }
.report .bug-card.sev-high { border-left-color: var(--fail); }
.report .bug-card header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.report .bug-card header .sev { color: var(--muted); font-size: 13px; }
.report .bug-card header select { margin-left: auto; }
.missing { color: var(--fail); }
.shot { display: block; padding: 0; background: none; border: 0; margin-top: 8px; cursor: zoom-in; border-radius: var(--r-sm); }
.shot img { display: block; width: 100%; max-width: 520px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.shot.thumb img { max-width: 220px; }
td .shot.thumb { margin: 0; } td .shot.thumb img { max-width: 120px; }
.timeline { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px 0; font-size: 13.5px; }
.timeline .log { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 6px 16px; border-bottom: 1px solid var(--line); }
.timeline .log:last-child { border-bottom: 0; }
.timeline .log > div { white-space: pre-wrap; word-break: break-word; }
.img-dlg { width: min(1200px, calc(100vw - 24px)); }
.img-dlg form { padding: 10px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.img-dlg img { width: 100%; height: auto; border-radius: var(--r-sm); }
dialog.wide { width: min(760px, calc(100vw - 32px)); }
dialog h3 { font-size: 15px; margin: 16px 0 6px; }
.rec-steps { font-size: 13.5px; padding-left: 22px; max-height: 300px; overflow: auto; }

/* bugs */
.sev-pill { font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--sunken); }
.sev-pill.sev-high { color: var(--fail); } .sev-pill.sev-medium { color: var(--warn); } .sev-pill.sev-low { color: var(--muted); }

/* settings */
.wide-doc { max-width: 980px; }
.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0; }
.inline-form label { margin: 0; flex: 1 1 180px; }
.inline-form button { flex: none; }
.app-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; margin-bottom: 10px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 16px; margin-bottom: 12px; }
.settings-grid label .small { display: block; }
pre.token { font-family: ui-monospace, "SF Mono", Menlo, monospace; user-select: all; word-break: break-all; }
td input[type=checkbox] { width: auto; display: inline; }
.credit-info dl, .kv-mini { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 10px; }
.kv-mini dt { color: var(--muted); } .kv-mini dd { margin: 0; font-variant-numeric: tabular-nums; }
label select { display: block; width: 100%; margin-top: 4px; }
.flow-tools { flex-wrap: wrap; }
.flow-tools > span { display: contents; }
.tabs a { white-space: nowrap; }
@media (max-width: 640px) {
  .tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .model-box { flex-wrap: wrap; }
  .model-box select { flex: 1 1 140px; }
  .user-name { display: none; }
  .screen { min-height: 0; }
  .status { white-space: nowrap; }
}