/* PRD Maker — shared design system. Linked by index.html and admin.html. */
:root {
  --bg:#0d0f14; --panel:#161922; --panel2:#1d2130; --border:#2a2f3d; --border2:#363c4d;
  --fg:#e8eaf0; --muted:#9aa3b2; --faint:#6b7385;
  --accent:#6c8cff; --accent-soft:rgba(108,140,255,.15); --accent-2:#8b5cf6;
  --ok:#56d364; --err:#ff6b6b; --warn:#f5b450;
  --radius:10px; --radius-sm:7px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(60vw 50vh at 0% -5%, rgba(108,140,255,.10), transparent 60%),
    radial-gradient(55vw 45vh at 100% 0%, rgba(139,92,246,.10), transparent 55%);
  background-attachment:fixed;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.hidden { display:none !important; }

/* nicer scrollbars */
* { scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--faint); }
::selection { background:var(--accent-soft); }

/* ---------- header ---------- */
header.bar {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px;
  padding:13px 22px; background:rgba(13,15,20,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
header.bar .brand { display:flex; align-items:center; gap:11px; }
header.bar .logo {
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-weight:700;
  box-shadow:0 4px 14px rgba(108,140,255,.4);
}
header.bar h1 { margin:0; font-size:16px; letter-spacing:-.2px; }
header.bar .tagline { margin:1px 0 0; color:var(--muted); font-size:12.5px; }
header.bar .spacer { flex:1; }
header.bar .actions { display:flex; align-items:center; gap:8px; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:0; border-radius:var(--radius-sm);
  padding:9px 16px; font:600 13.5px system-ui,sans-serif; cursor:pointer; transition:filter .15s,box-shadow .15s,transform .05s;
  box-shadow:0 2px 10px rgba(108,140,255,.25);
}
.btn:hover { filter:brightness(1.08); box-shadow:0 4px 16px rgba(108,140,255,.4); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn.ghost { background:var(--panel2); color:var(--fg); border:1px solid var(--border); box-shadow:none; }
.btn.ghost:hover { background:var(--border); filter:none; }
.btn.sm { padding:7px 12px; font-size:12.5px; }
.btn.block { width:100%; }

/* segmented control */
.seg { display:inline-flex; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px; }
.seg button {
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  padding:5px 11px; font:600 12px system-ui,sans-serif; border-radius:5px; transition:.15s;
}
.seg button.active { background:var(--accent-soft); color:var(--accent); }

/* ---------- form fields ---------- */
.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.field label .req { color:var(--accent); margin-left:2px; }
.field .hint { color:var(--muted); font-size:11.5px; margin:0 0 7px; }
input, textarea, select {
  width:100%; background:var(--panel); color:var(--fg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:10px 12px; font:14px/1.5 system-ui,sans-serif; outline:0; transition:border-color .15s,box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
textarea { resize:vertical; min-height:62px; }
select { appearance:none; cursor:pointer; }

/* section grouping inside the intake form (collapsible) */
.form-section { margin:4px 0 18px; }
.form-section > .sec-head {
  display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  margin:18px 0 4px; padding-bottom:7px; border-bottom:1px solid var(--border);
  font:700 11px system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
}
.form-section > .sec-head:hover { color:var(--muted); }
.form-section > .sec-head .chev { transition:transform .15s; font-size:9px; }
.form-section.collapsed > .sec-head .chev { transform:rotate(-90deg); }
.form-section.collapsed > .sec-body { display:none; }
.form-section .sec-head .opt { margin-left:auto; font-weight:600; letter-spacing:0; text-transform:none; color:var(--faint); font-size:10.5px; }

/* template starter bar */
.tpl-bar { padding:16px 22px 2px; }
.tpl-bar .tpl-label { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:9px; }
.tpl-cards { display:flex; flex-wrap:wrap; gap:8px; }
.tpl-card {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--panel); border:1px solid var(--border); border-radius:99px;
  padding:7px 14px; font:600 12.5px system-ui,sans-serif; color:var(--fg);
  transition:transform .12s,border-color .15s,background .15s,box-shadow .15s;
}
.tpl-card:hover { border-color:var(--accent); background:var(--accent-soft); transform:translateY(-2px); box-shadow:0 6px 18px rgba(108,140,255,.18); }
.tpl-card:active { transform:translateY(0); }
.tpl-card span { font-size:14px; }
.tpl-card.blank { color:var(--muted); border-style:dashed; }

/* preset chips under a field (e.g. alur) */
.preset-row { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.preset-chip {
  cursor:pointer; background:var(--panel2); border:1px solid var(--border); border-radius:99px;
  padding:4px 11px; font:600 11.5px system-ui,sans-serif; color:var(--muted); transition:.15s;
}
.preset-chip:hover { border-color:var(--accent); color:var(--fg); background:var(--accent-soft); }

/* thin-input warning banner */
.warn-box { background:rgba(245,180,80,.1); border:1px solid rgba(245,180,80,.35); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:14px; font-size:13px; color:var(--warn); }
.warn-box ul { margin:7px 0 10px; padding-left:18px; color:#e8d3a8; }
.warn-box .row { display:flex; gap:8px; }

/* ---------- layout ---------- */
main.grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); height:calc(100vh - 61px); }
.pane { background:var(--bg); display:flex; flex-direction:column; min-height:0; min-width:0; }
.pane-head {
  display:flex; align-items:center; gap:10px; padding:11px 18px;
  border-bottom:1px solid var(--border); background:var(--bg);
  position:sticky; top:0; z-index:5;
}
.pane-head .title { font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.pane-head .spacer { flex:1; }
.body { flex:1; overflow:auto; padding:18px 22px; min-width:0; }

/* login pane (covers grid) */
.login-pane { grid-column:1/-1; display:grid; place-items:center; }
.login-card {
  width:100%; max-width:330px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:26px; box-shadow:0 20px 50px rgba(0,0,0,.4);
  position:relative; overflow:hidden;
}
.login-card::before {
  content:""; position:absolute; inset:-1px -1px auto; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.login-card .lock {
  width:42px; height:42px; border-radius:11px; margin:0 auto 14px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:20px;
}
.login-card h2 { margin:0 0 4px; font-size:17px; text-align:center; }
.login-card p.sub { margin:0 0 20px; text-align:center; color:var(--muted); font-size:13px; }

/* ---------- output / markdown ---------- */
#out { position:relative; }
.empty-state { color:var(--faint); text-align:center; padding:60px 20px; font-size:13.5px; }
.empty-state .big { font-size:30px; margin-bottom:8px; opacity:.5; }
.err { color:var(--err); }
.ok { color:var(--ok); }
.msg { min-height:18px; font-size:13px; }

/* indeterminate stream bar under the output head */
.streambar { height:2px; background:transparent; overflow:hidden; }
.streambar.on::after {
  content:""; display:block; height:100%; width:35%;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:slide 1.1s ease-in-out infinite;
}
@keyframes slide { 0%{margin-left:-35%} 100%{margin-left:100%} }

.spinner { width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.markdown { font-size:14px; line-height:1.65; word-wrap:break-word; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { line-height:1.3; margin:22px 0 10px; font-weight:700; }
.markdown h1 { font-size:22px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.markdown h2 { font-size:18px; color:#fff; }
.markdown h3 { font-size:15px; color:var(--fg); }
.markdown h4 { font-size:13.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.markdown p { margin:10px 0; }
.markdown ul, .markdown ol { margin:10px 0; padding-left:22px; }
.markdown li { margin:4px 0; }
.markdown a { color:var(--accent); }
.markdown strong { color:#fff; font-weight:700; }
.markdown hr { border:0; border-top:1px solid var(--border); margin:20px 0; }
.markdown blockquote { margin:12px 0; padding:6px 14px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 6px 6px 0; color:var(--muted); }
.markdown code { font-family:var(--mono); font-size:12.5px; background:var(--panel2); padding:2px 6px; border-radius:5px; }
.markdown pre { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:13px 15px; overflow:auto; margin:12px 0; }
.markdown pre code { background:transparent; padding:0; font-size:12.5px; }
.markdown table { border-collapse:collapse; width:100%; margin:14px 0; font-size:12.5px; display:block; overflow:auto; }
.markdown th, .markdown td { border:1px solid var(--border); padding:7px 11px; text-align:left; vertical-align:top; }
.markdown th { background:var(--panel2); font-weight:700; white-space:nowrap; }
.markdown tbody tr:nth-child(even) td { background:rgba(255,255,255,.018); }

/* raw markdown view */
#mdRaw { white-space:pre-wrap; word-wrap:break-word; margin:0; font:12.5px/1.6 var(--mono); color:var(--fg); }

/* subtle entrance for generated content */
.markdown { animation:fadeUp .25s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* "thinking" indicator while a reasoning model streams nothing visible yet */
.thinking { display:flex; flex-direction:column; align-items:center; gap:12px; padding:54px 20px; color:var(--muted); }
.thinking .dots { display:flex; gap:7px; }
.thinking .dots span {
  width:10px; height:10px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  animation:bounce 1.1s ease-in-out infinite;
}
.thinking .dots span:nth-child(2) { animation-delay:.18s; }
.thinking .dots span:nth-child(3) { animation-delay:.36s; }
@keyframes bounce { 0%,80%,100% { transform:translateY(0); opacity:.4; } 40% { transform:translateY(-9px); opacity:1; } }
.thinking-text { font-size:14px; font-weight:600; color:var(--fg); }
.thinking-text .t { color:var(--accent); font-variant-numeric:tabular-nums; }
.thinking-sub { font-size:12px; color:var(--faint); }

/* ---------- status pill (admin) ---------- */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; border:1px solid var(--border); }
.pill .dot { width:7px; height:7px; border-radius:50%; background:var(--warn); }
.pill.ok .dot { background:var(--ok); }
.pill.ok { color:var(--ok); border-color:rgba(86,211,100,.3); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  main.grid { grid-template-columns:1fr; height:auto; }
  .pane { min-height:0; }
  .body { overflow:visible; }
  .pane.pane-out .body { min-height:72vh; }
  header.bar .tagline { display:none; }
}