/* ArcShare Send & Receive final visual polish
   Presentation only. No workflow or transfer behavior changes. */

/* Overall composition */
.hero{padding:30px 20px 0}
.hero::before{top:-155px;width:900px;height:500px;background:radial-gradient(ellipse at 50% 34%,rgba(63,111,216,.22) 0%,rgba(51,97,190,.08) 36%,transparent 69%)}
.h-title{font-size:clamp(36px,5vw,48px);line-height:1.02;letter-spacing:-1.65px;margin-bottom:10px;max-width:720px;text-wrap:balance}
.h-sub{font-size:14px;line-height:1.55;margin-bottom:22px;max-width:570px;color:var(--t2);text-wrap:balance}

.upload-shell{max-width:790px;gap:12px;padding:16px 16px 100px;border:1px solid var(--b1);border-radius:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--s1) 82%,transparent),color-mix(in srgb,var(--bg) 90%,transparent));box-shadow:0 26px 80px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.025);backdrop-filter:blur(18px)}
[data-theme="light"] .upload-shell{box-shadow:0 24px 70px rgba(35,44,70,.10),inset 0 1px 0 rgba(255,255,255,.75)}

/* Primary mode selector */
.sr-mode-switch{gap:5px;padding:5px;border-radius:15px;background:color-mix(in srgb,var(--s2) 88%,var(--bg));border-color:var(--b2);box-shadow:none}
.sr-mode-btn{height:48px;border-radius:11px;font-size:13px;letter-spacing:-.08px}
.sr-mode-btn.on{background:linear-gradient(180deg,color-mix(in srgb,var(--s1) 98%,white 2%),var(--s1));box-shadow:0 5px 16px rgba(0,0,0,.12),inset 0 0 0 1px var(--b2)}
.sr-mode-icon{width:28px;height:28px;border-radius:9px}
.sr-mode-btn.on .sr-mode-icon{box-shadow:inset 0 0 0 1px var(--acr)}

/* Always-visible quick lookup */
.sr-quick-lookup{padding:12px 13px;gap:16px;border-radius:14px;border-color:color-mix(in srgb,var(--acc2) 22%,var(--b2));background:linear-gradient(120deg,color-mix(in srgb,var(--acb) 36%,var(--s1)),var(--s1) 44%,color-mix(in srgb,var(--s1) 96%,var(--acc) 4%));box-shadow:0 8px 24px rgba(0,0,0,.055)}
.sr-quick-copy{min-width:130px;padding-left:4px}
.sr-quick-title{font-size:12px;font-weight:760;letter-spacing:-.1px}
.sr-quick-sub{font-size:9px;color:var(--t3)}
.sr-quick-row{gap:8px}
.sr-quick-input{height:44px;border-radius:11px;background:color-mix(in srgb,var(--s2) 84%,var(--s1));border-color:var(--b2);font-size:12px;padding:0 13px}
.sr-quick-input:focus{background:var(--s1);box-shadow:0 0 0 3px var(--acb),0 8px 22px rgba(0,0,0,.08)}
.sr-quick-paste,.sr-quick-go{height:44px;border-radius:11px;padding:0 14px}
.sr-quick-go{min-width:76px;font-family:var(--sans);font-size:11px;font-weight:700;box-shadow:0 8px 20px rgba(51,97,190,.19)}

/* Send panel hierarchy */
.sr-send-head,.sr-receive-head{padding:8px 5px 1px;align-items:center}
.sr-eyebrow{font-size:8px;letter-spacing:.11em;margin-bottom:3px}
.sr-panel-title{font-size:20px;font-weight:760;letter-spacing:-.5px}
.sr-panel-sub{font-size:11px;line-height:1.5;color:var(--t3)}
.sr-shortcut{border-radius:8px;padding:6px 9px;background:color-mix(in srgb,var(--s1) 86%,transparent);border-color:var(--b1)}

