@import url('/workspace-ui.css');
/* ArcShare sharing workspace — "The Creative Workbench".
   Owns the Send & Receive home, upload composer, progress, share labels and the
   standard/encrypted receiver. Transfer engines and their hooks stay independent.
   Colour roles: azure = your action, acid = what ArcShare hands back (codes, links, done),
   ink = text and selection, putty = the room. Shapes: mat 22px, paper 6–10px, controls 14px.
   Grid and ruler marks are SVG patterns (no CSS gradients in this layer). */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--t0); font:14px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
button, input, textarea, select { font:inherit; }
button, a, summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
[hidden] { display:none; }
button:disabled { cursor:not-allowed; opacity:.5; }
button svg, a svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ── Page frame: words and the code slot on the left, the bench on the right ── */
.share-workspace {
  width:min(1360px,calc(100% - 80px)); margin:18px auto 0; padding-bottom:64px;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-rows:auto auto auto 1fr; column-gap:56px; align-items:start;
}
.upload-shell { display:contents; }
.hero { grid-column:1; grid-row:1; margin:0; padding-top:26px; }
.upload-shell > #sr-receive-panel { grid-column:1; grid-row:2; }
.upload-shell > .workspace-shortcuts { grid-column:1; grid-row:3; }
.upload-shell > #sr-send-panel { grid-column:2; grid-row:1 / span 4; }
.share-workspace > .transfer-activity { grid-column:1; grid-row:4; }
.sr-mode-switch { display:none; }
.sr-panel { min-width:0; }

.h-title { margin:0; }
.h-title .h-out { display:inline-block; padding:0 .08em 0 .04em; margin:0 -.08em 0 -.04em; background:var(--marker) no-repeat 0 88%/100% .38em; }
html[data-theme='dark'] .h-title .h-out { background-position:0 100%; background-size:100% .15em; }
.h-sub { margin:26px 0 0; max-width:30ch; color:var(--t1); font:500 19px/1.5 var(--sans); text-wrap:pretty; }

/* ── The bench: a cutting mat with a grid and ruler edges ─────────────────── */
#sr-send-panel {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; column-gap:16px;
  min-height:600px; padding:44px 40px 32px 44px; border-radius:var(--arc-radius-xl);
  background:var(--mat-grid) 0 0/32px 32px, var(--mat); box-shadow:inset 0 0 0 1px var(--paper-edge);
}
#sr-send-panel::before, #sr-send-panel::after { content:''; position:absolute; pointer-events:none; background:var(--mat-tick); }
#sr-send-panel::before { left:16px; right:18px; top:0; height:14px; -webkit-mask:var(--tick-x) 0 0/32px 14px repeat-x; mask:var(--tick-x) 0 0/32px 14px repeat-x; }
#sr-send-panel::after { top:16px; bottom:18px; left:0; width:14px; -webkit-mask:var(--tick-y) 0 0/14px 32px repeat-y; mask:var(--tick-y) 0 0/14px 32px repeat-y; }
#sr-send-panel:has(#dz.over) { box-shadow:inset 0 0 0 3px var(--acc); }
#sr-send-panel.has-shares, #sr-send-panel.is-uploading { min-height:0; }
#sr-send-panel > * { grid-column:1 / -1; min-width:0; }
#sr-file-actions[hidden] { display:none; }
#sr-send-panel > .sr-send-head { grid-column:1; }
#sr-send-panel > .tab-bar { grid-column:2; align-self:center; }
.sr-send-head, .sr-receive-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; }
.sr-panel-heading { display:flex; align-items:center; gap:10px; min-width:0; }
.sr-panel-icon { display:none; }
.sr-panel-title { margin:0; font:750 34px/1 var(--display); letter-spacing:-.04em; font-variation-settings:'opsz' 48; outline:0; }
.new-share[hidden] { display:none; }
#sr-settings-toggle[hidden] { display:none; }

#sr-send-panel.has-shares > :is(#tab-file, #tab-url, #tab-request, .tab-bar, #sr-settings-toggle, #shared-opts, #sr-file-actions) { display:none; }
#sr-send-panel.is-uploading > :is(#tab-file, .tab-bar, #sr-settings-toggle, #shared-opts, #sr-file-actions, .recv-block), #sr-send-panel.is-uploading .new-share { display:none; }
.sr-panel.has-shares .file-list { margin-top:20px; }

/* Source switch: Files / From URL / File request, as paper chips on the mat */
.tab-bar { display:inline-flex; align-items:center; gap:2px; margin:0; padding:4px; background:var(--paper); border-radius:var(--arc-radius-md); box-shadow:inset 0 0 0 1px var(--paper-edge); }
.tab-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:0 12px; border:0; border-radius:var(--arc-radius-sm); background:none; color:var(--t2); font:650 14px/1 var(--sans); white-space:nowrap; }
.tab-btn .arc-icon { width:15px; height:15px; }
.tab-btn:hover { color:var(--t0); }
.tab-btn.on { background:var(--t0); color:var(--bg); }

