/* RVOX Product Studio Pro (V36.5) – Vollbild-Editor und Studio-Bereich.
   Schwarz, Anthrazit, Silber; feine Glaskanten; Bedienung im unteren Daumenbereich; Safe-Area für Android. */
:root { --pp-bg:#07080a; --pp-glass:rgba(24,27,32,.92); --pp-line:rgba(217,222,229,.14); --pp-line-hi:rgba(232,237,243,.34); --pp-txt:#eef1f5; --pp-muted:#9aa2ad; --pp-silver:#c9d0d9; }
html.pp-open, html.pp-open body { overflow:hidden !important; overscroll-behavior:none; }
.pp { position:fixed; inset:0; z-index:4000; display:flex; flex-direction:column; height:100vh; height:100dvh; background:radial-gradient(120% 70% at 50% 0%, #15181d 0%, var(--pp-bg) 62%); color:var(--pp-txt);
  font-family:var(--cc-font,'Figtree',system-ui,sans-serif); padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing:border-box; -webkit-tap-highlight-color:transparent; animation:pp-in .22s ease-out; }
@keyframes pp-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.pp *, .pp *::before, .pp *::after { box-sizing:border-box; }
.pp-ico { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.pp button { font:inherit; color:inherit; cursor:pointer; }
.pp button:disabled { opacity:.38; cursor:default; }
.pp button:focus-visible { outline:2px solid var(--pp-silver); outline-offset:2px; }

.pp-top { display:flex; align-items:center; gap:6px; padding:8px 10px; min-height:56px; border-bottom:1px solid var(--pp-line); }
.pp-tt { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; padding:0 4px; }
.pp-tt b { font-weight:600; font-size:15px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-sub { font-size:12px; color:var(--pp-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-ib { flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:14px; border:1px solid transparent; background:transparent; }
.pp-ib:active { background:rgba(255,255,255,.06); }
.pp-save { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--pp-line-hi);
  background:linear-gradient(180deg, rgba(240,243,247,.16), rgba(240,243,247,.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.35); font-weight:600; font-size:14px; }

.pp-stage { position:relative; flex:1 1 auto; min-height:0; display:grid; place-items:center; padding:12px; touch-action:none; }
.pp-frame { position:relative; border-radius:6px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.55); touch-action:none; cursor:grab; background:#fff; }
.pp-frame:active { cursor:grabbing; }
.pp-canvas { display:block; width:100%; height:100%; }
.pp-guide { position:absolute; pointer-events:none; opacity:0; transition:opacity .12s; background:rgba(201,208,217,.9); box-shadow:0 0 0 .5px rgba(0,0,0,.25); }
.pp-guide.on { opacity:1; }
.pp-gv { left:50%; top:0; bottom:0; width:1px; transform:translateX(-.5px); }
.pp-gh { top:50%; left:0; right:0; height:1px; transform:translateY(-.5px); }
.pp-busy { position:absolute; inset:auto 10px 10px 10px; z-index:2; padding:9px 12px; border-radius:12px; font-size:13px; text-align:center; background:rgba(10,12,15,.78); color:var(--pp-txt); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pp-busy[hidden] { display:none; }
.pp-compare { position:absolute; right:10px; top:10px; min-height:36px; padding:0 12px; color:var(--pp-txt); border-radius:999px; border:1px solid var(--pp-line-hi); background:rgba(12,14,17,.72); font-size:13px; letter-spacing:.02em;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); user-select:none; -webkit-user-select:none; touch-action:none; }
.pp-compare.on { background:rgba(232,237,243,.92); color:#0b0d10; }

.pp-hints { display:flex; gap:8px; align-items:center; overflow-x:auto; padding:0 12px 8px; scrollbar-width:none; }
.pp-hints[hidden] { display:none; }
.pp-hints::-webkit-scrollbar { display:none; }
.pp-bao { flex:none; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#0b0d10; background:var(--pp-silver); border-radius:999px; padding:4px 8px; }
.pp-hint { flex:none; max-width:78vw; font-size:12px; line-height:1.35; color:var(--pp-txt); padding:6px 10px; border-radius:12px; border:1px solid var(--pp-line); background:rgba(255,255,255,.04); white-space:normal; }
.pp-hint.warn { border-color:rgba(226,184,120,.45); }

.pp-panel { flex:none; max-height:34vh; max-height:34dvh; overflow-y:auto; padding:12px 16px 6px; border-top:1px solid var(--pp-line); background:var(--pp-glass); overscroll-behavior:contain; }
.pp-panel:empty { display:none; }
.pp-tools { flex:none; display:flex; gap:2px; overflow-x:auto; padding:6px 8px 8px; background:var(--pp-glass); border-top:1px solid rgba(255,255,255,.04); scrollbar-width:none; }
.pp-tools::-webkit-scrollbar { display:none; }
.pp-tools button { flex:1 0 66px; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; border-radius:14px; background:transparent; color:var(--pp-muted); font-size:11px; letter-spacing:.01em; position:relative; }
.pp-tools button.on { color:var(--pp-txt); background:rgba(255,255,255,.06); }
.pp-tools button.on::after { content:''; position:absolute; left:28%; right:28%; bottom:4px; height:2px; border-radius:2px; background:var(--pp-silver); }

.pp-sl { display:grid; grid-template-columns:104px 1fr 44px; align-items:center; gap:10px; min-height:44px; font-size:13px; color:var(--pp-muted); }
.pp-sl output { text-align:right; color:var(--pp-txt); font-variant-numeric:tabular-nums; }
.pp-sl input[type=range] { width:100%; height:32px; accent-color:var(--pp-silver); background:transparent; }
.pp-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
.pp-lbl { font-size:13px; color:var(--pp-muted); margin-right:4px; }
.pp-btn { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:14px; border:1px solid var(--pp-line); background:rgba(255,255,255,.04); font-size:13px; }
.pp-btn.on, .pp-btn:active { border-color:var(--pp-line-hi); background:rgba(255,255,255,.1); }
.pp-btn .pp-ico { width:16px; height:16px; }
.pp-note { font-size:12px; line-height:1.45; color:var(--pp-muted); margin:6px 0; }
.pp-note.ok { color:#cfd8cf; }
.pp-seg { display:flex; gap:6px; flex-wrap:wrap; }
.pp-seg button { flex:1 1 90px; min-height:48px; border-radius:14px; border:1px solid var(--pp-line); background:rgba(255,255,255,.03); font-size:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pp-seg button small { font-size:11px; color:var(--pp-muted); }
.pp-seg button.on { border-color:var(--pp-line-hi); background:rgba(255,255,255,.1); }
.pp-sw, .pp-presets { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; }
.pp-sw button, .pp-pr > button:first-child { width:100%; min-height:44px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; border-radius:14px; border:1px solid var(--pp-line); background:rgba(255,255,255,.03); font-size:12px; }
.pp-sw i, .pp-pr i { width:40px; height:40px; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.3); }
.pp-sw button.on { border-color:var(--pp-silver); background:rgba(255,255,255,.08); }
.pp-pr { position:relative; }
.pp-pr .pp-x { position:absolute; top:2px; right:2px; width:28px; height:28px; border-radius:50%; border:1px solid var(--pp-line); background:rgba(10,12,15,.85); font-size:15px; line-height:1; }
.pp-srcs { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.pp-srcs button { position:relative; flex:none; width:64px; height:64px; padding:0; border-radius:12px; overflow:hidden; border:2px solid transparent; background:#111; }
.pp-srcs button.on { border-color:var(--pp-silver); }
.pp-srcs img { width:100%; height:100%; object-fit:cover; display:block; }
.pp-srcs i { position:absolute; left:4px; bottom:4px; font-style:normal; font-size:11px; background:rgba(0,0,0,.6); border-radius:6px; padding:0 5px; }

@media (min-width:900px) {
  .pp { display:grid; grid-template-columns:1fr 380px; grid-template-rows:auto auto 1fr auto; }
  .pp-top { grid-column:1 / -1; }
  .pp-stage { grid-column:1; grid-row:2 / 5; }
  .pp-hints { grid-column:2; grid-row:2; padding-top:12px; flex-wrap:wrap; }
  .pp-panel { grid-column:2; grid-row:3; max-height:none; border-left:1px solid var(--pp-line); }
  .pp-tools { grid-column:2; grid-row:4; flex-wrap:wrap; border-left:1px solid var(--pp-line); }
  .pp-tools button { flex:1 0 22%; }
}
@media (prefers-reduced-motion:reduce) { .pp { animation:none; } .pp-guide { transition:none; } }

/* ---------- Studio-Bereich (Schritt „Bild“) ---------- */
.pp-entry .pp-entry-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:4px; }
.pp-entry .pp-entry-note { font-size:12.5px; line-height:1.45; color:var(--sx-muted, #b8bdc5); margin:8px 0 0; }
.pp-entry-bao { display:flex; flex-direction:column; gap:6px; margin-top:10px; padding:10px 12px; border-radius:14px; border:1px solid rgba(217,222,229,.14); background:rgba(255,255,255,.03); font-size:12.5px; line-height:1.4; color:#dfe4ea; }
.pp-entry-bao[hidden] { display:none; }
.pp-entry-bao .pp-bao { align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#0b0d10; background:#c9d0d9; border-radius:999px; padding:3px 8px; }
.pp-results { display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; }
.pp-results:empty { display:none; }
.pp-card { margin:0; border-radius:16px; overflow:hidden; border:1px solid rgba(217,222,229,.14); background:rgba(14,16,20,.55); display:grid; grid-template-columns:104px 1fr; align-items:start; }
.pp-card.checked { border-color:rgba(201,208,217,.36); }
.pp-thumb { background:#f3f4f6; width:100%; align-self:start; overflow:hidden; }
.pp-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.pp-cbody { min-width:0; padding:8px 8px 8px 10px; display:flex; flex-direction:column; gap:6px; }
.pp-card figcaption { font-size:12px; line-height:1.35; color:#e8edf3; display:flex; flex-direction:column; gap:1px; }
.pp-card figcaption b { font-weight:600; }
.pp-used { color:#c9d0d9; }
.pp-used.muted { color:#8e97a3; }
.pp-acts { display:flex; flex-wrap:wrap; gap:4px; }
.pp-acts button { min-height:36px; padding:0 10px; border-radius:10px; border:1px solid rgba(217,222,229,.16); background:rgba(255,255,255,.04); color:#e8edf3; font:500 12px var(--cc-font,'Figtree',system-ui,sans-serif); cursor:pointer; }
.pp-pls button { flex:1 1 0; padding:0 6px; }
.pp-minor button { min-height:32px; background:transparent; border-color:transparent; color:#aab2bd; padding:0 6px; }
.pp-acts button.on { border-color:rgba(232,237,243,.5); background:rgba(232,237,243,.14); color:#f5f7fa; }
.pp-acts button.danger { color:#d9a9a9; }
@media (min-width:720px) { .pp-results { grid-template-columns:1fr 1fr; } .pp-card { grid-template-columns:128px 1fr; } }