/* File / URL / Request tabs */
.tab-bar{margin-top:7px;padding:4px;gap:4px;border:1px solid var(--b1);border-radius:12px;background:color-mix(in srgb,var(--s2) 78%,var(--bg))}
.tab-btn{height:38px;border-radius:9px;font-size:12px;color:var(--t3);transition:background .14s ease,color .14s ease,box-shadow .14s ease,transform .1s ease}
.tab-btn:hover{color:var(--t0);background:color-mix(in srgb,var(--s1) 55%,transparent)}
.tab-btn:active{transform:scale(.985)}
.tab-btn.on{background:var(--s1);color:var(--t0);font-weight:650;box-shadow:0 3px 12px rgba(0,0,0,.11),inset 0 0 0 1px var(--b1)}

/* Drop area */
.dropzone{margin-top:8px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--acc2) 22%,var(--b3));background:linear-gradient(180deg,color-mix(in srgb,var(--s1) 98%,var(--acc) 2%),color-mix(in srgb,var(--s1) 96%,var(--bg) 4%));box-shadow:inset 0 1px 0 rgba(255,255,255,.02);transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}
.dropzone:hover,.dropzone.over{border-color:color-mix(in srgb,var(--acc2) 68%,var(--b3));background:linear-gradient(180deg,color-mix(in srgb,var(--s1) 93%,var(--acc) 7%),var(--s1));box-shadow:0 0 0 4px color-mix(in srgb,var(--acb) 82%,transparent)}
.dropzone:active{transform:scale(.997)}
.dz-body{padding:42px 24px 37px}
.dz-ring{width:64px;height:64px;border-radius:19px;margin-bottom:15px;background:linear-gradient(145deg,var(--s2),color-mix(in srgb,var(--s2) 78%,var(--acc) 22%));border-color:var(--b2);box-shadow:0 12px 32px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.04)}
.dropzone:hover .dz-ring{transform:translateY(-2px);border-color:var(--acr)}
.dz-ring svg{width:25px;height:25px}
.dz-title{font-size:20px;font-weight:730;letter-spacing:-.42px;margin-bottom:4px}
.dz-sub{font-size:10px;color:var(--t3)}
.cam-buttons{gap:7px;margin-top:10px}
.camera-btn{height:38px;border-radius:9px;background:color-mix(in srgb,var(--s2) 80%,var(--s1));border-color:var(--b1);font-size:11px}

/* Staging and options */
.staged-wrap{margin-top:9px;border-radius:14px;border-color:var(--b1);box-shadow:0 8px 24px rgba(0,0,0,.055)}
.staged-hdr{padding:10px 14px;background:color-mix(in srgb,var(--s2) 45%,var(--s1))}
.staged-item{padding:11px 14px;transition:background .12s ease}
.staged-item:hover{background:color-mix(in srgb,var(--s2) 36%,transparent)}
.staged-ext{width:38px;height:38px;border-radius:10px;background:linear-gradient(145deg,var(--s2),color-mix(in srgb,var(--s2) 85%,var(--acc) 15%));border-color:var(--b1)}
.staged-name{font-weight:570}

.sr-settings-toggle{min-height:52px;padding:10px 13px;border-radius:13px;border-color:var(--b1);background:color-mix(in srgb,var(--s1) 93%,var(--s2));box-shadow:0 5px 18px rgba(0,0,0,.045)}
.sr-settings-toggle:hover{border-color:var(--b2);background:color-mix(in srgb,var(--s1) 88%,var(--acc) 12%)}
.sr-settings-ico{width:32px;height:32px;border-radius:10px}
#shared-opts .opts{padding:15px;border-radius:14px;border-color:var(--b1);box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}

/* Primary action and progress */
.btn-primary{height:54px;border-radius:13px;font-weight:730;letter-spacing:-.08px;background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc2) 86%,var(--acc)));box-shadow:0 12px 28px rgba(51,97,190,.21),inset 0 1px 0 rgba(255,255,255,.13)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 34px rgba(51,97,190,.28),inset 0 1px 0 rgba(255,255,255,.16)}
.btn-primary:active:not(:disabled){transform:translateY(0) scale(.994)}
.prog{border-radius:14px;background:linear-gradient(180deg,var(--s1),color-mix(in srgb,var(--s1) 92%,var(--s2)));border-color:var(--b1);box-shadow:0 8px 28px rgba(0,0,0,.06)}

