:root {
  --bg-0:#0e1116; --bg-1:#151a21; --bg-2:#1b222b; --bg-3:#222b36;
  --line:#2c3743; --ink:#e7edf3; --ink-dim:#aab6c2; --ink-mute:#6f7d8a;
  --emerald:#3ddc84; --emerald-d:#2bb56b; --red:#fb7185; --amber:#fbbf24; --sky:#38bdf8;
  --radius:12px; --radius-sm:8px;
  --font:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body {
  background:var(--bg-0); color:var(--ink); font-family:var(--font);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a { color:var(--emerald); text-decoration:none; }
a:hover { text-decoration:underline; }
.muted { color:var(--ink-dim); }
.small { font-size:12px; }

/* Topbar */
.topbar {
  display:flex; align-items:center; gap:1.5rem; padding:.7rem 1.2rem;
  background:var(--bg-1); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.brand { font-weight:700; font-size:1.15rem; color:var(--ink); letter-spacing:-.01em; }
.brand:hover { text-decoration:none; }
.brand-dot { color:var(--emerald); }
.brand--login { font-size:1.6rem; display:block; margin-bottom:.2rem; }
.mainnav { display:flex; gap:.3rem; flex:1; }
.mainnav a { color:var(--ink-dim); padding:.4rem .8rem; border-radius:var(--radius-sm); font-size:14px; }
.mainnav a:hover { background:var(--bg-2); color:var(--ink); text-decoration:none; }
.mainnav a.is-active { background:var(--bg-3); color:var(--ink); }
.topbar-right { display:flex; align-items:center; gap:.7rem; }

/* Layout */
.wrap { max-width:1100px; margin:0 auto; padding:1.6rem 1.2rem 4rem; }
.page > h1 { margin:.2rem 0 1.2rem; font-size:1.6rem; }
.card {
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.5rem; margin-bottom:1.2rem;
}
.card h2 { margin:1.6rem 0 .8rem; font-size:1.05rem; color:var(--ink); }
.card h2:first-child { margin-top:0; }
.empty { text-align:center; color:var(--ink-dim); padding:2.4rem; }

/* Forms */
label { display:flex; flex-direction:column; gap:.35rem; font-size:13px; color:var(--ink-dim); }
input, select, textarea {
  background:var(--bg-0); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--radius-sm); padding:.55rem .7rem; font:inherit; font-size:14px; width:100%;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--emerald); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.4rem; }
.checkline { flex-direction:row; align-items:center; gap:.5rem; color:var(--ink); }
.checkline input { width:auto; }
.btnrow { display:flex; gap:.6rem; margin-top:1.2rem; flex-wrap:wrap; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border:1px solid var(--line); background:var(--bg-2); color:var(--ink);
  padding:.55rem 1.1rem; border-radius:var(--radius-sm); font:inherit; font-size:14px;
  cursor:pointer; transition:background .15s,border-color .15s,opacity .15s;
}
.btn:hover { background:var(--bg-3); }
.btn-primary { background:var(--emerald); border-color:var(--emerald); color:#06210f; font-weight:600; }
.btn-primary:hover { background:var(--emerald-d); }
.btn-ghost { background:transparent; }
.btn-sm { padding:.35rem .7rem; font-size:13px; }
.btn:disabled { opacity:.55; cursor:not-allowed; }

/* Test result / alerts */
.testresult { margin-top:1rem; padding:.7rem 1rem; border-radius:var(--radius-sm); font-size:14px; border:1px solid var(--line); background:var(--bg-2); }
.testresult.ok { border-color:var(--emerald); color:#9ff0c2; }
.testresult.bad { border-color:var(--red); color:#ffc2cc; }
.alert { background:rgba(251,113,133,.12); border:1px solid var(--red); color:#ffc2cc; padding:.6rem .8rem; border-radius:var(--radius-sm); margin-bottom:.8rem; font-size:14px; }

/* Table */
.tbl { width:100%; border-collapse:collapse; font-size:14px; }
.tbl th, .tbl td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); }
.tbl th { color:var(--ink-mute); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }

/* Login */
.login-body { display:flex; min-height:100vh; align-items:center; justify-content:center; padding:1rem; }
.login-card { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius); padding:2rem; width:100%; max-width:340px; display:flex; flex-direction:column; gap:1rem; }
.login-card label { color:var(--ink); }

/* Toast */
.toast { position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); background:var(--bg-3); border:1px solid var(--line); color:var(--ink); padding:.7rem 1.1rem; border-radius:var(--radius-sm); z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.4); font-size:14px; max-width:90vw; }
.toast.ok { border-color:var(--emerald); }
.toast.bad { border-color:var(--red); }

/* Chips */
.chip { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:11px; font-weight:600;
  background:var(--bg-3); color:var(--ink-dim); border:1px solid var(--line); text-transform:uppercase; letter-spacing:.03em; }
