/* ================================================================
 *  Mira — css/credits.css (2026-06-13)
 *  Per-user credits: the chip shown in the three settings modals +
 *  the shared "Credits & tokens" detail modal (ui/credits-panel.js).
 * ================================================================ */

.credits-chip-host { margin: 4px 0 10px; }

.credits-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border, #d9cdb8);
  border-radius: 999px;
  background: var(--cream, #f7f1e6);
  color: var(--brown-dark, #4a3c28);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.credits-chip:hover { background: var(--cream-dark, #efe6d6); border-color: var(--accent, #b85a1c); }
.credits-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, #b85a1c);
}

/* ── Detail modal ─────────────────────────────────────────────── */
.credits-modal { max-width: 620px; width: 92%; }
.credits-modal-body {
  padding: 4px 4px 8px;
  max-height: 72vh;
  overflow-y: auto;
}

.credits-snap {
  border: 1px solid var(--border, #d9cdb8);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--cream, #f7f1e6);
  margin-bottom: 14px;
}
.credits-snap-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.95rem;
  margin: 2px 0;
}
.credits-snap-row > strong { font-size: 1.15rem; color: var(--brown-dark, #4a3c28); }
.credits-snap-row .credits-zero { color: #9a2a2a; }
.credits-snap-sub { font-size: 0.8rem; color: var(--text-muted, #8a7c64); }

.credits-explain p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--brown-dark, #4a3c28);
  margin: 0 0 8px;
}

.credits-options { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.credits-option {
  border: 1px solid var(--border, #d9cdb8);
  border-radius: 8px;
  padding: 12px 14px;
}
.credits-option-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.95rem; color: var(--brown-dark, #4a3c28);
  margin-bottom: 6px;
}
.credits-option-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent, #b85a1c); color: #fff;
  font-size: 0.78rem; font-weight: 800; flex: 0 0 auto;
}
.credits-option p { font-size: 0.84rem; line-height: 1.45; color: var(--brown-dark, #4a3c28); margin: 0 0 8px; }
.credits-option a { color: var(--accent, #b85a1c); }

.credits-cta {
  display: inline-block;
  appearance: none;
  border: 1px solid var(--accent, #b85a1c);
  background: var(--accent, #b85a1c);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}
.credits-cta:hover { filter: brightness(1.05); }
/* Secondary CTA — for "turn off developer mode" alongside a primary reconnect. */
.credits-cta-secondary {
  background: transparent !important;
  color: var(--accent, #b85a1c) !important;
  border: 1px solid var(--border, #d9cdb8) !important;
  margin-left: 8px;
}
.credits-cta-secondary:hover { background: var(--cream-dark, #efe6d6) !important; }
.credits-cta:disabled,
.credits-cta-disabled {
  opacity: 0.5; cursor: default; pointer-events: none;
  background: var(--cream-dark, #efe6d6); color: var(--text-muted, #8a7c64);
  border-color: var(--border, #d9cdb8);
}
/* The Option-3 CTA is an <a> INSIDE .credits-option, whose generic `a` rule
   (accent colour) would otherwise repaint it accent-on-accent and make the
   label invisible. Re-assert the button text colours with higher specificity. */
.credits-option a.credits-cta { color: #fff; }
.credits-option a.credits-cta:hover { color: #fff; }
.credits-option a.credits-cta-disabled { color: var(--text-muted, #8a7c64); }

/* ── Developer mode (4th option) ──────────────────────────────── */
.credits-chip-dev { border-color: var(--accent, #b85a1c); background: var(--cream, #f7f1e6); }
.credits-chip-dev .credits-chip-dot { background: #7a3a10; }

/* Featherless key panel (2026-07-20) — default open-model provider. */
.credits-featherless { margin: 6px 0 14px; border: 1px solid var(--accent, #b85a1c); border-radius: 8px; padding: 8px 12px; background: var(--cream, #f7f1e6); }
.credits-fl-lead { font-size: 0.85rem; color: var(--brown-dark, #4a3c28); margin: 4px 0 8px; }
.credits-fl-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.credits-fl-input { flex: 1 1 180px; min-width: 140px; padding: 7px 10px; border: 1px solid var(--border, #d9cdb8); border-radius: 6px; font: inherit; }
.credits-btn { padding: 7px 14px; border: 1px solid var(--accent, #b85a1c); border-radius: 6px; background: #7a3a10; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.credits-btn.ghost { background: #fff; color: var(--brown-dark, #4a3c28); }
.credits-btn:hover { filter: brightness(1.05); }
.credits-fl-status { font-size: 0.82rem; color: var(--brown-dark, #4a3c28); font-weight: 600; margin: 4px 0 2px; }
.credits-fl-note { font-size: 0.76rem; color: var(--text-muted, #7a6a58); margin: 2px 0; }

/* Low-balance warn state (D1, 2026-07-20): amber cue that a Mira-credits user is
 * running low — a nudge, not an alarm; muted enough to sit in the toolbar. */
.credits-chip-warn {
  border-color: #c9861f;
  background: #fbf1dd;
  color: #7a4d0c;
}
.credits-chip-warn:hover { background: #f7e8c9; border-color: #b3730f; }
.credits-chip-warn .credits-chip-dot { background: #d98a1c; }

.credits-option-dev { border-left: 3px solid var(--accent, #b85a1c); }
.devworker-panel { margin-top: 8px; }
.devworker-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.86rem; font-weight: 700; color: var(--brown-dark, #4a3c28);
  margin-bottom: 8px;
}
.devworker-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-muted, #b3a489); flex: 0 0 auto;
}
.devworker-dot-on {
  background: #2e9e5b;
  box-shadow: 0 0 0 0 rgba(46,158,91,.5);
  animation: devworker-pulse 1.8s ease-out infinite;
}
@keyframes devworker-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46,158,91,.45); }
  70% { box-shadow: 0 0 0 6px rgba(46,158,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,158,91,0); }
}
.devworker-note, .devworker-hint, .devworker-step {
  font-size: 0.8rem; color: var(--text-muted, #8a7c64); margin: 6px 0;
}
.devworker-steps {
  font-size: 0.82rem; color: var(--brown-dark, #4a3c28);
  margin: 6px 0 8px; padding-left: 20px;
}
.devworker-steps li { margin: 3px 0; }
.devworker-steps a { color: var(--accent, #b85a1c); }
.devworker-cmd-host { margin: 6px 0; }
.devworker-cmd {
  display: block;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.78rem; line-height: 1.5;
  background: #2b241a; color: #f3ead8;
  padding: 10px 12px; border-radius: 7px;
  white-space: pre-wrap; word-break: break-word; cursor: pointer;
  border: 1px solid #3d3326;
}
.devworker-cmd:hover { background: #342c20; }
.devworker-cmd[data-copied]::after {
  content: "  ✓ copied"; color: #7fd6a0; font-weight: 700;
}

/* Run-visible developer-mode badge in the Atelier header. */
.devmode-header-badge {
  display: inline-flex; align-items: center;
  margin-left: 8px; padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: .2px;
  border: 1px solid var(--border, #d9cdb8);
  white-space: nowrap; cursor: pointer;
}
.devmode-header-badge:hover { filter: brightness(0.97); }
.devmode-header-badge.devmode-on {
  color: #1f7a48; background: #e8f6ee; border-color: #b8e3c9;
}
.devmode-header-badge.devmode-off {
  color: #8a5a16; background: #fbf1df; border-color: #ecd9b4;
}
.devmode-header-badge[hidden] { display: none; }

/* ── Local LLM server panel (ui/local-llm-panel.js, 2026-07-08) ──
 * Lives inside the Credits modal Option 4 + the unified-settings
 * Account & Credits pane. Dot/status idiom mirrors .devworker-*. */
.localllm-panel { margin-top: 8px; }
.localllm-sec { margin: 10px 0; }
.localllm-sec-label {
  font-size: 0.78rem; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: var(--text-muted, #8a7c64);
  margin: 10px 0 6px;
}
.localllm-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 0.86rem; font-weight: 700; color: var(--brown-dark, #4a3c28);
  margin-bottom: 6px;
}
.localllm-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-muted, #b3a489); flex: 0 0 auto;
}
.localllm-dot-on {
  background: #2e9e5b;
  box-shadow: 0 0 0 0 rgba(46,158,91,.5);
  animation: devworker-pulse 1.8s ease-out infinite;
}
.localllm-dot-off { background: #b04434; }
/* 2026-07-10 (GPU host): transitional states — starting / stopping. */
.localllm-dot-mid {
  background: #d99a26;
  box-shadow: 0 0 0 0 rgba(217,154,38,.5);
  animation: devworker-pulse 1.8s ease-out infinite;
}
.localllm-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700;
  background: var(--cream, #f7f1e6); color: var(--brown-dark, #4a3c28);
  border: 1px solid var(--border, #d9cdb8);
}
.localllm-chip-muted { color: var(--text-muted, #8a7c64); font-weight: 600; }
.localllm-note {
  font-size: 0.8rem; color: var(--text-muted, #8a7c64); margin: 6px 0;
  line-height: 1.45;
}
.localllm-btn {
  appearance: none; cursor: pointer;
  font-size: 0.74rem; font-weight: 700;
  padding: 3px 10px; border-radius: 6px;
  border: 1px solid var(--border, #d9cdb8);
  background: var(--cream, #f7f1e6); color: var(--brown-dark, #4a3c28);
}
.localllm-btn:hover { background: var(--cream-dark, #efe6d6); border-color: var(--accent, #b85a1c); }
.localllm-btn:disabled { opacity: .5; cursor: default; }
.localllm-btn-danger { color: #9a2a2a; }
.localllm-btn-danger:hover { border-color: #9a2a2a; }
.localllm-table-wrap { overflow-x: auto; }
.localllm-table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
  color: var(--brown-dark, #4a3c28);
}
.localllm-table th {
  text-align: left; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: .3px; color: var(--text-muted, #8a7c64);
  padding: 4px 8px 4px 0; border-bottom: 1px solid var(--border, #d9cdb8);
}
.localllm-table td {
  padding: 5px 8px 5px 0; border-bottom: 1px solid var(--border-light, #eadfce);
  vertical-align: middle; white-space: nowrap;
}
.localllm-tag { font-weight: 700; }
.localllm-badge {
  display: inline-block; margin-right: 4px; padding: 1px 7px;
  border-radius: 999px; font-size: 0.68rem; font-weight: 700;
  background: var(--cream, #f7f1e6); border: 1px solid var(--border, #d9cdb8);
  color: var(--brown-dark, #4a3c28);
}
.localllm-badge-tools { color: #1f7a48; background: #e8f6ee; border-color: #b8e3c9; }
.localllm-badge-warn { color: #8a5a16; background: #fbf1df; border-color: #ecd9b4; }
.localllm-actions .localllm-btn { margin-right: 4px; }
.localllm-drawer {
  border: 1px solid var(--border, #d9cdb8); border-radius: 8px;
  padding: 10px 12px; background: var(--cream, #f7f1e6); margin: 8px 0;
}
.localllm-drawer-head { display: flex; align-items: center; gap: 8px; }
.localllm-pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.72rem; line-height: 1.45;
  background: var(--white, #fff); color: var(--brown-dark, #4a3c28);
  border: 1px solid var(--border-light, #eadfce); border-radius: 6px;
  padding: 8px 10px; margin: 4px 0 8px;
  max-height: 140px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.localllm-pre-tall { max-height: 240px; }
.localllm-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.localllm-input {
  font-size: 0.8rem; padding: 5px 8px;
  border: 1px solid var(--border, #d9cdb8); border-radius: 6px;
  background: var(--white, #fff); color: var(--brown-dark, #4a3c28);
  max-width: 100%;
}
.localllm-textarea { display: block; width: 100%; min-height: 56px; resize: vertical; margin: 6px 0; box-sizing: border-box; }
.localllm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px; margin: 6px 0;
}
.localllm-field { display: flex; flex-direction: column; gap: 3px; font-size: 0.74rem; color: var(--text-muted, #8a7c64); }
.localllm-field > span { font-weight: 700; }
.localllm-pull {
  border: 1px solid var(--border, #d9cdb8); border-radius: 8px;
  padding: 8px 10px; margin: 8px 0; background: var(--cream, #f7f1e6);
}
.localllm-bar {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--border-light, #eadfce); margin: 6px 0;
}
.localllm-bar-fill {
  height: 100%; background: var(--accent, #b85a1c);
  transition: width .3s ease;
}
.localllm-testout {
  border: 1px solid var(--border, #d9cdb8); border-radius: 8px;
  padding: 8px 10px; margin: 6px 0; background: var(--cream, #f7f1e6);
}
.localllm-testtext { font-size: 0.84rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* ── GPU host cost ledger (2026-07-10) ──
 * Admin-only block under the host strip: month/window totals, the
 * last sessions, and any reconciler-flagged unattributed uptime
 * ("leak" ledger rows) in loud red. */
.localllm-hostledger {
  border: 1px solid var(--border, #d9cdb8); border-radius: 8px;
  padding: 8px 10px; margin: 8px 0; background: var(--cream, #f7f1e6);
}
.localllm-hostledger .localllm-sec-label { margin-top: 0; }
.localllm-leak {
  color: #9a2a2a; font-weight: 700;
  background: rgba(176,68,52,.08);
  border: 1px solid rgba(176,68,52,.35);
  border-radius: 6px; padding: 4px 8px;
}

/* ── Model Lab (ui/model-lab.js, 2026-07-10) ──
 * Admin-only fine-tuning observability section in unified settings'
 * Account & Credits pane: per-model metrics table, two-row diff,
 * eval-suite filter, fine-tune registry. The host div renders NOTHING
 * for non-admins (403 → fail-open empty). */
.mlab-panel { margin-top: 8px; }
.mlab-sub { margin: 2px 0 8px; }
.mlab-toolbar {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 8px;
  flex-wrap: wrap;
}
.mlab-suite-select {
  padding: 4px 8px; font-size: 0.82rem;
  border: 1px solid var(--border, #d9cdb8); border-radius: 6px;
  background: var(--white, #fff); color: var(--text, #3a2f28);
}
.mlab-btn {
  padding: 4px 10px; font-size: 0.8rem; cursor: pointer;
  border: 1px solid var(--border, #d9cdb8); border-radius: 6px;
  background: var(--cream, #f7f1e6); color: var(--text, #3a2f28);
}
.mlab-btn:disabled { opacity: 0.5; cursor: default; }
.mlab-table-wrap { overflow-x: auto; margin: 6px 0; }
.mlab-table {
  border-collapse: collapse; width: 100%; font-size: 0.8rem;
}
.mlab-table th, .mlab-table td {
  border-bottom: 1px solid var(--border-light, #eadfce);
  padding: 4px 8px; text-align: left; white-space: nowrap;
}
.mlab-table th { font-weight: 700; font-size: 0.74rem; }
.mlab-td-model { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.mlab-td-hash { font-family: monospace; font-size: 0.74rem; }
.mlab-td-notes { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlab-row-picked td { background: rgba(184, 90, 28, 0.07); }
.mlab-diff {
  border: 1px solid var(--border, #d9cdb8); border-radius: 8px;
  padding: 8px 10px; margin: 8px 0; background: var(--cream, #f7f1e6);
}
.mlab-diff-title { font-size: 0.8rem; font-weight: 700; margin-bottom: 4px; }
.mlab-delta-good { color: #2e6b34; font-weight: 700; }
.mlab-delta-bad { color: #9a2a2a; font-weight: 700; }
.mlab-hint, .mlab-empty { font-size: 0.8rem; opacity: 0.75; margin: 6px 0; }
.mlab-reg-title { font-size: 0.82rem; font-weight: 700; margin: 12px 0 4px; }
.mlab-form { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.mlab-input {
  padding: 5px 8px; font-size: 0.8rem;
  border: 1px solid var(--border, #d9cdb8); border-radius: 6px;
  background: var(--white, #fff); color: var(--text, #3a2f28);
}
.mlab-config { resize: vertical; font-family: monospace; }
.mlab-form-row { display: flex; align-items: center; gap: 8px; }
.mlab-date { max-width: 160px; }
.mlab-form-status { font-size: 0.78rem; color: #9a2a2a; }

/* ── Buy credits (2026-07-16, owner) ─────────────────────── */
.credits-buy-presets{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 6px}
.credits-buy-preset{
  padding:5px 14px;font-size:.82rem;cursor:pointer;border-radius:6px;
  border:1px solid var(--border,#D7CCC8);background:var(--white,#fff);color:var(--text,#35201A);
}
.credits-buy-preset:hover{border-color:var(--gold,#9E7A3C)}
.credits-buy-preset-active{border-color:var(--gold,#9E7A3C);background:rgba(158,122,60,.1);font-weight:600}
.credits-buy-custom{
  width:92px;padding:5px 8px;font-size:.82rem;border-radius:6px;
  border:1px solid var(--border,#D7CCC8);background:var(--white,#fff);color:var(--text,#35201A);
}
.credits-buy-breakdown{font-size:.8rem;color:var(--text-light,#5C3D2E);margin:2px 0 8px}
.credits-buy-note{font-size:.78rem;color:var(--accent,#7A3A10);min-height:1em;margin:6px 0 0}
.credits-buy-fine{font-size:.72rem;color:var(--text-muted,#7D5F50);margin-top:8px}

/* Discreet bring-your-own-key block — quiet, at the very bottom. */
.credits-byok{margin-top:14px;padding-top:10px;border-top:1px dashed var(--border-light,#EFEBE9)}
.credits-byok-summary{
  cursor:pointer;font-size:.74rem;color:var(--text-muted,#7D5F50);user-select:none;
}
.credits-byok-summary:hover{color:var(--text-light,#5C3D2E)}
.credits-byok-p{font-size:.76rem;color:var(--text-light,#5C3D2E);margin:8px 0}
.credits-buy-btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.credits-cta-crypto{background:transparent;border:1px solid var(--border,#D7CCC8);color:var(--text-light,#5C3D2E);font-weight:400}
.credits-cta-crypto:hover{border-color:var(--gold,#9E7A3C)}

/* (credits-cta-big retired 2026-07-16 — owner: the Buy button is the normal Mira .credits-cta.) */

/* Hosted contributor worker: token field + path cards (2026-07-17) */
.devworker-pathcard{border:1px solid var(--border,#D7CCC8);border-radius:10px;padding:.9rem 1.1rem;margin:.6rem 0}
.devworker-pathcard-primary{border-color:var(--gold,#9E7A3C);background:rgba(158,122,60,.05)}
.devworker-path-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;flex-wrap:wrap}
.devworker-token-wrap{margin:.6rem 0 1rem}
.devworker-token-label{display:block;font-size:.82rem;color:var(--text-light,#5C3D2E);margin-bottom:.4rem;font-weight:600}
.devworker-token-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.devworker-token-backend{width:auto;flex:0 0 auto}
.devworker-token-input{flex:1 1 260px;min-width:200px}
.devworker-fine{font-size:.74rem;color:var(--text-muted,#7D5F50);margin:.4rem 0}
.devworker-path-divider{text-align:center;font-size:.76rem;color:var(--text-muted,#7D5F50);margin:1rem 0;font-style:italic}

/* Subscription management: status + click-to-cancel / click-to-refund (2026-07-17) */
.sub-manage{font-size:.86rem;line-height:1.5}
.sub-manage-status{display:flex;align-items:baseline;gap:.5rem;font-weight:600;color:var(--text,#35201A)}
.sub-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#b7a98f;display:inline-block;transform:translateY(-1px)}
.sub-dot-on{background:#1e874b}
.sub-manage-fine{font-size:.76rem;color:var(--text-muted,#7D5F50);margin:.35rem 0 .6rem}
.sub-manage-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.sub-manage-msg{font-size:.8rem;color:var(--text-muted,#7D5F50);margin:.5rem 0 0;min-height:1em}

/* Storage management (2026-07-17): used bar + buy-more */
.stor-manage{font-size:.86rem;line-height:1.5}
.stor-line{font-weight:600;color:var(--text,#35201A)}
.stor-bar{height:8px;border-radius:5px;background:var(--cream-dark,#F0EBE3);overflow:hidden;margin:.4rem 0}
.stor-bar-fill{height:100%;background:#1e874b;border-radius:5px;transition:width .3s}
.stor-bar-fill.full{background:#a3341a}
.stor-fine{font-size:.78rem;color:var(--text-muted,#7D5F50);margin:.35rem 0}
.stor-add-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
.stor-add-label{font-size:.8rem;color:var(--text-light,#5C3D2E)}
.stor-gb{width:90px;flex:0 0 auto}
.stor-mo{width:auto;flex:0 0 auto}
.stor-msg{font-size:.8rem;color:var(--text-muted,#7D5F50);margin:.4rem 0 0;min-height:1em}
.stor-byok{background:rgba(158,122,60,.08);border-left:3px solid var(--gold,#9E7A3C);padding:.4rem .6rem;border-radius:0 6px 6px 0;color:var(--text-light,#5C3D2E)}