:root {
    color-scheme: dark;
    font-family: system-ui, sans-serif;
    background: #080b10;
    color: #f4f7fb;
}

* { box-sizing: border-box }
html, body, #app { margin: 0; min-height: 100%; background: #080b10 }
body { min-height: 100vh }
button, input { font: inherit }
button { cursor: pointer }

.shell { min-height: 100vh; padding: 28px; display: grid; place-items: center }
.card { width: min(760px, 100%); border: 1px solid #252b36; border-radius: 24px; padding: 28px; background: #0d1118 }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.stack { display: grid; gap: 14px }
.input { width: 100%; padding: 15px 16px; border: 1px solid #303746; border-radius: 14px; background: #0a0d13; color: inherit; outline: none }
.btn { border: 0; border-radius: 14px; padding: 13px 17px; background: #f4f7fb; color: #0a0d13; font-weight: 700 }
.btn.secondary { background: #202734; color: #f4f7fb }
.btn.danger { background: #7f2630; color: white }
.drop { border: 2px dashed #384151; padding: 44px 24px; border-radius: 20px; text-align: center }
.drop.drag { border-color: #fff; background: #151a23 }

.stage { position: fixed; inset: 0; background: #000; display: grid; place-items: center; overflow: hidden }
.stage canvas, .stage img, .stage video, .stage iframe { width: 100%; height: 100%; object-fit: contain; border: 0 }
.stage-ui { position: fixed; inset: auto 0 0 0; padding: 16px; display: flex; justify-content: center; pointer-events: none }
.stage-ui > div { pointer-events: auto; background: #0a0d13d9; border: 1px solid #2b3240; border-radius: 16px; padding: 8px; backdrop-filter: blur(10px) }

.remote { width: min(560px, 100%); margin: 0 auto; padding: 18px; display: grid; gap: 14px }
.preview { aspect-ratio: 16 / 9; background: #000; border: 1px solid #2c3340; border-radius: 16px; overflow: hidden; display: grid; place-items: center }
.preview img, .preview canvas { width: 100%; height: 100%; object-fit: contain }
.controls { display: grid; gap: 10px }
.control-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.control-row.five { grid-template-columns: repeat(5, 1fr) }
.control { min-height: 58px; border: 1px solid #2b3240; border-radius: 16px; background: #111722; color: inherit; font-size: 18px; font-weight: 700 }
.control.primary { min-height: 76px; background: #f4f7fb; color: #080b10 }
.status { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: #98a2b3 }
.code { font: 800 25px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em }

.hidden { display: none !important }
.small { color: #98a2b3; font-size: 13px }
h1, h2, h3, p { margin: 0 }