:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background:#07111f; color:#f8fafc; }
* { box-sizing:border-box; }
body { min-height:100dvh; margin:0; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at top,#17345b,#07111f 58%); }
.card { width:min(100%,420px); padding:30px; border:1px solid #284568; border-radius:24px; background:#0d1b2dcc; box-shadow:0 24px 70px #0008; }
.logo { width:54px; height:54px; display:grid; place-items:center; border-radius:16px; background:#38bdf8; color:#062033; font-weight:900; }
h1 { margin:18px 0 4px; font-size:2rem; }
.subtitle { color:#9fb4ca; margin:0 0 28px; }
label { display:grid; gap:8px; color:#cbd5e1; font-size:.9rem; }
input { width:100%; padding:15px; border:1px solid #365373; border-radius:12px; background:#091524; color:white; font:700 1.5rem/1 monospace; letter-spacing:.25em; text-align:center; }
button { width:100%; margin-top:14px; padding:14px; border:0; border-radius:12px; background:#38bdf8; color:#062033; font-weight:800; font-size:1rem; }
button:disabled { opacity:.45; }
button.secondary { background:#20364f; color:#e2e8f0; }
.status { min-height:44px; padding:12px; border-radius:10px; background:#07111f; color:#a5f3fc; }
audio { width:100%; }
video { width:100%; max-height:52dvh; margin:0 0 12px; border-radius:12px; background:#000; object-fit:contain; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.actions button { margin-top:0; }
video.controlling { touch-action:none; outline:3px solid #38bdf8; cursor:crosshair; }
video.css-fullscreen { position:fixed; inset:0; z-index:1000; width:100vw; height:100dvh; max-height:none; margin:0; border-radius:0; background:#000; }
.keyboard { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 0; }
.keyboard input { grid-column:1/-1; font:inherit; letter-spacing:normal; text-align:left; }
.keyboard button { margin:0; padding:11px 6px; }
.keyboard #sendText { grid-column:1/-1; }
.keyboard #layoutToggle,.keyboard .pc-keyboard { grid-column:1/-1; }
.pc-keyboard { display:grid; gap:5px; padding:7px; overflow-x:auto; background:#07111f; border-radius:10px; }
.key-row { display:flex; justify-content:center; gap:4px; min-width:340px; }
.key-row button { flex:1; min-width:28px; padding:9px 3px; font-size:.75rem; background:#20364f; color:#e2e8f0; }
.key-row button.wide { flex:1.7; }
.key-row button.space { flex:5; }
.key-row button.active { background:#38bdf8; color:#062033; }