/* Layout: Werkzeuge links, Text Mitte, Discord-Vorschau rechts. Look: dunkles Glas, weiche Leuchtflächen, Verlauf Grün→Türkis */
:root{
  --bg:#eef3f1; --surface:rgba(255,255,255,.78); --surface-2:rgba(15,40,30,.04); --line:rgba(15,40,30,.10); --fg:#0f1a15; --muted:#5a6b63;
  --accent:#059669; --accent-2:#0891b2; --accent-fg:#ffffff; --accent-soft:rgba(5,150,105,.12); --warn:#b26a00; --bad:#c0362c;
  --glow-1:rgba(16,185,129,.18); --glow-2:rgba(6,182,212,.14); --shadow:0 10px 30px -12px rgba(15,40,30,.25);
  --dc-bg:#313338; --dc-fg:#dbdee1; --dc-muted:#949ba4; --dc-code:#2b2d31; --dc-border:#1e1f22; --dc-link:#00a8fc;
  --dc-quote:#4e5058; --dc-men-bg:rgba(88,101,242,.3); --dc-men-fg:#c9cdfb; --dc-head:#f2f3f5;
  --f-display:"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-ui:"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", Consolas, ui-monospace, monospace;
  --f-dc:"Noto Sans", "Segoe UI", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#070b0a; --surface:rgba(20,27,24,.72); --surface-2:rgba(255,255,255,.04); --line:rgba(255,255,255,.08); --fg:#e8efeb; --muted:#8fa39a;
  --accent:#34d399; --accent-2:#22d3ee; --accent-fg:#04130d; --accent-soft:rgba(52,211,153,.14); --warn:#f2b45a; --bad:#ff7a6e;
  --glow-1:rgba(16,185,129,.20); --glow-2:rgba(34,211,238,.12); --shadow:0 20px 50px -20px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#070b0a; --surface:rgba(20,27,24,.72); --surface-2:rgba(255,255,255,.04); --line:rgba(255,255,255,.08); --fg:#e8efeb; --muted:#8fa39a;
  --accent:#34d399; --accent-2:#22d3ee; --accent-fg:#04130d; --accent-soft:rgba(52,211,153,.14); --warn:#f2b45a; --bad:#ff7a6e;
  --glow-1:rgba(16,185,129,.20); --glow-2:rgba(34,211,238,.12); --shadow:0 20px 50px -20px rgba(0,0,0,.7); color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.5 var(--f-ui);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 40px}
.wrap{max-width:1720px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mark{width:46px;height:46px;border-radius:12px;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;flex:none}
.top h1{margin:0;font:800 clamp(1.5rem,3vw,2rem)/1.05 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.top p{margin:2px 0 0;color:var(--muted)}

.grid{display:grid;grid-template-columns:320px minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1279px){.grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.tools{grid-column:1/-1}}
@media (max-width:980px){.grid{grid-template-columns:minmax(0,1fr)}}

/* Werkzeugspalte: Reiter oben, Inhalt scrollt in sich */
.tools{background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-width:0;overflow:hidden}
@media (min-width:1280px){.tools{position:sticky;top:max(12px,env(safe-area-inset-top,0px));max-height:calc(100vh - 24px)}.tools .panel{max-height:none;flex:1;min-height:0}}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:8px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.tab{flex-direction:column;height:54px;padding:0 4px;line-height:1.15;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer;font-weight:600;font-size:.76rem;display:inline-flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;font-size:1.05rem}
.tab .lbl{font-size:.74rem}
.tab:hover{background:var(--surface);border-color:var(--line)}
.tab[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.tab.ki{color:var(--accent)}
.tab.ki[aria-pressed="true"]{color:var(--accent-fg)}

.editor{background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-width:0}
.toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:1px solid var(--line);background:var(--surface-2);border-radius:14px 14px 0 0}
.tb{min-width:32px;height:32px;padding:0 7px;border:1px solid transparent;background:transparent;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.92rem}
.tb:hover{background:var(--surface);border-color:var(--line)}
.tb[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--fg)}
.tb .lbl{font-weight:600}
.sep{width:1px;background:var(--line);margin:4px 3px}
.tb.code{font-family:var(--f-mono);font-size:.82rem}

.panel{padding:12px;display:flex;flex-direction:column;gap:10px;max-height:340px;overflow:auto}
.panel h3{margin:0;font:600 .75rem/1 var(--f-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.field{height:36px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:0 10px;min-width:0}
.chip{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;font-size:.88rem}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.hint{margin:0;color:var(--muted);font-size:.84rem}

.emo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:2px}
.emo{height:40px;border:0;background:transparent;border-radius:8px;font-size:1.45rem;cursor:pointer;line-height:1}
.emo:hover{background:var(--accent-soft)}

.ts-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.ts-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);cursor:pointer;text-align:left}
.ts-btn:hover{border-color:var(--accent)}
.ts-btn code{font:400 .75rem var(--f-mono);color:var(--muted)}

