:root {
  --accent: #ff7a1a;
  --accent-dark: #e0660f;
  --accent-soft: rgba(255, 122, 26, .14);
  --radius: 10px;
}

[data-bs-theme="dark"] {
  --app-bg: #14161a;
  --panel: #1b1d23;
  --panel-2: #22252d;
  --panel-3: #2a2e38;
  --border: rgba(255, 255, 255, .09);
  --text: #e6e9ef;
  --muted: #98a1b0;
  --hover: rgba(255, 255, 255, .06);
}

* { scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 6px; }

body.app-body, body.login-body {
  background: var(--app-bg);
  color: var(--text);
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

/* ---------------------------------------------------------- topbar */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px;
  background: rgba(20, 22, 26, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.brand { color: var(--text); text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; }
.brand-bird { margin-right: 2px; }
.brand:hover { color: var(--accent); }
.nav-links { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav-link {
  color: var(--muted); text-decoration: none; padding: 6px 11px;
  border-radius: 7px; font-size: 13.5px; white-space: nowrap;
}
.nav-link:hover { background: var(--hover); color: var(--text); }
.nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-link.small { font-size: 12px; padding: 4px 8px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.pill {
  font-size: 11.5px; padding: 3px 9px; border-radius: 20px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}
.pill.on { color: #6ee7a8; border-color: rgba(110, 231, 168, .35); background: rgba(110, 231, 168, .1); }
.pill.off { color: #ff8a8a; border-color: rgba(255, 138, 138, .3); background: rgba(255, 138, 138, .08); }
.user-chip { font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------- layout */
.wrap { max-width: 1400px; margin: 0 auto; padding: 20px 22px 60px; }
h1.page-title { font-size: 20px; font-weight: 700; margin: 4px 0 16px; }
.sub { color: var(--muted); font-size: 13px; }
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.btn-accent { background: var(--accent); border-color: var(--accent); color: #1b1206; font-weight: 650; }
.btn-accent:hover, .btn-accent:focus { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-ghost { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--panel-3); color: var(--text); }
.form-control, .form-select {
  background: var(--panel-2); border-color: var(--border); color: var(--text); font-size: 13.5px;
}
.form-control:focus, .form-select:focus {
  background: var(--panel-2); color: var(--text);
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-label { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* ---------------------------------------------------------- gallery */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 18px; }
.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; position: relative; transition: transform .12s, border-color .12s;
}
.tile:hover { transform: translateY(-2px); border-color: rgba(255, 122, 26, .45); }
.tile img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #0e1013; }
.tile .meta { padding: 8px 10px 10px; }
.tile .name { font-size: 11.5px; color: var(--muted); font-family: ui-monospace, monospace; }
.tile .prompt {
  font-size: 12px; color: #c3c9d4; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fav-btn {
  position: absolute; top: 8px; right: 8px; border: none; background: rgba(12, 14, 18, .72);
  color: #9aa3b2; border-radius: 50%; width: 30px; height: 30px; line-height: 1;
  display: grid; place-items: center; font-size: 14px;
}
.fav-btn.on { color: #ffb04a; }
.badge-soft {
  font-size: 11px; padding: 2px 7px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 1000; display: none;
  background: rgba(8, 9, 12, .88); backdrop-filter: blur(6px);
  padding: 28px; overflow: auto;
}
.lb.open { display: block; }
.lb-inner { max-width: 1180px; margin: 0 auto; display: grid; gap: 18px; grid-template-columns: 1fr 320px; }
.lb img { width: 100%; border-radius: 12px; background: #000; }
.lb-side { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.lb-side dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 10px; }
.lb-side dd { margin: 2px 0 0; font-size: 13px; word-break: break-word; }
.lb-close { position: fixed; top: 18px; right: 22px; font-size: 26px; color: #cfd6e0; background: none; border: none; }
@media (max-width: 900px) { .lb-inner { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- jobs / logs */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); border-bottom: 1px solid var(--border); padding: 7px 8px; font-weight: 600;
}
table.tbl td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.tbl tr:hover td { background: var(--hover); }
.st { font-size: 11.5px; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--border); white-space: nowrap; }
.st.queued { color: #cbb18a; background: rgba(203, 177, 138, .1); }
.st.running { color: #ffb04a; background: var(--accent-soft); border-color: rgba(255, 122, 26, .35); }
.st.done { color: #6ee7a8; background: rgba(110, 231, 168, .1); border-color: rgba(110, 231, 168, .3); }
.st.error { color: #ff8a8a; background: rgba(255, 138, 138, .1); border-color: rgba(255, 138, 138, .3); }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.log-line { font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 2px 0; color: #b9c1cd; border-bottom: 1px solid rgba(255,255,255,.03); word-break: break-word; }
.log-line .err { color: #ff9a9a; }

/* ---------------------------------------------------------- prompts */
.prompt-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.prompt-card .t { font-weight: 600; font-size: 13.5px; }
.prompt-card .b { font-size: 12.5px; color: #b9c1cd; margin: 6px 0; max-height: 76px; overflow: hidden; }
.grp-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin: 22px 0 10px; }

/* ---------------------------------------------------------- login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 20px; }
.login-wrap { width: 100%; max-width: 400px; }
.login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 32px 28px; text-align: center; }
.login-logo { font-size: 42px; line-height: 1; margin-bottom: 10px; }
.toast-note { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2000; }

/* ---------------------------------------------------------- inpaint canvas */
.paint-wrap { position: relative; display: inline-block; line-height: 0; width: 100%; }
.paint-wrap img { width: 100%; border-radius: 8px; display: block; }
.paint-wrap canvas {
  box-shadow: inset 0 0 0 1px rgba(255,122,26,.25);
  position: absolute; left: 0; top: 0; cursor: crosshair;
  border-radius: 8px; touch-action: none;
  background: transparent;
  mix-blend-mode: normal;
}
.lb-side .btn { text-decoration: none; }