@font-face { font-family: Inter; src: url('./assets/fonts/InterVariable.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
:root { color-scheme: dark; font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; font-synthesis: none; color: #f2f6fc; background: #000; --blue: #a4c2ff; --green: #a9d7b8; --muted: #afbdcd; --viewport-height: 100svh; --ambient-blue: 25 46 73; --ambient-green: 23 57 45; }
* { box-sizing: border-box; }
html { touch-action: pan-x pan-y; height: 100%; overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body { margin: 0; height: 100%; overflow: hidden; min-width: 280px; background: #000; }
body { isolation: isolate; }
main { position: relative; width: min(100%, 390px); height: var(--viewport-height); margin: auto; padding: env(safe-area-inset-top, 0px) 24px max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; container-type: size; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
h1 { position: relative; margin: 0; font-size: 38px; font-weight: 600; line-height: 1.12; letter-spacing: -1.7px; outline: none; }
h1 span { display: block; }
.heading-accent { color: var(--blue); }
.page-heading { position: relative; flex-shrink: 0; padding-top: 24px; }
h2 { margin: 0 0 26px; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.8px; }
p { line-height: 1.5; }
a { color: var(--blue); text-underline-offset: 4px; }
button, .button { font: 600 16px/1.3 Inter, sans-serif; cursor: pointer; color: #234677; background: linear-gradient(135deg,#dceaff,#bacff1); border: 1px solid #e5efff; border-radius: 16px; min-height: 48px; padding: 12px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; -webkit-tap-highlight-color: transparent; transition: filter .15s, translate .15s; }
button:hover:not(:disabled) { filter: brightness(1.08); }
button:active:not(:disabled) { translate: 0 1px; }
button:disabled { opacity: .45; cursor: default; }
:is(button, a, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid #bdd8ff; outline-offset: 5px; }
:root[data-input="pointer"] :focus { outline: none; }
.secondary { background: #263a50; border-color: #49617d; color: #e0e9f5; }
.quiet { background: transparent; color: #e0e9f5; border: 0; box-shadow: none; }
.quiet .icon { width: 17px; height: 17px; }
#open-options { color: #92a5bf; min-width: 48px; }
#open-options .icon { width: 24px; height: 24px; }
.card { border: 1px solid #3c536e; border-radius: 24px; padding: 26px; background: linear-gradient(145deg,#20334d,#152330); margin-top: 32px; box-shadow: 0 12px 28px #060c1526; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
#error { border: 1px solid #836555; background: #3e302bb3; color: #ffe0cb; padding: 18px; border-radius: 18px; font-size: 14px; margin: 28px 0 16px; }
.option-note { line-height: 1.6; }
label { display: block; font-size: 14px; color: #d6e3f6; margin-bottom: 10px; }
.network-option { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.network-option input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--blue); }
body.dragging::after { content: ''; position: fixed; inset: 12px; z-index: 10; border: 2px dashed #a9d7b8; border-radius: 24px; background: #426f5330; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 359px) { main { padding-inline: 20px; } h1 { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 600px) {
  .page-heading { padding-top: 48px; }
}
/* With a fine pointer, spare height goes above the heading. */
@media (hover: hover) and (pointer: fine) {
  .page-heading { margin-top: auto; }
}
/* Respond to the visible viewport, including the on-screen keyboard. */
@container (max-height: 520px) {
  .page-heading { padding-top: 12px; }
  h1 { font-size: 28px; letter-spacing: -1px; }
  h1 span { display: inline; }
  .heading-accent::before { content: ' '; }
}

/* Home: queued files, the radar and its status pill. */
.dashed { width: 100%; min-height: 56px; background: transparent; border: 1px dashed #4a5d73; color: #dce8ff; }
.dashed .icon { width: 18px; height: 18px; stroke-width: 2.2; }
#queued-files { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.queued-chip { display: flex; align-items: center; max-width: 100%; height: 38px; padding-left: 14px; border: 1px solid #a4c2ff40; border-radius: 12px; background: #a4c2ff1f; color: #dce8ff; font-size: 14px; font-weight: 500; line-height: 18px; }
.queued-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queued-remove { width: 36px; min-height: 36px; padding: 0; color: var(--blue); }
.queued-remove .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.nearby-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px #a9d7b82e; }
.self-chip { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--muted); font: 500 15px/20px Inter, sans-serif; }
.self-chip strong { color: #f2f6fc; font-weight: 600; }
.self-avatar { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; }
#nearby-status { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; white-space: nowrap; border: 1px solid #3c536e; border-radius: 20px; background: #10151bd9; color: #e0e9f5; font-size: 14px; font-weight: 500; line-height: 18px; }
.nearby-dot.self { width: 8px; height: 8px; background: #f2f6fc; box-shadow: 0 0 0 4px #f2f6fc2e; }
/* The status pill, self dot and radar fade together. */
#nearby-status, .nearby-dot.self, #nearby-label, .radar-field { transition: opacity .9s ease, color .9s ease, border-color .9s ease; }
#search-again { min-height: 40px; padding: 0; font-size: 14px; font-weight: 500; }
/* The radar is decoration centered on the status pill and painted behind every control. */
.radar-field { position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; stroke: #233042; stroke-width: 1; mask-image: radial-gradient(closest-side, #000 88%, transparent); }
/* The disc brightens toward the rim. */
.radar-disc { fill: url(#radar-fill); stroke: none; }
/* Blue fading to mint. */
.radar-timer { stroke: url(#radar-timer-color); stroke-width: 1.5; opacity: .85; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
/* Phosphor trail: the beam's afterglow fades over the 80° behind it, and toward the center. Rotates as one element. */
/* Stopping a search freezes the sweep where it is and fades it; resuming fades it back in and continues from there. */
.radar-trail { position: absolute; z-index: -1; left: 50%; top: 50%; width: 500px; height: 500px; margin: -250px 0 0 -250px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from -26.87deg, transparent 0deg, #4a80ff0d 36deg, #4a80ff30 66deg, #4a80ff6b 80deg, transparent 80deg);
  mask-image: radial-gradient(closest-side, transparent 14%, #000 60%, #000 97%, transparent); }
.radar-trail, .radar-sweep { opacity: 0; transition: opacity .9s ease; animation: nearby-sweep 9s linear infinite paused; }
.searching :is(.radar-trail, .radar-sweep) { opacity: 1; animation-play-state: running; }
/* The sweep is its own small element rotating about its bottom-left corner, the radar center, so it stays on the compositor.
   The beam brightens toward its tip, where a small glow marks the point the wave leaves. */
.radar-sweep { position: absolute; z-index: -1; left: 50%; top: 50%; margin-top: -280px; pointer-events: none; transform-origin: 0 280px; }
.radar-beam-glow { stroke: #a4c2ff; stroke-opacity: .14; stroke-width: 5; stroke-linecap: round; }
.radar-tip-halo { fill: url(#radar-tip-glow); }
.radar-tip { fill: #eaf1ff; }
.radar-beam { stroke: url(#radar-beam-color); stroke-width: 1.2; stroke-linecap: round; }
@keyframes nearby-sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .searching :is(.radar-sweep, .radar-trail) { animation: none; } }