:root{
  --bg:#0e1116; --panel:rgba(14,17,22,.82); --line:rgba(255,255,255,.14);
  --text:#f2f4f7; --muted:#a3abb8; --accent:#ffb020; --red:#ff4d4f; --ok:#3ddc97;
  --r:14px;
  /* Abstände inkl. Notch/Dynamic Island und Home-Indikator */
  --sl: calc(env(safe-area-inset-left) + 10px);
  --sr: calc(env(safe-area-inset-right) + 10px);
  --st: calc(env(safe-area-inset-top) + 10px);
  --sb: calc(env(safe-area-inset-bottom) + 10px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Safari soll Schrift nicht selbst vergrößern (passiert sonst v. a. im Querformat) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font:15px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
canvas#camerafeed{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}
button,select{font:inherit;color:var(--text)}
button:disabled{opacity:.35}
.hidden{display:none!important}

/* ---------- Startbildschirm ---------- */
#start{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));background:var(--bg)}
#start .startInner{margin:auto 0;display:flex;flex-direction:column;gap:18px;width:100%;max-width:560px;align-self:center}
#start h1{margin:0;font-size:28px;letter-spacing:-.02em}
.brand{font-size:34px!important;font-weight:800}
.brand span{color:var(--accent)}
.brandRow{display:flex;align-items:center;gap:14px}
.brandLogo{width:56px;height:56px;border-radius:13px;flex:none;display:block;overflow:hidden}
#start p{margin:0;color:var(--muted)}
.seg{display:flex;background:#1a1f27;border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;border:0;background:transparent;padding:12px 8px;border-radius:9px}
.seg button.on{background:#2b3340;font-weight:600}
.big{border:0;border-radius:var(--r);padding:16px;font-weight:700;font-size:17px;background:var(--accent);color:#1a1200}
.small{font-size:13px;color:var(--muted)}
.small a{color:var(--muted)}

/* ---------- AR-Oberfläche ---------- */
#ui{position:fixed;inset:0;z-index:10;pointer-events:none}
#ui > *{pointer-events:auto}
#top{position:absolute;left:var(--sl);right:var(--sr);top:var(--st);display:flex;gap:8px;align-items:flex-start;pointer-events:none}
#top > *{pointer-events:auto}
#msg{flex:1;background:var(--panel);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font-size:14px}
#msg.hiddenBox{visibility:hidden}
#msg b{color:var(--accent)}
#stats{margin-top:4px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
#stats .k{color:var(--text);font-weight:600}
#mini{width:128px;height:128px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);flex:none;margin-left:auto}

#cross{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none}
#cross:before,#cross:after{content:"";position:absolute;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
#cross:before{left:21px;top:0;width:2px;height:44px}
#cross:after{top:21px;left:0;height:2px;width:44px}

/* untere Leiste – Navigation ganz unten, damit sie im Querformat nicht unter der Kamera liegt */
#bottom{position:absolute;left:var(--sl);right:var(--sr);bottom:var(--sb);margin:0 auto;max-width:620px;
  background:var(--panel);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:8px;align-items:center}
.row > *{min-width:0}
#primary{flex:1;border:0;border-radius:12px;padding:14px;font-weight:700;background:var(--accent);color:#1a1200}
#primary.alt{background:#2b3340;color:var(--text)}
.btn{border:1px solid var(--line);background:#1a1f27;border-radius:12px;padding:11px 12px;white-space:nowrap}
/* 16px: darunter zoomt iOS beim Antippen in die Seite → Bild springt */
select,input{font-size:16px}
select{flex:1;border:1px solid var(--line);background:#1a1f27;border-radius:12px;padding:11px 10px;appearance:none;-webkit-appearance:none}
#jumpRow .btn{flex:1 1 0;font-size:13px;padding:9px 4px}
/* Safari verkleinert Auswahlfelder/Buttons sonst nicht unter ihre Textbreite → ragen rechts heraus */
#bottom .row > *, #more > *{min-width:0}
#bottom .btn{overflow:hidden;text-overflow:ellipsis}
#bottom select{width:0;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
#bottom #playBtn, #bottom #bildRow .btn{flex:none}
#more .btn{flex:1 1 0}
#bildRow .btn{min-width:54px;font-size:18px;padding:10px 12px}
#bildLbl{flex:1;text-align:center;line-height:1.2;overflow:hidden}
#bildTanz{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden}
#bildName{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#more{display:flex;gap:8px;flex-wrap:wrap}
#more .btn{flex:1;font-size:13px;padding:9px 8px}
/* Dateiauswahl unsichtbar, aber anklickbar (iOS) */
.fileInput{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-10px;top:-10px}

/* ---------- Choreografie-Bibliothek ---------- */
.libBox{display:flex;flex-direction:column;gap:8px}
.libHead{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.lib{display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow-y:auto}
.libRow{display:flex;gap:6px;align-items:stretch}
.libPick{flex:1;min-width:0;text-align:left;border:1px solid var(--line);background:#1a1f27;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.libPick b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.libPick small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.libRow.on .libPick{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.libDel{flex:none;border:1px solid var(--line);background:#1a1f27;border-radius:12px;padding:0 12px;min-width:46px}
.libDel.confirm{background:#5a1a1d;border-color:#a33;color:#fff;font-size:13px}
.status{font-size:13px;color:var(--muted);min-height:1.2em}
.status.bad{color:#ff8a8a}

/* Griff zum Ein-/Ausklappen */
#grip{align-self:center;width:56px;height:22px;margin:-6px 0 -2px;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:none}
#grip:before{content:"";width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.35)}
/* eingeklappt: nur noch die Navigation (Sprünge + ◀ Bild ▶) */
#bottom.collapsed #calibRow,#bottom.collapsed #dancerRow,#bottom.collapsed #more{display:none}
#bottom.collapsed.calib #calibRow{display:flex}
/* Kalibrierung: Bild-Informationen werden nicht gebraucht → Leiste bleibt flach, Bildmitte frei */
#bottom.calib #dancerRow,#bottom.calib #jumpRow,#bottom.calib #bildRow{display:none!important}

/* Querformat: kompakter */
@media (orientation: landscape) and (max-height: 560px){
  #bottom{padding:8px;gap:6px;display:grid;grid-template-columns:1fr 1fr}
  #bottom > *{grid-column:1 / -1}
  #bottom > #grip{justify-self:center}
  #bottom > #dancerRow{grid-column:1}
  #bottom > #more{grid-column:2;flex-wrap:nowrap}
  #bottom.collapsed{display:flex}
  #bottom.calib > #more{grid-column:1 / -1}
  .btn{padding:8px 10px}
  #primary{padding:10px}
  select{padding:8px 10px}
  #mini{width:104px;height:104px}
  #msg{max-width:420px}
}

/* ---------- Dialoge (von unten einblendend) ---------- */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.sheet .box{width:100%;max-width:520px;max-height:88vh;overflow:auto;background:#151a21;border:1px solid var(--line);
  border-radius:20px 20px 0 0;padding:18px max(16px, env(safe-area-inset-right)) var(--sb) max(16px, env(safe-area-inset-left));
  display:flex;flex-direction:column;gap:12px}
.sheet h2{margin:0;font-size:19px}
.sheet h3{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sheet label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.sheet input[type=password],.sheet input[type=text]{font:inherit;color:var(--text);background:#1a1f27;border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.sheet .chk{flex-direction:row;align-items:center;gap:8px;color:var(--text);font-size:15px}
.sheet .chk input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.sheet .status{font-size:13px;color:var(--muted);min-height:1.2em}
.sheet .status.bad{color:#ff8a8a}
#choreoList{display:flex;flex-direction:column;gap:6px}
#choreoList button{text-align:left;border:1px solid var(--line);background:#1a1f27;border-radius:12px;padding:11px 12px}
#choreoList button.on{border-color:var(--accent)}
#choreoList small{color:var(--muted)}

#err{position:fixed;left:16px;right:16px;top:40%;z-index:40;background:#3a1416;border:1px solid #7a2a2e;border-radius:var(--r);padding:16px}