/* DB Studio — panels, cards and badges follow dd-control/assets/css/admin.css so
 * the app feels like the Studio tabs Alida already knows. */

:root {
  --bg: #f0f0f1;
  --panel: #fff;
  --border: #dcdcde;
  --accent: #2271b1;
  --text: #1d2327;
  --muted: #646970;
  --error: #b32d2e;
}

* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }

.topbar { display: flex; align-items: center; gap: 24px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--border); }
.topbar .brand { font-weight: 700; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a { padding: 6px 12px; border-radius: 4px; text-decoration: none; color: var(--text); }
.topbar nav a.active, .topbar nav a:hover { background: var(--accent); color: #fff; }
/* Coming-soon nav item (Execute = the future DD-write surface): inert + greyed. */
.topbar nav .nav-soon { padding: 6px 12px; border-radius: 4px; color: var(--muted); opacity: .6; cursor: not-allowed; }
.topbar .whoami { color: var(--muted); font-size: 12.5px; }
.topbar .logout { color: var(--accent); text-decoration: none; }

main { padding: 20px; max-width: 1200px; margin: 0 auto; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 16px 20px; margin-bottom: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); margin: -16px -20px 16px; padding: 12px 20px; }
.panel-head h2 { font-size: 14px; margin: 0; }
/* Three-panel Create layout: SOURCE (1) · OPS (1) · RECENT (2). Breakpoints:
 * >=1100 four columns; 640-1100 source+ops side by side with recent full-width
 * below; <640 a single stacked column (source -> ops -> recent). */
.studio-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) {
  .studio-grid { grid-template-columns: 1fr 1fr; }
  .studio-grid .panel-recent { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .studio-grid { grid-template-columns: 1fr; } }

.description, .todo { color: var(--muted); font-size: 12.5px; }
.block-label { display: inline-block; margin-bottom: 4px; }
label { cursor: pointer; }
input[type=text], input[type=number], input[type=password], select, textarea { padding: 6px 8px; font: inherit; border: 1px solid #8c8f94; border-radius: 4px; max-width: 100%; }
textarea { width: 100%; }
select { max-width: 100%; }

.button { display: inline-block; padding: 5px 12px; font: inherit; font-size: 13px; line-height: 1.6; background: #f6f7f7; border: 1px solid var(--accent); border-radius: 3px; color: var(--accent); text-decoration: none; cursor: pointer; }
.button:hover { background: #f0f0f1; }
.button:disabled { opacity: .55; cursor: default; }
.button-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button-primary:hover { background: #135e96; }
.button-small { font-size: 12px; padding: 2px 8px; }

/* -------------------------------------------------- top-bar model selector */
/* Provider colour tokens — Ian's light/dark pairs, kept as custom props so a
 * feel-pass can retune them. Shades are chosen to read against the WHITE topbar
 * (var(--panel)); dark variants carry white text, light variants dark text. */
:root {
  --badge-light-orange: #f6c17a;
  --badge-dark-orange:  #d97a1e;
  --badge-light-green:  #a9dca2;
  --badge-dark-green:   #3f9a3f;
  --badge-light-blue:   #a3d1f2;
  --badge-dark-blue:    #2f74b5;
  --badge-white:        #ffffff;
  --badge-ink:          #1d2327;
  --badge-ink-on-dark:  #ffffff;
}
.model-slots { display: inline-flex; gap: 6px; align-items: center; }
.model-badge { position: relative; display: inline-flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 40px; font: 700 11px/1 -apple-system, sans-serif; letter-spacing: .03em; padding: 5px 9px 4px; border: 1px solid rgba(0,0,0,.22); border-radius: 4px; background: #f6f7f7; color: var(--badge-ink); cursor: pointer; }
.model-badge .badge-label { text-align: center; pointer-events: none; }

.badge-light-orange { background: var(--badge-light-orange); }
.badge-dark-orange  { background: var(--badge-dark-orange);  color: var(--badge-ink-on-dark); }
.badge-light-green  { background: var(--badge-light-green); }
.badge-dark-green   { background: var(--badge-dark-green);   color: var(--badge-ink-on-dark); }
.badge-light-blue   { background: var(--badge-light-blue); }
.badge-dark-blue    { background: var(--badge-dark-blue);    color: var(--badge-ink-on-dark); }
.badge-white        { background: var(--badge-white); }

/* Split-underline: two capability segments (image | text). A capable-but-idle
 * slot is a faint solid bar; an inapplicable slot (e.g. image on Anthropic) is a
 * dashed hairline — the "not suited for this task" cue. The held slot lights up. */
.badge-slots { display: flex; gap: 2px; }
.seg { flex: 1; height: 3px; border-radius: 2px; background: transparent; }
.seg-has { background: rgba(0,0,0,.22); }
.seg-na  { height: 0; border-top: 1px dashed rgba(0,0,0,.30); border-radius: 0; align-self: center; }
.badge-dark-orange .seg-has, .badge-dark-green .seg-has, .badge-dark-blue .seg-has { background: rgba(255,255,255,.55); }
.badge-dark-orange .seg-na, .badge-dark-green .seg-na, .badge-dark-blue .seg-na { border-top-color: rgba(255,255,255,.55); }

.model-badge.img-active .seg-img,
.model-badge.txt-active .seg-txt { background: var(--badge-ink); height: 4px; }
.badge-dark-orange.img-active .seg-img, .badge-dark-orange.txt-active .seg-txt,
.badge-dark-green.img-active .seg-img,  .badge-dark-green.txt-active .seg-txt,
.badge-dark-blue.img-active .seg-img,   .badge-dark-blue.txt-active .seg-txt { background: #fff; }

.model-badge.is-active { outline: 2px solid var(--accent); outline-offset: 1px; }
.model-badge.no-image { opacity: .94; }

.source-preview { margin: 8px 0; }
.source-preview img { max-width: 200px; max-height: 200px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }

.scene-slots { display: flex; gap: 8px; }
.scene-slot { position: relative; width: 84px; height: 84px; border: 1px dashed #8c8f94; border-radius: 4px; display: grid; place-items: center; cursor: pointer; background: #fafafa; }
.scene-slot.is-filled { border-style: solid; cursor: default; }
.scene-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.scene-add-label { font-size: 11px; color: var(--muted); }

.scale-stage { margin-bottom: 8px; }
#scale-canvas { max-width: 100%; max-height: 320px; border: 1px solid var(--border); background: #fff; }
.scale-pct { font-weight: 600; }
input[type=range] { width: 100%; }

.gen-row { margin-top: 14px; }
.spend { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #f6f7f7; border: 1px solid var(--border); border-radius: 4px; font-size: 12.5px; }
.spend-text { flex: 1; }

.msg { min-height: 20px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.msg.is-error { color: var(--error); }

/* ------------------------------------------- SOURCE panel (left) blocks */
/* Two labelled blocks: Image (what ops operate on) and Product (naming/meta). */
.src-block { margin-bottom: 18px; }
.src-block:last-child { margin-bottom: 0; }
/* Field descriptions break onto their own line under the input (Ian, 2026-07-10). */
.src-block p > .description { display: block; margin-top: 4px; }
.src-block-title { font: 700 11px/1 -apple-system, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.src-sub { display: block; font-size: 12px; font-weight: 600; margin: 12px 0 4px; }

/* Browse-local-library strip — recent results as pickable sources. */
.local-lib-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.local-lib-thumb { padding: 0; width: 56px; height: 56px; border: 1px solid var(--border); border-radius: 4px; background: #fff; cursor: pointer; overflow: hidden; }
.local-lib-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.local-lib-thumb.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* ------------------------------------------- OPS panel (mid): toggle + list */
/* Segmented DESIGN|CREATE toggle, matching the app's button look. */
.segmented { display: inline-flex; border: 1px solid var(--accent); border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.seg-btn { padding: 6px 18px; font: inherit; font-size: 13px; background: #f6f7f7; color: var(--accent); border: 0; border-right: 1px solid var(--accent); cursor: pointer; }
.seg-btn:last-child { border-right: 0; }
.seg-btn.is-active { background: var(--accent); color: #fff; }

/* Op selector — one row per op; the active op's controls show below. */
.op-select { display: grid; gap: 6px; margin-bottom: 14px; }
.op-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 8px 12px; font: inherit; font-size: 13px; background: #fafafa; border: 1px solid var(--border); border-radius: 5px; color: var(--text); cursor: pointer; }
.op-row:hover { border-color: var(--accent); }
.op-row.is-active { border-color: var(--accent); background: #eef4fa; box-shadow: inset 3px 0 0 var(--accent); }
.op-row-title { font-weight: 600; }
.op-row.is-soon { opacity: .55; border-style: dashed; cursor: not-allowed; }
.op-row.is-soon .op-row-title { color: var(--muted); }

.op-body { margin-bottom: 14px; }
.no-source { padding: 14px; border: 1px dashed var(--border); border-radius: 5px; background: #fafafa; }

/* Cost badges — one micro-label per action button (surfaces Op.cost_class). */
.cost-badge { display: inline-block; vertical-align: middle; margin-left: 8px; font: 700 10px/1 -apple-system, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: 3px; border: 1px solid transparent; white-space: nowrap; }
.cost-free { color: #135e2b; background: #e6f4ea; border-color: #a9d6b8; }
.cost-paid { color: #8a5200; background: #fbf1dd; border-color: #eecb92; }

/* Tiles — feature shells and coming-soon rows. Compact, never card-height. */
.tile { border: 1px solid var(--border); border-radius: 5px; padding: 10px 12px; margin-top: 10px; background: #fafafa; }
.tile-title { display: block; font-size: 13px; }
.tile-desc { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.tile-act { margin-top: 8px; }
.tile.is-soon { opacity: .55; border-style: dashed; cursor: not-allowed; }
.tile.is-soon .tile-title { color: var(--muted); font-weight: 600; }

/* Coming-soon rows — one line each: title + description inline. */
.soon-strip { margin-top: 10px; display: grid; gap: 6px; }
.soon-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 0; padding: 7px 10px; }
.soon-row .tile-title { display: inline; font-size: 12.5px; }
.soon-row .tile-desc { display: inline; margin-top: 0; }

/* Describe — structured copy output (name/descriptions/alt/tags), each field
 * with a copy button, plus a token+cost line. */
#describe-panel { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
.describe-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 4px 0 10px; }
.describe-dl dt { color: var(--muted); font-size: 12px; font-weight: 600; }
.describe-dl dd { margin: 0; display: flex; align-items: flex-start; gap: 8px; }
.describe-val { flex: 1; font-size: 12.5px; white-space: pre-wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.chip { background: #eef4fa; border: 1px solid #cfe0ee; border-radius: 10px; padding: 1px 8px; font-size: 11.5px; color: var(--accent); }
.copy-btn { flex-shrink: 0; }
.describe-raw { white-space: pre-wrap; background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 8px; font-size: 12px; max-height: 240px; overflow: auto; }
.describe-cost-line { margin-top: 8px; }

/* -------------------------------------------------- admin: API key vault */
.key-add-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.key-form { border: 1px solid var(--border); border-radius: 5px; padding: 4px 16px 12px; margin-bottom: 14px; background: #fafafa; max-width: 460px; }
.key-form-title { display: block; margin: 12px 0 4px; }
.key-form input[type=text], .key-form input[type=password] { width: 100%; }
.key-form-acts { display: flex; gap: 6px; margin-top: 10px; }
.key-group { margin-top: 14px; }
.key-group-title { font-size: 13px; margin: 0 0 6px; }
.key-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 6px; background: #fff; }
.key-row.is-active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.key-active { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.key-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 1; font-size: 12.5px; }
.key-label { font-size: 13px; }
.key-last4 { font-family: ui-monospace, Consolas, monospace; color: var(--muted); }
.key-model { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--muted); }
.key-by { color: var(--muted); font-size: 11.5px; }
.key-remove { flex-shrink: 0; }

/* ------------------------------------------------------------------- cards */
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card { position: relative; width: 210px; border: 1px solid var(--border); border-radius: 5px; background: #fff; padding: 8px; }
.card.is-accepted { opacity: .75; }
.card-img { background: #fff; border: 1px solid #f0f0f1; border-radius: 3px; overflow: hidden; }
.card-img img { display: block; width: 100%; height: 150px; object-fit: contain; cursor: zoom-in; background: #fff; }
.card-meta { display: flex; flex-direction: column; gap: 1px; padding: 6px 2px; font-size: 12px; }
.card-name { color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.card-prov { color: var(--muted); font-size: 11px; }
.card-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.card-acts .button { font-size: 11.5px; padding: 3px 7px; }
.discard-x { position: absolute; top: 2px; right: 2px; z-index: 2; width: 22px; height: 22px; line-height: 1; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 15px; cursor: pointer; }

/* ---------------------------------------------------------------- presets */
.preset-editor { border: 1px solid var(--border); border-radius: 5px; padding: 4px 16px 12px; margin-bottom: 16px; background: #fafafa; }
.preset-list { display: grid; gap: 8px; }
.preset-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: 5px; padding: 10px 12px; }
.preset-main { display: grid; gap: 2px; }
.preset-badges { color: var(--muted); font-size: 11.5px; }
.preset-prompt { margin: 4px 0 0; color: var(--muted); font-size: 12px; max-width: 70ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.preset-acts { display: flex; gap: 4px; flex-shrink: 0; }

/* -------------------------------------------------------------------- log */
table.log { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.log th, table.log td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
table.log th { color: var(--muted); font-weight: 600; }

/* --------------------------------------------------------------- overlays */
.lightbox, .overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,.7); }
.lightbox[hidden], .overlay[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 92vh; }
.lb-close, .ov-close { position: absolute; top: 12px; right: 16px; background: transparent; border: 0; color: #fff; font-size: 28px; cursor: pointer; }
.overlay-box { position: relative; background: #fff; border-radius: 6px; padding: 16px 20px; width: min(640px, 92vw); max-height: 90vh; overflow: auto; }
.overlay-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.overlay-head .ov-close { position: static; color: var(--text); font-size: 22px; }
.overlay-acts { display: flex; gap: 6px; margin-top: 10px; }
.overlay-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.scale-canvas-wrap { text-align: center; }
.ov-canvas, .edit-preview img { max-width: 100%; max-height: 50vh; border: 1px solid var(--border); background: #fff; }
.model-list { display: grid; gap: 6px; }
.scene-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.scene-pick-item { width: 120px; cursor: pointer; font-size: 11.5px; text-align: center; }
.scene-pick-item img { width: 120px; height: 90px; object-fit: cover; border: 1px solid var(--border); border-radius: 4px; }

.suggest { position: relative; border: 1px solid var(--border); background: #fff; max-width: 340px; }
.suggest-item { padding: 5px 8px; cursor: pointer; font-size: 12.5px; }
.suggest-item:hover { background: #f0f0f1; }

/* "From the product's photos" strip — pick a live product image as the source. */
.product-photos { margin-top: 8px; }
.product-photo-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.product-photo { padding: 0; width: 60px; height: 60px; border: 1px solid var(--border); border-radius: 4px; background: #fff; cursor: pointer; overflow: hidden; }
.product-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-photo.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.product-photo.is-loading { opacity: .5; cursor: progress; }

/* ---------------------------------------------------- Execute (DD-write) */
/* Two write tiles, a bridge banner, the pending review/push queue, and push
 * history — reusing the tile / button / card idioms. */
.write-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.write-tile { margin-top: 0; }
@media (max-width: 640px) { .write-tiles { grid-template-columns: 1fr; } }

.bridge-banner { margin-bottom: 20px; padding: 10px 14px; border: 1px solid #eecb92; border-left-width: 4px; border-radius: 4px; background: #fbf1dd; color: #8a5200; font-size: 12.5px; }

.exec-selectall { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.exec-batch { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 8px 12px; background: #eef4fa; border: 1px solid #cfe0ee; border-radius: 5px; }
.exec-batch[hidden] { display: none; } /* display:flex defeats the hidden attribute otherwise */
.exec-batch-count { font-size: 12.5px; }
.exec-batch-summary { color: var(--muted); font-size: 12.5px; }

.exec-queue { display: grid; gap: 8px; }
.exec-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; background: #fff; }
.exec-row.is-pushing { opacity: .8; }
.exec-row.is-pushed { border-color: #a9d6b8; background: #f4faf5; }
.exec-row.is-failed { border-color: #e5a5a5; background: #fdf4f4; }
.exec-check { flex-shrink: 0; }
.exec-thumb { flex-shrink: 0; width: 56px; height: 56px; border: 1px solid var(--border); border-radius: 4px; background: #fff; overflow: hidden; }
.exec-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.exec-row-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.exec-name { font-family: ui-monospace, Consolas, monospace; font-size: 12px; word-break: break-all; }
.exec-badges { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.kind-badge { font: 700 10px/1 -apple-system, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: 3px; background: #eef4fa; border: 1px solid #cfe0ee; color: var(--accent); }
.exec-product { color: var(--muted); font-size: 12px; }
.exec-created { color: var(--muted); font-size: 11.5px; }
.exec-state { font-size: 12px; white-space: nowrap; }
.exec-state-pushing { color: var(--muted); }
.exec-state-ok { color: #135e2b; }
.exec-state-fail { color: var(--error); white-space: normal; }
.exec-acts { display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; }
.exec-acts .button { font-size: 11.5px; padding: 3px 7px; }

.exec-history { display: grid; gap: 8px; }
.exec-hrow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; background: #fff; }
.exec-att { color: var(--muted); font-size: 12px; }
.exec-onstore { flex-shrink: 0; }

/* ------------------------------------------------- product import (S3) */
.imp-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.imp-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.imp-field input[type="text"], .imp-field select { padding: 5px 8px; font: inherit; font-size: 13px; border: 1px solid var(--border); border-radius: 4px; min-width: 220px; }
.imp-cat-note { margin: 8px 0 0; }
.imp-pull { margin-top: 12px; padding: 8px 12px; background: #eef4fa; border: 1px solid #cfe0ee; border-radius: 5px; font-size: 12.5px; color: var(--accent); }
.imp-folder { margin-top: 12px; font-size: 12.5px; }
.imp-counter { margin-left: 8px; color: var(--muted); }
.imp-report { margin-top: 12px; display: grid; gap: 4px; }
.imp-summary { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; }
.imp-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: #fff; font-size: 12.5px; }
.imp-sku { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.imp-title { flex: 1; min-width: 120px; color: var(--text); }
.imp-tag { font: 700 10px/1 -apple-system, sans-serif; letter-spacing: .06em; padding: 2px 5px; border-radius: 3px; background: #eef4fa; border: 1px solid #cfe0ee; color: var(--accent); }
.imp-badge { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: #fbf1dd; border: 1px solid #eecb92; color: #8a5200; }
.imp-imgs { color: var(--muted); font-size: 11.5px; }
.imp-ready { font-size: 11.5px; color: var(--muted); }
.imp-ready.is-ready { color: #135e2b; font-weight: 600; }
.imp-error { margin: 0; font-size: 12px; color: var(--error); }
.imp-warn { margin: 0; font-size: 12px; color: #8a5200; }

/* ------------------------------------------------------- draft queue (S3) */
.draft-row { align-items: flex-start; }
.draft-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.draft-title { color: var(--text); font-size: 12.5px; }
.draft-status { color: var(--muted); font-size: 11.5px; text-transform: capitalize; }
.draft-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.rchip { font-size: 10.5px; padding: 1px 6px; border-radius: 8px; text-decoration: none; border: 1px solid var(--border); text-transform: capitalize; }
.rchip.is-green { background: #eafaef; border-color: #a9d6b8; color: #135e2b; }
.rchip.is-grey { background: #f3f4f5; border-color: var(--border); color: var(--muted); }
.draft-warnings { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.warn-badge { font-size: 11px; padding: 1px 7px; border-radius: 8px; background: #fbf1dd; border: 1px solid #eecb92; color: #8a5200; }
.warn-public { background: #fdecec; border-color: #e5a5a5; color: #a12727; }
.warn-retry { font: inherit; font-size: 11px; cursor: pointer; }
.warn-edited { background: #eef4fa; border-color: #cfe0ee; color: var(--accent); }

/* -------------------------------------------------- Create draft context (S4) */
.draft-context { margin-bottom: 14px; }
.draft-ctx-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: 10px; }
.draft-status { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.draft-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.df-field { margin: 0; }
.df-field.df-wide { grid-column: 1 / -1; }
.df-field input[type=text], .df-field textarea, .df-field select,
.df-category select, .df-category input { width: 100%; box-sizing: border-box; padding: 5px 7px; font: inherit; }
.df-facts { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.df-facts-title { display: block; font-size: 12.5px; margin-bottom: 6px; }
.df-category input { margin-top: 4px; }
.draft-checklist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.draft-import-notes { margin-top: 10px; font-size: 12.5px; }
.draft-import-notes summary { cursor: pointer; color: var(--muted); }
.draft-import-notes ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.df-saved { min-height: 16px; margin: 8px 0 0; }
.df-saved.is-error { color: var(--error); }
@media (max-width: 640px) { .draft-fields { grid-template-columns: 1fr; } }

/* draft slot strip (slots-as-sources) + picker */
.draft-picker-block select { width: 100%; padding: 5px 7px; font: inherit; }
.draft-slot-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.draft-slot-thumb { padding: 0; width: 60px; height: 60px; border: 1px solid var(--border); border-radius: 4px; background: #fff; cursor: pointer; overflow: hidden; display: grid; place-items: center; }
.draft-slot-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.draft-slot-thumb .slot-noimg { font-size: 11px; color: var(--muted); }
.draft-slot-thumb.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.draft-slot-thumb.is-loading { opacity: .5; cursor: progress; }

/* text-op inline output (title/tags) + Use-for-draft */
.textop-value { font-weight: 600; margin: 4px 0; }
.textop-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.use-draft-btn { background: #eafaef; border-color: #a9d6b8; color: #135e2b; }
.card-draft-badge { font-size: 11px; color: var(--accent); }
.draft-bound-badge { font-size: 11px; padding: 1px 7px; border-radius: 8px; background: #eef4fa; border: 1px solid #cfe0ee; color: var(--accent); }
.exec-row.is-draft-bound { background: #f7fbfe; }

/* ------------------------------------------------------------------ login */
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login-box { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 32px; width: 340px; display: grid; gap: 12px; }
.login-box h1 { font-size: 20px; margin: 0; }
.login-box input, .login-box button { padding: 8px 10px; font: inherit; }
.login-box button { background: var(--accent); color: #fff; border: 0; border-radius: 4px; cursor: pointer; }
.login-box .error { color: var(--error); margin: 0; }
.quiet-link { color: var(--muted); font-size: 12.5px; text-align: center; text-decoration: none; }