:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#020617;color:#f8fafc}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(135deg,#0f172a,#111827 55%,#020617)}button,textarea,input{font:inherit}.app-shell{max-width:860px;margin:0 auto;padding:24px 16px 48px}.hero{margin-bottom:24px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.hero-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.hamburger-container{position:relative}.icon-btn{background:#1e293bb3;border:1px solid rgba(56,189,248,.3);color:#f8fafc;font-size:1.4rem;padding:8px 14px;border-radius:12px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;line-height:1}.icon-btn:hover,.icon-btn:active{background:#38bdf833;border-color:#38bdf899;transform:scale(.96)}.menu-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:220px;display:flex;flex-direction:column;gap:8px;padding:12px;z-index:100;box-shadow:0 12px 32px #0009;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.menu-item{display:flex;align-items:center;gap:10px;justify-content:flex-start;width:100%;padding:10px 14px;font-size:.9rem;text-align:left;border-radius:10px}.menu-item.about-item{color:#10b981;border-color:#10b9814d}.hero-copy{max-width:54ch}.hero-badge{align-self:flex-start;border:1px solid #22c55e;background:#0a1928b3;color:#22c55e;padding:8px 14px;border-radius:999px;font-size:.75rem;letter-spacing:.15em;font-weight:700;white-space:nowrap}.eyebrow{text-transform:uppercase;letter-spacing:.28em;font-size:.68rem;color:#7dd3fc;margin:0 0 8px}h1,h2{margin:0 0 8px}.subtitle,.helper-text{color:#cbd5e1;line-height:1.5}.card{background:#080f1ceb;border:1px solid rgba(13,110,253,.18);border-radius:24px;padding:20px;box-shadow:0 20px 40px #0006}.hidden{display:none}.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.mode-panel{padding:24px;border:1px solid rgba(56,189,248,.18);background:#080f1ceb;border-radius:24px;display:flex;flex-direction:column;gap:16px}.mode-panel h3{margin:0;color:#7dd3fc}.mode-panel p{margin:0;color:#cbd5e1;line-height:1.6}.mode-icon{width:54px;height:54px;border-radius:18px;background:#1e40af1f;display:grid;place-items:center;font-size:1.5rem;color:#22c55e}.action-btn{margin-top:auto;width:fit-content}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.mode-card,button{border:none;border-radius:14px;padding:14px 16px;cursor:pointer;font-weight:700;transition:transform .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent}.mode-card:hover{transform:translateY(-2px);border-color:#38bdf866}.mode-card:active,button:active{transform:scale(.97)}.secure-panel{border:1px solid rgba(16,185,129,.35);grid-column:1 / -1;background:linear-gradient(135deg,#080f1cf2,#06281e80)}.secure-panel .mode-icon{background:#10b98126;color:#10b981}.secure-panel h3{color:#34d399}.secure-btn{color:#34d399!important;border-color:#10b98166!important}.secure-btn:hover,.secure-btn:active{background:#10b98126!important}.mode-card.primary,button.primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.mode-card.secondary,button.ghost{background:#1e293bcc;color:#e2e8f0}.view-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.qr-panel{border-radius:24px;background:#080f1cfa;padding:18px;display:flex;justify-content:center;align-items:center;margin:18px 0;border:1px solid rgba(34,197,94,.18);box-shadow:inset 0 0 0 1px #22c55e0f,0 0 48px #10b9811a}.qr-panel img,.qr-panel canvas,.stream-preview img{max-width:100%;width:100%;height:auto}.received-media-card{margin-top:16px;background:#0f172ae6;border:1px solid rgba(56,189,248,.25);border-radius:16px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 8px 24px #0006}.received-media-wrapper{width:100%;max-height:280px;display:flex;justify-content:center;align-items:center;background:#020617d9;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);padding:10px}.received-media-wrapper img.received{max-width:100%;max-height:250px;width:auto;height:auto;object-fit:contain;border-radius:8px;display:block}.received-media-wrapper video.received{max-width:100%;max-height:250px;width:100%;object-fit:contain;border-radius:8px;display:block}.stream-panel{width:100%;max-width:720px}.receiver-panel{width:100%;max-width:460px}.status-banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 18px;margin-bottom:14px;border-radius:16px;border:1px solid rgba(56,189,248,.2);background:#0f172abf}.status-banner span,.status-banner strong{color:#f8fafc}.status-banner.green{border-color:#22c55e33}.status-banner.blue{border-color:#38bdf833}.fps-pill{margin-left:auto;border:1px solid rgba(56,189,248,.35);background:#1e40af24;color:#7dd3fc;padding:8px 12px;border-radius:999px;font-size:.85rem;letter-spacing:.08em}.small-label{margin-top:6px;color:#94a3b8}.field-row{display:grid;gap:8px}#streamCanvas{display:block;width:min(680px,100%);max-width:100%;height:auto;background:#fff;image-rendering:pixelated;image-rendering:crisp-edges}#receiverQr{width:min(460px,100%);max-width:100%;height:auto}.receiver-help{margin:0 0 12px;color:#cbd5e1;line-height:1.5}.stream-details{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#cbd5e1;font-size:.9rem;margin:-4px 0 12px}.stream-details span:last-child{color:#7dd3fc}.session-box,.status-pill,.result-box,.file-label{border-radius:14px;padding:12px 14px;background:#0f172aa6;border:1px solid rgba(148,163,184,.2);margin-top:12px}.label{display:block;font-size:.85rem;color:#93c5fd;margin-bottom:4px}.field-label{display:block;margin-top:12px;color:#cbd5e1}textarea,input[type=file]{width:100%;border-radius:16px;border:1px solid rgba(56,189,248,.18);padding:14px;margin-top:8px;background:#0a1422f2;color:#fff}.actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}button.primary{min-width:170px}button.ghost,.action-btn,.fps-select{background:transparent;border:1px solid rgba(56,189,248,.35);color:#7dd3fc}.fps-select{border-radius:14px;padding:14px 16px;font-weight:700;cursor:pointer;background:#0a1422f2}button.primary{background:linear-gradient(135deg,#22c55e,#0ea5e9);color:#020617}.stream-preview{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:12px;align-items:center;margin-top:12px}.stream-meta{color:#cbd5e1;line-height:1.5}video{width:100%;border-radius:14px;display:block;margin-top:12px;background:#000}.result-box{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,SFMono-Regular,Menlo,monospace;min-height:64px}.button-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:12px;align-items:end}.button-row .field-label{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:0;width:100%;font-size:.82rem;color:#94a3b8;font-weight:600}.button-row .fps-select,.button-row input[type=range]{width:100%}.button-row .field-label:has(input[type=range]),.button-row .field-full-width{grid-column:1 / -1}@media(max-width:680px){.app-shell{padding:16px 12px 36px}.hero{flex-direction:column;align-items:stretch;gap:14px}.hero-actions{width:100%;justify-content:space-between}.home-grid{grid-template-columns:1fr;gap:14px}.mode-panel{padding:20px 16px;gap:12px}.action-btn{width:100%;justify-content:center;text-align:center;padding:12px 16px}.stream-preview,.mode-grid{grid-template-columns:1fr}.actions{flex-direction:column}.actions button{width:100%}.button-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}textarea,input[type=text],input[type=password],select{font-size:16px!important}.menu-dropdown{width:200px;right:0}}