.tpl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.tpl{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px}
.tpl:hover{border-color:var(--accent)}
.tpl b{font-weight:600}
.tpl span{color:var(--muted);font-size:.84rem}
.drafts{display:flex;flex-direction:column;gap:6px}
.draft{display:flex;gap:8px;align-items:center;padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.draft .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draft small{color:var(--muted);font-variant-numeric:tabular-nums}
.mini{height:30px;padding:0 10px;border-radius:7px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:.84rem}
.mini:hover{border-color:var(--accent)}
.mini.del:hover{border-color:var(--bad);color:var(--bad)}

textarea#text{border:0;resize:vertical;min-height:clamp(360px,calc(100vh - 300px),900px);padding:16px 18px;background:transparent;font:14px/1.6 var(--f-mono);outline:none;width:100%}
.foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--line)}
.count{font:600 .85rem var(--f-mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.count.warn{color:var(--warn)} .count.bad{color:var(--bad)}
.meter{height:4px;width:120px;border-radius:4px;background:var(--line);overflow:hidden;display:inline-block;vertical-align:middle;margin-left:8px}
.meter i{display:block;height:100%;width:0;background:var(--accent)}
.count.warn .meter i{background:var(--warn)} .count.bad .meter i{background:var(--bad)}
.actions{display:flex;gap:8px}
.btn{height:40px;padding:0 16px;border-radius:9px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.07)}

.preview{display:flex;flex-direction:column;gap:12px;min-width:0;position:sticky;top:max(12px,env(safe-area-inset-top,0px))}
@media (max-width:980px){.preview{position:static}}
.pv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pv-head h2{margin:0;font:600 .75rem/1 var(--f-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pv-head label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem}
.pv-head .field{width:190px;height:32px}

.discord{background:var(--dc-bg);border-radius:12px;padding:18px 16px 20px;color:var(--dc-fg);font:16px/1.375 var(--f-dc);max-height:calc(100vh - 220px);overflow:auto;min-height:200px}
@media (max-width:980px){.discord{max-height:none}}
.dmsg{display:flex;gap:16px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:700 .9rem var(--f-dc);flex:none;margin-top:2px}
.dbody{min-width:0;flex:1}
.dmeta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dname{font-weight:500;color:var(--dc-head)}
.dtime{font-size:.75rem;color:var(--dc-muted)}
.dcontent{overflow-wrap:anywhere;word-break:break-word}
.dcontent .ln{min-height:1.375em;white-space:pre-wrap}
.dcontent h1,.dcontent h2,.dcontent h3{color:var(--dc-head);margin:.5rem 0 .25rem;line-height:1.375;font-weight:700}
.dcontent h1{font-size:1.5rem} .dcontent h2{font-size:1.25rem} .dcontent h3{font-size:1rem}
.dcontent>:first-child{margin-top:0}
.dcontent .sub{font-size:.8125rem;color:var(--dc-muted)}
.dcontent blockquote{margin:0;padding:0 8px 0 12px;border-left:4px solid var(--dc-quote);border-radius:4px}
.dcontent ul,.dcontent ol{margin:.25rem 0 .25rem 1rem;padding-left:1rem}
.dcontent li{margin:.1rem 0;white-space:pre-wrap}
.dcontent code{font:.85em/1.125rem var(--f-mono);background:var(--dc-code);border:1px solid var(--dc-border);border-radius:4px;padding:.1em .25em}
.dcontent pre{margin:.3rem 0;background:var(--dc-code);border:1px solid var(--dc-border);border-radius:4px;padding:.5em;overflow-x:auto;max-width:100%}
.dcontent pre code{border:0;padding:0;background:none;white-space:pre}
.dcontent a{color:var(--dc-link);text-decoration:none} .dcontent a:hover{text-decoration:underline}
.dcontent .men{background:var(--dc-men-bg);color:var(--dc-men-fg);border-radius:3px;padding:0 2px;font-weight:500}
.dcontent .ts{background:rgba(255,255,255,.06);border-radius:3px;padding:0 2px}
.dcontent .cemo{color:var(--dc-muted)}
.dcontent .spoiler{background:var(--dc-border);color:transparent;border-radius:3px;cursor:pointer;padding:0 2px}
.dcontent .spoiler *{visibility:hidden}
.dcontent .spoiler.open{background:rgba(255,255,255,.1);color:inherit}
.dcontent .spoiler.open *{visibility:visible}
.dcontent.jumbo{font-size:3rem;line-height:1.2}
.dcontent .empty{color:var(--dc-muted);font-style:italic}

details.cheat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
details.cheat summary{cursor:pointer;font-weight:600}
.cheat-table{overflow-x:auto;margin-top:8px}
.cheat table{border-collapse:collapse;width:100%;font-size:.88rem}
.cheat td{padding:5px 8px;border-top:1px solid var(--line);vertical-align:top}
.cheat td:first-child{font-family:var(--f-mono);font-size:.8rem;white-space:nowrap;color:var(--accent)}

.ki-out{white-space:pre-wrap;font:13px/1.55 var(--f-mono);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;max-height:160px;overflow:auto;margin:0}
.ki-status{margin:0;font-weight:600}
.ki-status.bad{color:var(--bad)}
.ki-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;padding:8px 8px 8px 14px;font-weight:600}
.ki-banner .actions{gap:6px}
.ki-banner .btn{height:34px}
.tb.ki{color:var(--accent);font-weight:600}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);text-align:center;z-index:20}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
.logout{margin-left:auto;color:var(--muted);font-weight:600;text-decoration:none}
.logout:hover{color:var(--fg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.actions{flex-wrap:wrap}
.login{max-width:380px;margin:12vh auto 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px}
.login h1{margin:0;font:800 1.6rem/1.1 var(--f-display)}
.login .field{height:42px;width:100%}
.login .err{color:var(--bad);font-weight:600;margin:0}

/* ===== Modernes Aussehen (v1.4) ===== */
body{background:radial-gradient(900px 500px at 8% -10%,var(--glow-1),transparent 60%),radial-gradient(800px 500px at 100% 0%,var(--glow-2),transparent 60%),var(--bg);background-attachment:fixed;font-size:14.5px;letter-spacing:-.005em}
.top{padding:6px 0 4px}
.mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 8px 24px -8px var(--accent)}
.top h1{font:800 1.55rem/1.1 var(--f-display);letter-spacing:-.03em;background:linear-gradient(90deg,var(--fg),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.top p{font-size:.88rem}
.logout{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(12px)}
.tools,.editor,details.cheat{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.tabs{background:transparent;border-bottom:1px solid var(--line);padding:10px}
.tab{border-radius:12px;color:var(--muted);transition:background .15s,color .15s,transform .15s}
.tab:hover{background:var(--surface-2);border-color:transparent;color:var(--fg)}
.tab[aria-pressed="true"]{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-fg);border-color:transparent;box-shadow:0 6px 18px -8px var(--accent)}
.panel h3{font-size:.7rem;letter-spacing:.12em}
.toolbar{background:transparent;border-bottom:1px solid var(--line);border-radius:20px 20px 0 0;padding:10px;gap:2px}
.tb{border-radius:10px;color:var(--muted);transition:background .15s,color .15s}
.tb:hover{background:var(--surface-2);border-color:transparent;color:var(--fg)}
.sep{background:var(--line);margin:6px 4px}
textarea#text{padding:20px 22px;font-size:13.5px;line-height:1.7}
.foot{border-top:1px solid var(--line);padding:12px 14px}
.field{border-radius:12px;background:var(--surface-2);border-color:var(--line);transition:border-color .15s,box-shadow .15s}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chip{border-radius:999px;background:var(--surface-2);border-color:var(--line);transition:all .15s}
.chip:hover{border-color:var(--accent);color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:transparent;font-weight:600}
.tpl{border-radius:14px;background:var(--surface-2);border-color:transparent;padding:12px 14px;transition:transform .15s,border-color .15s,background .15s}
.tpl:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}
.tpl b{font-size:.92rem}
.emo{border-radius:10px;transition:transform .12s,background .12s}
.emo:hover{transform:scale(1.18)}
.ts-btn,.draft{border-radius:12px;background:var(--surface-2);border-color:transparent}
.ts-btn:hover{border-color:var(--accent)}
.btn{height:40px;border-radius:12px;background:var(--surface-2);border-color:var(--line);transition:transform .12s,box-shadow .15s,background .15s}
.btn:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-fg);border:0;box-shadow:0 8px 22px -10px var(--accent)}
.btn.primary:hover{filter:brightness(1.08);box-shadow:0 10px 26px -8px var(--accent)}
.btn:disabled{opacity:.6;cursor:wait}
.meter{height:6px;width:140px;border-radius:999px}
.meter i{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}
.pv-head h2{font-size:.7rem;letter-spacing:.12em}
.discord{border-radius:20px;border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
.ki-banner{border-radius:16px;background:linear-gradient(135deg,var(--accent-soft),transparent);border-color:var(--accent);backdrop-filter:blur(12px)}
.ki-out{border-radius:12px}
.toast{border-radius:999px;padding:12px 20px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-fg);box-shadow:var(--shadow)}
.login{border-radius:24px;background:var(--surface);backdrop-filter:blur(18px);box-shadow:var(--shadow);padding:32px}
.login h1{font:800 1.7rem/1.1 var(--f-display);letter-spacing:-.03em}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
@media (prefers-reduced-motion:reduce){.tab,.tb,.tpl,.emo,.btn,.chip{transition:none}.tpl:hover,.emo:hover{transform:none}}