/* Neenyo Tools source: audio converter/prototypes/conversion-lab/src/
   style.css, desktop.css and wallpapers.css. Adapted for a transfer window. */
:root {
  color-scheme: light;
  --text:#242426; --secondary:#747476; --muted:var(--secondary);
  --line:#00000012; --accent:#007aff; --glass:#f3f6fa;
  --content:#fafafaf5; --control:#ffffffb3; --control-line:#00000015;
  --field:#fff; --surface:var(--content); --bg:#2f91f3; --soft:#8080800c;
  --button:#007aff; --button-text:#fff; --error:#ad4427; --error-bg:#fff1e9;
}
:root[data-theme=dark] {
  color-scheme:dark; --text:#f0f0f1; --secondary:#a3a3a8; --line:#ffffff15;
  --glass:#29313b; --content:#252628f5; --control:#ffffff14;
  --control-line:#ffffff1c; --field:#38393b; --soft:#ffffff0a;
  --error:#ffab8b; --error-bg:#442e29;
}
html { min-height:100%; background:#2f91f3; }
body {
  min-height:100dvh; background-color:#2f91f3;
  background-image:url('/assets/tools/grain.svg'),linear-gradient(125deg,#268ff6,#2f91f3 54%,#67a8ef);
  background-position:top left,center; background-size:180px 180px,100% 100%;
  background-repeat:repeat,no-repeat; background-attachment:fixed;
  font:13px/1.45 -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
}
body::before {
  content:''; position:fixed; z-index:0; pointer-events:none; left:0; bottom:0;
  width:min(51.2vh,563px,100vw); aspect-ratio:736 / 1308; transform:translateY(12%);
  background:url('/assets/tools/stars.png') center bottom / contain no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 25%),linear-gradient(to right,#000 76%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 25%),linear-gradient(to right,#000 76%,transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
#app { position:relative; z-index:1; }
a { color:var(--accent); }
button,input,select,a { cursor:pointer; }
:focus-visible { outline:3px solid #007aff80; outline-offset:3px; }
.skip-link { border-radius:20px; padding:8px 14px; background:var(--field); color:var(--text); }
.recipient-layout { display:flex; justify-content:center; align-items:flex-start; min-height:100dvh; max-width:none; margin:0; padding:clamp(48px,12vh,130px) 12px 100px; }
.mac-window {
  position:relative; width:min(520px,calc(100vw - 24px)); max-height:calc(100dvh - 150px);
  overflow:auto; scrollbar-width:thin; background:var(--glass); border:1px solid #ffffff8c;
  border-radius:26px; outline:0;
  box-shadow:0 30px 70px -12px #06234b50,0 8px 22px #0000001a,0 0 0 .5px #00000024,inset 0 1px 0 #ffffffbd;
}
.mac-window.is-zoomed { width:min(720px,calc(100vw - 24px)); }
.window-titlebar {
  position:sticky; top:0; z-index:2; height:62px; display:flex; align-items:center;
  justify-content:center; padding:0 100px; background:var(--glass); user-select:none; touch-action:none;
}
.window-title { font-size:14px; font-weight:600; letter-spacing:-.2px; line-height:1; white-space:nowrap; }
.traffic-lights { position:absolute; left:22px; top:24px; display:flex; gap:8px; }
.window-control { width:13px; height:13px; border:.5px solid #00000020; border-radius:50%; padding:0; display:grid; place-items:center; }
.close-control { background:#ff6059; }
.minimize-control { background:#ffbd2e; }
.zoom-control { background:#28c840; }
.window-control svg { width:10px; height:10px; fill:none; stroke:#0000008c; stroke-width:1.1; opacity:0; }
.traffic-lights:hover svg,.window-control:focus-visible svg { opacity:1; }
.window-control:active { filter:brightness(.85); }
.help-button {
  position:absolute; right:20px; top:17px; width:28px; height:28px; padding:0;
  display:grid; place-items:center; border:.5px solid var(--control-line); border-radius:50%;
  background:var(--control); color:var(--secondary); box-shadow:0 1px 3px #00000008,inset 0 1px 0 #ffffffa8;
  font-size:15px; font-weight:500;
}
.delivery-info { padding:12px 28px 16px; background:var(--content); }
.delivery-heading { margin:0 0 8px; padding:0; font-size:16px; line-height:1.4; font-weight:500; letter-spacing:-.2px; white-space:normal; overflow-wrap:anywhere; }
.expiry-block { margin:0; display:flex; gap:8px; align-items:center; color:var(--secondary); }
.expiry-block>.icon { width:15px; height:15px; margin:0; }
.expiry-block>div { display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; }
.expiry-block strong { font-size:11px; font-weight:400; }
.expiry-block small { margin:0; font-size:10px; color:var(--secondary); }
.file-sheet { border:0; border-radius:0; min-height:0; background:var(--content); }
.sheet-top { margin:0 28px; padding:14px 0 8px; border-top:1px solid var(--line); border-bottom:0; align-items:baseline; }
.sheet-top h2 { font-size:13px; font-weight:500; letter-spacing:0; }
.files-list { margin:0; padding:0 28px 12px; }
.file-row { min-height:66px; padding:12px 0; }
.file-main { gap:14px; }
.file-stamp { width:32px; height:36px; border:0; border-radius:0; background:transparent; color:#6b879b; }
.file-stamp .icon { width:24px; height:28px; stroke-width:1.2; }
.file-preview { border-radius:50%; width:32px; height:32px; color:var(--accent); background:#007aff0c; }
.file-preview .icon { width:17px; height:17px; }
.file-preview:hover,.file-preview.is-playing { color:var(--accent); background:#007aff1c; }
.file-name { font-size:13px; font-weight:500; line-height:1.45; }
.file-meta { font-size:11px; color:var(--secondary); margin-top:4px; }
.file-download { width:28px; height:28px; border:0; border-radius:50%; background:#8080800c; color:var(--secondary); }
.file-download:hover { background:#80808025; }
.file-download .icon { width:15px; height:15px; }
.native-button,.primary-button,.download-section>.text-link {
  appearance:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:32px; padding:5px 17px; border:.5px solid var(--control-line); border-radius:18px;
  background:var(--control); color:var(--text); box-shadow:0 1px 3px #0000000c,inset 0 1px 0 #ffffffa8;
  font-size:13px; line-height:20px; font-weight:500; white-space:nowrap; text-decoration:none;
}
.native-button:hover,.download-section>.text-link:hover { background:var(--field); }
.primary-button { width:auto; min-width:104px; gap:8px; color:#fff; border-color:#0073ee; background:linear-gradient(#188aff,#007aff); box-shadow:inset 0 .5px 0 #ffffff5c,0 1px 3px #007aff29; }
.primary-button:hover:not(:disabled) { background:#1688ff; filter:none; }
.primary-button:active:not(:disabled) { background:#006cdf; }
.primary-button:disabled { color:#92959b; background:#80808016; border-color:transparent; box-shadow:none; }
.primary-button .icon,.download-section>.text-link .icon { display:none; }
.download-size { display:none; }
.download-section {
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  min-height:64px; padding:14px 28px 16px; border-top:1px solid var(--line); background:var(--glass);
}
.download-section>.text-link { margin-right:auto; }
.download-section>.primary-button { margin-left:auto; }
#download-feedback { order:4; width:100%; }
.download-status { font-size:11px; }
.download-fallback { font-size:12px; }
/* Inline playback: a hairline seek bar and time replace the type/size line of the
   playing row. Same height as that line, so the row never grows or jumps. */
.audio-progress { display:flex; align-items:center; gap:10px; height:17px; margin-top:4px; }
.audio-scrub { --progress:0%; flex:1; min-width:0; height:17px; margin:0; padding:0; background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; }
.audio-scrub::-webkit-slider-runnable-track { height:3px; border-radius:2px; background:linear-gradient(to right,var(--accent) var(--progress),#8080802e var(--progress)); }
.audio-scrub::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:11px; height:11px; margin-top:-4px; border:0; border-radius:50%; background:var(--accent); opacity:0; transition:opacity .15s; }
.audio-scrub::-moz-range-track { height:3px; border-radius:2px; background:#8080802e; }
.audio-scrub::-moz-range-progress { height:3px; border-radius:2px; background:var(--accent); }
.audio-scrub::-moz-range-thumb { width:11px; height:11px; border:0; border-radius:50%; background:var(--accent); opacity:0; transition:opacity .15s; }
.audio-scrub:hover::-webkit-slider-thumb,.audio-scrub:focus-visible::-webkit-slider-thumb,.audio-scrub:active::-webkit-slider-thumb { opacity:1; }
.audio-scrub:hover::-moz-range-thumb,.audio-scrub:focus-visible::-moz-range-thumb,.audio-scrub:active::-moz-range-thumb { opacity:1; }
.audio-scrub:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.audio-time { font-size:11px; color:var(--secondary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.audio-error { margin-top:4px; font-size:11px; line-height:1.55; color:var(--error); }
.download-error { padding:18px 28px; border:0; border-radius:0; font-size:12px; }
.download-error h3 { font-size:13px; }
.download-error p { font-size:12px; }
.state-sheet { padding:22px 28px 28px; min-height:230px; }
.state-sheet h2 { font-size:20px; letter-spacing:-.5px; max-width:none; }
.state-sheet p { font-size:12px; line-height:1.6; max-width:none; }
.state-sheet .text-link { margin-top:18px; font-size:12px; }
.password-body { padding:20px 28px 28px; }
.password-form { margin-top:18px; }
.password-form .field-label { font-size:12px; }
.password-field-wrap .input { min-height:34px; padding:7px 62px 7px 10px; font-size:13px; border-radius:7px; background:var(--field); border:.5px solid var(--control-line); }
.password-visibility { height:28px; top:3px; right:3px; border-radius:5px; }
.password-form .primary-button { width:100%; margin-top:15px; }
.sample-note { font-size:10px!important; }
.help-dialog {
  width:min(460px,calc(100% - 32px)); max-height:calc(100dvh - 50px); overflow:auto;
  border:1px solid #ffffff8c; border-radius:26px; background:var(--glass); color:var(--text);
  padding:24px; box-shadow:0 24px 70px #06234b50,0 0 0 .5px #00000024;
  font-size:12px;
}
.help-dialog::backdrop { background:#12263a1a; }
.help-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:18px; }
.help-heading h2 { font-size:15px; font-weight:600; letter-spacing:-.2px; }
.help-dialog>p { margin-top:14px; line-height:1.55; }
.help-dialog .text-link { font-size:12px; }
.restore-window { position:fixed; left:50%; top:45vh; transform:translateX(-50%); background:var(--glass); }
.preview-bar { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:3; width:max-content; max-width:calc(100vw - 24px); margin:0; padding:8px 14px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; border:1px solid #ffffff70; border-radius:20px; background:#c4ddf7; box-shadow:0 8px 28px #173d6230,inset 0 1px 0 #ffffffa3; color:#24405c; font-size:10px; }
/* Solid material colours avoid oversized blur backing layers in embedded
   browsers. Keep this shared by the recipient, dashboard and native dialogs. */
.mac-window,.window-titlebar,.help-dialog,.preview-bar { -webkit-backdrop-filter:none; backdrop-filter:none; }
.preview-bar>span { font-size:8px; padding:0; }
.preview-bar nav { gap:14px; }
.preview-bar a { min-height:24px; color:inherit; }
.loading-shell { position:relative; margin:auto; padding:150px 24px; color:white; font-size:13px; }
:root[data-theme=dark] .mac-window,:root[data-theme=dark] .help-dialog { border-color:#ffffff24; box-shadow:0 28px 70px #00000060,0 0 0 .5px #00000066,inset 0 1px 0 #ffffff12; }
:root[data-theme=dark] .native-button,:root[data-theme=dark] .help-button,:root[data-theme=dark] .download-section>.text-link { box-shadow:inset 0 .5px 0 #ffffff18,0 1px 3px #00000016; }
:root[data-theme=dark] .native-button:hover,:root[data-theme=dark] .download-section>.text-link:hover { background:#ffffff20; }
:root[data-theme=dark] .file-stamp { color:#96bdd7; }
:root[data-theme=dark] .file-preview { color:#68afff; background:#007aff24; }
:root[data-theme=dark] .help-dialog::backdrop { background:#00000030; }
:root[data-theme=dark] .preview-bar { color:#e3edf7; background:#293747; border-color:#ffffff2a; box-shadow:0 8px 28px #00000040,inset 0 .5px 0 #ffffff25; }
@media(max-width:599px) {
  .recipient-layout { padding:24px 12px 90px; }
  .mac-window { max-height:calc(100dvh - 114px); }
  .window-titlebar { padding-inline:85px; }
  .traffic-lights { left:18px; gap:7px; }
  .help-button { right:16px; }
  .window-title { font-size:13px; }
  .delivery-info,.password-body { padding-left:20px; padding-right:20px; }
  .sheet-top { margin-inline:20px; }
  .files-list { padding-inline:20px; }
  .download-section { padding-inline:20px; gap:8px; }
  .native-button,.primary-button,.download-section>.text-link { min-height:36px; padding-inline:14px; font-size:12px; }
  .password-field-wrap .input { font-size:16px; min-height:40px; }
  .password-visibility { height:34px; }
  .preview-bar { gap:2px; flex-direction:column; align-items:center; padding:5px 13px; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  :root { --glass:#f4f7fa; --content:#fafafa; --secondary:#555; --control:#fff; --control-line:#666; }
  :root[data-theme=dark] { --glass:#252b34; --content:#252628; --secondary:#ddd; --control:#38393b; --control-line:#aaa; }
  .preview-bar { background:var(--glass); color:var(--text); }
}