.chip--drafted, .chip--planned        { background:rgba(61,220,132,.16); color:#7ef0ad; border-color:rgba(61,220,132,.4); }
.chip--needs_rewrite, .chip--queued   { background:rgba(251,191,36,.16); color:#fbbf24; border-color:rgba(251,191,36,.4); }
.chip--approved, .chip--pushed_shopify, .chip--ok { background:rgba(61,220,132,.32); color:#eafff2; border-color:rgba(61,220,132,.6); }
.chip--rejected, .chip--failed        { background:rgba(251,113,133,.18); color:#fb7185; border-color:rgba(251,113,133,.4); }
.chip--generating                     { background:rgba(56,189,248,.16); color:#38bdf8; }
.chip--seo                            { background:rgba(56,189,248,.14); color:#7dd3fc; border-color:rgba(56,189,248,.4); }

/* Draft-Karten */
.cards { display:flex; flex-direction:column; gap:12px; }
.draftcard { display:flex; gap:16px; padding:14px; background:var(--bg-1); border:1px solid var(--line);
  border-radius:var(--radius); text-decoration:none; color:inherit; transition:border-color .15s; }
.draftcard:hover { border-color:var(--emerald); text-decoration:none; }
.draftcard__img { width:120px; height:120px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.draftcard__body { flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
.draftcard__chips { display:flex; gap:6px; flex-wrap:wrap; }
.draftcard__title { margin:0; font-size:15px; }
.draftcard__excerpt { margin:0; font-size:13px; color:var(--ink-dim); line-height:1.4; }

/* Detail */
.dd-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin:.4rem 0 1.2rem; flex-wrap:wrap; }
.dd-head h1 { margin:.2rem 0; }
.dd-actions { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.dd-grid { display:grid; grid-template-columns:1fr 320px; gap:1.4rem; align-items:start; }
.dd-main { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.8rem; }
.article-preview { line-height:1.65; }
.article-preview h2 { margin:1.6rem 0 .6rem; font-size:1.25rem; }
.article-preview h3 { margin:1.1rem 0 .4rem; font-size:1.05rem; }
.article-preview p { margin:0 0 .9rem; }
.article-preview ul, .article-preview ol { margin:0 0 .9rem 1.4rem; }
.article-preview img { max-width:100%; border-radius:8px; }
.dd-side .card { padding:1rem 1.1rem; }
.dd-side h2 { font-size:.95rem; margin:0 0 .6rem; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13px; }
.kv div:nth-child(odd) { color:var(--ink-mute); font-size:11px; text-transform:uppercase; letter-spacing:.03em; padding-top:2px; }
.seo-score { font-size:1.4rem; margin-bottom:.5rem; }
.seo-checks { list-style:none; padding:0; margin:0 0 .6rem; font-size:13px; }
.seo-checks li.ok { color:#7ef0ad; }
.seo-checks li.bad { color:#fb7185; }

/* Strukturierte Bloecke (kz-*) im Preview */
.kz-block { margin:1.4rem 0; }
.kz-faq__item { border:1px solid var(--line); border-radius:8px; margin-bottom:.5rem; padding:.2rem .9rem; background:var(--bg-2); }
.kz-faq__q { font-weight:600; cursor:pointer; padding:.5rem 0; }
.kz-faq__a { color:var(--ink-dim); padding-bottom:.6rem; }
.kz-steps__list { list-style:none; counter-reset:step; padding:0; }
.kz-step { position:relative; padding:.2rem 0 1rem 2.4rem; counter-increment:step; }
.kz-step::before { content:counter(step); position:absolute; left:0; top:.1rem; width:1.7rem; height:1.7rem;
  background:var(--emerald); color:#06210f; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.kz-step__title { margin:0 0 .25rem; font-size:1.02rem; }
.kz-step__text, .kz-step__body { color:var(--ink-dim); }
.kz-step__meta, .kz-step__duration { font-size:12px; color:var(--ink-mute); }
.kz-callout { border:1px solid var(--line); border-left:3px solid var(--emerald); border-radius:8px; padding:.8rem 1rem; background:var(--bg-2); display:flex; gap:.7rem; }
.kz-callout--warnung, .kz-callout--fehler { border-left-color:var(--red); }
.kz-callout--wichtig { border-left-color:var(--amber); }
.kz-callout__title { font-weight:600; margin:0 0 .2rem; }
.kz-callout__body { color:var(--ink-dim); }
.kz-summary, .kz-key-takeaways { background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:.9rem 1.1rem; }
.kz-summary__label, .kz-key-takeaways__label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--emerald); font-weight:700; }
.kz-key-takeaways__list { margin:.4rem 0 0; padding-left:1.2rem; color:var(--ink-dim); }
.kz-table table { width:100%; border-collapse:collapse; font-size:13px; }
.kz-table th, .kz-table td { border:1px solid var(--line); padding:.4rem .6rem; text-align:left; }
.kz-table th { background:var(--bg-3); }
.cm-product-card { border:1px solid var(--emerald); border-radius:10px; padding:1rem 1rem 1.1rem; text-align:center; background:var(--bg-2); max-width:340px; margin:1.8rem auto; }
.cm-product-card img { max-width:240px; border-radius:8px; }
.cm-product-card figcaption { margin-top:.7rem; font-size:14px; }
.cm-related { margin:1.8rem 0; padding:1rem 1.2rem; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; }
.cm-related h2 { margin:0 0 .5rem; font-size:1.05rem; }
.cm-related ul { margin:0; padding-left:1.2rem; }
.cm-related li { margin:.2rem 0; }

@media (max-width:860px) { .dd-grid { grid-template-columns:1fr; } }
@media (max-width:720px) {
  .grid2 { grid-template-columns:1fr; }
  .topbar { flex-wrap:wrap; gap:.7rem; }
  .mainnav { order:3; flex-basis:100%; overflow-x:auto; }
  .draftcard__img { width:80px; height:80px; }
}