:root {
  --background: 230 42% 96%;
  --foreground: 231 28% 9%;
  --primary: 174 100% 50%;
  --primary-foreground: 229 40% 6%;
  --secondary: 286 100% 66%;
  --secondary-foreground: 0 0% 100%;
  --muted: 229 20% 88%;
  --muted-foreground: 230 12% 42%;
  --destructive: 350 100% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 230 22% 78%;
  --card: 0 0% 100%;
  --shadow-sm: 0 10px 30px hsl(230 70% 22% / 0.12);
  --shadow-md: 0 22px 60px hsl(230 70% 20% / 0.18);
  --shadow-lg: 0 34px 100px hsl(230 80% 15% / 0.34);
  --transition-fast: 160ms ease;
  --transition-smooth: 420ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: .85rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
}

.dark {
  --background: 232 42% 5%;
  --foreground: 186 100% 96%;
  --primary: 174 100% 55%;
  --primary-foreground: 230 52% 5%;
  --secondary: 287 100% 68%;
  --secondary-foreground: 0 0% 100%;
  --muted: 231 28% 15%;
  --muted-foreground: 224 18% 70%;
  --destructive: 350 100% 64%;
  --destructive-foreground: 0 0% 100%;
  --border: 230 30% 22%;
  --card: 232 36% 9%;
  --shadow-sm: 0 10px 30px hsl(174 100% 50% / 0.08);
  --shadow-md: 0 22px 70px hsl(287 100% 60% / 0.16);
  --shadow-lg: 0 40px 140px hsl(174 100% 50% / 0.18), 0 20px 90px hsl(287 100% 60% / 0.14);
}

* { box-sizing: border-box; }
html { background: hsl(var(--background)); }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; }
button { -webkit-tap-highlight-color: transparent; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

.orb { position: fixed; border-radius: 999px; filter: blur(28px); opacity: .55; pointer-events: none; }
.orb-a { width: 260px; height: 260px; top: -80px; right: -80px; background: hsl(var(--primary) / .45); animation: float 9s ease-in-out infinite; }
.orb-b { width: 320px; height: 320px; bottom: -120px; left: -120px; background: hsl(var(--secondary) / .34); animation: float 11s ease-in-out infinite reverse; }
.scanlines { position: fixed; inset: 0; pointer-events: none; opacity: .12; background-image: linear-gradient(hsl(var(--foreground) / .09) 1px, transparent 1px); background-size: 100% 4px; mix-blend-mode: screen; }

.logo-mark { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 10px; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); color: hsl(var(--primary-foreground)); font-weight: 1000; box-shadow: 0 0 26px hsl(var(--primary) / .55); }
.glass-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--card) / .58); color: hsl(var(--foreground)); font-size: 24px; font-weight: 800; backdrop-filter: blur(18px); transition: var(--transition-fast); }
.glass-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.publish-btn { border-radius: 999px; background: hsl(var(--foreground)); color: hsl(var(--background)); padding: .72rem 1rem; font-size: 12px; font-weight: 900; letter-spacing: .08em; box-shadow: 0 0 28px hsl(var(--foreground) / .15); }

.video-phone { transform-style: preserve-3d; }
.camera-feed { background: radial-gradient(circle at 48% 25%, hsl(var(--primary) / .34), transparent 18%), radial-gradient(circle at 45% 38%, hsl(28 100% 72% / .28), transparent 15%), linear-gradient(165deg, hsl(232 52% 8%), hsl(245 40% 13%) 42%, hsl(210 50% 8%)); }
.camera-feed::before { content: ''; position: absolute; inset: 18% 27% 26%; border-radius: 48% 48% 42% 42%; background: linear-gradient(180deg, hsl(24 90% 76% / .9), hsl(18 70% 42% / .45)); filter: blur(.2px); opacity: .72; box-shadow: 0 -36px 80px hsl(var(--primary) / .22); }
.camera-feed::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 12%, hsl(var(--primary) / .12) 12.4%, transparent 13%), linear-gradient(180deg, transparent 0 62%, hsl(var(--secondary) / .16) 78%, transparent); }
.vignette { background: radial-gradient(circle at center, transparent 46%, hsl(230 70% 3% / .72)); }
.watermark { position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); border: 1px solid hsl(var(--primary) / .34); border-radius: 1.2rem; background: hsl(230 50% 5% / .22); color: white; font-size: 13px; font-weight: 1000; letter-spacing: .08em; opacity: .72; overflow: hidden; text-shadow: 0 0 14px hsl(var(--primary)); backdrop-filter: blur(5px); }
.watermark img { width: 100%; height: 100%; object-fit: contain; padding: .35rem; }
.recording { border-color: hsl(var(--destructive) / .8); box-shadow: 0 0 0 4px hsl(var(--destructive) / .12), var(--shadow-lg); }
.status-pill, .mini-chip { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(230 40% 4% / .46); padding: .45rem .7rem; color: white; font-size: 11px; font-weight: 800; backdrop-filter: blur(16px); }
.live-dot { width: 8px; height: 8px; border-radius: 999px; background: hsl(var(--destructive)); box-shadow: 0 0 16px hsl(var(--destructive)); animation: pulse 1s infinite; }
.caption-card { border: 1px solid hsl(var(--border)); border-radius: 1.6rem; background: hsl(230 50% 5% / .42); padding: 1rem; color: white; backdrop-filter: blur(18px); box-shadow: 0 18px 50px hsl(0 0% 0% / .22); }
.wave-bar { display: inline-block; width: 8px; border-radius: 999px; background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--secondary))); animation: wave 980ms ease-in-out infinite alternate; }

