/* ============================================================
   TextLab — design system (ported from the Claude-design .dc
   prototype into real, self-contained CSS). Fonts self-hosted
   (see vendor/fonts/fonts.css) — no external runtime calls.
   ============================================================ */

:root {
  --coral:#EC6608; --coral-700:#C4530A; --coral-soft:#FCEBDD;
  --ink:#17242B; --grey:#5C6F78; --grey-2:#8296A0;
  --hairline:#D9E1E5; --bg:#F4F7F8; --paper:#FFFFFF;
  --green:#1F7A4D; --green-soft:#E4F0EA;
  --amber:#C8860B; --amber-soft:#FBF0DA;
  --danger:#D64534; --danger-soft:#FBE5E2;
  --shadow:0 1px 2px rgba(23,36,43,.04), 0 8px 24px rgba(23,36,43,.06);
  --shadow-lg:0 12px 48px rgba(23,36,43,.16);
  --serif:'DM Serif Display', Georgia, serif;
  --sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}
[data-theme="dark"] {
  --coral:#F5811F; --coral-700:#EC6608; --coral-soft:#3A2415;
  --ink:#EAF0F2; --grey:#9DAEB6; --grey-2:#6C7E87;
  --hairline:#26363E; --bg:#10191E; --paper:#17242B;
  --green:#4FB07E; --green-soft:#16281F;
  --amber:#E0A63C; --amber-soft:#2C2312;
  --danger:#E8695B; --danger-soft:#2E1A18;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 12px 48px rgba(0,0,0,.55);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a { color:var(--coral); text-decoration:none; }
a:hover { color:var(--coral-700); }
h1,h2,h3 { font-family:var(--serif); font-weight:400; letter-spacing:-.01em; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--hairline); border-radius:8px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--grey-2); background-clip:content-box; }

@keyframes tl-pulse { 0%{box-shadow:0 0 0 0 rgba(236,102,8,.5);} 70%{box-shadow:0 0 0 6px rgba(236,102,8,0);} 100%{box-shadow:0 0 0 0 rgba(236,102,8,0);} }
@keyframes tl-fade { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }

/* ---- brand mark ---- */
.tl-mark { width:30px; height:30px; border-radius:7px; background:var(--coral); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:19px; line-height:1; }
.tl-mark.lg { width:34px; height:34px; font-size:22px; border-radius:8px; box-shadow:0 4px 12px rgba(236,102,8,.35); }
.tl-wordmark { font-family:var(--serif); font-size:20px; letter-spacing:-.01em; }

/* ---- buttons ---- */
.btn { height:40px; padding:0 16px; border:1px solid transparent; border-radius:2px; background:var(--paper);
  color:var(--ink); font:inherit; font-weight:600; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; white-space:nowrap; transition:background .12s,border-color .12s; }
.btn-primary { background:var(--coral); color:#fff; border-color:var(--coral); }
.btn-primary:hover { background:var(--coral-700); border-color:var(--coral-700); color:#fff; }
.btn-ghost { background:transparent; border-color:var(--hairline); color:var(--ink); font-weight:500; }
.btn-ghost:hover { background:var(--bg); border-color:var(--grey-2); color:var(--ink); }
.btn-block { width:100%; height:42px; }
.btn-sm { height:32px; padding:0 11px; font-size:12.5px; }

/* ---- form controls ---- */
.field-label { display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; color:var(--ink); }
.input, .textarea, .select { width:100%; min-height:40px; padding:9px 12px; border:1px solid var(--hairline);
  border-radius:2px; background:var(--bg); color:var(--ink); font:inherit; outline:none; }
.textarea { resize:vertical; line-height:1.5; }
.input:focus, .textarea:focus, .select:focus { border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-soft); }

/* ---- app shell ---- */
.app-shell { display:grid; grid-template-columns:236px 1fr; min-height:100vh; }
.sidebar { background:var(--paper); border-right:1px solid var(--hairline); display:flex; flex-direction:column;
  padding:18px 14px; position:sticky; top:0; height:100vh; }
.sidebar .brand { display:flex; align-items:center; gap:10px; padding:4px 6px 20px; }
.nav-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-2); padding:0 8px 8px; }
.nav-item { width:100%; text-align:left; border:none; background:transparent; color:var(--grey); font:inherit; font-weight:500;
  cursor:pointer; padding:9px 10px; border-radius:6px; display:flex; align-items:center; gap:10px; margin-bottom:2px; text-decoration:none; }
