:root{
  --navy:#0a1526; --navy2:#0d1b30; --card:#12233d; --card2:#0f1d33; --line:#1e3252;
  --txt:#eef3fb; --mut:#8599b0; --accent:#5b8cff; --accent-bg:#1a2f57;
  --reel:#ff5c8a; --carou:#c07bff; --image:#3fb9c9;
  --ok:#3fcf8e; --warn:#f5b94a; --crit:#ff6b6b;
  --font:'Figtree',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--navy);color:var(--txt);font-family:var(--font);font-size:14px;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img{max-width:100%}
[hidden]{display:none!important}

.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100%}
.side{background:var(--navy2);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;align-self:start;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px}
.brand i{width:26px;height:26px;border-radius:7px;background:var(--accent);display:block}
.brand b{font-size:15px;letter-spacing:.2px}
.brand small{display:block;color:var(--mut);font-size:11px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{background:none;border:0;text-align:left;padding:9px 10px;border-radius:8px;color:var(--mut);display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:500}
.nav button:hover{background:var(--card2);color:var(--txt)}
.nav button[aria-current="page"]{background:var(--accent-bg);color:var(--txt)}
.nav .cnt{font-family:var(--mono);font-size:11px;background:var(--accent);color:#06101f;border-radius:10px;padding:1px 7px;font-weight:600}
.nav .sep{height:1px;background:var(--line);margin:8px 6px}
.cust{margin-top:auto;border-top:1px solid var(--line);padding:12px 8px 0}
.main{min-width:0;padding:22px 24px 40px 28px}
.banner{background:var(--card2);border:1px dashed var(--crit);color:var(--crit);padding:8px 12px;border-radius:8px;font-size:12px;margin-bottom:18px}
h1{font-size:24px;margin:0 0 4px;font-weight:700;text-wrap:balance}
.sub{color:var(--mut);margin:0 0 20px;max-width:70ch}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.9px;color:var(--mut);font-weight:600;margin:26px 0 8px}
.view{display:none}.view.on{display:block}

.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--line);border-radius:10px;background:var(--card2)}
.band>div{padding:14px 16px;border-right:1px solid var(--line)}
.band>div:last-child{border-right:0}
.band .n{font-family:var(--mono);font-size:24px;font-weight:500;font-variant-numeric:tabular-nums}
.band .l{color:var(--mut);font-size:12px}

