:root{--bg: #ffffff;--bg-soft: #f5f7fb;--bg-card: #ffffff;--border: #e8ecf3;--border-strong: #d6dce8;--text: #0b1220;--text-muted: #6b7790;--accent: #16c47f;--accent-2: #1e9eea;--accent-soft: rgba(22, 196, 127, .1);--accent-hover: #19d68a;--danger: #ef4444;--radius: 16px;--radius-sm: 10px;--radius-lg: 22px;--shadow-sm: 0 2px 6px rgba(11, 18, 32, .06);--shadow: 0 12px 30px rgba(11, 18, 32, .08);--shadow-glow: 0 0 0 1px rgba(22, 196, 127, .25), 0 14px 40px rgba(22, 196, 127, .18);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body{margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{background:var(--bg);background-image:radial-gradient(800px 500px at 50% -20%,rgba(22,196,127,.1),transparent 70%),radial-gradient(700px 400px at 100% 0%,rgba(30,158,234,.08),transparent 70%);background-attachment:fixed;color:var(--text);min-height:100dvh;display:flex;flex-direction:column;line-height:1.5;font-size:16px;overflow-x:hidden}.dev-banner{background:#fff8dc;color:#5b4500;border-bottom:1px solid #f0d97a;padding:10px 16px;font-size:13px;line-height:1.4}.dev-banner strong{display:inline-block;margin-right:6px}.dev-banner code{background:#00000012;padding:1px 6px;border-radius:4px;font-size:12px}.topbar{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start;padding:16px 20px 8px;padding-top:calc(16px + env(safe-area-inset-top))}.topbar-side{display:flex;align-items:center}.topbar-side--left{justify-content:flex-start;padding-top:6px}.topbar-side--right{justify-content:flex-end;padding-top:6px}.topbar-center{display:flex;justify-content:center}.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;letter-spacing:-.01em;color:var(--text)}.brand-mark{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 4px 10px #16c47f59}.brand-name{font-size:15px}.qr-card{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px 10px;box-shadow:var(--shadow)}.qr-frame{position:relative;padding:8px;background:#fff;border-radius:14px;display:inline-block}.qr-frame:before{content:"";position:absolute;inset:-2px;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent-2));z-index:-1;opacity:.5;filter:blur(8px)}.qr-frame canvas{display:block;border-radius:6px}.qr-meta{text-align:center}.qr-title{margin:0;font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:.01em}.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;padding:10px 16px;border-radius:999px;border:1px solid transparent;background:linear-gradient(135deg,var(--accent),#0fae6d);color:#fff;box-shadow:0 6px 16px #16c47f4d;transition:transform .06s ease,box-shadow .15s ease,background .15s ease;min-height:40px;-webkit-tap-highlight-color:transparent}.primary-btn:hover:not(:disabled){background:linear-gradient(135deg,var(--accent-hover),#14b876);box-shadow:0 8px 22px #16c47f61}.primary-btn:active:not(:disabled){transform:translateY(1px)}.primary-btn:disabled{opacity:.5;cursor:not-allowed}.primary-btn .plus{font-size:18px;line-height:1;font-weight:700;margin-top:-1px}.link-btn{display:inline-block;background:none;border:none;padding:0;margin:0;color:var(--text-muted);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;-webkit-tap-highlight-color:transparent}.link-btn:hover,.link-btn:focus-visible{color:var(--accent)}.stage{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:16px 20px 24px;gap:12px;min-height:60dvh;transition:background .15s ease}.stage.drag-over{background:var(--accent-soft)}.peer-stage{position:relative;width:100%;flex:1;min-height:200px;display:flex;align-items:center;justify-content:center}.peers-empty{text-align:center;max-width:320px;margin:0 auto;position:relative;z-index:1}.peers-empty-title{margin:0 0 4px;font-weight:700;font-size:16px;color:var(--text)}.peers-empty-help{margin:0;color:var(--text-muted);font-size:14px}.peer-stage.has-peers .peers-empty{display:none}.peer-stage:not(.has-peers) .peer-bubbles{display:none}.radar{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:0;pointer-events:none;opacity:1;transition:opacity .3s ease}.peer-stage.has-peers .radar{opacity:0}.radar-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 24px #16c47f73;position:absolute;bottom:-8px}.radar-ring{position:absolute;bottom:-8px;width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:radar-pulse 2.6s ease-out infinite}.radar-ring-2{animation-delay:.85s}.radar-ring-3{animation-delay:1.7s}@keyframes radar-pulse{0%{transform:scale(1);opacity:.55}to{transform:scale(14);opacity:0}}.peer-bubbles{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:22px 18px;justify-content:center;align-items:flex-start;width:100%;position:relative;z-index:1}.peer-bubble{--b-from: #16c47f;--b-to: #0fae6d;--b-ring: #16c47f;display:flex;flex-direction:column;align-items:center;gap:6px;width:110px;background:transparent;border:none;padding:6px 4px;cursor:pointer;font:inherit;color:var(--text);border-radius:18px;transition:transform .18s ease,background .15s ease;animation:bubble-pop .4s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent}.peer-bubble:hover{transform:translateY(-3px)}.peer-bubble:active{transform:scale(.97)}.peer-bubble:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.peer-bubble.drag-target{background:var(--accent-soft);transform:translateY(-4px) scale(1.04)}.peer-bubble.drag-target .peer-avatar{box-shadow:0 0 0 4px var(--b-ring),0 14px 30px #0b12202e}.peer-avatar{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--b-from),var(--b-to));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;color:#fff;letter-spacing:.5px;box-shadow:0 8px 18px #0b122024,inset 0 1px #ffffff40;position:relative;transition:box-shadow .18s ease,transform .18s ease}.peer-avatar:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--b-ring);opacity:0;transition:opacity .15s ease}.peer-bubble:hover .peer-avatar:after{opacity:.5}.peer-name{font-size:13px;font-weight:700;text-align:center;line-height:1.2;word-break:break-word}.peer-hint{font-size:11px;color:var(--text-muted);font-weight:500}.peer-bubble:hover .peer-hint{color:var(--accent)}@keyframes bubble-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}.peer-bubble.leaving{animation:bubble-leave .22s ease-in forwards;pointer-events:none}@keyframes bubble-leave{to{transform:scale(.4);opacity:0}}.self-block{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0 8px;position:relative;z-index:1}.device{display:flex;flex-direction:column;align-items:center;gap:8px}.device-icon{width:96px;height:96px;border-radius:26px;background:linear-gradient(160deg,#fff,#f0f3fa);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text);box-shadow:0 12px 28px #0b12201a,inset 0 1px #ffffffe6;position:relative}.device-icon:after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,#16c47f73,#1e9eea73);z-index:-1;filter:blur(10px);opacity:.55}.icon{width:56px;height:auto}.device[data-kind=laptop] .icon-phone,.device[data-kind=phone] .icon-laptop{display:none}.device[data-kind=phone] .icon-phone{display:block;width:36px}.self-name-row{display:inline-flex;align-items:center;gap:8px;background:var(--bg-soft);border:1px solid var(--border);padding:6px 12px;border-radius:999px;font-size:13px}.self-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.65}}.self-name{font-weight:700}.self-sub{margin:0;color:var(--text-muted);font-size:12px}.room-link-tiny{margin:4px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;width:100%;max-width:460px}.room-link-tiny .muted{margin:0}.room-link-tiny input{flex:1;min-width:180px;background:var(--bg-soft);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:999px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;text-align:center;outline:none}.muted{color:var(--text-muted);margin:0 0 12px}.small{font-size:12px}.transfer-log{margin:0 20px 24px;padding:16px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.transfer-log h2{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.transfer-log ul{list-style:none;padding:0;margin:0}.transfer-log li{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}.transfer-log li:last-child{border-bottom:none}.transfer-log .progress{grid-column:1 / -1;height:6px;background:var(--bg-soft);border-radius:99px;overflow:hidden}.transfer-log .progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0%;transition:width .18s ease;border-radius:99px}.ad-slot{display:flex;align-items:center;justify-content:center}.ad-top{width:100%;padding:8px 12px 0;min-height:60px}.ad-placeholder{width:100%;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:14px 18px;text-align:center;color:var(--text-muted);font-size:12px;background:var(--bg-soft)}.ad-placeholder-top{max-width:970px;min-height:60px;display:flex;align-items:center;justify-content:center;margin:0 auto}.shell{flex:1;display:flex;flex-direction:column;width:100%}.content{flex:1;display:flex;flex-direction:column;width:100%;max-width:880px;margin:0 auto}.ad-rail{display:none}@media (min-width: 1240px){.ad-rail{display:flex;justify-content:center;align-items:flex-start;position:fixed;top:50%;transform:translateY(-50%);z-index:5;pointer-events:auto}.ad-left{left:16px}.ad-right{right:16px}.ad-rail-inner{width:160px;display:flex;flex-direction:column;gap:16px}.ad-placeholder-rail{height:600px;display:flex;align-items:center;justify-content:center}}@media (min-width: 1520px){.ad-left{left:24px}.ad-right{right:24px}.ad-rail-inner{width:300px}}.footer-note{text-align:center;color:var(--text-muted);font-size:12px;padding:0 20px calc(16px + env(safe-area-inset-bottom));margin:0;opacity:.8}@media (max-width: 480px){.topbar{grid-template-columns:1fr auto 1fr;gap:8px;padding:12px 12px 4px}.brand-name{display:none}.qr-card{padding:8px 10px;border-radius:18px}.qr-frame canvas{width:132px;height:132px}.qr-title,.link-btn{font-size:11px}.primary-btn{padding:9px 12px;font-size:13px}.primary-btn span:not(.plus){display:none}.primary-btn{gap:0;padding:0;width:40px;height:40px;min-height:40px;border-radius:50%}.primary-btn .plus{font-size:22px}.device-icon{width:80px;height:80px;border-radius:22px}.device[data-kind=laptop] .icon{width:46px}.device[data-kind=phone] .icon{width:30px}.stage{padding:12px 14px 16px}.peer-bubble{width:92px}.peer-avatar{width:64px;height:64px;font-size:22px}.room-link-tiny input{font-size:12px}}@media (min-width: 760px){.topbar{padding:22px 28px 12px}.qr-frame canvas{width:180px;height:180px}.qr-card{padding:14px 16px 12px}.device-icon{width:110px;height:110px;border-radius:30px}.device[data-kind=laptop] .icon{width:64px}.device[data-kind=phone] .icon{width:42px}.peer-bubble{width:120px}.peer-avatar{width:84px;height:84px;font-size:28px}.stage{padding:24px 28px 32px}}@media (hover: none){.peer-bubble:hover{transform:none}.peer-bubble:hover .peer-avatar:after{opacity:0}.peer-bubble:hover .peer-hint{color:var(--text-muted)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}