*{box-sizing:border-box;margin:0;padding:0}:root{--surface:#ffffff;--bg-top:#fbfcfd;--bg-bot:#eaeef3;--text:#0f172a;--lead:#475569;--muted:#64748b;--line:#e2e8f0;--line-2:#eef2f6;--primary:#047857;--primary-hover:#065f46;--primary-active:#064e3b;--primary-soft:#ecfdf5;--primary-ring:rgba(4, 120, 87, 0.28);--danger:#dc2626;--danger-hover:#b91c1c;--accent:#0369a1;--info-bg:#eff6ff;--info-tx:#1e40af;--info-dot:#2563eb;--warn-bg:#fffbeb;--warn-tx:#92400e;--warn-dot:#d97706;--good-bg:#ecfdf5;--good-tx:#065f46;--good-dot:#059669;--focus:#2563eb;--r-sm:10px;--r-md:14px;--r-lg:22px;--shadow-card:0 1px 2px rgba(15, 23, 42, 0.04),0 10px 30px rgba(15, 23, 42, 0.08);--shadow-primary:0 2px 6px rgba(4, 120, 87, 0.18);--shadow-badge:0 5px 14px rgba(4, 120, 87, 0.22)}body,html{height:100%}body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--bg-top) 0,var(--bg-bot) 100%);background-attachment:fixed;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}.hidden{display:none!important}.screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}.card{position:relative;width:100%;max-width:416px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:32px 28px;text-align:center}.brand{width:56px;height:56px;margin:4px auto 18px;border-radius:17px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#059669 0,#047857 60%,#065f46 100%);box-shadow:var(--shadow-badge)}.brand .ic{stroke-width:2}.brand-ended{background:linear-gradient(160deg,#94a3b8 0,#64748b 100%);box-shadow:0 5px 14px rgba(100,116,139,.22)}h1{font-size:25px;font-weight:700;letter-spacing:-.01em;line-height:1.25;margin-bottom:8px}.lead{color:var(--lead);font-size:16px;line-height:1.55;margin:0 auto 24px;max-width:34ch}.step{font-size:15px;font-weight:600;color:var(--lead);margin:4px 0 10px}.note{color:var(--muted);font-size:14px;line-height:1.5;margin-top:12px}.trust{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2);color:var(--muted);font-size:13.5px}.trust .ic{color:var(--primary);stroke-width:2}button{font:inherit;cursor:pointer;border:none;background:0 0}button:disabled{cursor:not-allowed}.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:13px 20px;margin-top:12px;font-size:18px;font-weight:600;border-radius:var(--r-md);border:1px solid transparent;transition:background-color .15s,box-shadow .15s,transform .05s;background:var(--surface);border-color:var(--line);color:var(--text)}.btn .ic{width:22px;height:22px;flex:none}.btn:hover{background:#f8fafc;border-color:#cbd5e1}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--shadow-primary)}.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.btn.primary:active{background:var(--primary-active)}.btn.primary:disabled{background:#94a3b8;border-color:#94a3b8;box-shadow:none;opacity:.8}#btn-create,#btn-join{margin-top:4px}.lang{position:absolute;top:16px;right:16px;min-width:44px;height:34px;padding:0 12px;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--primary);background:var(--primary-soft);border-radius:999px;transition:background-color .15s}.lang:hover{background:#d1fae5}:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px #fff}.btn:focus-visible,.lang:focus-visible{outline-offset:3px}input:focus-visible{outline-offset:0;box-shadow:none}.linkbox{margin:2px 0;padding:14px 16px;background:#f8fafc;border:1px solid var(--line);border-radius:var(--r-md);font-size:15px;line-height:1.45;color:var(--text);word-break:break-all;user-select:all}.checkline{display:inline-flex;gap:10px;align-items:center;justify-content:center;margin-top:16px;padding:10px 14px;border-radius:var(--r-md);background:#f8fafc;border:1px solid var(--line);font-size:16px;color:var(--text);cursor:pointer}.checkline input{width:22px;height:22px;accent-color:var(--primary);cursor:pointer}#screen-call{flex-direction:column;padding:0;align-items:stretch;justify-content:flex-start;background:#0b0f14}.banner{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 16px;text-align:center;font-size:15px;font-weight:600}.banner::before{content:"";width:10px;height:10px;border-radius:50%;flex:none}.banner.info{background:var(--info-bg);color:var(--info-tx)}.banner.info::before{background:var(--info-dot)}.banner.warn{background:var(--warn-bg);color:var(--warn-tx)}.banner.warn::before{background:var(--warn-dot)}.banner.good{background:var(--good-bg);color:var(--good-tx)}.banner.good::before{background:var(--good-dot);box-shadow:0 0 0 4px rgba(5,150,105,.18)}#videos{position:relative;flex:1;min-height:0;background:#000}#remote-video{width:100%;height:100%;object-fit:contain;background:#000}#local-video{position:absolute;right:14px;bottom:14px;width:27%;max-width:172px;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(0,0,0,.45);background:#111}.placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#cbd5e1;font-size:18px;text-align:center;padding:24px}.tap-to-start{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);color:#fff;font-size:20px;font-weight:600;text-align:center;padding:24px}.quality{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;background:rgba(11,15,20,.66);color:#fff;font-size:14px;font-weight:600;pointer-events:none}.q-bars{display:inline-flex;align-items:flex-end;gap:3px;height:16px}.q-bars i{width:4px;border-radius:2px;background:rgba(255,255,255,.3)}.q-bars i:first-child{height:7px}.q-bars i:nth-child(2){height:11px}.q-bars i:nth-child(3){height:16px}.quality.good .q-bars i{background:#34d399}.quality.good .q-label{color:#a7f3d0}.quality.fair .q-bars i:nth-child(-n+2){background:#fbbf24}.quality.fair .q-label{color:#fde68a}.quality.poor .q-bars i:first-child{background:#f87171}.quality.poor .q-label{color:#fca5a5}#chat{display:flex;flex-direction:column;height:40dvh;background:var(--surface);border-top:1px solid var(--line)}#chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.msg{max-width:80%;padding:10px 14px;border-radius:16px 16px 16px 6px;background:#f1f5f9;color:var(--text);font-size:16px;line-height:1.45;word-wrap:break-word;align-self:flex-start}.msg.mine{background:#d1fae5;align-self:flex-end;border-bottom-left-radius:16px;border-bottom-right-radius:6px}.msg img{max-width:100%;border-radius:10px;display:block;margin-top:6px}.msg a{color:var(--accent);font-weight:600}.msg .sys{color:var(--muted);font-size:14px}#chat-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--surface);padding-bottom:max(12px,env(safe-area-inset-bottom))}#chat-text{flex:1;font:inherit;font-size:16px;padding:12px 15px;border-radius:999px;border:1px solid var(--line);background:#f8fafc;color:var(--text)}#chat-text::placeholder{color:var(--muted)}#chat-text:focus{border-color:var(--primary);background:#fff}#chat-input-row button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;border-radius:50%;color:var(--lead);background:#f1f5f9;transition:background-color .15s}#btn-attach:hover{background:#e2e8f0}#btn-send{background:var(--primary);color:#fff;box-shadow:var(--shadow-primary)}#btn-send:hover{background:var(--primary-hover)}#chat-input-row .ic{width:22px;height:22px}#controls{display:flex;gap:10px;padding:12px 12px max(12px,env(safe-area-inset-bottom));justify-content:center;background:var(--surface);border-top:1px solid var(--line)}.ctl{flex:1;max-width:132px;min-height:58px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:var(--r-md);background:#f1f5f9;color:var(--lead);font-size:13px;font-weight:600;transition:background-color .15s,color .15s}.ctl:hover{background:#e2e8f0}.ctl:active{transform:translateY(1px)}.ctl .ic{width:24px;height:24px}.ctl.off{background:#fef3c7;color:#92400e}.ctl.off:hover{background:#fde68a}.ctl.danger{background:var(--danger);color:#fff}.ctl.danger:hover{background:var(--danger-hover)}.i-hangup{transform:rotate(135deg)}.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}@media (min-width:800px){#screen-call{flex-direction:row;flex-wrap:wrap}#banner{width:100%;order:0}#videos{order:1;flex:1 1 60%;height:calc(100dvh - 150px)}#chat{order:2;flex:0 0 372px;height:calc(100dvh - 150px);border-top:none;border-left:1px solid var(--line)}#controls{order:3;width:100%;gap:12px}.ctl{max-width:150px}}@media (prefers-reduced-motion:reduce){*,::after,::before{transition:none!important}button:active{transform:none}}