.nav-item:hover { background:var(--bg); color:var(--ink); }
.nav-item.active { background:var(--coral-soft); color:var(--coral-700); font-weight:600; }
.nav-item .ic { width:16px; text-align:center; opacity:.85; }
.sidebar .foot { margin-top:auto; padding-top:16px; border-top:1px dashed var(--hairline); }
.user-chip { display:flex; align-items:center; gap:10px; padding:6px 6px 10px; }
.avatar { width:30px; height:30px; border-radius:50%; background:#3E5C6B; color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:600; flex:none; }
.main { min-width:0; display:flex; flex-direction:column; }
.page { padding:26px 32px 40px; max-width:1180px; width:100%; animation:tl-fade .18s ease both; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.page-head h1 { font-size:30px; line-height:1.1; margin:0; }
.page-head .sub { color:var(--grey); margin-top:4px; }

/* ---- cards ---- */
.card { background:var(--paper); border:1px solid var(--hairline); border-radius:12px; box-shadow:var(--shadow); }
.card.pad { padding:20px; }

/* ---- filter bar ---- */
.filterbar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; align-items:center; }
.filter-chip { display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--hairline);
  border-radius:8px; padding:8px 12px; font-size:13px; color:var(--grey); }
.filter-chip b { color:var(--ink); font-weight:600; }
.search { flex:1; min-width:220px; display:flex; align-items:center; gap:8px; background:var(--paper);
  border:1px solid var(--hairline); border-radius:8px; padding:0 12px; }
.search input { border:none; background:transparent; outline:none; font:inherit; color:var(--ink); height:40px; width:100%; }

/* ---- table ---- */
.tl-table { width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--hairline);
  border-radius:12px; overflow:hidden; }
.tl-table th { text-align:left; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--grey-2); padding:12px 16px; border-bottom:1px solid var(--hairline); }
.tl-table td { padding:14px 16px; border-bottom:1px dashed var(--hairline); vertical-align:middle; }
.tl-table tr:last-child td { border-bottom:none; }
.tl-table tbody tr { cursor:pointer; }
.tl-table tbody tr:hover { background:var(--bg); }
.tl-title { font-weight:600; color:var(--ink); }

/* ---- pills ---- */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.8; }
.pill--entwurf { background:var(--bg); color:var(--grey); }
.pill--arbeit { background:var(--amber-soft); color:var(--amber); }
.pill--review { background:var(--coral-soft); color:var(--coral-700); }
.pill--final { background:var(--green-soft); color:var(--green); }
.pill--plain { background:var(--bg); color:var(--grey); }
.pill--plain::before { display:none; }

/* ---- workflow cards ---- */
.wf-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.wf-card { display:block; text-align:left; background:var(--paper); border:1px solid var(--hairline); border-radius:14px;
  padding:22px; cursor:pointer; transition:border-color .12s, box-shadow .12s, transform .12s; }
.wf-card:hover { border-color:var(--coral); box-shadow:var(--shadow); transform:translateY(-2px); }
.wf-card .wf-ic { width:44px; height:44px; border-radius:11px; background:var(--coral-soft); color:var(--coral-700);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }
.wf-card h3 { font-size:18px; margin:0 0 6px; }
.wf-card p { color:var(--grey); margin:0 0 12px; font-size:13.5px; }
.wf-card .wf-len { font-size:12px; color:var(--grey-2); font-family:var(--mono); }