/* Finished share cards */
.fi-card{border-radius:17px;border-color:var(--b1);box-shadow:0 14px 38px rgba(0,0,0,.09);overflow:hidden}
.fi-card.sr-enhanced{border-color:color-mix(in srgb,var(--go) 22%,var(--b1))}
.sr-ready{padding:17px;background:linear-gradient(125deg,color-mix(in srgb,var(--gob) 72%,var(--s1)),var(--s1) 65%)}
.sr-ready-code{font-size:clamp(22px,4vw,29px);letter-spacing:.105em}
.sr-ready-btn{height:39px;border-radius:10px;background:color-mix(in srgb,var(--s2) 72%,var(--s1));border-color:var(--b1)}
.sr-ready-btn.primary{box-shadow:0 8px 20px rgba(51,97,190,.19)}

/* Receive panel */
.sr-receive-panel .recv-block{padding:19px;border-radius:16px;border-color:var(--b1);background:linear-gradient(180deg,var(--s1),color-mix(in srgb,var(--s1) 95%,var(--s2)));box-shadow:0 12px 34px rgba(0,0,0,.08)}
.recv-inp{height:58px;border-radius:12px;font-size:24px;background:color-mix(in srgb,var(--s2) 80%,var(--s1));border-color:var(--b2)}
.recv-inp:focus{background:var(--s1)}
.sr-paste-btn,.btn-lookup{height:58px;border-radius:12px}
.btn-lookup{font-weight:700;box-shadow:0 10px 24px rgba(51,97,190,.18)}
.res-card{border-radius:16px;border-color:var(--b1);box-shadow:0 15px 40px rgba(0,0,0,.10)}

/* Consistent focus and interaction */
.sr-mode-btn:focus-visible,.tab-btn:focus-visible,.camera-btn:focus-visible,.sr-settings-toggle:focus-visible,.sr-quick-paste:focus-visible,.sr-quick-go:focus-visible,.sr-ready-btn:focus-visible,.btn-primary:focus-visible,.btn-lookup:focus-visible,.sr-paste-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--acb),0 0 0 1px var(--acc2)}

@media(max-width:700px){
  .hero{padding:22px 14px 0}.h-title{font-size:34px;letter-spacing:-1.1px}.h-sub{font-size:13px;margin-bottom:17px}
  .upload-shell{margin:0 10px;width:calc(100% - 20px);padding:12px 10px 90px;border-radius:20px}
  .sr-quick-lookup{padding:11px;gap:7px}.sr-quick-copy{padding:0 2px}.sr-quick-row{gap:6px}.sr-quick-input{height:43px}.sr-quick-paste,.sr-quick-go{height:43px;padding:0 11px}
  .dz-body{padding:34px 16px 31px}.dz-ring{width:58px;height:58px;border-radius:17px}.dz-title{font-size:18px}
  .sr-send-head,.sr-receive-head{padding-left:3px;padding-right:3px}.sr-panel-title{font-size:19px}
}

@media(max-width:480px){
  .upload-shell{margin:0 7px;width:calc(100% - 14px);padding:10px 8px 82px;border-radius:18px}
  .sr-mode-switch{padding:4px}.sr-mode-btn{height:44px}
  .sr-quick-row{grid-template-columns:minmax(0,1fr) auto}.sr-quick-paste{display:none}.sr-quick-go{min-width:70px}
  .tab-btn{font-size:11px;padding-inline:5px}
  .sr-ready{padding:14px}.sr-ready-actions{gap:5px}.sr-ready-btn{padding-inline:9px;font-size:9px}
}

@media(prefers-reduced-motion:reduce){.dropzone,.dz-ring,.btn-primary,.tab-btn,.sr-quick-go{transition:none!important}}