:root { color-scheme: dark; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #0b1020; color: #f6f7fb; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.topbar { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: #111831; border-bottom: 1px solid #27304f; flex-wrap: wrap; }
.topbar h1 { font-size: 18px; margin: 0; margin-right: auto; }
.badge { background: #202947; border-radius: 999px; padding: 6px 10px; font-size: 13px; }
.main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
.stage-wrap { min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.stage { position: relative; flex: 1; min-height: 480px; background: #05070d; border: 1px solid #27304f; border-radius: 14px; overflow: hidden; display: grid; place-items: center; }
.stage canvas, .stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.fullscreen-toggle { position: absolute; top: 10px; right: 10px; z-index: 4; width: 42px; height: 42px; padding: 0; border: 1px solid #66708d; border-radius: 10px; background: rgb(17 24 49 / 85%); color: white; font-size: 24px; line-height: 1; }
.stage:fullscreen, .stage.is-fullscreen-fallback { width: 100vw; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; border: 0; border-radius: 0; background: #000; }
.stage.is-fullscreen-fallback { position: fixed; inset: 0; z-index: 1000; }
body.fullscreen-fallback { overflow: hidden; }
.loading-state { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; background: #05070d; color: #dbe1f5; text-align: center; }
.loading-state.is-error { color: #ff9e9e; }
.loading-spinner { width: 38px; height: 38px; border: 4px solid #27304f; border-top-color: #7186ff; border-radius: 50%; animation: loading-spin .8s linear infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
.overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pointer { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 20px #ff3b3b; transform: translate(-50%, -50%); display: none; }
.comment { position: absolute; right: -40%; white-space: nowrap; font-weight: 800; font-size: clamp(18px, 2.2vw, 30px); text-shadow: 0 2px 4px #000, 0 0 6px #000; animation: comment-flow 8s linear forwards; }
@keyframes comment-flow { from { transform: translateX(0); } to { transform: translateX(-160vw); } }
.reaction-pop { position: absolute; bottom: 8%; font-size: clamp(28px, 5vw, 54px); animation: reaction-rise 2.4s ease-out forwards; }
@keyframes reaction-rise { from { transform: translateY(20px) scale(.8); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-220px) scale(1.2); opacity: 0; } }
.controls { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.controls button, .primary { border: 0; border-radius: 10px; padding: 10px 16px; background: #536dfe; color: white; font-weight: 700; }
.controls button.secondary, .secondary { background: #26314f; }
.side { border-left: 1px solid #27304f; padding: 16px; overflow: auto; background: #0f1528; }
.card { background: #151d35; border: 1px solid #27304f; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.card h2 { font-size: 15px; margin: 0 0 10px; }
.form-row { display: grid; gap: 8px; margin-bottom: 12px; }
.form-row input[type="text"], .comment-input { width: 100%; border: 1px solid #344064; background: #0b1020; color: white; border-radius: 9px; padding: 10px 12px; }
.drop-zone { display: grid; place-items: center; gap: 6px; min-height: 132px; padding: 18px; border: 2px dashed #536dfe; border-radius: 12px; background: #0b1020; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.drop-zone:hover, .drop-zone:focus-within, .drop-zone.is-dragging { border-color: #91a2ff; background: #18213d; transform: translateY(-1px); }
.drop-zone-title { font-weight: 700; }
.file-selection { max-width: 100%; color: #c9d3ff; font-size: 12px; overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.reactions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.reactions button { font-size: 24px; padding: 10px; border-radius: 10px; border: 1px solid #344064; background: #111831; }
.log { display: grid; gap: 8px; max-height: 280px; overflow: auto; }
.log-item { font-size: 13px; line-height: 1.45; padding-bottom: 8px; border-bottom: 1px solid #27304f; }
.muted { color: #aeb7cf; font-size: 13px; }
.share-url { word-break: break-all; font-size: 12px; color: #c9d3ff; }
.share-qr { display: grid; place-items: center; width: fit-content; min-width: 196px; min-height: 196px; margin: 14px auto 8px; padding: 8px; border-radius: 10px; background: white; }
.share-qr img, .share-qr canvas { display: block; width: 180px; height: 180px; }
.audience-shell .main, .projector-shell .main { grid-template-columns: 1fr; }
.audience-shell .stage-wrap { min-height: calc(100vh - 64px); }
.projector-shell .topbar { display:none; }
.projector-shell .stage-wrap { padding:0; min-height:100vh; }
.projector-shell .stage { border:0; border-radius:0; min-height:100vh; }
@media (max-width: 900px) { .main { grid-template-columns: 1fr; } .side { border-left: 0; border-top: 1px solid #27304f; } .stage { min-height: 55vh; } }