/* Drop target: three paper objects lying on the mat */
.dropzone { position:relative; margin-top:6px; border-radius:var(--arc-radius-lg); cursor:pointer; outline-offset:4px; }
.dz-body { display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.dz-ring { position:relative; display:block; width:100%; height:300px; margin:0 0 6px; pointer-events:none; }
.dz-sheet { position:absolute; border-radius:6px; background:var(--paper); box-shadow:var(--shadow-paper); }
.dz-tab { position:absolute; left:14px; bottom:14px; padding:4px 7px; border-radius:5px; color:#fff; font:700 11px/1 var(--mono); letter-spacing:.02em; }
.dz-pdf { width:168px; height:218px; left:7%; top:52px; transform:rotate(-8deg); }
.dz-pdf .dz-tab { background:var(--kind-pdf); }
.dz-pdf i { position:absolute; left:16px; right:22px; height:6px; border-radius:3px; background:var(--paper-edge); }
.dz-pdf i:nth-of-type(1) { top:34px; } .dz-pdf i:nth-of-type(2) { top:50px; right:46px; } .dz-pdf i:nth-of-type(3) { top:66px; } .dz-pdf i:nth-of-type(4) { top:82px; right:60px; }
.dz-fold { position:absolute; right:0; top:0; width:0; height:0; border-style:solid; border-width:0 30px 30px 0; border-color:transparent var(--mat) color-mix(in srgb,var(--t0) 12%,var(--paper)) transparent; border-radius:0 6px 0 4px; }
.dz-photo { width:210px; height:166px; left:35%; top:14px; padding:10px 10px 34px; transform:rotate(5deg); }
.dz-photo svg { display:block; width:100%; height:100%; border-radius:3px; }
.dz-photo .ph-sky { fill:#9EC3FF; } .dz-photo .ph-hill { fill:#2D6BFF; } .dz-photo .ph-ground { fill:#14204A; } .dz-photo .ph-sun { fill:var(--acid); }
.dz-cap { position:absolute; left:12px; bottom:10px; color:var(--t2); font:600 11px/1 var(--mono); }
.dz-tape { position:absolute; top:-10px; left:50%; width:74px; height:22px; margin-left:-37px; border-radius:2px; background:color-mix(in srgb,var(--acid) 86%,transparent); transform:rotate(-4deg); }
.dz-zip { width:150px; height:150px; left:66%; top:118px; border-radius:10px; background:var(--t0); transform:rotate(-3deg); }
html[data-theme='dark'] .dz-zip { background:#3E434D; }
.dz-zipper { position:absolute; left:50%; top:0; bottom:44px; width:12px; margin-left:-6px; border-left:5px dashed var(--bg); border-right:5px dashed var(--bg); }
.dz-pull { position:absolute; left:50%; top:58px; width:18px; height:26px; margin-left:-9px; border-radius:5px; background:var(--acid); }
.dz-zip .dz-tab { background:var(--bg); color:var(--t0); }
.dz-copy { max-width:44ch; }
.dz-title { font:750 26px/1.15 var(--display); letter-spacing:-.035em; color:var(--t0); text-wrap:balance; }
.dz-description { display:block; margin-top:6px; color:var(--t2); font-size:15px; line-height:1.45; }
.dz-sub { margin-top:18px; }
.dz-browse { display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 26px; border-radius:var(--arc-radius-md); background:var(--acc); color:#fff; font:700 18px var(--sans); letter-spacing:-.01em; box-shadow:0 2px 0 color-mix(in srgb,var(--acc) 55%,#000),0 14px 24px -14px var(--acc); }
.dz-browse::before { content:''; width:22px; height:22px; background:currentColor; -webkit-mask:url(/icons/upload.svg) center/contain no-repeat; mask:url(/icons/upload.svg) center/contain no-repeat; }
.dropzone:hover .dz-browse { background:var(--acc-hover); }
.dropzone:active .dz-browse { transform:translateY(2px); box-shadow:0 0 0 color-mix(in srgb,var(--acc) 55%,#000); }

/* Files on the bench: the drop target shrinks to a dashed add-more strip */
.dropzone.has-files { margin-top:18px; border:2px dashed color-mix(in srgb,var(--t0) 28%,transparent); border-radius:var(--arc-radius-md); }
.dropzone.has-files:hover { border-color:var(--acc); }
.dropzone.has-files .dz-body { flex-direction:row; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; }
.dropzone.has-files :is(.dz-ring, .dz-description) { display:none; }
.dropzone.has-files .dz-title { font:650 16px/1.3 var(--sans); letter-spacing:-.01em; }
.dropzone.has-files .dz-sub { margin:0; }
.dropzone.has-files .dz-browse { height:auto; padding:0; background:none; box-shadow:none; color:var(--acc2); font-size:15px; text-decoration:underline; text-underline-offset:3px; }
.dropzone.has-files .dz-browse::before { display:none; }

.file-sources { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:20px 0 0; color:var(--t2); font-size:14px; }
.file-sources-label { margin-inline-end:2px; font-weight:600; }
.cam-buttons { gap:8px; }
#fi, #fi-folder, #fi-camera, #fi-photos { display:none; }
.camera-btn { min-height:44px; display:inline-flex; gap:8px; align-items:center; padding:0 16px; border:0; border-radius:var(--arc-radius-sm); background:var(--paper); box-shadow:inset 0 0 0 1px var(--paper-edge); color:var(--t0); font:650 15px var(--sans); }
.camera-btn .arc-icon, .camera-btn svg { width:18px; height:18px; color:var(--acc2); }
.camera-btn:hover { box-shadow:inset 0 0 0 1.5px var(--acc); }

/* Staged files: paper cards pinned to the mat; long batches fold into a list */
.staged-wrap { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px; margin:22px 0 4px; }
.staged-hdr { grid-column:1 / -1; display:flex; gap:12px; align-items:baseline; color:var(--t2); font-size:14px; }
.staged-hdr-label { flex:1; color:var(--t0); font:750 20px/1.2 var(--display); letter-spacing:-.03em; }
.staged-count-badge, .sr-staged-total { font:500 12px var(--mono); color:var(--t2); }
.staged-item { position:relative; display:flex; flex-direction:column; gap:0; min-width:0; padding:12px 12px 14px; border-radius:8px; background:var(--paper); box-shadow:var(--shadow-paper); }
.staged-ext { flex:none; display:grid; place-items:center; height:104px; margin-bottom:12px; overflow:hidden; border-radius:5px; background:var(--bg); color:var(--t2); font:600 10px var(--mono); }
.staged-ext .arc-file-tile { width:44px; height:54px; }
.staged-ext img { display:block; width:100%; height:100%; object-fit:cover; }
.staged-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:650 15px/1.3 var(--sans); color:var(--t0); }
.staged-size, .fi-size { color:var(--t2); font:500 12px var(--mono); margin-top:4px; }
.btn-remove { position:absolute; top:6px; right:6px; z-index:1; width:32px; height:32px; display:grid; place-items:center; color:transparent; background:var(--paper); border:0; border-radius:9px; box-shadow:inset 0 0 0 1px var(--paper-edge); font-size:0; }
.btn-remove::before { content:''; width:14px; height:14px; background:var(--t1); -webkit-mask:url(/icons/x.svg) center/contain no-repeat; mask:url(/icons/x.svg) center/contain no-repeat; }
.btn-remove:hover { background:var(--reb); box-shadow:inset 0 0 0 1px var(--rer); }
.btn-remove:hover::before { background:var(--red); }
.staged-wrap:has(> .staged-item:nth-child(8)) { grid-template-columns:1fr; gap:0; padding:6px 16px; border-radius:var(--arc-radius-md); background:var(--paper); box-shadow:var(--shadow-paper); }
.staged-wrap:has(> .staged-item:nth-child(8)) .staged-hdr { padding:8px 0 10px; border-bottom:1px solid var(--paper-edge); }
.staged-wrap:has(> .staged-item:nth-child(8)) .staged-item { flex-direction:row; align-items:center; gap:14px; padding:8px 0; border-radius:0; background:none; box-shadow:none; border-bottom:1px solid var(--paper-edge); }
.staged-wrap:has(> .staged-item:nth-child(8)) .staged-item:last-child { border-bottom:0; }
.staged-wrap:has(> .staged-item:nth-child(8)) .staged-ext { width:36px; height:44px; margin:0; background:none; }
.staged-wrap:has(> .staged-item:nth-child(8)) .staged-ext .arc-file-tile { width:36px; height:44px; }
.staged-wrap:has(> .staged-item:nth-child(8)) .btn-remove { position:static; flex:none; box-shadow:none; background:none; }

/* Filetype tiles (SVG built by send-receive-v2.js; kind colour via --k). */
.arc-file-tile { display:block; width:36px; height:44px; overflow:visible; }
.arc-file-tile .ft-paper { fill:var(--paper); stroke:var(--b4); stroke-width:1.1; }
.arc-file-tile .ft-fold { fill:var(--s3); stroke:var(--b4); stroke-width:1.1; stroke-linejoin:round; }
.arc-file-tile .ft-glyph { fill:none; stroke:var(--k); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
.arc-file-tile .ft-glyph-fill { fill:var(--k); opacity:.9; }
.arc-file-tile .ft-band { fill:var(--k); }
.arc-file-tile .ft-label { fill:#fff; font:700 6.6px/1 var(--mono); letter-spacing:0; }
.arc-file-tile.is-folder .ft-folder { fill:color-mix(in srgb,var(--acc) 16%,var(--paper)); stroke:var(--acc2); stroke-width:1.4; stroke-linejoin:round; }

/* Primary actions: azure, with a pressed-key edge */
.btn-primary, .btn-fetch, .btn-dl, .btn-dl-big, .sr-ready-btn.primary {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 20px;
  border:0; border-radius:var(--arc-radius-md); background:var(--acc); color:#fff; font:700 15px var(--sans); text-decoration:none; white-space:nowrap;
  box-shadow:0 2px 0 color-mix(in srgb,var(--acc) 55%,#000),0 12px 22px -14px var(--acc);
}
.btn-primary:hover:not(:disabled), .btn-fetch:hover, .btn-dl:hover, .btn-dl-big:hover, .sr-ready-btn.primary:hover { background:var(--acc-hover); }
.btn-primary:active:not(:disabled), .btn-fetch:active, .btn-dl:active, .btn-dl-big:active, .sr-ready-btn.primary:active { transform:translateY(2px); box-shadow:0 0 0 color-mix(in srgb,var(--acc) 55%,#000); }
.btn-primary svg, .btn-dl-big svg { width:20px; height:20px; stroke-width:2.2; }
/* Ink actions (lookup, unlock) belong to the receiving side */
.btn-lookup, .btn-unlock { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border:0; border-radius:var(--arc-radius-md); background:var(--t0); color:var(--bg); font:700 16px var(--sans); white-space:nowrap; }
.btn-lookup:hover, .btn-unlock:hover { background:var(--t1); }
.btn-lookup:active, .btn-unlock:active { transform:translateY(2px); }
#upload-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:16px; }
#batch-name-row { flex-basis:100%; margin-bottom:4px; }
#btn-upload { flex:1; min-height:56px; font-size:18px; }
.btn-clear, .btn-del { min-height:44px; padding:0 16px; background:transparent; border:0; border-radius:var(--arc-radius-md); box-shadow:inset 0 0 0 2px var(--b3); color:var(--t1); font:650 14px var(--sans); }
.btn-clear:hover, .btn-del:hover { color:var(--red); background:var(--reb); box-shadow:inset 0 0 0 2px var(--rer); }
.btn-del { display:inline-flex; gap:6px; align-items:center; min-height:36px; padding:0 10px; box-shadow:none; color:var(--t2); }
.btn-del.is-armed { color:#fff; background:var(--red); }
.btn-del.is-armed:hover { color:#fff; background:var(--red); }
.btn-del svg { width:14px; height:14px; }

/* Share settings: a paper strip of chips; opens into a paper sheet */
.sr-settings-toggle { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; margin:20px 0 0; padding:12px 16px; border:0; border-radius:var(--arc-radius-md); background:var(--paper); box-shadow:inset 0 0 0 1px var(--paper-edge); color:var(--t2); text-align:left; }
.sr-settings-toggle > .arc-icon:first-child { color:var(--t2); }
.sr-settings-copy { display:flex; align-items:center; gap:10px; flex:1; min-width:0; flex-wrap:wrap; }
.sr-settings-title { font:700 15px var(--sans); color:var(--t0); white-space:nowrap; }
.sr-settings-summary { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.sr-chip { display:inline-flex; align-items:center; min-height:30px; padding:0 11px; border-radius:9px; background:var(--bg); color:var(--t1); font:650 13.5px var(--sans); white-space:nowrap; }
.sr-chip.is-strong { background:var(--azure-soft); color:var(--azure-soft-ink); }
.sr-settings-edit { color:var(--acc2); font:700 14px var(--sans); white-space:nowrap; }
.sr-settings-chevron { width:16px; height:16px; }
.sr-settings-toggle:hover { box-shadow:inset 0 0 0 1.5px var(--acc); }
.sr-settings-toggle.open { border-radius:var(--arc-radius-md) var(--arc-radius-md) 0 0; }
.sr-settings-toggle.open .sr-settings-chevron { transform:rotate(180deg); }
#shared-opts.sr-collapsed, #shared-opts.sr-request-hidden { display:none; }
#shared-opts.sr-open { padding:4px 18px 18px; border-radius:0 0 var(--arc-radius-md) var(--arc-radius-md); background:var(--paper); box-shadow:inset 0 0 0 1px var(--paper-edge); }
.opts { display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; margin:14px 0 0; }
.opts-sep { display:none; }
.opt-label { display:block; font:650 13px/1.4 var(--sans); color:var(--t1); margin-bottom:7px; }
.inp, .recv-inp, .pw-inp, .fi-email-inp { width:100%; min-width:0; height:44px; padding:0 12px; border:0; border-radius:var(--arc-radius-sm); background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--paper-edge); color:var(--t0); font:15px var(--sans); }
.inp:focus, .recv-inp:focus, .pw-inp:focus, .fi-email-inp:focus { box-shadow:inset 0 0 0 2px var(--acc); outline:0; }
.inp::placeholder, .recv-inp::placeholder, .pw-inp::placeholder, .fi-email-inp::placeholder { color:var(--t3); opacity:1; }
.inp-row, .pw-row { display:flex; gap:8px; }
textarea.inp { height:88px; padding:10px 12px; resize:vertical; line-height:1.5; }
select.inp { padding-right:8px; }
.seg-row { display:flex; gap:2px; padding:3px; background:var(--bg); border-radius:var(--arc-radius-sm); }
.seg-btn { flex:1; min-height:36px; border:0; border-radius:8px; background:transparent; color:var(--t2); font:600 13px var(--mono); }
.seg-btn:hover { color:var(--t0); }
.seg-btn.on { color:var(--bg); background:var(--t0); }
.btn-ghost, .btn-sm, .btn-copy, .sr-paste-btn, .fi-email-send, .sr-ready-btn, .prev-tool-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 14px; border:0; border-radius:var(--arc-radius-sm); background:transparent; box-shadow:inset 0 0 0 2px var(--b3); color:var(--t0); font:650 14px var(--sans); white-space:nowrap;
}
.btn-ghost:hover, .btn-sm:hover, .btn-copy:hover, .sr-paste-btn:hover, .fi-email-send:hover, .sr-ready-btn:hover:not(.primary) { box-shadow:inset 0 0 0 2px var(--t0); }
.btn-copy.ok, .btn-sm.ok { color:var(--go); box-shadow:inset 0 0 0 2px var(--gor); }
.url-hint, .req-hint, .sr-recv-help { color:var(--t2); font-size:14px; margin:10px 0 16px; }
#tab-url, #tab-request { margin-top:22px; padding:20px; border-radius:var(--arc-radius-md); background:var(--paper); box-shadow:var(--shadow-paper); }
#tab-url[hidden], #tab-request[hidden] { display:none; }
.req-form { display:flex; flex-direction:column; gap:14px; }
.req-form > .btn-fetch, #tab-url > .btn-fetch { align-self:flex-start; min-height:48px; }
.req-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.req-result { display:none; margin-top:4px; padding:14px 16px; border-radius:var(--arc-radius-md); background:var(--acid); color:var(--acid-ink); }
.req-result.on { display:block; }
.req-result-title { margin-bottom:8px; font:700 14px var(--sans); }
.req-url-row { display:flex; align-items:center; gap:12px; }
.req-url-val { flex:1; min-width:0; overflow-wrap:anywhere; font:600 13px var(--mono); }
.req-result .btn-sm { color:var(--acid-ink); box-shadow:inset 0 0 0 2px var(--acid-ink); }

/* ── Uploading: the files go under a ruler that measures real progress ──── */
.prog-stack { display:none; position:relative; height:150px; margin-top:20px; pointer-events:none; }
#sr-send-panel.is-uploading .prog-stack { display:block; }
.prog-stack .arc-file-tile { position:absolute; top:6px; width:104px; height:127px; filter:drop-shadow(0 16px 14px rgba(0,0,0,.22)); }
.prog-stack .arc-file-tile:nth-child(1) { left:2%; transform:rotate(-6deg); }
.prog-stack .arc-file-tile:nth-child(2) { left:18%; top:0; transform:rotate(4deg); }
.prog-stack .arc-file-tile:nth-child(3) { left:34%; top:12px; transform:rotate(-2deg); }
.prog-stack-more { position:absolute; left:52%; top:58px; padding:6px 10px; border-radius:8px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--paper-edge); font:600 13px var(--mono); }
.prog { display:none; position:relative; margin-top:24px; padding:38px 20px 16px; overflow:hidden; border-radius:12px; background:var(--paper); box-shadow:var(--shadow-paper); }
.prog.on { display:block; }
.prog::before { content:''; position:absolute; inset:0 0 auto 0; z-index:1; height:24px; background:var(--t0); opacity:.55; -webkit-mask:var(--tick-ruler) 0 0/50px 24px repeat-x; mask:var(--tick-ruler) 0 0/50px 24px repeat-x; pointer-events:none; }
.prog-track { position:absolute; inset:0 0 auto 0; z-index:0; margin:0; height:94px; border-radius:0; background:none; overflow:hidden; box-shadow:inset 0 -1px 0 var(--paper-edge); }
.prog-fill { height:100%; width:0; border-radius:0; background:color-mix(in srgb,var(--acc) 18%,transparent); border-right:3px solid var(--acc); }
.prog-head, .sr-overall-head { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.prog-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-bottom:6px; font:650 15px var(--sans); color:var(--t0); }
.prog-pct { font:800 46px/1 var(--display); letter-spacing:-.05em; color:var(--t0); font-variant-numeric:tabular-nums; }
.prog-status { position:relative; z-index:2; margin-top:8px; min-height:18px; font:500 12.5px/1.6 var(--mono); color:var(--t2); overflow-wrap:anywhere; }
.sr-overall { position:relative; z-index:2; display:none; margin-top:14px; padding-top:12px; border-top:1px solid var(--paper-edge); }
.sr-overall.on { display:block; }
.sr-overall-head { align-items:baseline; font-size:13px; color:var(--t2); }
.sr-overall-pct { font:600 13px var(--mono); font-variant-numeric:tabular-nums; }
.sr-overall-track { height:6px; margin-top:8px; overflow:hidden; border-radius:99px; background:var(--bg); }
.sr-overall-fill { height:100%; width:0; border-radius:inherit; background:var(--acc); }

/* ── Done: each share is labelled with label-maker tape carrying its code ── */
.file-list { display:grid; gap:20px; margin-top:20px; }
#sr-send-panel > .file-list:empty { margin-top:0; }
.fi-card { position:relative; border-radius:10px; background:var(--paper); box-shadow:var(--shadow-paper); }
.fi-card.dragging { opacity:.5; }
.fi-card.dgt { box-shadow:0 -3px 0 var(--acc); }
.fi-card.dgb { box-shadow:0 3px 0 var(--acc); }
.fi-card.sr-slip { display:flex; flex-direction:column; padding-top:20px; }
.sr-stub {
  position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:4px 18px; align-self:flex-start; max-width:calc(100% - 20px);
  margin:0 0 6px -8px; padding:12px 30px 12px 26px; background:var(--acid); color:var(--acid-ink); transform:rotate(-1.2deg); transform-origin:left;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%,12px 50%);
}
.sr-stub-label { font:700 11px/1.2 var(--mono); letter-spacing:.04em; text-transform:uppercase; opacity:.72; }
.sr-stub-code { font:800 28px/1.1 var(--mono); letter-spacing:.1em; overflow-wrap:anywhere; user-select:all; text-shadow:0 1px 0 rgba(255,255,255,.45); }
.sr-stub-kind { font:600 12.5px/1.3 var(--sans); }
.sr-slip-body { min-width:0; }
.fi-top { display:flex; align-items:center; gap:12px; padding:12px 18px 4px; }
.fi-drag { display:inline-block; width:16px; height:16px; flex:none; color:transparent; overflow:hidden; cursor:grab; }
.fi-drag::before { content:''; display:block; width:16px; height:16px; background:var(--t3); -webkit-mask:url(/icons/grip-vertical.svg) center/contain no-repeat; mask:url(/icons/grip-vertical.svg) center/contain no-repeat; }
.fi-ext, .res-ext { flex:none; display:grid; place-items:center; width:36px; height:44px; color:var(--t2); font:600 10px var(--mono); }
.fi-meta { flex:1; min-width:0; }
.fi-name { overflow-wrap:anywhere; font:700 17px/1.3 var(--sans); letter-spacing:-.01em; color:var(--t0); }
.fi-badges { display:flex; gap:4px; flex-wrap:wrap; }
.fi-badges:empty { display:none; }
.badge { padding:3px 8px; border-radius:6px; background:var(--bg); color:var(--t1); font:600 12px var(--sans); }
.badge.pw { color:var(--amb); background:var(--ambb); }
.sr-ready { padding:10px 18px 16px; }
.sr-ready-kicker { display:flex; align-items:center; gap:8px; color:var(--t0); font:700 14px var(--sans); margin-bottom:10px; }
.sr-ready-kicker::before { content:''; width:22px; height:22px; flex:none; border-radius:50%; background:var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315161A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--acid-ink) 30%,transparent); }
.sr-secure-help { font-size:13.5px; color:var(--t2); margin:10px 0 0; }
.sr-ready-main { display:flex; gap:8px; align-items:center; }
.sr-ready-link { flex:1; min-width:0; height:48px; padding:0 14px; border:0; border-radius:var(--arc-radius-sm); background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--paper-edge); color:var(--t0); font:500 13.5px var(--mono); }
.sr-ready-btn.primary { min-height:48px; padding:0 22px; }
.sr-ready-btn.primary.ok, .sr-ready-btn.primary.copied { background:var(--t0); color:var(--bg); box-shadow:none; }
.arc-share-secondary { margin:0 18px 12px; border-top:1px solid var(--paper-edge); }
.arc-share-secondary summary { color:var(--t1); font:650 14px var(--sans); cursor:pointer; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:8px; list-style:none; }
.arc-share-secondary summary::-webkit-details-marker { display:none; }
.arc-share-secondary summary:hover { color:var(--t0); }
.arc-share-secondary[open] summary .arc-icon { transform:rotate(180deg); }
.arc-share-secondary-panel { display:grid; gap:12px; padding:2px 0 8px; }
.share-grid { display:grid; gap:8px; padding:0 18px 16px; }
.share-row { display:flex; align-items:center; gap:8px; }
.share-lbl { min-width:36px; color:var(--t2); font:600 12.5px var(--sans); text-transform:capitalize; }
.share-val { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:13px var(--mono); }
.share-val.code { font-size:15px; font-weight:700; letter-spacing:.06em; }
.fi-card.sr-enhanced > .share-grid, .fi-card.sr-enhanced .sr-slip-body > .share-grid { display:none; }
.fi-email-row { display:flex; gap:8px; }
.fi-email-inp { flex:1; }
.sr-qr-wrap { display:flex; align-items:center; gap:14px; font-size:13.5px; color:var(--t2); }
.sr-qr-wrap b { display:block; color:var(--t0); font-weight:700; }
.sr-qr-wrap canvas { width:96px; height:96px; background:#fff; border:6px solid #fff; border-radius:8px; box-shadow:0 0 0 1px var(--paper-edge); }
.fi-footer { display:flex; flex-wrap:wrap; gap:6px 16px; padding:10px 18px; border-top:1px dashed var(--b3); color:var(--t2); font-size:12.5px; border-radius:0 0 10px 10px; }
.share-metadata { justify-content:space-between; }
.fi-expiry { font-variant-numeric:tabular-nums; }
.live-dot { display:none; }
.note-box { position:relative; margin:0 18px 14px; padding:10px 12px 10px 38px; border-radius:var(--arc-radius-sm); background:var(--bg); color:var(--t1); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.note-box::before { content:''; position:absolute; left:12px; top:12px; width:16px; height:16px; background:var(--t2); -webkit-mask:url(/icons/note.svg) center/contain no-repeat; mask:url(/icons/note.svg) center/contain no-repeat; }

/* ── Receive: a ruled-off slot for the code, set under the headline ─────── */
.sr-receive-panel { margin-top:44px; padding-top:26px; border-top:2px solid var(--t0); }
.sr-receive-panel .sr-receive-head { min-height:0; margin-bottom:4px; }
.sr-receive-panel .sr-panel-title { font:750 26px/1.1 var(--display); letter-spacing:-.03em; }
.recv-block { margin-top:0; }
.recv-label { display:block; margin:0 0 12px; color:var(--t2); font:500 15px/1.4 var(--sans); }
.recv-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.recv-inp { grid-column:1 / -1; }
.recv-row .btn-lookup { grid-column:1; grid-row:2; }
.recv-row .sr-paste-btn { grid-column:2; grid-row:2; min-height:48px; padding:0 18px; border-radius:var(--arc-radius-md); }
.recv-inp { height:64px; padding:0 18px; border-radius:var(--arc-radius-sm); background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--paper-edge),0 2px 0 var(--paper-edge); font:600 22px var(--mono); letter-spacing:.06em; }
.recv-inp::placeholder { font:500 16px var(--sans); letter-spacing:0; }
.recv-inp:focus { box-shadow:inset 0 0 0 2px var(--acc),0 2px 0 var(--paper-edge); }
.sr-recv-help { margin:12px 0 0; font-size:13.5px; }
/* Phones, Send tab: the same form sits on the bench as a paper slip */
#sr-send-panel > .recv-block { margin-top:20px; padding:16px; border-radius:var(--arc-radius-md); background:var(--paper); box-shadow:var(--shadow-paper); }
#sr-send-panel > .recv-block .recv-label { margin-bottom:10px; color:var(--t0); font:700 16px/1.3 var(--sans); }
#sr-send-panel > .recv-block .recv-inp { height:56px; background:var(--bg); font-size:19px; }
.pw-prompt, .pw-err, .lookup-result { display:none; }
.pw-prompt.on, .lookup-result.on { display:block; margin-top:16px; }
.pw-inp { height:48px; }
.lookup-pending { padding:8px 0 0; color:var(--t2); font-size:14px; }
.pw-err.on { display:block; color:var(--red); font-size:14px; margin:8px 0 0; }
.err-msg { color:var(--red); font-size:14px; padding:8px 0 0; }

/* Lookup result: the parcel, as a sheet of paper */
.res-card { overflow:hidden; border-radius:10px; background:var(--paper); color:var(--t0); box-shadow:var(--shadow-paper); }
.res-body { padding:16px; }
.res-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.res-top > div:last-child { min-width:0; }
.res-ext .arc-icon { width:28px; height:28px; color:var(--acc2); }
.res-name { font:700 15.5px/1.35 var(--sans); overflow-wrap:anywhere; }
.res-detail { color:var(--t2); font:500 12px var(--mono); margin-top:4px; }
.res-preview { max-height:220px; overflow:auto; display:flex; justify-content:center; background:var(--bg); }
.res-preview img { max-width:100%; max-height:220px; object-fit:contain; }
.res-preview iframe { border:0; width:100%; }
/* A responsive browser-native video player in both the code lookup and /d receiver. */
.res-preview:has(.arc-media-preview) { max-height:min(58vh,440px); overflow:hidden; }
.arc-media-preview { width:100%; }
.arc-media-preview video { display:block; width:100%; max-height:min(72vh,600px); height:auto; object-fit:contain; margin:0 auto; background:#0a0d12; }
.res-preview .arc-media-preview video { max-height:min(58vh,440px); }
.arc-media-error { padding:12px 16px; color:var(--t2); background:var(--paper); font:500 14px/1.5 var(--sans); }
.arc-media-error[hidden] { display:none; }

.res-body .btn-dl { width:100%; min-height:48px; white-space:normal; overflow-wrap:anywhere; padding:10px 16px; }
.res-card .sr-ready-main .arc-btn { flex:1; min-height:44px; }
.res-hash, .dl-hash { display:flex; align-items:center; gap:6px; margin-top:6px; color:var(--t3); font:11.5px var(--mono); min-width:0; }
.res-hash-label { flex:none; color:var(--t2); }
.res-hash-val { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.res-hash-copy { flex:none; padding:1px 7px; background:none; border:1px solid var(--b2); border-radius:var(--arc-radius-xs); color:var(--t2); font:11px var(--sans); }

/* Other ways to move files: paper tiles in the left column */
.workspace-shortcuts { margin-top:40px; }
.workspace-shortcuts h2 { margin:0 0 10px; color:var(--t2); font:650 14px/1.4 var(--sans); }
.workspace-shortcuts ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.workspace-shortcuts a { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:0 12px; min-height:64px; padding:10px 14px; border-radius:var(--arc-radius-md); background:var(--paper); box-shadow:inset 0 0 0 1px var(--paper-edge); color:var(--t2); text-decoration:none; }
.workspace-shortcuts a:hover { box-shadow:inset 0 0 0 1.5px var(--acc); }
.workspace-shortcuts .ws-glyph { grid-row:1 / 3; width:20px; height:20px; color:var(--acc2); }
.workspace-shortcuts a strong { grid-column:2; color:var(--t0); font:700 15px/1.3 var(--sans); }
.workspace-shortcuts a > span:not(.arc-icon) { grid-column:2; font-size:13px; line-height:1.35; }
.workspace-shortcuts .ws-chevron { display:none; }

/* Session status line */
.transfer-activity { display:flex; align-items:center; gap:10px; margin:28px 0 0; color:var(--t2); font:500 13.5px/1.5 var(--sans); }
.transfer-activity p { margin:0; }
.transfer-activity strong { color:var(--t0); font-weight:700; }
.transfer-activity-dot { width:9px; height:9px; flex:none; border-radius:50%; background:var(--b4); }
.share-workspace:has(#sr-send-panel.is-uploading) .transfer-activity-dot { background:var(--acc); }
.share-workspace:has(.file-list > *) .transfer-activity-dot { background:var(--acid); box-shadow:0 0 0 1.5px var(--t0); }

/* ── Standard recipient: the parcel laid out for whoever opened the link ── */
.dlpg { display:none; width:min(var(--receiver-max),calc(100% - var(--arc-page-gutter) * 2)); margin:48px auto 64px; }
.dlpg.on { display:block; }
.dlpg-head { display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.dlpg-icon { display:grid; place-items:center; flex:none; width:72px; height:84px; border-radius:8px; background:var(--paper); color:var(--acc2); box-shadow:var(--shadow-paper); transform:rotate(-4deg); }
.dlpg-icon > svg:not(.arc-file-tile) { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dlpg-icon .file-type { font:700 13px var(--mono); }
.dlpg-icon .arc-icon { width:28px; height:28px; }
.dlpg-icon.is-error { background:var(--reb); color:var(--red); box-shadow:inset 0 0 0 1px var(--rer); transform:none; }
.dlpg-icon .arc-file-tile { width:44px; height:54px; }
.dlpg-heading { min-width:0; }
.receiver-context { color:var(--t2); font-size:var(--text-sm); margin-bottom:24px; }
.dlpg-h1 { margin:0 0 6px; font:800 clamp(34px,5vw,56px)/1 var(--display); letter-spacing:-.04em; font-variation-settings:'opsz' 72; overflow-wrap:anywhere; text-wrap:balance; }
.dlpg-sub { margin:0; color:var(--t2); font:500 13px var(--mono); overflow-wrap:anywhere; }
.dlpg-card { width:100%; overflow:hidden; border-radius:var(--arc-radius-lg); background:var(--paper); box-shadow:var(--shadow-paper); }
.dlpg-body { padding:26px; }
.dlpg-name { margin-bottom:6px; font:700 20px/1.3 var(--sans); letter-spacing:-.015em; overflow-wrap:anywhere; }
.dlpg-detail, .dl-context { color:var(--t2); font-size:14px; line-height:1.6; }
.dlpg-detail, .dl-context, .share-security { display:flex; flex-wrap:wrap; gap:6px; }
.dlpg-detail { margin-top:12px; }
.arc-fact { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:8px; background:var(--bg); color:var(--t1); font:500 12.5px/1 var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fi-footer .arc-fact { min-height:24px; }
.dl-context { margin:4px 0 0; }
#dl-hash-box { margin-top:6px; color:var(--t3); font:11.5px var(--mono); }
.dlpg-body .note-box { margin:18px 0 0; }
.btn-dl-big { width:100%; min-height:60px; margin-top:22px; font-size:19px; }
.split-dl-wrap { margin-top:10px; }
.split-toggle { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:7px; background:transparent; border:0; border-radius:var(--arc-radius-md); box-shadow:inset 0 0 0 2px var(--b3); color:var(--t1); font:650 14px var(--sans); }
.split-toggle:hover { box-shadow:inset 0 0 0 2px var(--t0); color:var(--t0); }
.split-panel { margin-top:10px; padding:14px; border-radius:var(--arc-radius-md); background:var(--bg); }
.split-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:12px; }
.split-panel .inp { background:var(--paper); }
.split-go { width:100%; min-height:44px; background:var(--acc); color:#fff; border:0; border-radius:var(--arc-radius-md); font:700 15px var(--sans); }
.split-go:hover { background:var(--acc-hover); }
.split-progress { margin-top:12px; }
.split-track { height:6px; background:var(--s3); border-radius:99px; overflow:hidden; }
.split-bar { width:0; height:100%; background:var(--acc); border-radius:inherit; }
.split-status { margin-top:6px; color:var(--t2); font:12px var(--mono); }
#split-toggle { box-shadow:inset 0 0 0 2px var(--b3); }
.download-options { margin-top:16px; border-top:1px solid var(--paper-edge); }
.download-options[hidden] { display:none; }
.download-options > summary { display:flex; align-items:center; justify-content:space-between; min-height:var(--control-touch-h); color:var(--t1); font:650 14px var(--sans); cursor:pointer; list-style:none; }
.download-options > summary:hover { color:var(--t0); }
.download-options > summary::-webkit-details-marker { display:none; }
.download-options[open] > summary .arc-icon { transform:rotate(180deg); }
.download-options .plain-repair-panel { margin-bottom:12px; }
/* Two boxes deep at most: repair help inside a parcel or download options sits flat on a rule. */
:is(.res-card, .download-options) .plain-repair-panel { margin:14px 0 0; padding:14px 0 0; border:0; border-top:1px solid var(--paper-edge); border-radius:0; background:none; }
.dlpg .dlpg-prev { width:100%; min-height:0; margin-top:16px; overflow:hidden; border-radius:var(--arc-radius-lg); box-shadow:var(--shadow-paper); }
.dlpw-wrap { width:100%; max-width:480px; }
.dlpw-card { padding:22px; border-radius:var(--arc-radius-lg); background:var(--paper); box-shadow:var(--shadow-paper); }
.dlpw-card .recv-label { margin-bottom:4px; color:var(--t0); font:700 16px var(--sans); }
.dlpw-help { margin:0 0 14px; color:var(--t2); font-size:14px; }

/* Wide screens: the file itself sits beside the headline as a large paper object */
@media (min-width:961px) {
  .dlpg { width:min(1100px,calc(100% - 80px)); }
  .dlpg.on { position:relative; padding-right:360px; min-height:440px; }
  .dlpg-head { margin-bottom:30px; }
  .dlpg-icon { position:absolute; right:30px; top:6px; width:250px; height:310px; border-radius:10px; transform:rotate(4deg); box-shadow:var(--shadow-lift); }
  .dlpg-head::before { content:''; position:absolute; right:30px; top:6px; width:250px; height:310px; border-radius:10px; background:var(--paper); box-shadow:var(--shadow-paper); transform:rotate(-6deg) translate(-34px,18px); }
  .dlpg-head:has(.is-error)::before { display:none; }
  .dlpg-icon::after { content:''; position:absolute; top:-12px; left:50%; width:96px; height:26px; margin-left:-48px; border-radius:2px; background:color-mix(in srgb,var(--acid) 88%,transparent); transform:rotate(-5deg); }
  .dlpg-icon .arc-file-tile { width:132px; height:162px; }
  .dlpg-icon > svg:not(.arc-file-tile), .dlpg-icon .arc-icon { width:72px; height:72px; }
  .dlpg.on:has(.dlpg-icon.is-error) { padding-right:0; min-height:0; }
  .dlpg-icon.is-error { position:static; width:72px; height:84px; box-shadow:inset 0 0 0 1px var(--rer); transform:none; }
  .dlpg-icon.is-error .arc-icon { width:28px; height:28px; }
  .dlpg-icon.is-error::after { display:none; }
  .dlpg-h1 { font-size:clamp(44px,5vw,72px); }
}

/* Encrypted recipient (CSP blocks web fonts here; the metric-matched fallback keeps the layout). */
.e2ee-page { width:min(var(--receiver-max),calc(100% - 32px)); margin:40px auto 56px; }
.e2ee-hero { position:relative; display:block; min-height:72px; margin-bottom:24px; padding-left:92px; }
.e2ee-hero::before { content:''; position:absolute; left:0; top:0; width:72px; height:72px; border-radius:14px; background:var(--acid); transform:rotate(-4deg); box-shadow:var(--shadow-paper); }
.e2ee-hero::after { content:''; position:absolute; left:24px; top:24px; width:24px; height:24px; background:var(--acid-ink); -webkit-mask:url(/icons/lock.svg) center/contain no-repeat; mask:url(/icons/lock.svg) center/contain no-repeat; }
.e2ee-hero h1 { margin:0 0 6px; padding-top:2px; font:800 clamp(30px,4.4vw,48px)/1.02 var(--display); letter-spacing:-.04em; }
.e2ee-hero p { margin:0; color:var(--t2); font-size:14px; }
.e2ee-page .dlpg-card { display:none; }
.e2ee-page #dlbtn, .e2ee-page #split-dl-wrap { display:none; }
.e2ee-fatal { display:none; padding:16px; color:var(--red); background:var(--reb); border:1px solid var(--rer); border-radius:var(--arc-radius-md); }
.e2ee-footer { font-size:12.5px; color:var(--t2); text-align:center; padding:20px 16px; }

/* ── Overlays, guard and toast ───────────────────────────────────────── */
.sr-anywhere-drop { position:fixed; inset:var(--arc-nav-h) 0 0; z-index:var(--layer-menu); display:none; place-items:center; padding:24px; background:color-mix(in srgb,var(--bg) 84%,transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); pointer-events:none; }
.sr-anywhere-drop.show { display:grid; }
.sr-anywhere-card { width:min(480px,100%); padding:40px 28px; border-radius:var(--arc-radius-xl); background:var(--mat-grid) 0 0/32px 32px, var(--mat); box-shadow:inset 0 0 0 3px var(--acc),var(--shadow-lift); text-align:center; }
.sr-anywhere-title { margin-bottom:6px; font:800 30px/1.05 var(--display); letter-spacing:-.04em; }
.sr-anywhere-sub { font-size:15px; color:var(--t2); }
.sr-upload-guard { position:fixed; top:calc(var(--arc-nav-h) + 12px); left:50%; z-index:calc(var(--layer-nav) - 1); display:none; max-width:calc(100% - 32px); padding:9px 16px; border-radius:99px; background:var(--t0); color:var(--bg); font:600 13.5px var(--sans); text-align:center; transform:translateX(-50%); box-shadow:var(--shadow-paper); }
.sr-upload-guard.show { display:block; }
.toast { position:fixed; bottom:24px; left:50%; z-index:var(--layer-toast); max-width:calc(100% - 32px); padding:12px 18px; border-radius:var(--arc-radius-md); background:var(--t0); color:var(--bg); box-shadow:var(--shadow-lift); opacity:0; pointer-events:none; font:650 14.5px var(--sans); transform:translate(-50%,12px); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.e2ee-option, .tether-option { grid-column:1/-1; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:1180px) {
  .share-workspace { width:calc(100% - 48px); column-gap:36px; }
  #sr-send-panel { padding:40px 28px 28px 36px; }
  #sr-send-panel > .tab-bar { grid-column:1 / -1; justify-self:start; margin-top:14px; }
  .dz-pdf { width:140px; height:184px; left:3%; }
  .dz-photo { width:180px; height:144px; left:30%; }
  .dz-zip { width:124px; height:124px; left:64%; top:126px; }
  .dz-ring { height:280px; }
  .h-sub { font-size:17px; }
}
/* Phones and small tablets: one column, the bench becomes a tray you hold and
   Send / Receive live in a thumb dock at the bottom of the screen. */
@media (max-width:840px) {
  .share-workspace { display:block; width:calc(100% - 40px); margin-top:6px; padding-bottom:calc(112px + env(safe-area-inset-bottom)); }
  .hero { padding-top:10px; margin-bottom:22px; }
  .h-title.arc-workspace-title { font-size:clamp(44px,12.5vw,72px); }
  .h-sub { margin-top:12px; font-size:16.5px; max-width:34ch; }
  .share-workspace:has(#staged-list .staged-item) .hero, .share-workspace:has(#sr-send-panel:is(.is-uploading,.has-shares)) .hero { display:none; }
  html:not(.arc-ui-ready) .upload-shell > .workspace-shortcuts, html:not(.arc-ui-ready) .transfer-activity { visibility:hidden; }
  .sr-mode-switch {
    position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:calc(var(--layer-nav) - 2);
    display:grid; grid-template-columns:1fr 1fr; gap:6px; max-width:520px; margin:0 auto; padding:6px; border-radius:20px;
    background:color-mix(in srgb,var(--bg) 84%,transparent); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
    box-shadow:0 0 0 1px var(--paper-edge),0 18px 40px -16px rgba(0,0,0,.45);
  }
  .sr-mode-btn { display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; border:0; border-radius:14px; background:none; color:var(--t1); font:700 16px var(--sans); }
  .sr-mode-btn .arc-icon { width:19px; height:19px; }
  .sr-mode-btn.on[data-sr-mode='send'] { background:var(--acc); color:#fff; box-shadow:0 2px 0 color-mix(in srgb,var(--acc) 55%,#000); }
  .sr-mode-btn.on[data-sr-mode='receive'] { background:var(--t0); color:var(--bg); }
  .upload-shell { display:block; }
  .upload-shell:has(.sr-mode-switch) :is(#sr-send-panel, #sr-receive-panel):not(.on) { display:none; }
  #sr-send-panel:not(.has-shares,.is-uploading) .sr-send-head { display:none; }
  #sr-send-panel { min-height:0; padding:26px 16px 18px 24px; border-radius:20px; }
  #sr-send-panel > .tab-bar { grid-column:1 / -1; justify-self:stretch; display:flex; margin-top:0; }
  #sr-send-panel.has-shares > .sr-send-head, #sr-send-panel.is-uploading > .sr-send-head { margin-bottom:4px; }
  #sr-send-panel > .tab-bar .tab-btn { flex:1; }
  .sr-panel-title { font-size:28px; }
  .dz-ring { height:150px; margin-top:4px; }
  .dz-pdf { width:96px; height:124px; left:2%; top:22px; }
  .dz-pdf i { left:12px; right:16px; height:5px; }
  .dz-photo { width:128px; height:102px; left:29%; top:6px; padding:7px 7px 24px; }
  .dz-cap { bottom:7px; left:9px; font-size:9.5px; }
  .dz-zip { width:86px; height:86px; left:66%; top:58px; }
  .dz-zipper { bottom:30px; } .dz-pull { top:34px; width:14px; height:20px; margin-left:-7px; }
  .dz-tab { left:10px; bottom:10px; font-size:10px; }
  .dz-body { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 12px; }
  .dz-ring { grid-column:1 / -1; }
  .dz-title { font-size:21px; }
  .dz-description { display:none; }
  .dz-sub { margin:0; }
  .dz-browse { height:48px; padding:0 18px; font-size:16px; }
  .dz-browse::before { width:19px; height:19px; }
  /* One row of sources that scrolls sideways instead of wrapping */
  .file-sources { flex-wrap:nowrap; margin:14px -16px 0 0; padding-right:16px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
  .file-sources::-webkit-scrollbar { display:none; }
  .file-sources > *, .cam-buttons > * { flex:none; }
  .file-sources-label { display:none; }
  .sr-receive-panel { margin-top:0; padding-top:4px; border-top:0; }
  .workspace-shortcuts { margin-top:28px; }
  .staged-wrap { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .staged-ext { height:84px; }
  .prog-stack { height:110px; }
  .prog-stack .arc-file-tile { width:76px; height:93px; }
  .prog-pct { font-size:38px; }
  .toast { bottom:calc(92px + env(safe-area-inset-bottom)); }
}
@media (min-width:481px) and (max-width:840px) {
  .dz-ring { height:236px; }
  .dz-pdf { width:136px; height:176px; left:8%; top:34px; }
  .dz-photo { width:176px; height:140px; left:34%; top:8px; padding:9px 9px 30px; }
  .dz-zip { width:120px; height:120px; left:63%; top:96px; }
  .dz-cap { font-size:10.5px; }
}
@media (max-width:768px) {
  .dlpg { margin-top:28px; }
  .sr-upload-guard { top:auto; bottom:calc(92px + env(safe-area-inset-bottom)); border-radius:var(--arc-radius-md); }
  .opts { gap:16px; }
  .fi-top { flex-wrap:wrap; }
  .fi-badges { width:100%; order:1; }
}
@media (max-width:600px) {
  .sr-stub-code { font-size:24px; }
  .dlpg-head { align-items:flex-start; }
  .dlpg-icon { width:58px; height:68px; }
  .e2ee-hero { padding-left:76px; }
  .e2ee-hero::before { width:58px; height:58px; }
  .e2ee-hero::after { left:17px; top:17px; }
}
@media (max-width:480px) {
  .h-sub { display:none; }
  .hero { margin-bottom:14px; }
  #sr-send-panel { padding-top:22px; }
  .dz-ring { height:128px; }
  .dz-pdf { width:88px; height:114px; top:16px; }
  .dz-photo { width:120px; height:96px; top:2px; }
  .dz-zip { width:80px; height:80px; top:48px; }
  .opts { grid-template-columns:1fr; }
  .req-grid { grid-template-columns:1fr; }
  .workspace-shortcuts ul { grid-template-columns:1fr 1fr; }
  .workspace-shortcuts a { grid-template-columns:1fr; min-height:0; padding:12px; gap:6px; }
  .workspace-shortcuts .ws-glyph { grid-row:auto; }
  .workspace-shortcuts a strong, .workspace-shortcuts a > span:not(.arc-icon) { grid-column:1; }
  .sr-ready-main { flex-wrap:wrap; }
  .sr-ready-link { flex-basis:100%; }
  .sr-ready-btn.primary { width:100%; }
  .dlpg-body, .res-body { padding:18px; }
  .fi-email-row { flex-wrap:wrap; }
  .fi-email-inp { flex-basis:100%; }
  .fi-email-send { width:100%; }
  .sr-settings-copy { display:block; }
  .sr-settings-summary { margin-top:6px; }
  .fi-meta { min-width:120px; }
  .sr-stub { gap:2px 14px; padding:10px 24px 10px 22px; }
  #upload-actions .btn-clear { flex:1; }
}
@media (pointer:coarse) { .fi-drag { display:none; } }
@media (max-width:380px) {
  .h-title.arc-workspace-title { font-size:40px; }
  .h-sub { font-size:15.5px; }
  .new-share { min-height:40px; padding:0 10px; font-size:13px; }
  #sr-send-panel { padding:24px 12px 16px 20px; }
  #sr-send-panel > .tab-bar .tab-btn { padding:0 6px; gap:0; font-size:13px; }
  #sr-send-panel > .tab-bar .tab-btn .arc-icon { display:none; }
  .dz-ring { height:120px; }
  .dz-pdf { width:80px; height:104px; }
  .dz-photo { width:108px; height:88px; }
  .dz-zip { width:72px; height:72px; top:48px; }
  .dz-title { font-size:19px; }
  .dz-browse { padding:0 14px; }
  .sr-panel-title { font-size:24px; }
  .staged-wrap { gap:10px; }
  .sr-stub-code { font-size:21px; letter-spacing:.06em; }
  .prog-pct { font-size:32px; }
}
@media (pointer:coarse), (max-width:480px) {
  .tab-btn, .sr-mode-btn, .camera-btn, .btn-clear, .btn-del, .btn-copy, .btn-ghost, .btn-sm, .sr-ready-btn, .sr-paste-btn, .btn-primary, .btn-fetch, .btn-lookup, .btn-unlock, .fi-email-send, .prev-tool-btn, .arc-share-secondary summary, .split-toggle { min-height:var(--control-touch-h); }
  .btn-remove { width:40px; height:40px; top:4px; right:4px; }
  .inp, .pw-inp, .fi-email-inp, .sr-ready-link { height:48px; font-size:var(--text-md); }
  .tab-btn, .prev-tool-btn { min-width:44px; }
  .seg-btn { min-height:40px; }
}

/* ── Motion: paper reacts to the pointer, cards land with a spring, the tape
      prints. Everything here is skipped under reduced motion. ── */
@media (prefers-reduced-motion:no-preference) {
  .toast { transition:opacity .18s var(--ease), transform .26s var(--spring); }
  .dz-browse, .btn-primary, .btn-lookup, .btn-copy, .sr-ready-btn, .tab-btn, .seg-btn, .sr-mode-btn, .camera-btn, .sr-settings-toggle, .workspace-shortcuts a { transition:background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease); }
  .dz-sheet { transition:transform .6s var(--spring), box-shadow .4s var(--ease); }
  .dz-tape { transition:width .4s var(--spring), margin .4s var(--spring); }
  .dropzone:hover .dz-pdf, .dropzone:focus-visible .dz-pdf { transform:rotate(-12deg) translate(-10px,-8px); }
  .dropzone:hover .dz-photo, .dropzone:focus-visible .dz-photo { transform:rotate(8deg) translateY(-12px); }
  .dropzone:hover .dz-zip, .dropzone:focus-visible .dz-zip { transform:rotate(2deg) translate(10px,-6px); }
  .dropzone.over .dz-pdf { transform:rotate(-16deg) translate(-18px,-22px) scale(1.04); box-shadow:var(--shadow-lift); }
  .dropzone.over .dz-photo { transform:rotate(11deg) translateY(-30px) scale(1.04); box-shadow:var(--shadow-lift); }
  .dropzone.over .dz-zip { transform:rotate(6deg) translate(16px,-18px) scale(1.04); box-shadow:var(--shadow-lift); }
  .dropzone.over .dz-tape { width:96px; margin-left:-48px; }
  .h-title .h-out { animation:arc-mark .7s .3s var(--ease) both; }
  .staged-item { animation:arc-land .55s var(--spring) both; }
  .staged-item:nth-child(3) { animation-delay:.05s; } .staged-item:nth-child(4) { animation-delay:.1s; } .staged-item:nth-child(n+5) { animation-delay:.14s; }
  .staged-wrap:has(> .staged-item:nth-child(8)) .staged-item { animation:arc-fade .2s var(--ease) both; }
  .prog-stack .arc-file-tile { animation:arc-pack 1.6s var(--ease) infinite alternate; }
  .prog-stack .arc-file-tile:nth-child(2) { animation-delay:.2s; } .prog-stack .arc-file-tile:nth-child(3) { animation-delay:.4s; }
  .file-list > .fi-card:first-child { animation:arc-land .55s var(--spring) both; }
  .file-list > .fi-card:first-child .sr-stub { animation:arc-print .9s .25s steps(16) both; }
  .prog.on { animation:arc-fade .25s var(--ease) both; }
  .prog-fill, .sr-overall-fill { transition:width .3s var(--ease); }
  .lookup-result.on > .res-card { animation:arc-land .45s var(--spring) both; }
  .sr-panel.on { animation:arc-fade .2s var(--ease); }
  .sr-anywhere-drop.show .sr-anywhere-card { animation:arc-land .4s var(--spring) both; }
  .sr-settings-chevron, .arc-share-secondary summary .arc-icon, .download-options > summary .arc-icon { transition:transform .2s var(--ease); }
  #shared-opts.sr-open { animation:arc-fade .2s var(--ease); }
}
@keyframes arc-mark { from { background-size:0 .38em; } }
html[data-theme='dark'] .h-title .h-out { animation-name:arc-mark-thin; }
@keyframes arc-mark-thin { from { background-size:0 .15em; } }
@keyframes arc-land { from { opacity:0; transform:translateY(-22px) rotate(-5deg) scale(.96); } to { opacity:1; transform:none; } }
@keyframes arc-print { from { transform:rotate(-1.2deg) scaleX(.04); } to { transform:rotate(-1.2deg) scaleX(1); } }
@keyframes arc-pack { from { translate:0 0; } to { translate:0 -8px; } }
@keyframes arc-fade { from { opacity:0; } to { opacity:1; } }

/* Preview components retained from the original page. */
.dlpg-prev{display:none;align-items:stretch;justify-content:center;background:var(--bg);min-height:300px;max-height:600px;overflow:hidden;position:relative;flex-direction:column}
.dlpg-prev.show{display:flex}
.dlpg-prev img{max-width:100%;max-height:600px;object-fit:contain;width:auto;height:auto;display:block;margin:auto;background:#0a0d12;cursor:zoom-in}
.dlpg-prev img.zoomed{cursor:zoom-out;max-width:none;max-height:none}
.dlpg-prev iframe{width:100%;height:600px;border:none;background:#fff}
.dlpg-prev video, .dlpg-prev audio{max-width:100%;display:block;margin:auto}
.dlpg-prev audio{width:90%;margin:60px auto}
.prev-text-wrap{width:100%;max-height:600px;overflow:auto;background:#121317;color:#E6E4DE;font-family:var(--mono);font-size:12.5px;line-height:1.6;text-align:left}
.prev-text-wrap pre{margin:0;padding:14px 16px;white-space:pre;tab-size:2}
.prev-text-wrap code{font-family:var(--mono)}
.prev-truncated-notice{padding:10px 16px;background:var(--ambb);color:var(--amb);border-top:1px solid var(--ambr);font-size:12px;font-family:var(--mono);display:flex;align-items:center;gap:8px}
.prev-md-wrap{padding:24px 28px;background:var(--paper);color:var(--t0);overflow:auto;max-height:600px;text-align:left;line-height:1.7;font-size:var(--text-base);width:100%}
.prev-md-wrap h1, .prev-md-wrap h2, .prev-md-wrap h3 { margin: 18px 0 10px; font-family:var(--display); font-weight:750; color:var(--t0); letter-spacing:-.02em}
.prev-md-wrap h1{font-size:26px}
.prev-md-wrap h2{font-size:20px}
.prev-md-wrap h3{font-size:16px}
.prev-md-wrap p{margin-bottom:10px;color:var(--t1)}
.prev-md-wrap code{font-family:var(--mono);background:var(--bg);padding:2px 6px;border-radius:var(--arc-radius-xs);font-size:12.5px;color:var(--acc2)}
.prev-md-wrap pre{background:#121317;color:#E6E4DE;padding:12px 14px;border-radius:var(--arc-radius-md);overflow-x:auto;margin:10px 0;font-size:12.5px}
.prev-md-wrap pre code{background:transparent;padding:0;color:inherit}
.prev-md-wrap ul, .prev-md-wrap ol{margin:8px 0 8px 24px}
.prev-md-wrap li{margin-bottom:4px;color:var(--t1)}
.prev-md-wrap a{color:var(--acc2)}
.prev-md-wrap blockquote{border-left:3px solid var(--acid);padding:6px 14px;margin:10px 0;background:var(--bg);color:var(--t1)}
.prev-md-wrap strong{color:var(--t0);font-weight:700}
.prev-md-wrap hr{border:none;border-top:1px solid var(--paper-edge);margin:18px 0}

.prev-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--bg);border-bottom:1px solid var(--paper-edge);font-family:var(--mono);font-size:12px;color:var(--t2)}
.prev-toolbar-info{display:flex;align-items:center;gap:8px}
.prev-lang-pill{background:var(--paper);color:var(--t1);padding:2px 8px;border-radius:var(--arc-radius-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}
.prev-toolbar-actions{display:flex;gap:6px}
.prev-tool-btn{font-family:var(--sans);font-size:12.5px;padding:3px 10px}
.prev-tool-btn.copied{background:var(--t0);color:var(--bg);box-shadow:none}
.prev-no-preview{padding:60px 20px;text-align:center;color:var(--t2);font-family:var(--sans);font-size:13.5px}
.prev-no-preview-icon{display:flex;justify-content:center;margin-bottom:12px;color:var(--t3)}
.prev-no-preview-icon .arc-icon{width:32px;height:32px}