/* Hand-written base stylesheet. The Tailwind build in ./front emits to
   ../static/dist/output.css; this keeps the app legible on its own. */
:root {
  --bg:#0f1115; --card:#1a1e27; --fg:#e6e8ec; --muted:#9aa3b2;
  --accent:#6366f1; --accent-hover:#4f46e5; --border:#2a3140; --danger:#f87171;
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); }

.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); }
.topbar .brand { font-weight:700; color:var(--fg); text-decoration:none; letter-spacing:.3px; }
.topbar nav a { color:var(--muted); text-decoration:none; margin-left:16px; }
.topbar nav a:hover { color:var(--fg); }

.container { max-width:880px; margin:0 auto; padding:32px 20px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:28px; }
.auth-card { max-width:400px; margin:48px auto; }
.hero { text-align:center; padding:64px 0; }
h1 { margin-top:0; }

.form { display:flex; flex-direction:column; gap:14px; }
.form label { display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted); }
.form input { padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:#0f131b; color:var(--fg); font-size:15px; }
.form input:focus { outline:none; border-color:var(--accent); }

.btn { display:inline-block; text-align:center; padding:10px 16px; border-radius:8px; border:1px solid var(--border); background:#222838; color:var(--fg); text-decoration:none; cursor:pointer; font-size:15px; }
.btn:hover { border-color:var(--accent); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-block { width:100%; }

.divider { display:flex; align-items:center; text-align:center; color:var(--muted); margin:18px 0; }
.divider::before, .divider::after { content:""; flex:1; border-bottom:1px solid var(--border); }
.divider span { padding:0 12px; font-size:13px; }

.error { color:var(--danger); background:rgba(248,113,113,.1); padding:8px 12px; border-radius:8px; font-size:14px; }
.muted { color:var(--muted); }
.auth-alt { text-align:center; margin-top:18px; font-size:14px; color:var(--muted); }
.badge { background:var(--accent); color:#fff; font-size:12px; padding:2px 8px; border-radius:999px; }

/* ── Book translation ─────────────────────────────────────────────────────── */
.container { max-width:960px; }
.form textarea, .prompt-area { padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:#0f131b; color:var(--fg); font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize:vertical; }
.form input[type="file"] { padding:10px 12px; border-radius:8px; border:1px dashed var(--border); background:#0f131b; color:var(--fg); }
.form select { padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:#0f131b; color:var(--fg); font-size:15px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .grid2 { grid-template-columns:1fr; } }
fieldset.modes { border:1px solid var(--border); border-radius:8px; padding:12px 14px; }
fieldset.modes legend { padding:0 6px; font-size:13px; color:var(--muted); }
.radio { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--fg); padding:3px 0; }
.radio.disabled { color:var(--muted); }
.btn-sm { padding:5px 11px; font-size:13px; }

.job-table { width:100%; border-collapse:collapse; font-size:14px; }
.job-table th, .job-table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); }
.job-table th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; }

.status-badge { font-size:12px; padding:2px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.3px; }
.s-pending { background:rgba(148,163,184,.15); color:#94a3b8; }
.s-running { background:rgba(245,158,11,.15); color:#f59e0b; }
.s-done { background:rgba(34,197,94,.15); color:#22c55e; }
.s-error { background:rgba(248,113,113,.15); color:#f87171; }

.decisions { white-space:pre-wrap; background:#0f131b; border:1px solid var(--border); border-radius:8px; padding:12px; font:13px/1.5 ui-monospace, monospace; color:var(--muted); overflow-x:auto; }
.result-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.result-html { background:#0f131b; border:1px solid var(--border); border-radius:8px; padding:20px 24px; line-height:1.7; max-height:70vh; overflow-y:auto; }
.result-html h1, .result-html h2, .result-html h3 { margin:1.2em 0 .5em; }
.result-html p { margin:0 0 1em; }