:root {
  --bg: #f2f2f7; --card: #fff; --text: #1d1d1f; --muted: #71717a; --line: rgba(60,60,67,.12);
  --accent: #242426; --accent-on: #fff; --soft: #ededf0; --dash: #b9b9c0; --red: #c9342c; --green: #24845a;
  color-scheme: light dark; font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #000; --card: #1c1c1e; --text: #f5f5f7; --muted: #a0a0a6; --line: rgba(255,255,255,.12); --accent: #f5f5f7; --accent-on: #1c1c1e; --soft: #303034; --dash: #64646b; --red: #ff8c86; --green: #70d6a6; }
}
:root[data-theme="dark"] { --bg: #000; --card: #1c1c1e; --text: #f5f5f7; --muted: #a0a0a6; --line: rgba(255,255,255,.12); --accent: #f5f5f7; --accent-on: #1c1c1e; --soft: #303034; --dash: #64646b; --red: #ff8c86; --green: #70d6a6; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
button, input, .pill-blue { font: inherit; }
button, .pill-blue, .send-button { cursor: pointer; }
button:focus-visible, .pill-blue:focus-within, input:focus-visible, .send-button:has(#pick:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
button:disabled { opacity: .55; cursor: wait; }
.app { max-width: 600px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
body.ready .app { animation: app-appear .4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes app-appear { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.app-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 2px 2px 40px; }
.brand { grid-column: 2; }
.brand h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.045em; margin: 0; }
.connection { justify-self: end; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border-radius: 999px; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.connection-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.connection.online .connection-dot { background: var(--green); }
.connection.offline { color: var(--red); }
.connection.offline .connection-dot { background: var(--red); }
.send-button { position: relative; width: 100%; min-height: 252px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 22px; border: 2px dashed var(--dash); border-radius: 34px; background: var(--card); color: var(--text); text-align: center; -webkit-tap-highlight-color: transparent; }
#pick { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border-radius: inherit; opacity: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.send-symbol { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 14px; border-radius: 21px; background: var(--soft); color: var(--text); }
.send-symbol svg { width: 29px; height: 29px; }
.send-title { font-size: 21px; font-weight: 650; letter-spacing: -.025em; line-height: 1.2; }
.send-description { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.send-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 17px; min-height: 37px; padding: 0 17px; border-radius: 999px; background: var(--accent); color: var(--accent-on); font-size: 13px; font-weight: 600; }
.pill-blue { display: block; border: 0; background: var(--accent); color: var(--accent-on); border-radius: 999px; padding: 14px 20px; font-weight: 650; text-align: center; transition: opacity .18s, transform .18s, background .18s; }
.pill-blue:active { transform: scale(.98); opacity: .82; }
.send.sending .send-button { opacity: .5; pointer-events: none; }
.transfer { margin: 20px 0 0; text-align: left; animation: reveal .25s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.transfer-heading { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; }
#transfer-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { height: 6px; background: var(--line); border-radius: 6px; overflow: hidden; margin-top: 9px; }
#bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.transfer-detail, .hint, .section-foot { color: var(--muted); font-size: 13px; }
.transfer-detail { margin: 7px 0 0; }
.note { margin: 14px 0 0; color: var(--green); font-size: 14px; animation: reveal .25s ease both; }
.note.bad, .login-note, .login-issue { padding: 12px 14px; border-radius: 16px; background: var(--card); background: color-mix(in srgb, var(--red) 9%, var(--card)); color: var(--red); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.login-note { margin: 8px 0 0; }
.login-issue p { margin: 0; }
.retry { border: 0; background: none; color: var(--accent); padding: 8px; font-weight: 600; }
.file-section { margin-top: 28px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 10px; }
.section-heading h2 { font-size: 17px; letter-spacing: -.015em; margin: 0; }
.list { list-style: none; padding: 0 16px; margin: 0; border-radius: 28px; background: var(--card); }
.list li { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list li.downloadable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.list li.empty { min-height: 70px; color: var(--muted); font-size: 14px; }
.file-icon { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--soft); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.file-pdf { background: #f8e9e7; color: #a54b42; }
.file-word { background: #e8f0fa; color: #406b9f; }
.file-sheet { background: #e7f3eb; color: #397d54; }
.file-slides { background: #faeee5; color: #ac663e; }
.file-image { background: #f1eaf7; color: #865ba0; }
.file-video { background: #e7f2f5; color: #497c8e; }
.file-audio { background: #f3eaf2; color: #9b5b89; }
.file-archive, .file-text { background: #f2eee7; color: #82705a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .file-pdf { background: #442b2b; color: #eda9a1; }
  :root:not([data-theme="light"]) .file-word { background: #293a50; color: #abc9ec; }
  :root:not([data-theme="light"]) .file-sheet { background: #293e31; color: #a4d6b2; }
  :root:not([data-theme="light"]) .file-slides { background: #47342b; color: #e7b899; }
  :root:not([data-theme="light"]) .file-image { background: #3b3046; color: #d3b9e1; }
  :root:not([data-theme="light"]) .file-video { background: #2a3d43; color: #a8cfd9; }
  :root:not([data-theme="light"]) .file-audio { background: #402e3c; color: #dfb4d2; }
  :root:not([data-theme="light"]) .file-archive, :root:not([data-theme="light"]) .file-text { background: #403a32; color: #d6c6ae; }
}
.row-text { flex: 1; min-width: 0; max-width: 70%; display: flex; flex-direction: column; gap: 3px; }
.row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.row-meta { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-meta span:first-child { color: var(--text); opacity: .7; font-weight: 500; }
.row-meta span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); opacity: .7; font-weight: 500; }
.row-meta span:last-child::before { content: '|'; margin-right: 8px; color: var(--muted); font-weight: 400; }
.row-error { margin-top: 5px; color: var(--red); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.row-actions { display: flex; flex-shrink: 0; align-items: center; margin-left: auto; }
.row-action { display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; border: 0; border-radius: 50%; background: transparent; color: var(--accent); }
.row-action svg { display: block; width: 25px; height: 25px; }
.row-action.download-action { background: transparent; }
.row-action.download-action svg { width: 25px; height: 25px; }
.row-action:disabled { opacity: 1; }
.spinner { animation: spin 1.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.row-quiet, .copy, .pill-quiet { background: none; border: 0; color: var(--accent); padding: 8px; min-height: 44px; font-size: 14px; }
.row-action, .row-quiet, .pill-quiet, .setup-toggle { transition: opacity .18s, transform .18s; }
.row-action:active, .row-quiet:active, .pill-quiet:active, .setup-toggle:active { opacity: .6; transform: scale(.97); }
.row-action { font-weight: 650; }
.row-quiet { color: var(--muted); }
.row-action.ready { color: var(--accent); background: transparent; }
.section-foot { margin: 8px 4px 0; }
.setup { margin: 32px 4px 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.setup-toggle { border: 0; background: none; padding: 8px 0; color: var(--accent); font-weight: 600; }
.setup p { overflow-wrap: anywhere; }
.code { font-size: 32px; font-weight: 650; letter-spacing: 3px; margin: 8px 0; }
.field-name { color: var(--muted); font-size: 13px; margin: 12px 0 2px; }
.field { display: flex; gap: 8px; align-items: center; margin: 0; word-break: break-all; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.field span { flex: 1; }
body.dragging .send-button { border-color: var(--accent); background: var(--soft); }
.login { max-width: 380px; margin: 0 auto; padding: max(18vh, env(safe-area-inset-top)) 24px 24px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.login.pending > * { visibility: hidden; }
.login:not(.pending) { animation: app-appear .35s ease both; }
.login-icon { width: 88px; height: 88px; border-radius: 20px; align-self: center; }
.login h1 { margin: 0; letter-spacing: -.035em; } .login-hint { color: var(--muted); white-space: pre-line; }
.login input { font-size: 16px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-align: center; width: 100%; margin-bottom: 8px; }
.login button.pill-blue { width: 100%; }
.login-or { color: var(--muted); font-size: 13px; }
.login-dots { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; pointer-events: none; }
.login-dots span { width: 10px; height: 10px; border-radius: 50%; background: #8e8e93; animation: login-dot 1.2s ease-in-out infinite; }
.login-dots span:nth-child(2) { animation-delay: .15s; } .login-dots span:nth-child(3) { animation-delay: .3s; }
.login:not(.pending) ~ .login-dots { display: none; }
@keyframes login-dot { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }
@media (max-width: 420px) {
  .app { padding-left: 16px; padding-right: 16px; }
  .list { padding: 0 12px; }
  .list li { gap: 12px; }
  .row-quiet { padding-left: 6px; padding-right: 6px; font-size: 13px; }
  .file-icon { flex-basis: 38px; height: 38px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #bar, .send-button, .pill-blue, .row-action, .row-quiet, .pill-quiet, .setup-toggle { transition: none; }
  body.ready .app, .login:not(.pending), .transfer, .note { animation: none; }
  .login-dots span { animation: none; opacity: .6; }
  .spinner { animation: none; opacity: .6; }
}