/* ---- KI-Entwurf badge ---- */
.badge-ki { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--coral-700);
  background:var(--coral-soft); border-radius:999px; padding:4px 12px; }
.badge-ki::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--coral); }

/* ---- studio (3-column workspace) ---- */
.studio { display:grid; grid-template-columns:minmax(280px,1fr) minmax(420px,1.4fr) minmax(300px,1fr); gap:0; height:calc(100vh - 0px); }
.studio-col { border-right:1px solid var(--hairline); display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.studio-col:last-child { border-right:none; }
.studio-col .col-head { padding:14px 18px; border-bottom:1px solid var(--hairline); display:flex; align-items:center;
  justify-content:space-between; gap:10px; }
.studio-col .col-body { padding:18px; overflow:auto; flex:1; }
.col-title { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-2); }
.source-block { background:var(--bg); border:1px solid var(--hairline); border-radius:8px; padding:16px; }
.source-block .dateline { font-weight:700; color:var(--ink); }
.source-block p { margin:0 0 12px; }
.source-block p:last-child { margin-bottom:0; }

/* Längen-Meter */
.laengen-meter { display:flex; align-items:center; gap:10px; }
.laengen-meter .track { flex:1; height:8px; border-radius:99px; background:var(--bg); overflow:hidden; position:relative; }
.laengen-meter .fill { height:100%; border-radius:99px; background:var(--green); }
.laengen-meter.warn .fill { background:var(--amber); }
.laengen-meter .val { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--grey); white-space:nowrap; }
.laengen-meter.warn .val { color:var(--amber); }

/* refinement thread */
.thread { display:flex; flex-direction:column; gap:12px; }
.msg { max-width:92%; padding:10px 13px; border-radius:12px; font-size:13.5px; line-height:1.5; }
.msg.user { align-self:flex-end; background:var(--coral); color:#fff; border-bottom-right-radius:3px; }
.msg.bot { align-self:flex-start; background:var(--bg); border:1px solid var(--hairline); border-bottom-left-radius:3px; }

/* model toggle */
.seg { display:inline-flex; background:var(--bg); border:1px solid var(--hairline); border-radius:8px; padding:3px; gap:2px; }
.seg button { border:none; background:transparent; color:var(--grey); font:inherit; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:6px; cursor:pointer; }
.seg button.on { background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }

/* draft editor */
.draft { font-size:15px; line-height:1.7; color:var(--ink); }
.draft h2 { font-size:20px; margin:0 0 12px; }
.draft .teaser { font-style:italic; color:var(--grey); font-weight:500; margin-bottom:14px; }
.draft p { margin:0 0 14px; }
.zz { font-family:var(--serif); font-size:15px; color:var(--ink); margin:18px 0 10px; }

/* auth */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px;
  background:radial-gradient(1200px 600px at 50% -10%, var(--coral-soft), transparent 60%), var(--bg); }
.auth-card { width:100%; max-width:392px; }
.auth-brand { display:flex; align-items:center; gap:11px; justify-content:center; margin-bottom:28px; }
.auth-brand .tl-wordmark { font-size:25px; }
.divider { display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--grey-2); font-size:12px; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--hairline); }

/* alerts */
.alert { border-radius:8px; padding:11px 14px; font-size:13.5px; margin-bottom:16px; }
.alert-error { background:var(--danger-soft); color:var(--danger); }
.alert-ok { background:var(--green-soft); color:var(--green); }

/* misc */
.stack > * + * { margin-top:14px; }
.muted { color:var(--grey); }
.mono { font-family:var(--mono); }
.chip-cost { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; color:var(--grey);
  background:var(--bg); border:1px solid var(--hairline); border-radius:99px; padding:4px 10px; }

@media (max-width:960px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; align-items:center; flex-wrap:wrap; }
  .sidebar .foot { margin:0 0 0 auto; border:none; padding:0; }
  .studio { grid-template-columns:1fr; height:auto; }
  .studio-col { border-right:none; border-bottom:1px solid var(--hairline); }
}