/* fit.alagic.cc – Gruppen + Profil (dark, angepasst an App-Theme) */
.av {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex: none;
  color: #121214; font-weight: 600; line-height: 1;
  border: 1px solid rgba(var(--ink-rgb),.14);
}
.av img { width: 100%; height: 100%; object-fit: cover; }
/* audit390: monotone SVG-Silhouette als Avatar-Fallback (kein Emoji); das Foto liegt
   absolut darüber und verschwindet bei Ladefehler (`onerror="this.remove()"`). */
/* audit393: Silhouette bleibt hell — der Avatar-Hintergrund ist die Nutzerfarbe
   (Datenfarbe, kann dunkel sein), nicht das Theme. */
.av-wrap { position: relative; color: rgba(242,241,236,.78); }
html[data-theme="light"] .av-wrap { color: rgba(18,18,20,.55); }   /* audit395: dunkle Silhouette auf hellem Kreis */
.av-ic { width: 66%; height: 66%; fill: currentColor; }
.av-wrap img { position: absolute; inset: 0; }
.av-prev { margin: 0 0 8px; }
.gcard {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 4px; border: none;
}
.gcard-main { display: flex; flex-direction: column; gap: 2px; }
.gcard-main strong { font-size: 1rem; }
.gcard-sub { font-size: .72rem; color: var(--muted); }
.g-open { background: rgba(var(--ink-rgb),.08); color: var(--ink); border: none; border-radius: 999px; font-weight: 600; padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: .82rem; }
.g-open:active { transform: scale(.96); }
.invcode { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92rem; color: var(--ink); background: rgba(var(--ink-rgb),.08); border: none; padding: 11px 12px; border-radius: 8px; width: 100%; box-sizing: border-box; }
.mem-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(var(--ink-rgb),.06); }
.mem-row:last-child { border-bottom: 0; }
.mem-row span { font-size: .92rem; }
/* collapsible profile sections */
details.sec { border: 1px solid rgba(var(--ink-rgb),.08); border-radius: 10px; margin: 10px 0; background: rgba(var(--ink-rgb),.03); }
details.sec summary { cursor: pointer; padding: 11px 12px; font-weight: 600; font-size: .9rem; list-style: none; color: var(--ink); }
details.sec summary::-webkit-details-marker { display: none; }
details.sec[open] summary { border-bottom: 1px solid rgba(var(--ink-rgb),.08); }
details.sec > :not(summary) { padding: 0 12px 12px; }
.feed-sets { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 5px; }
.feed-set { font-size: .76rem; color: var(--muted); background: var(--face2); border-radius: 6px; padding: 2px 8px; }
/* cropper */
.crop-ov { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .18s ease; }
.crop-ov.open { opacity: 1; visibility: visible; }
.crop-box { width: min(92vw, 340px); background: var(--face); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.crop-wrap { position: relative; width: 260px; height: 260px; max-width: 100%; margin: 0 auto; }
.crop-stage { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; background: rgba(0,0,0,.3); touch-action: none; cursor: grab; }
.crop-stage:active { cursor: grabbing; }
.crop-stage img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: none; will-change: transform; user-select: none; -webkit-user-drag: none; }
.crop-ring { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; transform: translate(-50%,-50%); border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0,0,0,.5); pointer-events: none; border: 2px solid rgba(var(--ink-rgb),.55); }
.crop-actions { display: flex; gap: 8px; }
.crop-actions .mini { flex: 1; }
/* group header + manage */
.grp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; cursor: pointer; }
.grp-av-wrap { position: relative; flex: none; }
.grp-av-wrap.has-stories .av { border-radius: 50%; box-sizing: border-box; outline: 3px solid var(--ac); outline-offset: 3px; }
.avgroup-wrap { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.avgroup-wrap .avgroup { margin: 0; }
#storyAdd .sadd-plus { width: 29px; height: 29px; }
#storyAdd .sadd-plus .icon { width: 15px; height: 15px; }
/* Kamera icon-only + Plus als reines Icon ohne Bubble dahinter */
.sadd-pair { display: inline-flex; align-items: center; gap: 4px; }
#storyAddCam .sadd-plus { width: 29px; height: 29px; }
#storyAddCam .sadd-plus .icon { width: 15px; height: 15px; }
#storyAdd.smini { background: none; }
#storyAdd.smini .sadd-plus { background: none; width: 32px; height: 32px; }
#storyAdd.smini .sadd-plus .icon { width: 16px; height: 16px; }
/* Kamera icon-only + Plus icon-only daneben */
.sadd-pair { display: inline-flex; align-items: center; gap: 8px; }
.sring.sadd.ghost .sadd-plus { background: rgba(var(--ink-rgb),.08); color: var(--ink); }
/* Listen-Kopf mit Zahnrad (Erstellen/Beitreten wohnt im Sheet) */
.glist-head { display: flex; align-items: center; margin-bottom: 10px; }
.glist-head > span { flex: 1; }
.grp-gear { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ac); color: #121214; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #121214; }
.grp-gear .icon { width: 13px; height: 13px; }
.grp-htxt { min-width: 0; }
.grp-htxt h1 { font-size: 1.1rem; }
/* Avatar-Group (HeroUI-Stil): überlappend, Ring, +N-Count */
.avgroup { display: flex; align-items: center; background: none; border: none; padding: 2px 0 0; margin: 0 0 4px; cursor: pointer; }
.avgroup .av { margin-left: -10px; border: 2px solid var(--bg, #121214) !important; }
.avgroup .av:first-child { margin-left: 0; }
.avgroup .avcount { background: rgba(var(--ink-rgb),.12); color: var(--ink); font-size: .72rem; font-weight: 700; }
.grp-motto { color: var(--muted); font-size: .86rem; margin-top: 3px; }
.grp-tap { color: var(--muted); font-size: .76rem; margin-top: 3px; }
.grp-manage { display: flex; align-items: center; gap: 12px; }
.grp-manage-ctl { display: flex; align-items: center; gap: 8px; }
.gcard-main { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.gcard-txt { display: flex; flex-direction: column; gap: 2px; }
/* group settings overlay */
.grp-set-ov { position: fixed; inset: 0; z-index: 450; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s; }
.grp-set-ov.open { opacity: 1; visibility: visible; }
.grp-set-panel { width: 100%; max-width: 560px; max-height: 86vh; max-height: 86dvh; background: var(--face); border-radius: 16px 16px 0 0; padding: 14px; overflow-y: auto; transform: translateY(100%); transition: transform .2s ease; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.grp-set-ov.open .grp-set-panel { transform: none; }
@media (min-width: 700px) { .grp-set-ov { align-items: center; } .grp-set-panel { border-radius: 14px; max-height: 80vh; max-height: 80dvh; transform: translateY(20px) scale(.98); } .grp-set-ov.open .grp-set-panel { transform: none; } }
.grp-set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

/* social workout feed — flach, kompakt, keine Linien/Schatten */
.workout-bubble { position: relative; background: var(--face); border: none; border-radius: 18px; padding: 12px 14px 20px; margin: 12px 0 26px; box-shadow: none; }
.wb-head { display: flex; align-items: center; gap: 10px; }
.wb-head .av-prev { margin: 0; }
.wb-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wb-title b { font-size: .82rem; color: var(--muted); font-weight: 600; }
.wb-title strong { font-size: 1.05rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; margin-left: 50px; }
.wb-meta span { color: var(--ink-soft); background: rgba(var(--ink-rgb),.07); border-radius: 999px; padding: 4px 9px; font-size: .76rem; font-variant-numeric: tabular-nums; }

/* Riesen-Emoji statt Zähler-Chips (Zahl nur ab 2) */
.wb-react-big { display: flex; gap: 4px; margin: 0 0 0 auto; flex: none; align-items: center; }
.wb-react-big:empty { display: none; }
.wb-rbig { font-size: 2rem; line-height: 1; display: inline-flex; align-items: baseline; gap: 2px; }
.wb-rbig i { font-style: normal; font-size: .72rem; color: var(--muted); font-weight: 700; }
.wb-rbig.wb-rmore { font-size: .8rem; font-weight: 700; color: var(--muted); background: rgba(var(--ink-rgb),.07); border-radius: 999px; padding: 4px 9px; align-self: center; }
/* Aktionen ragen unten aus der Bubble raus */
.wb-actions { position: absolute; right: 12px; bottom: 0; transform: translateY(50%); display: flex; align-items: center; gap: 8px; margin-top: 0; }
.react { border: 1px solid rgba(var(--ink-rgb),.08); background: rgba(var(--ink-rgb),.05); color: var(--ink); border-radius: 999px; padding: 6px 10px; font-weight: 700; }
.react.on { background: var(--ac); color: #121214; }
.cmt { display: flex; gap: 8px; align-items: flex-start; }
.cmt.reply { margin-left: 32px; }
.cmt .av { margin-top: 2px; }
.cmt-body { flex: 1; min-width: 0; background: rgba(var(--ink-rgb),.05); border-radius: 12px; padding: 8px 10px; }
.cmt-body b { font-size: .78rem; margin-right: 5px; }
.cmt-body span { font-size: .86rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.cmt-actions { display: flex; gap: 10px; margin-top: 5px; }
.cmt-actions button { background: none; color: var(--muted); padding: 0; font-size: .72rem; font-weight: 600; }
.wb-compose { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.wb-compose input { padding: 10px 12px; border-radius: 999px; }
.wb-compose button { border-radius: 999px; padding: 10px 14px; }
/* Neue Bubble: kurzer PPL Titel + Top3 */
.wb-ppl { font-size: 1.1rem; font-weight: 800; letter-spacing: .02em; }
.wb-top3 { font-size: .78rem; color: var(--muted); font-weight: 400; margin-top: 1px; }
.wb-top3 span { color: var(--ink-soft); }
.wb-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }
.wb-ic { width: 36px; height: 36px; border-radius: 999px; background: var(--face3); color: var(--ink); border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.wb-ic .icon { width: 20px; height: 20px; min-width: 20px; min-height: 20px; flex: none; stroke-width: 2; display: block; stroke: var(--ink); fill: none; }
.wb-ic:active { transform: scale(.96); }
.wb-ic.wb-bubble .icon, .wb-ic.wb-plus .icon, .wb-ic.wb-chev .icon { stroke: var(--ink); }
.wb-ic em { position: absolute; top: -4px; right: -4px; background: var(--ac); color: #121214; font-size: .62rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; font-style: normal; }
.wb-ic.wb-chev { transition: transform .18s ease; }
.wb-ic.wb-chev.on { transform: rotate(180deg); background: var(--ac); color: #121214; border-color: var(--ac); }

.wb-expanded { margin-top: 12px; padding-top: 4px; }
.wb-expanded[hidden] { display: none; }
.wb-ex-list { display: grid; gap: 10px; }
.wb-ex-block { display: flex; gap: 10px; align-items: flex-start; }
.wb-ex-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: rgba(var(--ink-rgb),.06); flex: none; }
.wb-ex-img.ph { display: inline-block; }
.wb-ex-meta { min-width: 0; flex: 1; }
.wb-ex-meta strong { font-size: .88rem; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-ex-meta .feed-sets { margin-top: 4px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; }
.wb-ex-meta .feed-sets .feed-set { background: var(--face2); color: var(--ink-soft); border: 1px solid rgba(var(--ink-rgb),.08); }
.wb-ex-meta .feed-sets .feed-set.count { background: var(--face2); color: var(--muted); font-weight: 600; border: 1px solid rgba(var(--ink-rgb),.08); }
.wb-expanded-foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .76rem; }
.wb-expanded-foot .wb-volume { margin-left: auto; }
/* Eigene Sets in Gruppe: editierbare Zeilen (wiederverwendet li.editing-Stile aus App-CSS) */
.wb-sets { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.wb-sets li { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px; font-size: .88rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wb-sets li .acts { display: flex; gap: 2px; }
.wb-sets li .edt, .wb-sets li .del { width: 32px; height: 32px; padding: 0; background: none; border: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.wb-sets li .edt { color: var(--muted2); }
.wb-sets li .del { color: var(--line); }
.wb-sets li .edt .icon, .wb-sets li .del .icon { width: 15px; height: 15px; }
.wb-sets li.editing { display: grid; grid-template-columns: 1fr 1fr 32px auto auto; gap: 6px; align-items: center; }
.wb-sets li.editing.split { grid-template-columns: 1fr 1fr 1fr 32px auto auto; }
.wb-sets li.editing input { min-width: 0; padding: 8px 10px; font-size: .9rem; width: 100%; border: none; border-radius: 8px; background: rgba(var(--ink-rgb),.08); color: var(--ink); font-family: inherit; }
.wb-sets li.editing button { padding: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; cursor: pointer; }
.wb-sets li.editing button .icon { width: 15px; height: 15px; }
.wb-sets li.editing .e-ok { background: #7bd88f; color: #121214; }
.wb-sets li.editing .e-cx { background: rgba(var(--ink-rgb),.1); color: var(--ink); }
.wb-sets li.editing .e-ud { background: rgba(var(--ink-rgb),.08); color: var(--muted2); }
.wb-sets li.editing .e-ud.on { color: var(--ac); }
/* Stift als eigener Chip rechts neben den Chips (nur eigene Workouts) */
.feed-set.wb-edit-chip { cursor: pointer; font-family: inherit; font-size: inherit; display: inline-flex; align-items: center; padding: 3px 8px; }
.feed-set.wb-edit-chip .icon { width: 13px; height: 13px; }
.feed-set.wb-edit-chip.on { background: var(--ac); color: #121214; }
.feed-set.wb-edit-chip.on .icon { stroke: #121214; }
.wb-editwrap { margin-top: 4px; }
.wb-editwrap[hidden] { display: none; }
/* Session-Balken (heute live) */
.sessbar { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 9px 12px; margin: 0 0 12px; border-radius: 10px; background: rgba(var(--ink-rgb),.06); border: 1px solid rgba(var(--ink-rgb),.08); color: var(--ink-soft); font-size: .86rem; font-variant-numeric: tabular-nums; }
.sessbar b { color: var(--ink); }
.sessbar .sdot { color: var(--line); }
/* Draft-Hinweis auf Add-Seite */
.draftbar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin: 0 0 12px; border-radius: 10px; background: rgba(245,197,24,.08); border: 1px solid rgba(245,197,24,.3); color: var(--ink-soft); font-size: .82rem; }
.draftbar button { margin-left: auto; padding: 6px 12px; font-size: .8rem; background: rgba(var(--ink-rgb),.1); color: var(--ink); border: none; border-radius: 8px; cursor: pointer; }
.draftbar[hidden] { display: none; }
/* Emoji Sheet */
.rx-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; max-height: 50vh; overflow: auto; padding: 4px; }
.rx-emo { background: rgba(var(--ink-rgb),.06); border: none; border-radius: 10px; font-size: 1.2rem; padding: 8px 4px; cursor: pointer; position: relative; }
.rx-emo.on { background: var(--ac); }
.rx-emo em { position: absolute; top: 2px; right: 2px; background: #121214; color: var(--ink); font-size: .55rem; min-width: 14px; height: 14px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
@media (max-width: 380px){ .rx-grid{ grid-template-columns: repeat(6,1fr); } }
/* Gruppen-Stories (audit27): Ringe, Composer, Viewer */
.storyrow { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.storyrow::-webkit-scrollbar { display: none; }
.sring {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; font: inherit; color: var(--muted); font-size: .68rem;
  padding: 0; max-width: 62px;
}
.sring .av { border: 2px solid rgba(var(--ink-rgb),.18); border-radius: 50%; }
.sring.fresh .av { border-color: var(--ac); }
.sring span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62px; }
.sring.sadd .sadd-plus {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ac); color: #121214;
}
.sring.sadd .sadd-plus .icon { width: 22px; height: 22px; }
.storyov, .storyov * { box-sizing: border-box; }
.storyov {
  position: fixed; inset: 0; z-index: 400; background: #000; color: #fff;
  display: flex; flex-direction: column; font: inherit;
}
.story-segs { display: flex; gap: 4px; padding: calc(10px + env(safe-area-inset-top)) 10px 0; }
.sseg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.sseg i { display: block; height: 100%; width: 0; background: #fff; }
.sseg.done i { width: 100%; }
.story-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 20px 10px 8px; }
.story-top #storyWho { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.story-top #storyWho b { color: #fff; }
.story-top #storyWho span { color: rgba(255,255,255,.65); font-size: .75rem; }
.story-top-btns { display: flex; gap: 4px; align-items: center; }
.story-top-btns button { background: none; border: none; color: #fff; font-size: 1.05rem; cursor: pointer; padding: 6px 8px; }
.story-top-btns .icon { width: 20px; height: 20px; display: block; }
.story-who-gav { display: inline-flex; }
.story-who-gav .av { border: 3px solid var(--ac); border-radius: 50%; box-sizing: border-box; }
.story-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; }
/* Stories immer 9:16 hochkant mit runden Ecken */
.story-frame {
  position: relative; width: min(100%, calc((100dvh - 170px) * 9 / 16)); aspect-ratio: 9 / 16;
  border-radius: 16px; overflow: hidden; background: #111;
}
.story-text { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; }
.story-text p { font-size: 1.3rem; font-weight: 700; line-height: 1.35; margin: 0; color: #fff; overflow-wrap: anywhere; }
.story-img, .story-vid { width: 100%; height: 100%; object-fit: cover; }
/* Viewer-Pinch-Zoom (audit169, smooth): direktes Folgen, eased Snap */
.storyov { touch-action: none; }
.story-img { transition: transform .18s ease; will-change: transform; }
.story-img.noanim { transition: none; }
/* Crop-Editor nach Aufnahme (audit169): 9:16-Rahmen, Ziehen + Pinch + Regler */
.scp-crop-ov { position: fixed; inset: 0; z-index: 340; background: #000; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(14px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)); }
.scp-crop-ov.open { opacity: 1; visibility: visible; }
.scp-crop-top { display: flex; align-items: center; justify-content: space-between; width: min(92vw, 420px); color: #fff; font-weight: 700; }
.scp-crop-frame { position: relative; overflow: hidden; border-radius: 14px; background: #111; touch-action: none; }
.scp-crop-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scp-crop-ov input[type="range"] { width: min(92vw, 420px); accent-color: var(--ac); }
.scp-crop-hint { margin: 0; color: rgba(255,255,255,.6); font-size: .8rem; }
.story-cap {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  margin: 0; text-align: center; font-size: .9rem; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.8); overflow-wrap: anywhere;
}
/* Video-Labels als Overlay (Daten statt Einbrennen) */
.story-labels { position: absolute; inset: 0; pointer-events: none; }
.story-labels span {
  position: absolute; transform: translate(-50%, -50%);
  color: #fff; font-weight: 800; font-size: 1.05rem; text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,.8); white-space: nowrap; max-width: 92%;
  overflow: hidden; text-overflow: ellipsis;
}
.story-place {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 999px;
  font: inherit; font-size: .8rem; padding: 7px 14px; cursor: pointer; white-space: nowrap; max-width: 90%;
  overflow: hidden; text-overflow: ellipsis;
}
#scpCamStage { touch-action: none; }
#storyCp { touch-action: none; }
.story-tap { position: absolute; top: 0; bottom: 0; width: 30%; z-index: 1; }
.story-tap.story-prev { left: 0; }
.story-tap.story-next { right: 0; width: 70%; }
/* Story-Composer fullscreen (audit29): eine große Kamerafläche, alles icon-only */
.storycp-ov { position: fixed; inset: 0; z-index: 320; background: #000; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.storycp-ov.open { opacity: 1; visibility: visible; }
#scpCamStage, #scpEditStage, #scpTextStage { position: absolute; inset: 0; background: #000; overflow: hidden; }
#scpView { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scp-topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 14px 0; z-index: 3; }
.scp-topcol { display: flex; flex-direction: column; gap: 10px; }
.scp-icobtn { width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.scp-icobtn .icon { width: 22px; height: 22px; }
.scp-icobtn.on { background: var(--ac); color: #121214; }
.scp-icobtn:active { transform: scale(.92); }
.scp-bottombar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-around; padding: 0 34px calc(20px + env(safe-area-inset-bottom)); z-index: 3; pointer-events: none; }
/* Container schluckt keine Touches (lag über dem Trim-Track!) — nur Buttons sind treffbar */
.scp-bottombar button { pointer-events: auto; }
.scp-bottombar.edit { justify-content: space-between; padding-left: 16px; padding-right: 16px; bottom: calc((100dvh - min(100dvh, 177.78vw)) / 2 + 58px); padding-bottom: env(safe-area-inset-bottom); }
.scp-post { width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--ac); color: #121214; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.scp-post .icon { width: 23px; height: 23px; }
.scp-bottombar.center { justify-content: center; }
.scp-shutter { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: rgba(255,255,255,.18); cursor: pointer; touch-action: none; padding: 0; }
.scp-shutter:active { transform: scale(.95); }
.scp-shutter.rec { background: #ff3b30; border-color: #ff3b30; }
.scp-hint { position: absolute; left: 0; right: 0; bottom: calc(146px + env(safe-area-inset-bottom)); text-align: center; color: rgba(255,255,255,.75); font-size: .8rem; z-index: 2; margin: 0; }
#scpCamStage #scpRecT { position: absolute; top: calc(100px + env(safe-area-inset-top)); left: 0; right: 0; text-align: center; z-index: 3; margin: 0; }
#scpZoomT { position: absolute; top: calc(100px + env(safe-area-inset-top)); right: 16px; z-index: 3; margin: 0; background: rgba(0,0,0,.55); color: #fff; border-radius: 8px; padding: 4px 9px; font-size: .8rem; font-variant-numeric: tabular-nums; }
#scpCamStage #scpCamHint { position: absolute; top: 34%; left: 24px; right: 24px; text-align: center; z-index: 3; }
#scpPrev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 0; }
#scpPrevV { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; background: #000; border-radius: 0; }
#scpTextStage #scpText { position: absolute; top: 22%; left: 26px; right: 26px; z-index: 2; background: transparent; border: none; color: #fff; font: inherit; font-size: 1.4rem; font-weight: 700; text-align: center; }
#scpTextStage #scpBg { position: absolute; left: 0; right: 0; bottom: calc(146px + env(safe-area-inset-bottom)); display: flex; justify-content: center; z-index: 2; }
#storyCp #scpStatus { position: absolute; left: 16px; right: 16px; bottom: calc(210px + env(safe-area-inset-bottom)); z-index: 5; text-align: center; }
/* Composer 9:16 (audit34): Sucher + Editor im Hochkant-Frame wie gepostet */
#scpCamStage { display: flex; align-items: center; justify-content: center; }
#scpCamStage[hidden] { display: none; }
#scpView { position: relative; inset: auto; width: min(100%, calc(100dvh * 9 / 16)); height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
#scpFrame916 { position: absolute; inset: 0; margin: auto; width: min(100%, calc(100dvh * 9 / 16)); aspect-ratio: 9 / 16; max-width: 100%; background: #000; touch-action: none; }
#scpFrame916 #scpPrev { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
#scpFrame916 #scpPrevV { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover; }
#scpLabelLayer { position: absolute; inset: 0; touch-action: none; pointer-events: none; }
.scp-label {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  color: #fff; font-weight: 800; text-align: center; line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,.8); padding: 8px 12px; cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; white-space: nowrap; max-width: 92%;
  overflow: hidden; text-overflow: ellipsis;
}
.scp-label-edit {
  font: inherit; color: #fff; background: rgba(0,0,0,.65); border: 1px solid #fff;
  border-radius: 8px; text-align: center; padding: 4px 8px; max-width: 44vw;
}
.scp-snap { position: absolute; background: var(--ac); z-index: 4; pointer-events: none; }
#scpSnapV { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }
#scpSnapH { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
#scpLabelDel {
  position: absolute; left: 50%; bottom: calc(146px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 5; display: flex; align-items: center; gap: 12px;
  background: #1c1c20; border: 1px solid rgba(242,241,236,.16); border-radius: 14px;
  padding: 10px 12px; color: #fff; font-size: .85rem; white-space: nowrap;
}
#scpLabelDel[hidden] { display: none; }
.scp-ldel-q { display: inline-flex; align-items: center; gap: 7px; }
.scp-ldel-q .icon { width: 17px; height: 17px; }
#scpLabelDel .scp-icobtn { width: 38px; height: 38px; }
#scpLabelDel .scp-icobtn .icon { width: 18px; height: 18px; }
/* Story-Composer Kamera (audit28) */
.storycp-cam { position: relative; border-radius: 12px; overflow: hidden; background: #000; }
.storycp-cam #scpView { width: 100%; max-height: 44vh; display: block; background: #000; }
.storycp-cam.nocam #scpView { display: none; }
.storycp-shutterrow { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; align-items: center; justify-content: space-around; }
.storycp-shutterrow .mini { background: rgba(0,0,0,.5); color: #fff; }
.scp-shutter { width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,.25); color: #fff; font-size: 1.1rem; cursor: pointer; }
.scp-shutter:active { transform: scale(.94); }
#scpRecT { text-align: center; color: #ff5d73; margin: 6px 0 0; }
#scpPrev { width: 100%; border-radius: 12px; }
#scpPrev[hidden] { display: none; }
#scpPrevV { width: 100%; max-height: 44vh; border-radius: 12px; background: #000; }
#scpPrevV[hidden] { display: none; }
/* UW-Badge (Zoom unter 1x) */
#scpZoomT.uw { color: #7dd3fc; border-color: rgba(125,211,252,.5); }
/* Einheitlicher Videoplayer (IG-like, keine nativen Controls) */
.svp-wrap { position: relative; width: 100%; background: #000; border-radius: 12px; overflow: hidden; touch-action: none; }
.svp-wrap[hidden] { display: none; }
.svp-v { display: block; width: 100%; max-height: 44vh; background: #000; object-fit: cover; }
.svp-viewer .svp-v { max-height: 62vh; }
/* Vollbild-Füllung: im 9:16-Frame wie früher .story-vid (kein Briefkasten) */
.story-frame .svp-wrap { height: 100%; border-radius: 0; }
.story-frame .svp-v { height: 100%; max-height: none; }
#scpFrame916 .svp-v { height: 100%; max-height: none; }
.svp-mute { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.svp-mute .icon { width: 18px; height: 18px; }
.svp-ctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.65)); touch-action: none; }
.svp-seek { flex: 1; min-width: 0; accent-color: #fff; height: 22px; }
.svp-time { color: #fff; font: 600 11px/1 system-ui, sans-serif; white-space: nowrap; opacity: .9; }
/* Trim vereint mit Player-Bar: Handles auf der Timeline statt eigener Leiste */
.svp-ctl.trim-on .svp-seek, .svp-ctl.trim-on .svp-time { display: none; }
.svp-ctl.trim-on { padding-left: 14px; padding-right: 14px; }
.svp-ctl.trim-on .scp-trim-track { flex: 1; min-width: 0; height: 30px; }
.svp-ctl .scp-trim-h { top: -4px; bottom: -4px; }
/* Trim-Modus */
#scpTrimBar { margin-top: 10px; }
#scpTrimBar, #scpStabBar { position: absolute; left: 12px; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 4; background: transparent; padding: 0; pointer-events: none; }
#scpTrimBar[hidden], #scpStabBar[hidden] { display: none; }
/* Kurze Screens: kleinere Action-Buttons, Bars näher ran (kein Überlapp mit Timeline) */
@media (max-height: 760px) {
  .scp-bottombar .scp-icobtn, .scp-bottombar .scp-post { width: 38px; height: 38px; }
  .scp-bottombar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  #scpTrimBar, #scpStabBar { bottom: calc(128px + env(safe-area-inset-bottom)); }
}
.scp-trim-track { position: relative; height: 38px; border-radius: 8px; background: rgba(242,241,236,.1); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.scp-trim-fill { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.6); cursor: pointer; }
.scp-trim-play { position: absolute; top: -4px; bottom: -4px; width: 16px; margin-left: -8px; background: linear-gradient(90deg, transparent calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), transparent calc(50% + 1.5px)); cursor: ew-resize; touch-action: none; }
.scp-trim-h { position: absolute; top: -5px; bottom: -5px; width: 26px; margin-left: -13px; border-radius: 8px; background: #f2f1ec; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.scp-trim-h:focus-visible { outline: 2px solid #3ddc84; outline-offset: 1px; }
.scp-trim-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; color: #d9d8d3; font-size: .85rem; }
#scpTrimDur { color: #8f8f95; font-size: .8rem; font-variant-numeric: tabular-nums; }
.scp-trim-btns { display: flex; gap: 8px; }
.scp-trim-prog { height: 6px; border-radius: 3px; background: rgba(242,241,236,.12); margin-top: 8px; overflow: hidden; }
.scp-trim-prog[hidden] { display: none; }
.scp-trim-prog i { display: block; height: 100%; width: 0; background: #3ddc84; }
#scpTrim.on { color: #3ddc84; }