
:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1e293b;background:#f8fafc;font-synthesis:none;--blue:#2864ed;--line:#e8ecf2;--muted:#8490a3;--card:#fff}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #8bb8ff;outline-offset:4px}button{border:0}a{color:inherit;text-decoration:none}.shell{display:flex;min-height:100vh}.sidebar{width:250px;flex-shrink:0;padding:36px 24px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--card);position:fixed;inset:0 auto 0 0}.brand{display:flex;align-items:center;gap:9px;font-size:25px;letter-spacing:-1.1px;font-weight:750}.beta{font-size:8px;letter-spacing:1px;border:1px solid var(--line);padding:3px 4px;border-radius:4px;margin-top:3px;color:#8490a3}.sidebar-label{font-size:10px;font-weight:650;letter-spacing:1.5px;color:#99a3b2;margin:57px 12px 17px}.nav-item{width:100%;text-align:left;border-radius:9px;padding:13px 14px;background:none;color:#6b778b;font-size:13px;font-weight:550;margin-bottom:7px;display:flex;align-items:center;gap:13px}.nav-item span{font-size:20px;line-height:15px}.nav-item.active{background:#eff5ff;color:#2563eb}.sidebar-note{margin-top:auto;padding:26px 12px 24px}.sidebar-note .lock{display:block;color:#92a2b7;font-size:32px;margin-bottom:13px}.sidebar-note strong{font-size:12px;font-weight:600}.sidebar-note p{font-size:11px;color:#8994a5;line-height:1.8;margin-top:9px}.text-button{background:none;padding:5px 0;color:#55769c;font-size:11px}.device-self{display:flex;gap:10px;align-items:center;text-align:left;padding:20px 0 0;border-top:1px solid var(--line);background:none;color:inherit}.device-self strong{display:block;font-size:11px}.device-self small{display:block;font-size:9px;color:#96a0ae;margin-top:5px}.device-self>span:last-child{margin-left:auto;font-size:12px;color:#94a3b8}.self-icon{background:#f0f3f7;border-radius:10px;width:35px;height:35px;display:grid;place-items:center;color:#64748b}main{margin-left:250px;width:calc(100% - 250px);padding:0 56px;max-width:1700px}.topbar{height:97px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#718094}.topbar>div{display:flex;align-items:center;gap:8px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#f5ae47;box-shadow:0 0 0 4px #fef3c7}.status-dot.online{background:#38b688;box-shadow:0 0 0 4px #e4f5ed}.button{border-radius:8px;padding:12px 17px;font-size:11px;font-weight:600;display:inline-flex;gap:22px;align-items:center;justify-content:center;white-space:nowrap;transition:transform .15s,background .15s}.button:hover{transform:translateY(-1px)}.button.primary{color:white;background:var(--blue);box-shadow:0 4px 9px #2864ed20}.button.primary:hover{background:#1d4ed8}.button.subtle{color:#526176;background:var(--card);border:1px solid #e2e8f0;box-shadow:0 2px 3px #0f172a03}.intro{padding:43px 0 34px}.eyebrow{font-size:9px;font-weight:700;color:#7d93b1;letter-spacing:2px}h1{font-size:43px;line-height:1.15;letter-spacing:-1.8px;font-weight:620;margin:15px 0}h1 span{color:#8c99ad}.intro p{font-size:12px;line-height:1.85;color:#7e8b9f;margin-bottom:0}.workspace{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}.share-card,.devices-card{border:1px solid var(--line);border-radius:15px;background:var(--card);box-shadow:0 5px 16px #16253b02;min-height:382px}.share-card{text-align:center;overflow:hidden;position:relative;padding:10px 24px 0}.share-card.dragover{border:2px dashed var(--blue);background:#eff6ff}.orbit{width:260px;height:175px;position:relative;margin:0 auto}.orbit-ring{position:absolute;border:1px solid #edf1f7;border-radius:50%;left:50%;top:52%;transform:translate(-50%,-50%)}.ring-one{width:120px;height:120px}.ring-two{width:185px;height:185px}.ring-three{width:247px;height:247px;border-color:#f4f6fa}.file-tile{position:absolute;border-radius:10px;width:63px;height:79px;box-shadow:0 6px 18px #2961ac13;border:1px solid #e4edfa;display:grid;place-items:center;top:47px;left:96px}.tile-back{transform:rotate(-17deg) translate(-22px,-7px);background:#eff4fb;color:#b5c9e2;font-size:32px}.tile-front{transform:rotate(10deg);background:linear-gradient(130deg,#fff,#edf4ff)}.tile-front svg{width:47px;height:47px}.send-bubble{position:absolute;top:111px;left:145px;width:33px;height:33px;border-radius:11px;background:#2864ed;color:white;box-shadow:0 5px 12px #2864ed30;display:grid;place-items:center;font-size:22px;border:3px solid #fff}.orbit-spark{position:absolute;color:#9bb9e6;font-size:13px}.spark-one{left:52px;top:49px}.spark-two{right:48px;top:111px}.share-card h2{font-size:16px;letter-spacing:-.35px;position:relative;margin:10px 0}.share-card>p{font-size:11px;color:#91a0b4;margin:0 0 20px}.choose-actions{display:flex;justify-content:center;gap:8px}.card-foot{display:flex;justify-content:center;gap:26px;border-top:1px solid #f0f3f7;margin:30px -24px 0;padding:16px;color:#91a0b1;font-size:9px}.devices-card{padding:25px 25px 0;display:flex;flex-direction:column}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-heading h2{font-size:13px;font-weight:650;margin:0}.section-heading h2 span{font-size:9px;color:#94a3b8;background:#f1f4f8;padding:3px 6px;margin-left:6px;border-radius:5px}.live-label{font-size:8px;letter-spacing:1.3px;color:#8598ac;display:flex;align-items:center;gap:5px}.live-label:before{content:'';width:4px;height:4px;background:#7fc3a7;border-radius:50%}.section-subtitle{font-size:10px;color:#94a0b0;margin-top:9px}#empty-peers{text-align:center;margin:auto 0;padding:9px 0 14px}.radar{width:65px;height:65px;border:1px solid #edf1f6;border-radius:50%;margin:2px auto 14px;display:grid;place-items:center;box-shadow:0 0 0 8px #fafbfd;color:#bccadd;font-size:32px}h3{font-size:12px;font-weight:600}#empty-peers p{font-size:10px;line-height:1.9;color:#9aa5b6;margin-bottom:17px}#empty-peers .button{padding:10px 13px;font-size:10px}.device-hint{border-top:1px solid var(--line);text-align:center;font-size:8px;color:#9aa6b7;padding:16px 0;margin-top:15px}.peer{padding:13px 5px;display:flex;gap:12px;align-items:center;width:100%;background:none;color:inherit;text-align:left;border-bottom:1px solid var(--line)}.peer-icon{width:42px;height:42px;border-radius:12px;background:#eef4fe;display:grid;place-items:center;color:var(--blue);font-size:23px}.peer strong{display:block;font-size:12px}.peer small{font-size:10px;color:var(--muted)}.peer .arrow{margin-left:auto;color:#3b82f6}.transfer-section{margin-top:31px}.muted{color:#9aa5b4;font-size:9px}#transfers{margin-top:16px}.empty-transfers{display:flex;gap:17px;padding:23px 22px;border:1px dashed #dfe6ee;border-radius:11px;color:#92a0b2;align-items:center}.empty-transfers>span{font-size:21px;background:#eef2f7;width:34px;height:34px;border-radius:8px;display:grid;place-items:center}.empty-transfers strong{font-size:11px;color:#7c8b9e;font-weight:500}.empty-transfers p{font-size:10px;margin:5px 0 0}.bottom-note{text-align:center;font-size:9px;letter-spacing:.1px;color:#a4afbd;margin:30px 0 36px;display:flex;justify-content:center;align-items:center;gap:7px}.bottom-note span{font-size:14px}footer{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;color:#a5afbd;font-size:8px}footer span:first-child{letter-spacing:1.4px;font-weight:600}.transfer-row{background:var(--card);padding:15px 20px;border:1px solid var(--line);border-radius:10px;margin:10px 0;display:grid;grid-template-columns:36px 1fr auto;gap:13px;align-items:center}.transfer-row strong{font-size:12px;overflow-wrap:anywhere}.transfer-row p{font-size:10px;color:var(--muted);margin:5px 0}.transfer-row progress{height:4px;width:100%;accent-color:var(--blue);display:block;margin-top:9px}.transfer-row .file-icon{font-size:22px;color:#80a9e7}.transfer-row .text-button{margin-left:9px}dialog{border:1px solid var(--line);border-radius:22px;padding:38px;text-align:center;max-width:min(440px,calc(100vw - 28px));color:inherit;background:var(--card);box-shadow:0 25px 90px #0f172a26}dialog::backdrop{background:#12213e40;backdrop-filter:blur(6px)}dialog h2{font-size:25px;letter-spacing:-.8px}dialog p{font-size:12px;color:#8492a6;line-height:1.8}dialog .close{position:absolute;right:16px;top:10px;background:none;color:#9aa6b8;font-size:25px}#qr{display:block;margin:12px auto 20px;border-radius:10px}.fine-print{font-size:10px!important}hr{border:0;border-top:1px solid var(--line);margin:24px 0}label{display:block;text-align:left;font-size:11px;margin:10px 0}.input-row{display:flex;gap:8px}input{min-width:0;border:1px solid var(--line);background:var(--card);color:inherit;border-radius:8px;padding:10px;font-size:11px;width:100%}#new-space{margin-top:20px}.dialog-actions{display:flex;gap:10px;justify-content:center;margin-top:25px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);border-radius:10px;background:#1e293b;color:white;padding:13px 20px;font-size:12px;z-index:9;box-shadow:0 6px 25px #1e293b20;max-width:90vw}#history-list{margin-top:25px}[hidden]{display:none!important}
@media(min-width:1500px){main{padding:0 90px}.intro{padding-top:55px}h1{font-size:50px}.workspace{max-width:1150px}.share-card,.devices-card{min-height:410px}.orbit{margin-top:15px}}
@media(max-width:1100px){.sidebar{width:210px;padding:30px 18px}main{margin-left:210px;width:calc(100% - 210px);padding:0 30px}.workspace{gap:16px;grid-template-columns:1.1fr 1fr}.share-card{padding-left:12px;padding-right:12px}.share-card h2{font-size:14px}.card-foot{gap:12px}.choose-actions{gap:5px}.choose-actions .button{padding:11px 12px}.devices-card{padding:22px 18px 0}.brand{font-size:23px}.beta{font-size:7px}h1{font-size:39px}}
@media(max-width:800px){.sidebar{display:none}main{margin:0;width:100%;padding:0 23px}.topbar{height:75px}.topbar:before{content:'dropair';font-size:23px;font-weight:750;letter-spacing:-1px;color:#1e293b}.topbar>div{margin-left:auto;margin-right:18px;font-size:10px}.topbar .button{font-size:0;padding:8px;width:32px}.topbar .button:before{content:'+';font-size:20px}.intro{padding:30px 0}.workspace{grid-template-columns:1fr 1fr}.share-card h2{font-size:13px}.share-card>p{font-size:10px}.orbit{width:225px}h1{font-size:37px}.card-foot{font-size:8px;gap:9px}}
@media(max-width:600px){.workspace{grid-template-columns:1fr}.share-card{min-height:350px}.devices-card{min-height:280px}#empty-peers{padding:12px 0}.intro p br{display:none}.intro h1 br{display:none}.intro h1 span{display:block}.intro{padding:30px 0}.orbit{height:160px}.card-foot{margin-top:23px;font-size:9px}.transfer-section .muted{display:none}footer span:last-child{display:none}.bottom-note{margin:24px 0}.section-heading h2{font-size:14px}.devices-card{padding:22px}.device-hint{padding-bottom:0}.share-card h2{font-size:16px}.share-card>p{font-size:11px}.button{font-size:12px}#history-view{display:block!important}#history-view .intro{display:none}#history-view #clear-history{margin-top:16px;font-size:10px}}
@media(prefers-color-scheme:dark){:root{color:#dce5f2;background:#111722;--line:#293343;--card:#18212e;--muted:#8999ae}.nav-item.active{background:#1b3154}.sidebar-note p{color:#8999ae}.self-icon,.section-heading h2 span,.empty-transfers>span{background:#222e40}.button.subtle{border-color:#334155;color:#b0bed1}.ring-one,.ring-two,.ring-three{border-color:#253349}.card-foot{border-color:#293343}.radar{box-shadow:0 0 0 8px #1b2635;border-color:#293343}.topbar:before{color:#dce5f2}.peer-icon{background:#203856}.empty-transfers{border-color:#334155}.send-bubble{border-color:#18212e}.share-card.dragover{background:#1b3154}.status-dot.online{box-shadow:0 0 0 4px #17392e}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.orbit{overflow:hidden}.mobile-history-title{display:none}@media(max-width:800px){.topbar .button{gap:0}}@media(max-width:600px){.mobile-history-title{display:block;font-size:14px;margin:24px 0 0}}
/* Shared Dropair identity: substantial type, clear surfaces, accessible dark contrast. */
h1{font-weight:800;letter-spacing:-1.8px}h1 span{color:#4679cf}.brand{font-weight:800}
@media(prefers-color-scheme:dark){
 :root{color:#f4f7fc;background:#0b1019;--line:#2c3b51;--card:#161f2d;--muted:#b0bed1;--blue:#3478f6}
 h1 span{color:#78acff}.intro p,.share-card>p,.section-subtitle,#empty-peers p,.device-hint,.muted,.card-foot,.bottom-note,footer,.sidebar-note p,.device-self small,.eyebrow{color:#b0bed1}
 .topbar,.nav-item{color:#b0bed1}.nav-item.active{background:#223753;color:#9dc3ff}.topbar:before{color:#f4f7fc}
 .share-card,.devices-card{box-shadow:0 8px 30px #00000012}.button.subtle{background:#1c293b;border-color:#3a4c64;color:#e1ebfa}
 .empty-transfers{border-color:#3a4c64}.empty-transfers strong,.empty-transfers p{color:#b0bed1}.section-heading h2 span{color:#b9cbe3;background:#223753}
 .orbit-ring{border-color:#35537c}.ring-three{border-color:#283e5b}.peer-icon{color:#8bb8ff;background:#223753}.text-button{color:#9dc3ff}
 .sidebar-note strong{color:#f4f7fc}dialog p,.fine-print{color:#b0bed1}.device-self{color:#f4f7fc}
}
/* Release polish: softer depth, clearer focus, and a calm help surface. */
:root{--muted:#63728a}.intro p,.share-card>p,#empty-peers p,.section-subtitle{color:var(--muted)}
.share-card,.devices-card{border-radius:22px;box-shadow:0 5px 24px #17233804}
.button{border-radius:11px;font-weight:650;transition:transform .15s ease,box-shadow .15s ease}
.button:hover{transform:translateY(-1px)}.button:active{transform:translateY(0)}
.button.primary{box-shadow:0 4px 12px #2864ed24}.peer{border-radius:10px}.peer:hover{background:color-mix(in srgb,var(--blue) 7%,transparent)}
.help-shell{max-width:1000px;padding:0 30px;margin:auto}.help-header{display:flex;justify-content:space-between;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.help-intro{padding:64px 0 42px}.help-intro h1{font-size:clamp(38px,6vw,60px);line-height:1.08;margin:20px 0}.help-intro p{font-size:16px;line-height:1.8;color:var(--muted);max-width:570px}
.help-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.help-steps article{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px}.step-number{font-size:12px;font-weight:750;color:var(--blue);letter-spacing:2px}.help-steps h2{font-size:19px;letter-spacing:-.5px;margin-top:25px}.help-steps p,.help-faq p{color:var(--muted);font-size:14px;line-height:1.8}
.help-faq{margin:60px 0}.help-faq>h2{font-size:28px;letter-spacing:-1px}.help-faq details{border-bottom:1px solid var(--line);padding:22px 0}.help-faq summary{cursor:pointer;font-size:16px;font-weight:650}.help-faq p{max-width:760px;margin-bottom:0}
@media(max-width:650px){.help-shell{padding:0 22px}.help-header .button{font-size:11px}.help-intro{padding:38px 0 24px}.help-steps{grid-template-columns:1fr}.help-steps article{padding:22px}.help-steps h2{margin-top:14px}.help-faq{margin:38px 0}}
@media(prefers-color-scheme:dark){:root{--muted:#b0bed1}.help-steps .step-number{color:#78acff}}

/* Selected items clearly lead to the recipient action. */
.next-device{margin:18px auto 0;display:flex;justify-content:center}
.devices-card{transition:border-color .2s,box-shadow .2s;scroll-margin:24px}
.devices-card.ready-to-send{border:2px solid var(--blue);box-shadow:0 0 0 5px color-mix(in srgb,var(--blue) 12%,transparent),0 12px 32px #2864ed14}
.ready-to-send .section-subtitle{background:color-mix(in srgb,var(--blue) 10%,var(--card));color:var(--blue);font-size:13px;font-weight:700;line-height:1.6;padding:12px;border-radius:12px}
.peer.send-ready{padding:14px 10px;background:color-mix(in srgb,var(--blue) 6%,var(--card));margin:10px 0;border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line))}
.peer>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.peer.send-ready .arrow{background:#2864ed;color:#fff;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:750;white-space:nowrap}
@media(prefers-color-scheme:dark){.ready-to-send .section-subtitle{color:#9dc3ff}}

.paired-plus{padding:14px 18px;background:color-mix(in srgb,var(--blue) 9%,var(--card));border:1px solid var(--line);border-radius:14px;font-size:12px;line-height:1.6;color:var(--muted)}
#web-ad-slot{margin:24px 0;min-height:90px;text-align:center;border:1px solid var(--line);border-radius:14px;padding:12px;font-size:9px;letter-spacing:1.5px;color:var(--muted)}

#selection-panel{margin:18px auto 0;max-width:420px}#selected-files{max-height:180px;overflow:auto;text-align:left}.selected-file{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line,#dbe3ee);padding:4px 0}.selected-file span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.selected-file button{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:inherit;font-size:24px;cursor:pointer}.selected-file button:hover{background:var(--soft,#eaf1fc)}#clear-selection{margin-top:10px}
