:root{
  --bg:#0b0f14;
  --panel:#121821;
  --panel-2:#0f141c;
  --text:#e6edf3;
  --muted:#9fb0c3;
  --primary:#4ea1ff;
  --danger:#ff5c5c;
  --grid:#223041;
  --accent:#2a3a50;
  --shadow:rgba(0,0,0,.45);
  /* phone geometry */
  --phone-w:300px;
  --phone-h:620px;
  --thickness:16px; /* visible thickness */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 800px at 70% 20%, #0e1520 0%, var(--bg) 48%, #080b10 100%);
}

.app{max-width:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;min-height:100vh;position:relative;z-index:2}

.controls{display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,var(--panel),var(--panel-2));padding:12px;border-radius:12px;border:1px solid #1a2433;box-shadow:0 10px 30px var(--shadow)}
.controls.collapsed{display:none}
.control-row{display:flex;gap:16px;flex-wrap:wrap}
.control-group{flex:1 1 320px;min-width:260px;display:flex;flex-direction:column;gap:8px}
.label{font-weight:600}
.hint{color:var(--muted)}
.status{min-height:20px;color:#b9d7ff}

/* Accordion panels */
.panel{background:#0f1626;border:1px solid #1f2a3c;border-radius:10px;overflow:hidden}
.panel>summary{list-style:none;cursor:pointer;padding:10px 12px;font-weight:600;background:#121a2b;border-bottom:1px solid #1f2a3c;user-select:none}
.panel>summary::-webkit-details-marker{display:none}
.panel[open]>summary{background:#162033}
.panel .panel-content{padding:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.subsection{display:flex;flex-direction:column;gap:10px;background:#0c1322;border:1px solid #1e2a3c;border-radius:8px;padding:10px}
.subsection-title{font-weight:700;color:#d7e6ff}
.subsection-content{display:flex;flex-direction:column;gap:10px}
.subsection-content.grid-2{display:grid;grid-template-columns:1fr;gap:12px}

/* Spots list */
.spots-list{display:flex;flex-direction:column;gap:10px}
.spot-card{display:grid;grid-template-columns:1fr;gap:8px;padding:10px;border-radius:8px;background:#0c1322;border:1px solid #1e2a3c}
.spot-card .row{gap:8px}
.spot-header{display:flex;align-items:center;justify-content:space-between}
.spot-title{font-weight:600;color:#d7e6ff}
.spot-actions{display:flex;gap:6px}
.spot-actions .btn.small{padding:4px 8px}
.spot-grid{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:8px}
.spot-grid .full{grid-column:1/-1}

/* Keyframes list: compact vertical cards */
.kf-row{display:flex;flex-direction:column;gap:6px;overflow:visible;padding:0;width:100%;max-width:100%}
.kf-card{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:6px;padding:4px 6px;border-radius:8px;background:#0c1322;border:1px solid #1e2a3c;font-size:12px}
.kf-card .drag{cursor:grab;opacity:.8}
.kf-card .drag:active{cursor:grabbing}
.kf-card .title{font-weight:600;font-size:12px}
.kf-card input.kf-time{width:56px;background:#0f1626;border:1px solid #223046;border-radius:6px;color:var(--text);padding:2px 4px;font-size:12px}
.kf-card .actions{display:flex;gap:6px}

.row{display:flex;align-items:center}
.wrap{flex-wrap:wrap}
.g8{gap:8px}
.mt8{margin-top:8px}
.grow{flex:1}

.btn{appearance:none;border:1px solid #223046;background:#162031;color:var(--text);padding:10px 12px;border-radius:8px;cursor:pointer;user-select:none;transition:transform .05s ease, background .2s, border-color .2s}
.btn:hover{background:#1a2640}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#247bff,#1a63d6);border-color:#114caa}
.btn.primary:hover{background:linear-gradient(180deg,#2b86ff,#1f6be3)}
.btn.danger{background:linear-gradient(180deg,#ff5c5c,#d84a4a);border-color:#9b2b2b}
.btn.small{padding:6px 8px;font-size:.9rem}
.btn.ghost{background:rgba(20,28,44,.5);backdrop-filter:blur(6px);border-color:#2a3952}

.input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #223046;background:#0f1626;color:var(--text)}
.range{width:100%}

/* Tilt pad */
.tilt-pad{position:relative;width:220px;height:220px;max-width:100%;border-radius:12px;background:radial-gradient(circle at 50% 50%, #162031 0%, #101926 60%);border:1px solid #233249;box-shadow:inset 0 6px 18px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.35)}
.tilt-pad .grid{position:absolute;inset:0;background-image:linear-gradient(0deg,transparent calc(50% - 1px),var(--grid) calc(50% - 1px),var(--grid) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(90deg,transparent calc(50% - 1px),var(--grid) calc(50% - 1px),var(--grid) calc(50% + 1px),transparent calc(50% + 1px));border-radius:12px}
.tilt-pad .handle{position:absolute;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #fff 0%, #a4c6ff 40%, #2e56a3 100%);box-shadow:0 6px 14px rgba(0,0,0,.45);left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.25)}

/* Stage */
.stage{display:flex;justify-content:center;align-items:center;flex:1 1 auto;padding:0}
.canvas{position:relative;width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center}
.canvas{isolation:isolate}
.perspective{perspective:1200px;perspective-origin:50% 40%}
.bg-layer{position:absolute;inset:0;background:radial-gradient(1200px 800px at 70% 20%, #0e1520 0%, var(--bg) 48%, #080b10 100%);z-index:0;backface-visibility:hidden;transform:translateZ(0);will-change:transform}
.bg-layer.flat{ background: var(--bg) !important; }
.greenscreen .bg-layer{ background: var(--green, #00ff6a) !important; }
.greenscreen #bgFx{ display:none !important; }
.greenscreen #lightSpot{ display:none !important; }
.greenscreen .floor-shadow{ display:none !important; }
.greenscreen .no-reflections .screen .glass,
.greenscreen .no-reflections .screen .vignette,
.greenscreen .no-reflections .body:before{ display:none !important; }
.greenscreen .screen .glass,
.greenscreen .screen .vignette,
.greenscreen .body:before{ display:none !important; }
.greenscreen .slab::after{ display:none !important; content:none !important; }
.greenscreen .phone .body.front{ box-shadow: none !important; border: none !important; }
.greenscreen .phone .back{ box-shadow: none !important; border: none !important; }
.greenscreen .phone, .greenscreen .phone *{ box-shadow: none !important; filter: none !important; }
.bg-fx{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:var(--fx-alpha, .35);backface-visibility:hidden;transform:translateZ(0);will-change:transform}
.light-spot{position:absolute;inset:0;pointer-events:none;z-index:2;backface-visibility:hidden;transform:translateZ(0);will-change:transform}

.phone{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--scale));transition:transform .05s linear;z-index:3;will-change:transform}
.phone{ --refl-ui: 1 }
.phone .slab{position:relative;transform-style:preserve-3d;width:var(--phone-w);height:var(--phone-h);will-change:transform}
.phone .body.front{position:absolute;inset:0;border-radius:36px;background:linear-gradient(160deg,#0f1217,#1a1e26);border:1px solid rgba(255,255,255,.06);box-shadow:0 26px 60px rgba(0,0,0,.42), inset 0 1px 6px rgba(255,255,255,.05);transform:translateZ(calc(var(--thickness) * 0.45))}
.phone .body:before{content:"";position:absolute;inset:1px;border-radius:32px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%)}
.phone.apple-notch .body.front,.phone.apple-island .body.front{background:linear-gradient(160deg,#0f1217,#1a1e26)}
.phone.android-punch-left .body.front,.phone.android-punch-center .body.front,.phone.android-teardrop .body.front{background:linear-gradient(160deg,#0f1217,#1a1e26)}
.phone.neutral-none .body.front{background:linear-gradient(160deg,#0f1217,#1a1e26)}

.bezel.top,.bezel.bottom{position:absolute;left:0;width:100%;height:42px}
.bezel.top{top:0}
.bezel.bottom{bottom:0}
.notch{position:absolute;left:50%;transform:translateX(-50%);top:0;width:140px;height:26px;background:#000;border-bottom-left-radius:14px;border-bottom-right-radius:14px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);display:none;z-index:2}
.phone.apple-notch .notch{display:block}
.camera-dot{position:absolute;top:12px;right:110px;width:8px;height:8px;border-radius:50%;background:#0f1218;box-shadow:inset 0 0 0 2px rgba(180,180,180,.35);display:none}
.phone.apple-notch .camera-dot{display:block}
.island{position:absolute;left:50%;transform:translateX(-50%);top:8px;width:120px;height:32px;border-radius:18px;background:#000;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);display:none;z-index:2}
.phone.apple-island .island{display:block}
.punchhole{position:absolute;top:12px;width:10px;height:10px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 2px rgba(180,180,180,.3);display:none;z-index:2}
.punchhole.left{left:18px}
.punchhole.center{left:50%;transform:translateX(-50%)}
.phone.android-punch-left .punchhole.left{display:block}
.phone.android-punch-center .punchhole.center{display:block}
.teardrop{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:18px;height:22px;background:#000;clip-path:path('M 9 0 C 14 0 18 4 18 9 C 18 13 14 18 9 22 C 4 18 0 13 0 9 C 0 4 4 0 9 0 Z');box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);display:none;z-index:2}
.phone.android-teardrop .teardrop{display:block}
.speaker{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:60px;height:6px;border-radius:3px;background:#0f141b;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}

.screen{position:absolute;left:8px;right:8px;top:8px;bottom:8px;border-radius:30px;overflow:hidden;background:black;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);transform:translateZ(0)}
/* seam-safe entfernt */
.screen .glass{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(120deg, rgb(255 255 255 / calc(0.10 * var(--refl-ui))) 0%, rgb(255 255 255 / 0) 38%),
  linear-gradient(180deg, rgb(255 255 255 / calc(0.04 * var(--refl-ui))), rgb(255 255 255 / 0) 62%)}
.screen .vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(0,0,0, calc(.56 * var(--refl-ui)))}
.phone.android-punch-left .screen,.phone.android-punch-center .screen,.phone.android-teardrop .screen{border-radius:28px}
.phone.neutral-none .screen{border-radius:32px}

video{width:100%;height:100%;object-fit:cover;background:black;display:block;transform:translateZ(0)}
img#image{width:100%;height:100%;object-fit:cover;background:black;display:block}

/* removed bulky case-like side edges */

/* Hardware details */
.hw{position:absolute;filter:brightness(.95)}
.power-btn{right:-3px;top:120px;width:3px;height:48px;border-top-right-radius:2px;border-bottom-right-radius:2px;background:linear-gradient(90deg,#1a1f28,#0e1218)}
.vol-btn{left:-3px;width:3px;height:38px;border-top-left-radius:2px;border-bottom-left-radius:2px;background:linear-gradient(90deg,#1a1f28,#0e1218)}
.vol-btn.up{top:130px}
.vol-btn.down{top:180px}
.port.usb{bottom:-2px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:3px;background:linear-gradient(180deg,#0c1016,#181d26);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

.floor-shadow{position:absolute;inset:auto 0 -22px 0;height:36px;background:radial-gradient(52% 52% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,0) 70%);transform:translateZ(-60px) scaleY(.85);filter:blur(1.5px);opacity:1;transition:opacity .2s ease}
.no-floor .floor-shadow{opacity:0}

/* floor reflection using pseudo-element */
.phone{--refl-opacity:0}
.floor-reflection .slab::after{
  content:""; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:36px; pointer-events:none;
  transform:translateY(calc(100% + 18px)) rotateX(180deg) translateZ(0); transform-origin:50% 0; filter:blur(2px); opacity:var(--refl-opacity);
  background: linear-gradient(160deg,#0f1217,#1a1e26);
}

/* Reflection toggle */
.no-reflections .screen .glass,
.no-reflections .screen .vignette,
.no-reflections .body:before{ display:none !important; }

/* Responsive */
@media (max-width: 700px){
  :root{ --phone-w:260px; --phone-h:540px; --thickness:14px; }
}

/* Floating controls in browser corner */
.floating-controls{position:fixed;z-index:99;display:flex;gap:8px}
.floating-controls.top-right{top:12px;right:12px}
.floating-controls.top-left{top:12px;left:12px}
.floating-menu{position:fixed;top:12px;left:12px;z-index:100}

/* removed recording/png UI styles */

/* Expand stage when controls are collapsed */
.controls.collapsed ~ .stage { padding: 0; }
.controls.collapsed ~ .stage .canvas{ min-height: 100vh; }

/* Small switch */
.switch{display:flex;align-items:center;gap:8px;cursor:pointer}
.switch input{width:18px;height:18px}

/* Background effects */
:root{ --fx-alpha:.35; --fx-color:#4ea1ff; --fx-speed:.6 }
.color-chip{width:22px;height:22px;border-radius:50%;border:1px solid #223046;cursor:pointer;outline:none}
.color-chip:focus{box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.fx-none{ --fx-alpha:0 }
.fx-gradient-soft{ 
  background: conic-gradient(from 0deg at 50% 50%, 
    color-mix(in oklab, var(--fx-color), transparent 90%) 0%, 
    color-mix(in oklab, var(--fx-color), transparent 85%) 25%, 
    color-mix(in oklab, var(--fx-color), transparent 90%) 50%, 
    color-mix(in oklab, var(--fx-color), transparent 85%) 75%, 
    color-mix(in oklab, var(--fx-color), transparent 90%) 100%);
  filter: blur(80px);
}
/* Remove left-tilt specific correction - testing base issue */
.fx-gradient-animated{ --a:0deg; background:
    conic-gradient(from var(--a) at 60% 40%, color-mix(in oklab, var(--fx-color), transparent 65%), transparent 60%),
    conic-gradient(from calc(var(--a) + 180deg) at 35% 65%, color-mix(in oklab, var(--fx-color), transparent 75%), transparent 60%);
  animation:spin linear infinite; animation-duration:calc(30s / max(.1, var(--fx-speed)));
  filter:blur(42px) saturate(1.1);
}
@keyframes spin{ to{ --a:360deg } }
.fx-grid{ background-image: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--fx-color), transparent 75%) 2px, transparent 2px), linear-gradient(transparent, transparent); background-size: 40px 40px, 100% 100%; backdrop-filter: none; opacity:calc(var(--fx-alpha) * .7) }
.fx-noise{ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.4"/></svg>'); opacity:calc(var(--fx-alpha) * .6) }
.fx-bokeh{ background: radial-gradient(120px 120px at 20% 30%, color-mix(in oklab, var(--fx-color), white 20%) 0%, transparent 65%), radial-gradient(160px 160px at 80% 25%, color-mix(in oklab, var(--fx-color), white 10%) 0%, transparent 65%), radial-gradient(200px 200px at 30% 80%, color-mix(in oklab, var(--fx-color), white 15%) 0%, transparent 70%); filter:blur(12px) }
.fx-aurora{ background: radial-gradient(600px 400px at 10% 80%, color-mix(in oklab, var(--fx-color), transparent 70%), transparent 65%), conic-gradient(from 180deg at 50% 20%, color-mix(in oklab, var(--fx-color), white 10%), transparent, color-mix(in oklab, var(--fx-color), black 10%)); filter:blur(18px); opacity:calc(var(--fx-alpha) * .9) }
.fx-starfield{ background-image: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.6) 50%, transparent 51%), radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.5) 50%, transparent 51%), radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 85% 85%, rgba(255,255,255,.6) 50%, transparent 51%); opacity:calc(var(--fx-alpha) * .8) }

/* New effects */
.fx-sunrays{
  background:
    conic-gradient(from -20deg at 30% 10%, color-mix(in oklab, var(--fx-color), transparent 70%) 0 10deg, transparent 10deg 20deg,
      color-mix(in oklab, var(--fx-color), transparent 70%) 20deg 30deg, transparent 30deg 40deg,
      color-mix(in oklab, var(--fx-color), transparent 70%) 40deg 50deg, transparent 50deg 60deg);
  filter: blur(60px) saturate(1.1);
}
.fx-scanlines{
  background-image: repeating-linear-gradient(180deg, color-mix(in oklab, var(--fx-color), transparent 85%) 0 2px, transparent 2px 6px);
  opacity: calc(var(--fx-alpha) * .5);
}
.fx-waves{
  --a:0deg;
  background:
    radial-gradient(1200px 800px at 70% 20%, transparent, transparent),
    conic-gradient(from var(--a) at 50% 50%, color-mix(in oklab, var(--fx-color), transparent 80%) 0 10%, transparent 10% 60%, color-mix(in oklab, var(--fx-color), transparent 80%) 60% 70%, transparent 70% 100%);
  animation: waveSpin linear infinite; animation-duration: calc(40s / max(.1, var(--fx-speed)));
  filter: blur(52px);
}
@keyframes waveSpin{ to{ --a:360deg } }

/* 3D thickness: back and sides */
.phone .back{position:absolute;inset:0;border-radius:36px;background:linear-gradient(160deg,#0a0d12,#151a1f);border:1px solid rgba(255,255,255,.03);box-shadow:inset 0 2px 10px rgba(0,0,0,.35);transform:translateZ(calc(var(--thickness) * -0.45))}

/* REMOVED: Phone sides completely - they caused blue line artifact and weren't visually important */

/* Hide top/bottom faces to avoid far-field horizontal bars */
.phone .side.top,.phone .side.bottom{display:none}

/* Reduce z-fighting artifacts */
.phone .slab, .phone .body.front, .phone .back{backface-visibility:hidden}