:root { --bg:#09090b; --panel:#0c0c0f; --hover:rgba(24,24,27,.5); --border:#27272a; --border-strong:#3f3f46; --text:#fafafa; --muted:#a1a1aa; --subtle:#71717a; --danger:#f87171; --success:#34d399; }
* { box-sizing:border-box; margin:0; }
body { min-height:100vh; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; }
a { color:inherit; }
.site-nav { width:min(1120px,calc(100% - 40px)); height:64px; margin:auto; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); font-weight:600; text-decoration:none; letter-spacing:-.02em; }
.brand-mark { width:26px; height:26px; display:grid; place-items:center; overflow:hidden; }.brand-mark img { width:100%; height:100%; object-fit:contain; }
.nav-actions,.upload-controls,.profile-form,.transfer-meta { display:flex; align-items:center; gap:8px; }
.wrap { width:min(1120px,calc(100% - 40px)); margin:auto; padding:72px 0 96px; }
h1 { font-size:clamp(30px,4vw,48px); line-height:1.05; letter-spacing:-.045em; font-weight:600; }
h2 { font-size:16px; letter-spacing:-.015em; font-weight:600; }
strong { font-weight:550; }.muted { color:var(--muted); }.small { font-size:12px; }.hidden { display:none!important; }
.kicker { color:var(--subtle); font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; margin-bottom:12px; }
.new-badge { height:16px; width:auto; margin-left:6px; position:relative; top:-3px; }
.page-header { display:flex; justify-content:space-between; align-items:end; margin-bottom:40px; }.page-header h1 { margin-bottom:12px; }.page-header .muted { font-size:16px; }
.panel,.dropzone { border:1px solid var(--border); background:var(--panel); border-radius:8px; }
.profile-row { min-height:76px; padding:16px 18px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }
.profile-form input { width:280px; }
input,select { height:38px; padding:0 11px; color:var(--text); background:#09090b; border:1px solid var(--border); border-radius:6px; font:inherit; outline:none; }
input:focus,select:focus { border-color:#52525b; }.select-label { color:var(--muted); display:flex; align-items:center; gap:8px; font-size:12px; }
.btn { min-height:36px; padding:7px 13px; border:1px solid var(--border); border-radius:6px; color:var(--text); background:transparent; display:inline-flex; align-items:center; justify-content:center; gap:10px; font:inherit; font-weight:500; text-decoration:none; cursor:pointer; transition:background .12s,border-color .12s; }
.btn:hover { background:var(--hover); border-color:var(--border-strong); }.btn:disabled { opacity:.45; cursor:not-allowed; }.btn.primary { color:#09090b; background:#fafafa; border-color:#fafafa; }.btn.primary:hover { background:#d4d4d8; border-color:#d4d4d8; }.btn.ghost { border-color:transparent; color:var(--muted); }
#upload-btn:not(:disabled) { -webkit-box-shadow:0 0 28px 8px rgba(210,210,210,.58); -moz-box-shadow:0 0 28px 8px rgba(210,210,210,.58); box-shadow:0 0 28px 8px rgba(210,210,210,.58); animation:transfer-pulse 4s ease-in-out infinite; }
@keyframes transfer-pulse { 0%,100% { -webkit-box-shadow:0 0 28px 8px rgba(210,210,210,.44); -moz-box-shadow:0 0 28px 8px rgba(210,210,210,.44); box-shadow:0 0 28px 8px rgba(210,210,210,.44); } 50% { -webkit-box-shadow:0 0 28px 8px rgba(210,210,210,.76); -moz-box-shadow:0 0 28px 8px rgba(210,210,210,.76); box-shadow:0 0 28px 8px rgba(210,210,210,.76); } }
@media(prefers-reduced-motion:reduce) { #upload-btn:not(:disabled) { animation:none; -webkit-box-shadow:0 0 28px 8px rgba(210,210,210,.58); -moz-box-shadow:0 0 28px 8px rgba(210,210,210,.58); box-shadow:0 0 28px 8px rgba(210,210,210,.58); } }
.dropzone { min-height:210px; padding:48px; display:grid; place-items:center; text-align:center; border-style:dashed; cursor:pointer; transition:background .12s,border-color .12s; }.dropzone:hover,.dropzone.dragover { background:var(--hover); border-color:#52525b; }.dropzone strong { display:block; font-size:15px; margin-bottom:8px; }.text-button,.copy-link { padding:0; border:0; color:var(--text); background:none; font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.banner { margin-bottom:12px; padding:12px 14px; border:1px solid rgba(248,113,113,.35); border-radius:6px; color:#fca5a5; background:rgba(127,29,29,.12); }
#staging { margin-top:12px; padding:18px; }.section-head { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:20px; }.staged-files { margin-top:14px; border-top:1px solid var(--border); }.staged-row { min-height:62px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); }.file-type-icon { width:34px; height:28px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--border); border-radius:4px; color:var(--muted); font-size:9px; font-weight:700; }.staged-info { flex:1; min-width:0; }.staged-info>div:first-child { display:flex; justify-content:space-between; gap:16px; margin-bottom:10px; }.staged-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.staged-info span { color:var(--subtle); font-size:12px; }.thin-progress { height:2px; background:#27272a; overflow:hidden; }.thin-progress i { display:block; height:100%; background:#fafafa; transition:width .12s; }.icon-button { width:30px; height:30px; border:1px solid transparent; border-radius:5px; color:var(--muted); background:none; cursor:pointer; font-size:18px; }.icon-button:hover { color:var(--text); background:var(--hover); border-color:var(--border); }.icon-button.danger:hover { color:var(--danger); }.transfer-status { padding-top:12px; min-height:28px; }
.transfers-section { margin-top:72px; }.transfers-section>.section-head { margin-bottom:16px; }.table-wrap { overflow:auto; }.files { width:100%; border-collapse:collapse; }.files th,.files td { height:52px; padding:0 16px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }.files tr:last-child td { border-bottom:0; }.files tbody tr:hover { background:var(--hover); }.files th { color:var(--subtle); font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }.empty-state { padding:52px; border:1px solid var(--border); border-radius:8px; color:var(--subtle); text-align:center; }
.card { width:min(420px,100%); margin:8vh auto; padding:32px; border:1px solid var(--border); border-radius:8px; background:var(--panel); display:flex; flex-direction:column; gap:16px; }.auth-card h1 { font-size:28px; }.auth-card form { display:flex; flex-direction:column; gap:10px; }.auth-card input { width:100%; height:44px; text-align:center; font-family:ui-monospace,monospace; letter-spacing:.18em; }.full { width:100%; }.error { color:#fca5a5; }.token-display { padding:16px; border:1px dashed var(--border-strong); border-radius:6px; text-align:center; font-family:ui-monospace,monospace; letter-spacing:.15em; }
.recipient { max-width:920px; margin:auto; }.recipient-header { padding-bottom:24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }.sender { display:flex; align-items:center; gap:12px; }.sender .kicker { margin-bottom:3px; }.avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#fafafa; color:#09090b; font-weight:700; }.transfer-meta { color:var(--muted); font-size:12px; }.transfer-meta span+span { padding-left:12px; border-left:1px solid var(--border); }.recipient-intro { padding:80px 0 72px; max-width:680px; }.recipient-intro h1 { font-size:clamp(38px,6vw,64px); margin-bottom:18px; }.download-cta { min-height:48px; margin-top:32px; padding:0 18px; background:#fafafa; color:#09090b; border-color:#fafafa; }.download-cta:hover { background:#d4d4d8; }.download-cta kbd { padding-left:14px; border-left:1px solid #a1a1aa; font:11px ui-monospace,monospace; color:#52525b; }
.inspection { padding:28px 0 64px; border-top:1px solid var(--border); }.file-tree { margin-top:18px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }.inspect-row { border-bottom:1px solid var(--border); }.inspect-row:last-child { border:0; }.inspect-row summary { min-height:60px; padding:0 14px; display:grid; grid-template-columns:42px 1fr auto 90px; align-items:center; gap:12px; cursor:pointer; list-style:none; }.inspect-row summary:hover { background:var(--hover); }.inspect-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.format-badge { padding:3px 6px; border:1px solid var(--border); border-radius:4px; color:var(--muted); font-size:10px; text-transform:uppercase; }.byte-count { text-align:right; color:var(--subtle); font:11px ui-monospace,monospace; }.inspect-actions { padding:12px 16px 16px 68px; background:#0a0a0c; display:flex; gap:16px; align-items:center; }.inspect-actions code { flex:1; overflow:hidden; color:var(--subtle); font-size:10px; text-overflow:ellipsis; }.inspect-actions a { color:var(--muted); font-size:12px; }
.security-grid { padding-top:40px; border-top:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr; gap:72px; }.security-grid h2 { margin-bottom:18px; }.checksum { width:100%; padding:12px; display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:6px; color:var(--muted); background:transparent; cursor:pointer; }.checksum:hover { background:var(--hover); }.checksum code { flex:1; overflow:hidden; text-align:left; text-overflow:ellipsis; font-size:11px; }.checksum span { color:var(--text); font-size:12px; }.security-status { display:flex; align-items:flex-start; gap:10px; }.status-dot { width:8px; height:8px; margin-top:5px; border-radius:50%; background:var(--success); }.security-status p { margin-top:5px; }
@media(max-width:700px){.site-nav,.wrap{width:calc(100% - 24px)}.wrap{padding-top:44px}.profile-row,.recipient-header,.section-head{align-items:flex-start;flex-direction:column}.profile-form,.profile-form input{width:100%}.upload-controls{width:100%;justify-content:space-between}.dropzone{min-height:170px;padding:28px}.recipient-intro{padding:56px 0}.transfer-meta{margin-left:50px}.security-grid{grid-template-columns:1fr;gap:40px}.inspect-row summary{grid-template-columns:38px 1fr auto}.byte-count{display:none}.inspect-actions{padding-left:14px;flex-wrap:wrap}.inspect-actions code{width:100%;flex-basis:100%}}