.filter-tile { display: flex; min-width: 96px; flex-direction: column; gap: .45rem; border: 1px solid hsl(var(--border)); border-radius: 1.3rem; background: hsl(var(--card) / .64); padding: .55rem; color: hsl(var(--foreground)); backdrop-filter: blur(18px); transition: var(--transition-smooth); }
.filter-tile.active { border-color: hsl(var(--primary)); transform: translateY(-4px); box-shadow: 0 0 32px hsl(var(--primary) / .28); }
.filter-tile.applied { background: hsl(var(--primary) / .11); }
.filter-preview { display: flex; height: 58px; align-items: end; justify-content: end; border-radius: 1rem; border: 1px solid hsl(var(--border)); padding: .35rem; }
.filter-preview b { border-radius: .55rem; background: hsl(230 50% 4% / .5); padding: .12rem .28rem; color: white; font-size: 10px; }
.filter-system { padding: .8rem; }
.upload-btn, .ghost-btn, .action-btn { border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--card) / .64); padding: .62rem .78rem; color: hsl(var(--foreground)); font-size: 11px; font-weight: 900; transition: var(--transition-fast); }
.upload-btn:hover, .ghost-btn:hover, .action-btn:hover { border-color: hsl(var(--primary)); box-shadow: 0 0 22px hsl(var(--primary) / .16); }
.primary-action { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.control-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: .7rem; color: hsl(var(--muted-foreground)); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.control-row input { accent-color: hsl(var(--primary)); }
.tool-card { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid hsl(var(--border)); border-radius: 1.25rem; background: hsl(var(--card) / .62); padding: .85rem; text-align: left; backdrop-filter: blur(18px); transition: var(--transition-smooth); }
.tool-card.active { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .1); box-shadow: 0 0 28px hsl(var(--primary) / .18); }
.tool-icon { margin-bottom: .35rem; display: inline-flex; height: 34px; width: 34px; align-items: center; justify-content: center; border-radius: .9rem; background: hsl(var(--secondary) / .14); color: hsl(var(--secondary)); font-weight: 900; }
.panel-card { border: 1px solid hsl(var(--border)); border-radius: 1.7rem; background: hsl(var(--card) / .66); padding: 1rem; box-shadow: var(--shadow-sm); backdrop-filter: blur(22px); }
.beat-marker { position: absolute; top: 13px; width: 3px; height: 38px; border-radius: 999px; background: hsl(var(--primary)); box-shadow: 0 0 18px hsl(var(--primary)); animation: pulse 1.2s infinite; }
.track-row { display: flex; width: 100%; align-items: center; gap: .7rem; border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--background) / .34); padding: .55rem; transition: var(--transition-fast); }
.track-row:hover { transform: translateX(3px); border-color: hsl(var(--primary) / .7); }
.record-button { position: relative; display: flex; height: 82px; width: 82px; align-items: center; justify-content: center; border-radius: 999px; border: 2px solid hsl(var(--primary)); background: radial-gradient(circle, hsl(var(--destructive)) 0 38%, transparent 39%), hsl(var(--primary) / .11); box-shadow: 0 0 44px hsl(var(--primary) / .45), inset 0 0 22px hsl(var(--primary) / .18); transition: var(--transition-smooth); }
.record-button span { height: 58px; width: 58px; border-radius: 999px; border: 2px solid white; }
.record-button.active { transform: scale(.94); border-color: hsl(var(--destructive)); box-shadow: 0 0 52px hsl(var(--destructive) / .52); }
.stage-skeleton { margin: 3.5rem auto 0; height: 610px; width: 100%; max-width: 360px; background: linear-gradient(90deg, hsl(var(--card)), hsl(var(--muted)), hsl(var(--card))); background-size: 220% 100%; animation: shimmer 1.1s infinite; border: 1px solid hsl(var(--border)); }
.empty-card { border: 1px dashed hsl(var(--border)); border-radius: 1rem; padding: 1rem; color: hsl(var(--muted-foreground)); background: hsl(var(--card) / .5); }

@keyframes float { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(24px,18px,0) scale(1.08); } }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .48; transform: scale(.86); } }
@keyframes wave { from { transform: scaleY(.45); opacity: .68; } to { transform: scaleY(1); opacity: 1; } }
@keyframes shimmer { 0% { background-position: 180% 0; } 100% { background-position: -180% 0; } }

@media (min-width: 768px) {
  .stage-skeleton { margin-top: 0; height: 700px; max-width: 410px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}