.rows{border:1px solid var(--line);border-radius:10px;background:var(--card2);overflow:hidden}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--card)}
.row .t{font-weight:600;overflow-wrap:anywhere}
.row .m{color:var(--mut);font-size:12px;font-family:var(--mono)}
.row.slim{grid-template-columns:minmax(0,1fr) auto auto}
.thumb{width:40px;height:56px;border-radius:6px;background:linear-gradient(160deg,#274a86,#12233d);position:relative;flex:none}
.thumb.reel{background:linear-gradient(160deg,#7a2a49,#1a2540)}
.thumb.carou{background:linear-gradient(160deg,#52318a,#1a2540)}
.thumb.image{background:linear-gradient(160deg,#1f6470,#12233d)}
.thumb.sq{height:40px}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block}
.pill{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;border:1px solid var(--line);white-space:nowrap}
.pill.ok{color:var(--ok);border-color:#1f5a47;background:#0f2a24}
.pill.warn{color:var(--warn);border-color:#5b4a22;background:#2a2412}
.pill.crit{color:var(--crit);border-color:#5b2a2f;background:#2a1519}
.pill.info{color:var(--accent);border-color:#2a4678;background:#13233f}
.tag{font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:5px;background:var(--card)}
.tag.reel{color:var(--reel)}.tag.carou{color:var(--carou)}.tag.image{color:var(--image)}
.acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btn{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-weight:600;font-size:13px}
.btn:hover{border-color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#06101f}
.btn.ghost{background:none}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.filters button{background:none;border:1px solid var(--line);border-radius:20px;padding:4px 12px;color:var(--mut);font-weight:500}
.filters button[aria-pressed="true"]{background:var(--accent-bg);color:var(--txt);border-color:var(--accent)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px}
.f{display:grid;gap:10px}
.f label{display:grid;gap:4px;color:var(--mut);font-size:12px}
.f input,.f select{background:var(--navy);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit}
.sw{display:flex;gap:6px}.sw i{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);display:block}
.bar{height:6px;background:var(--line);border-radius:4px;overflow:hidden;min-width:90px}
.bar i{display:block;height:100%;background:var(--accent)}

.hint{color:var(--mut);font-size:12px;margin:6px 0 12px}
.fbbox{width:100%;background:var(--navy);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;min-height:84px;resize:vertical}
.tg{display:flex;align-items:center;gap:8px}.tg input{accent-color:var(--accent);width:18px;height:18px}
.rk{font-family:var(--mono);color:var(--mut);width:22px}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px}
.seg button{background:none;border:0;padding:8px 18px;color:var(--mut);font-weight:600}
.seg button[aria-pressed="true"]{background:var(--accent-bg);color:var(--txt)}
.fmts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.fmt{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:var(--card2);cursor:pointer}
.fmt:has(input:checked){border-color:var(--accent);background:var(--accent-bg)}
.fmt span{display:grid;gap:3px}.fmt em{font-style:normal;justify-self:start}
.fmt input{accent-color:var(--accent)}
.grp{border:1px solid var(--line);border-radius:10px;background:var(--card2);margin-bottom:8px}
.grp summary{cursor:pointer;padding:11px 14px;font-weight:600;list-style:none;display:flex;gap:8px;align-items:center}
.grp summary::-webkit-details-marker{display:none}
.grp summary::before{content:"▸";color:var(--mut);transition:transform .15s}
.grp[open] summary::before{transform:rotate(90deg)}
.grp .fmts{padding:0 14px 14px}
.grp .grp-inner{margin:0 14px 14px}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--accent);color:#06101f;font-weight:600;padding:9px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
.toast.on{opacity:1}

.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy);padding:16px}
.loginbox{width:min(360px,100%);display:grid;gap:14px;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:26px}
.loginbox h1{font-size:20px;margin:0}
.err{color:var(--crit);font-size:13px}

.busy{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.busy{animation:none}}

body.onb .nav{opacity:.35;pointer-events:none}

@media (max-width:900px){
  .two{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* Grid nur fuer die Desktop-Zweispalte noetig; als Grid-Item kann der sticky
     Side-Nav sonst einen viel zu hohen "auto"-Row-Track erzeugen (Browser-Quirk) ->
     auf schmalen Breiten einfacher Block-Stack statt Grid. */
  .app{display:block}
  .side{position:sticky;height:auto;flex-direction:row;align-items:center;padding:8px 12px;overflow-x:auto;z-index:5;border-right:0;border-bottom:1px solid var(--line)}
  .brand,.cust,.nav .sep{display:none}
  .nav{flex-direction:row}
  .nav button{white-space:nowrap}
  .main{padding:16px 16px 40px}
  .row{grid-template-columns:auto minmax(0,1fr)}
  .row .acts,.row>.pill,.row>.bar{grid-column:2}
  .row>.pill{justify-self:start}
  .row.slim{grid-template-columns:minmax(0,1fr)}
  /* AUFTRAG_416: .row .acts{grid-column:2} (oben) geht von EINEM schmalen
     Element in Spalte 2 aus (Pill/einzelner Knopf) - mit ZWEI Knoepfen
     ("Gefaellt mir"/"Aendern") wuerde das den Titeltext auf einen Rest-Rest
     zusammenquetschen (1-2 Zeichen pro Zeile). .stilrow macht .acts wieder
     Teil der einen Grid-Spalte -> stapelt sauber unter den Text, wie die
     uebrigen schmalen .row.slim-Varianten. */
  .stilrow .acts{grid-column:1}
}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}