:root { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing:border-box; }
body { --bg:#050a15; --surface:#0c1424; --surface-2:#111d32; --line:#273249; --text:#f7fbff; --muted:#9aa9c2; --input:#091222; --shadow:0 30px 100px rgba(0,0,0,.27); --accent:#08cdeb; --accent2:#2374ee; min-height:100vh; margin:0; background:var(--bg); color:var(--text); overflow-x:hidden; transition:background .25s,color .25s; }
body[data-theme="light"] { --bg:#f4f8fc; --surface:#fff; --surface-2:#f1f6fb; --line:#dbe4ef; --text:#14233b; --muted:#65758d; --input:#f7faff; --shadow:0 24px 75px rgba(36,65,115,.1); }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.45; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.drop-zone:focus-visible { outline:3px solid #23c9f0; outline-offset:3px; }
a { color:inherit; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.ambient { position:fixed; pointer-events:none; z-index:-1; filter:blur(90px); opacity:.21; border-radius:50%; }
.ambient-one { width:600px; height:440px; background:#0174f9; top:60px; left:-240px; }
.ambient-two { width:520px; height:490px; background:#00b7d4; top:160px; right:-260px; opacity:.1; }
body[data-theme="light"] .ambient { opacity:.12; }
.topbar { height:84px; width:min(1180px,calc(100% - 44px)); margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { text-decoration:none; display:flex; align-items:center; gap:11px; letter-spacing:.095em; font-size:17px; font-weight:700; }
.brand strong { color:var(--accent); }
.brand-mark { width:42px; height:42px; background:#02040a url('/nilitre-logo.png') center 43% / 142px auto no-repeat; display:block; border-radius:12px; box-shadow:0 8px 25px rgba(0,161,231,.2); }
.top-actions { display:flex; align-items:center; gap:10px; }
.nav-action,.pill,.icon-button { border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:12px; min-height:40px; padding:0 15px; }
.nav-action { font-size:13px; font-weight:650; }
.mini-icon { color:var(--accent); font-size:19px; vertical-align:middle; padding-right:5px; }
.pill { font-size:13px; font-weight:700; }
.icon-button { width:40px; padding:0; font-size:23px; }
.hero { padding:72px 22px 52px; text-align:center; max-width:840px; margin:0 auto; }
.brand-art { width:240px; height:135px; margin:-46px auto 8px; border-radius:22px; overflow:hidden; background:#02040a; box-shadow:0 10px 34px rgba(0,125,213,.08); }
.brand-art img { display:block; width:100%; height:100%; object-fit:contain; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:9px 15px; color:var(--muted); font-size:12px; font-weight:650; letter-spacing:.02em; }
.live-dot { background:#09d6ba; height:7px; width:7px; border-radius:50%; box-shadow:0 0 0 4px rgba(9,214,186,.12); }
.hero h1 { font-size:clamp(39px,5.8vw,65px); letter-spacing:-.055em; line-height:1.12; margin:24px 0 20px; font-weight:800; }
.gradient-word { background:linear-gradient(100deg,#177ef7,#0ccee9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-description { color:var(--muted); font-size:16px; line-height:1.75; max-width:550px; margin:0 auto 36px; }
.mode-selector { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; text-align:left; }
.mode-button { display:flex; gap:14px; align-items:center; padding:19px 20px; background:var(--surface); border:1px solid var(--line); border-radius:16px; color:var(--text); text-align:left; transition:background .2s,border-color .2s,transform .2s; }
.mode-button:hover { transform:translateY(-2px); }
.mode-button.active { border-color:#078de4; box-shadow:0 0 0 1px rgba(6,155,238,.35),0 12px 35px rgba(0,113,240,.07); background:linear-gradient(135deg,var(--surface),rgba(5,133,224,.13)); }
.mode-icon { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; border-radius:13px; background:var(--surface-2); color:var(--accent); font-size:26px; }
.mode-button strong,.mode-button small { display:block; }
.mode-button strong { font-size:15px; letter-spacing:-.01em; margin-bottom:5px; }
.mode-button small { font-size:12px; color:var(--muted); }
.workspace { border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:23px; text-align:left; box-shadow:var(--shadow); }
.transfer-panel { animation:appear .22s ease-out; }
@keyframes appear { from { opacity:.4; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
.drop-zone { display:flex; align-items:center; flex-direction:column; justify-content:center; min-height:278px; border:1.5px dashed #3a526e; border-radius:15px; background:linear-gradient(145deg,rgba(0,131,238,.045),rgba(4,213,234,.03)); padding:26px; cursor:pointer; text-align:center; transition:background .2s,border-color .2s; }
.drop-zone:hover,.drop-zone.drag-over { border-color:var(--accent); background:rgba(0,180,245,.08); }
.drop-icon,.progress-icon,.receive-icon { width:60px; height:60px; border:1px solid rgba(6,180,238,.2); border-radius:17px; display:grid; place-items:center; color:var(--accent); background:rgba(3,180,231,.09); font-size:32px; margin-bottom:15px; }
.drop-zone h2 { margin:0; font-size:19px; letter-spacing:-.025em; }
.drop-zone p { margin:8px 0 20px; color:var(--muted); font-size:13px; line-height:1.6; }
.choose-button { border:1px solid #2783cc; background:rgba(0,132,231,.13); color:var(--accent); border-radius:10px; padding:11px 19px; font-size:13px; font-weight:700; }
.settings-row { display:flex; justify-content:space-between; gap:18px; margin:20px 0; }
.setting { flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; font-weight:600; color:var(--muted); }
select,.password-wrap input,.code-input { background:var(--input); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-height:43px; }
select { min-width:128px; }
.password-toggle { justify-content:flex-end; cursor:pointer; }
.password-toggle input { position:absolute; opacity:0; width:0; height:0; }
.switch { background:#3a4760; width:42px; height:24px; border-radius:20px; position:relative; transition:.2s; flex-shrink:0; }
.switch::after { content:""; width:18px; height:18px; background:white; border-radius:50%; position:absolute; top:3px; left:3px; transition:.2s; }
.password-toggle input:checked+.switch { background:linear-gradient(90deg,#1b84f2,#07c8df); }
.password-toggle input:checked+.switch::after { transform:translateX(18px); }
.password-wrap { display:flex; flex-direction:column; gap:9px; color:var(--muted); font-size:13px; font-weight:600; margin:0 0 17px; }
.password-wrap input { width:100%; }
.primary,.secondary { border:0; border-radius:12px; width:100%; min-height:51px; display:flex; align-items:center; justify-content:center; gap:14px; font-size:14px; font-weight:750; }
.primary { color:#fff; background:linear-gradient(100deg,#176ef0,#04bfe5); box-shadow:0 10px 25px rgba(0,130,236,.18); }
.primary:not(:disabled):hover { filter:brightness(1.1); }
.secondary { color:var(--text); background:var(--surface-2); border:1px solid var(--line); margin-top:14px; }
.selected-files { margin:15px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.selected-row { display:flex; gap:12px; align-items:center; padding:12px 14px; border-top:1px solid var(--line); }
.selected-row:first-child { border-top:0; }
.file-glyph { display:grid; place-items:center; height:37px; width:37px; border-radius:9px; background:rgba(0,140,241,.11); color:var(--accent); font-weight:800; font-size:12px; flex-shrink:0; }
.selected-row .file-details { flex:1; overflow:hidden; }
.selected-row strong { font-size:13px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.selected-row small { display:block; color:var(--muted); margin-top:4px; }
.info-strip { padding:13px 15px; border:1px solid var(--line); display:flex; gap:12px; background:var(--surface-2); color:var(--muted); font-size:12px; line-height:1.55; border-radius:10px; margin:18px 0; }
.info-strip>span:first-child { color:var(--accent); font-size:17px; }
.trust-row { display:flex; justify-content:center; gap:25px; flex-wrap:wrap; margin-top:22px; color:var(--muted); font-size:12px; }
.trust-row span>span { padding-left:5px; }
.trust-row>span::first-letter { color:var(--accent); }
#progress-panel { text-align:center; padding:30px 12px; }
#progress-panel .progress-icon { margin:0 auto 15px; }
#progress-panel h2 { font-size:23px; margin:0 0 9px; }
#progress-panel p { font-size:13px; margin:10px 0 23px; }
.progress-track { height:10px; overflow:hidden; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); }
.progress-fill { height:100%; width:0; background:linear-gradient(90deg,#2479fa,#00d4e8); border-radius:999px; transition:width .22s; }
.progress-stats { display:flex; justify-content:space-between; color:var(--muted); margin:12px 0; font-size:13px; }
.progress-stats strong { color:var(--text); }
.share-result { text-align:left; border:1px solid var(--line); border-radius:13px; padding:17px; margin-top:24px; background:var(--surface-2); }
.field-label { display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:9px; }
.copy-line { display:flex; gap:8px; margin-bottom:20px; }
.copy-line input { flex:1; min-width:0; background:var(--input); border:1px solid var(--line); padding:11px; border-radius:9px; color:var(--text); font-size:13px; }
.copy-line button { background:var(--accent2); color:#fff; border:0; border-radius:9px; padding:0 16px; font-size:12px; font-weight:700; }
.human-code { font-size:clamp(16px,3.2vw,24px); font-weight:800; letter-spacing:.07em; text-align:center; padding:13px; background:var(--input); border:1px dashed var(--line); border-radius:9px; font-variant-numeric:tabular-nums; }
.receive { max-width:680px; margin:70px auto 120px; padding:0 20px; }
.receive-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px; box-shadow:var(--shadow); }
.back-link { border:0; background:transparent; color:var(--muted); font-weight:700; cursor:pointer; padding:0 0 30px; }
.receive-icon { margin:0 0 18px; }
.receive-card h1 { font-size:29px; letter-spacing:-.04em; margin:0 0 7px; }
.receive-card>p { font-size:14px; line-height:1.6; }
.download-btn { margin-top:12px; }
#receiver-progress { margin-top:24px; }
footer { display:flex; justify-content:space-between; align-items:center; gap:18px; max-width:1180px; margin:auto; padding:27px 22px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
dialog { max-width:500px; width:calc(100% - 30px); color:var(--text); background:var(--surface); border:1px solid var(--line); padding:0; border-radius:19px; box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(0,5,20,.74); backdrop-filter:blur(5px); }
.dialog-inner { padding:26px; }
.dialog-top { display:flex; align-items:center; justify-content:space-between; }
.dialog-top h2 { margin:0; font-size:22px; }
.dialog-inner>p { font-size:13px; line-height:1.6; }
.code-input { width:100%; text-align:center; font-size:20px; letter-spacing:.07em; margin:14px 0; font-weight:750; }
.error { color:#ed7184; font-size:12px; }
#toast { position:fixed; z-index:10; bottom:25px; left:50%; transform:translateX(-50%) translateY(25px); background:var(--text); color:var(--bg); border-radius:10px; font-weight:700; padding:11px 20px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }
#toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width:630px) { .topbar { width:calc(100% - 30px); height:72px; } .brand { font-size:14px; } .brand-mark { width:36px; height:36px; background-size:122px auto; } .nav-action span[data-i18n] { display:none; } .nav-action { padding:0 10px; } .top-actions { gap:6px; } .hero { padding-top:54px; } .brand-art { margin-top:-24px; width:200px; height:112px; } .eyebrow { font-size:10px; } .hero-description { font-size:14px; } .mode-button { padding:14px 11px; gap:9px; } .mode-icon { width:38px; height:38px; font-size:20px; } .mode-button strong { font-size:12px; } .mode-button small { font-size:10px; line-height:1.4; } .workspace { padding:14px; } .drop-zone { min-height:253px; } .settings-row { flex-direction:column; } .password-toggle { justify-content:space-between; } footer { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }