/* ============================================================
   Karussell Studio – warm-dunkles „Darkroom"-Interface.
   Mobil zuerst; die bunte Vorschau ist der Star, das Chrome hält sich zurück.
   ============================================================ */
:root{
  --bg:#17140f; --panel:#211d16; --panel2:#2a251d; --raise:#332c22;
  --line:#3d362a; --line2:#4a4234;
  --ink:#f4ede0; --muted:#a99d88; --faint:#7c7362;
  --gold:#e8b84b; --gold-d:#d3a336; --on-gold:#1b160e;
  --danger:#e0674f; --ok:#6ec08a;
  --r:14px; --r-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-text-size-adjust:100%;
  line-height:1.45;
}
button{font-family:inherit; cursor:pointer}
a{color:var(--gold); text-decoration:none}
.hidden{display:none !important}
.muted{color:var(--muted); font-weight:500; font-size:.82rem}
.hint{color:var(--faint); font-size:.82rem; margin:.5rem 0 0}
.lbl{display:block; color:var(--muted); font-size:.75rem; letter-spacing:.02em; margin-bottom:.35rem; text-transform:uppercase}

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--gold); color:var(--on-gold); border:none;
  padding:.7rem 1rem; border-radius:var(--r-sm); font-weight:800;
  letter-spacing:.01em; font-size:.95rem;
}
.btn-primary:active{background:var(--gold-d)}
.btn-primary.block{width:100%; display:block}
.btn-ghost{
  background:transparent; color:var(--ink); border:1px solid var(--line2);
  padding:.5rem .8rem; border-radius:var(--r-sm); font-weight:600; font-size:.88rem;
}
.btn-ghost.icon{padding:.5rem .65rem; font-size:1.05rem; line-height:1}
.btn-ghost:active{background:var(--panel2)}
.chip{
  background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  padding:.5rem .7rem; border-radius:999px; font-size:.83rem; font-weight:600;
}
.chip:active{background:var(--raise)}
.chip.danger{color:var(--danger); border-color:#5a3128}
.grow{flex:1}

/* ---------- Topbar ---------- */
.app-body{padding-bottom:calc(2rem + var(--safe-b))}
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.6rem .8rem; background:rgba(23,20,15,.9);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-left{display:flex; align-items:center; gap:.55rem; min-width:0; flex:1}
.brand-dot{width:12px; height:12px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 30% 30%,#ffdd7a,var(--gold) 60%,#a97e1f);}
.project-name{
  background:transparent; border:none; color:var(--ink);
  font-weight:700; font-size:1rem; padding:.25rem .3rem; min-width:0; width:100%;
  border-bottom:1px dashed transparent; border-radius:6px;
}
.project-name:focus{outline:none; border-bottom-color:var(--line2); background:var(--panel)}
.topbar-right{display:flex; align-items:center; gap:.4rem; flex:0 0 auto}
.save-state{font-size:.75rem; color:var(--faint)}

/* ---------- Menü ---------- */
.menu{
  position:fixed; top:52px; right:.8rem; z-index:40;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:.35rem; min-width:200px; display:flex; flex-direction:column;
}
.menu button,.menu a{
  text-align:left; background:transparent; border:none; color:var(--ink);
  padding:.6rem .7rem; border-radius:var(--r-sm); font-size:.92rem; font-weight:600;
}
.menu button:active,.menu a:active{background:var(--raise)}

/* ---------- Bühne / Canvas ---------- */
.stage{max-width:560px; margin:0 auto; padding:.9rem}
.canvas-wrap{position:relative; display:flex; justify-content:center}
#canvas{
  width:100%; max-width:420px; height:auto; border-radius:var(--r);
  background:#000; box-shadow:var(--shadow); touch-action:none;
  border:1px solid var(--line);
}
.empty-hint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--muted); font-size:.9rem; padding:2rem; pointer-events:none;
}

/* ---------- Filmstreifen ---------- */
.filmstrip{
  display:flex; gap:.5rem; overflow-x:auto; padding:.8rem .1rem .2rem;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.thumb{
  flex:0 0 auto; width:52px; border-radius:8px; overflow:hidden;
  border:2px solid var(--line); background:#000; position:relative; padding:0;
}
.thumb.active{border-color:var(--gold)}
.thumb canvas{display:block; width:100%; height:auto}
.thumb .num{
  position:absolute; top:2px; left:4px; font-size:.62rem; font-weight:800;
  color:#fff; text-shadow:0 1px 2px #000;
}
.slide-actions{display:flex; gap:.4rem; flex-wrap:wrap; padding:.2rem 0 .2rem}

/* ---------- Segment-Leiste (Tabs) ---------- */
.segbar{
  position:sticky; bottom:0; z-index:20;
  display:flex; gap:.25rem; max-width:560px; margin:.4rem auto 0; padding:.35rem;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
}
.segbar .seg{
  flex:1; background:transparent; border:none; color:var(--muted);
  padding:.55rem .3rem; border-radius:999px; font-weight:700; font-size:.82rem;
}
.segbar .seg.active{background:var(--gold); color:var(--on-gold)}

/* ---------- Panels ---------- */
.panels{max-width:560px; margin:.6rem auto 0; padding:0 .9rem}
.panel{display:none}
.panel.active{display:block; animation:fade .18s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1;transform:none}}

.field{display:block; margin:.7rem 0}
.field textarea,.field select,.field input[type=text]{
  width:100%; background:var(--panel); color:var(--ink);
  border:1px solid var(--line2); border-radius:var(--r-sm); padding:.65rem .7rem;
  font-size:1rem; font-family:inherit; resize:vertical;
}
.field textarea:focus,.field select:focus{outline:2px solid var(--gold); outline-offset:0}
.field select{appearance:none}
.row{display:flex; gap:.7rem; align-items:flex-end; margin:.7rem 0}
.row.between{justify-content:space-between; align-items:center}
.row.toggles{flex-wrap:wrap}
label.field{font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.02em}
label.field textarea,label.field select{margin-top:.35rem; text-transform:none; color:var(--ink); font-size:1rem; letter-spacing:normal}

/* Range-Slider */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:26px; background:transparent; margin-top:.3rem;
}
input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:6px; background:var(--raise)}
input[type=range]::-moz-range-track{height:6px; border-radius:6px; background:var(--raise)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%;
  background:var(--gold); border:3px solid #17140f; box-shadow:0 1px 4px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--gold); border:3px solid #17140f}

/* Color input */
input[type=color]{
  -webkit-appearance:none; appearance:none; width:52px; height:40px; padding:0;
  border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--panel);
}
input[type=color]::-webkit-color-swatch-wrapper{padding:4px}
input[type=color]::-webkit-color-swatch{border:none; border-radius:6px}

/* Segmented control */
.segmented{display:flex; background:var(--panel); border:1px solid var(--line2); border-radius:var(--r-sm); overflow:hidden; margin-top:.35rem}
.segmented button{flex:1; background:transparent; border:none; color:var(--muted); padding:.55rem .3rem; font-weight:700; font-size:.82rem}
.segmented button.active{background:var(--raise); color:var(--ink)}

.toggle{background:var(--panel); border:1px solid var(--line2); color:var(--muted); padding:.5rem .8rem; border-radius:var(--r-sm); font-weight:700; font-size:.83rem}
.toggle.active{background:var(--gold); color:var(--on-gold); border-color:var(--gold)}

/* Vorlagen */
.tpl-list{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.8rem}
.tpl-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; text-align:left}
.tpl-card canvas{display:block; width:100%; height:auto; background:#000}
.tpl-card .tpl-name{display:block; padding:.5rem .6rem; font-weight:700; font-size:.85rem}
.tpl-card .tpl-row{display:flex; gap:.3rem; padding:0 .5rem .5rem}
.tpl-card .tpl-row button{flex:1; font-size:.75rem; padding:.4rem .3rem}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:60; background:rgba(10,8,5,.72); display:flex; align-items:flex-end; justify-content:center}
.modal-card{
  width:100%; max-width:560px; max-height:92vh; overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r) var(--r) 0 0;
  padding:1rem 1rem calc(1.4rem + var(--safe-b)); box-shadow:var(--shadow);
}
@media(min-width:600px){.modal{align-items:center}.modal-card{border-radius:var(--r)}}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.3rem}
.modal-head h2{font-size:1.15rem; margin:.2rem 0}
.exp-grid{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.9rem}
.exp-grid figure{margin:0}
.exp-grid img{width:100%; height:auto; border-radius:10px; border:1px solid var(--line); display:block}
.exp-grid .cap{font-size:.72rem; color:var(--muted); text-align:center; margin-top:.25rem}
.exp-grid a.save{display:block; text-align:center; font-size:.76rem; margin-top:.15rem}
.cap-block{margin-top:1rem; border-top:1px solid var(--line); padding-top:.8rem}
.cap-pre{white-space:pre-wrap; word-break:break-word; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:.7rem; font-size:.85rem; font-family:inherit; margin:.5rem 0 0}

.open-list{display:flex; flex-direction:column; gap:.5rem; margin-top:.6rem}
.open-row{display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-sm); padding:.6rem .75rem}
.open-row .oname{font-weight:700}
.open-row .odate{font-size:.72rem; color:var(--faint)}
.open-row .orow{display:flex; gap:.4rem}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(1rem + var(--safe-b)); transform:translateX(-50%);
  background:var(--raise); color:var(--ink); border:1px solid var(--line2);
  padding:.6rem .9rem; border-radius:999px; font-size:.85rem; font-weight:600; z-index:80;
  box-shadow:var(--shadow); animation:fade .2s ease;
}

/* ============================================================
   Auth-Seiten (Login, Einrichtung, Passwort)
   ============================================================ */
.auth-body{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.2rem}
.auth-card{
  width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:1.6rem 1.4rem calc(1.6rem + var(--safe-b)); box-shadow:var(--shadow);
}
.auth-brand{
  font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem;
  color:var(--gold); margin-bottom:1rem;
}
.auth-card h1{font-size:1.5rem; margin:.1rem 0 .3rem; font-family:"Playfair Display",Georgia,serif; font-weight:700}
.auth-sub{color:var(--muted); font-size:.9rem; margin:.2rem 0 1rem}
.auth-card label{display:block; font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin:.9rem 0 0}
.auth-card input{
  width:100%; margin-top:.35rem; background:var(--bg); color:var(--ink);
  border:1px solid var(--line2); border-radius:var(--r-sm); padding:.7rem .8rem; font-size:1rem;
}
.auth-card input:focus{outline:2px solid var(--gold)}
.auth-card .btn-primary{width:100%; margin-top:1.3rem; padding:.8rem}
.auth-links{margin-top:1rem; font-size:.88rem; color:var(--muted); text-align:center}
.auth-err{background:#3a201b; border:1px solid #6a352a; color:#f0b8a9; padding:.6rem .75rem; border-radius:var(--r-sm); font-size:.86rem; margin:.4rem 0}
.auth-ok{background:#1f3327; border:1px solid #34694b; color:#b7e6c8; padding:.7rem .8rem; border-radius:var(--r-sm); font-size:.9rem; margin:.4rem 0}