:root { color-scheme: dark; --bg:#090b10; --panel:#121722; --line:#293142; --text:#f4f7fb; --muted:#9ba8ba; --accent:#7c5cff; --danger:#ff647c; --ok:#45d39b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at top,#172039 0,#090b10 45%); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif; }
.shell { width:min(680px,calc(100% - 32px)); margin:0 auto; padding:56px 0; }
.brand { letter-spacing:.18em; font-size:.78rem; color:#b8adff; font-weight:800; }
h1 { margin:.5rem 0 1rem; font-size:clamp(2rem,8vw,3.4rem); }
.lead { color:var(--muted); line-height:1.65; }
.card { margin-top:28px; padding:24px; border:1px solid var(--line); border-radius:20px; background:rgba(18,23,34,.94); box-shadow:0 24px 80px rgba(0,0,0,.3); }
.grid { display:grid; gap:16px; }
label { display:grid; gap:7px; color:#dfe5ef; font-size:.92rem; }
.detected-device { margin:0; color:#dfe5ef; font-size:.92rem; }
.detected-device strong { font-weight:750; }
input { width:100%; padding:13px 14px; border:1px solid #364158; border-radius:11px; background:#0b1019; color:white; font:inherit; }
input:focus { outline:2px solid rgba(124,92,255,.45); border-color:var(--accent); }
button,.button { display:inline-flex; justify-content:center; border:0; border-radius:11px; padding:13px 18px; background:var(--accent); color:white; font-weight:750; cursor:pointer; text-decoration:none; }
button.danger { background:var(--danger); }
.presence { list-style:none; padding:0; margin:18px 0 8px; display:grid; gap:10px; }
.presence li { display:flex; align-items:center; gap:8px; padding:12px; border:1px solid var(--line); border-radius:11px; }
.presence .empty { color:var(--muted); }
.dot { width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 12px var(--ok); }
.presence-state { color:var(--muted); font-size:.78rem; }
.guest-button { background:#24304a; border:1px solid #53617d; }
.guest-tag { margin-left:auto; color:#cfc7ff; font-size:.72rem; font-style:normal; text-transform:uppercase; letter-spacing:.08em; }
.admin-name,.history-admin { color:#ff7792; text-shadow:0 0 7px rgba(255,100,124,.9),0 0 16px rgba(255,100,124,.45); }
.peer { width:100%; padding:0; background:transparent; justify-content:flex-start; align-items:center; gap:8px; text-align:left; }
.drop-zone { padding:28px 18px; border:2px dashed #46536c; border-radius:15px; text-align:center; cursor:pointer; color:var(--muted); }
.drop-zone input { margin-top:14px; }
dialog { width:min(480px,calc(100% - 32px)); border:1px solid var(--line); border-radius:18px; padding:24px; background:var(--panel); color:var(--text); }
dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(5px); }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.visually-hidden { position:fixed; width:1px; height:1px; opacity:0; pointer-events:none; }
.transfer-status:not(:empty) { margin-top:16px; padding:12px; border-radius:11px; background:rgba(124,92,255,.12); color:#ded8ff; }
button.secondary,.button.secondary { background:#263149; }
.progress-panel { margin-top:16px; }
.progress-track { height:10px; margin:10px 0; overflow:hidden; border-radius:999px; background:#293248; }
.progress-bar { width:0; height:100%; background:linear-gradient(90deg,var(--accent),var(--ok)); transition:width .15s linear; }
.progress-stats { color:var(--muted); font-size:.85rem; }
.notice { padding:13px 15px; border-radius:11px; line-height:1.5; }
.notice.error { background:rgba(255,100,124,.12); border:1px solid rgba(255,100,124,.4); color:#ffd5dc; }
.notice.ok { background:rgba(69,211,155,.12); border:1px solid rgba(69,211,155,.4); color:#caffeb; }
.checks { list-style:none; padding:0; margin:0 0 20px; display:grid; gap:8px; }
.checks li { display:flex; justify-content:space-between; gap:16px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.yes { color:var(--ok); }.no { color:var(--danger); }
code { overflow-wrap:anywhere; color:#d7d0ff; }
.landing-page { position:relative; display:grid; place-items:center; overflow-x:hidden; isolation:isolate; }
.landing-page::before { content:""; position:fixed; inset:0; z-index:0; background:radial-gradient(circle at 18% 24%,rgba(124,92,255,.13),transparent 34%),radial-gradient(circle at 82% 72%,rgba(69,211,155,.07),transparent 30%); pointer-events:none; }
.particle-field { position:fixed; inset:-7%; z-index:0; overflow:hidden; pointer-events:none; }
.particle-layer { position:absolute; inset:0; will-change:transform; }
.landing-particle { position:absolute; left:var(--particle-x); top:var(--particle-y); width:var(--particle-size); height:var(--particle-size); border-radius:50%; background:var(--particle-color); opacity:var(--particle-opacity); box-shadow:0 0 var(--particle-glow) var(--particle-color),0 0 var(--particle-halo) var(--particle-color); animation:landing-particle-float var(--particle-duration) ease-in-out var(--particle-delay) infinite alternate; }
@keyframes landing-particle-float { to { opacity:var(--particle-faded-opacity); transform:translate3d(var(--particle-drift-x),var(--particle-drift-y),0) scale(.78); } }
.landing-shell { position:relative; z-index:1; width:min(480px,calc(100% - 32px)); padding:40px 0; text-align:center; }
.landing-brand { margin-bottom:24px; font-size:clamp(2rem,9vw,3.4rem); font-weight:850; letter-spacing:.05em; }
.landing-brand span { color:#a997ff; }
.landing-card { display:grid; gap:14px; margin-top:0; padding:24px; }
.landing-button { width:100%; min-height:52px; align-items:center; font-size:1rem; }
.eula-trigger { display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(18,23,34,.72); color:var(--muted); font-size:.7rem; font-weight:650; }
.eula-trigger:hover { color:#d9d3ff; border-color:#554979; }
.eula-trigger svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.eula-dialog { position:relative; width:min(620px,calc(100% - 28px)); max-height:min(82vh,760px); overflow:auto; text-align:left; }
.eula-dialog h2 { margin:.35rem 36px 1rem 0; font-size:clamp(1.45rem,5vw,2rem); }
.eula-kicker { color:#b8adff; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.eula-content { color:#c3cbd8; font-size:.88rem; line-height:1.65; }
.eula-content p { margin:.8rem 0; }
.eula-content a { color:#b8adff; text-underline-offset:3px; }
.eula-references { padding-top:10px; border-top:1px solid var(--line); font-size:.76rem; }
.eula-close { position:absolute; top:14px; right:14px; width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:50%; background:#0d121c; color:var(--muted); font-size:1.25rem; line-height:1; }
.system-card { margin-top:18px; padding:18px; }
.system-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.system-heading h2 { margin:0; font-size:1.05rem; }
.system-heading > span { color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.status-item { display:flex; align-items:center; gap:9px; min-width:0; padding:10px; border:1px solid var(--line); border-radius:11px; background:#0d121c; }
.status-item > div { display:grid; min-width:0; }
.status-item strong { overflow:hidden; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.status-item small { overflow:hidden; margin-top:2px; color:var(--muted); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.status-dot { flex:0 0 auto; width:8px; height:8px; border-radius:50%; }
.status-dot.ok { background:var(--ok); box-shadow:0 0 10px var(--ok); }
.status-dot.bad { background:var(--danger); box-shadow:0 0 10px var(--danger); }
.status-dot.warn { background:#f4b860; box-shadow:0 0 10px #f4b860; }
.status-dot.checking { background:#8e9ab0; animation:status-pulse 1s ease-in-out infinite alternate; }
@keyframes status-pulse { to { opacity:.35; } }
.history-card h2 { margin:0; }
.history-help { margin:.45rem 0 1rem; color:var(--muted); font-size:.78rem; }
.history-log { margin:0 0 14px; padding:9px 11px; border-radius:9px; background:#0d121c; color:var(--muted); font-size:.72rem; overflow-wrap:anywhere; }
.history-log.ok { border-left:3px solid var(--ok); }
.history-log.missing { border-left:3px solid var(--danger); }
.history-list { display:grid; gap:2px; }
.history-row { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; }
.history-icon { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:.82rem; font-weight:900; }
.history-icon.completed,.history-icon.accepted { color:var(--ok); background:rgba(69,211,155,.12); }
.history-icon.failed { color:var(--danger); background:rgba(255,100,124,.12); }
.history-icon.pending { color:#cfc7ff; background:rgba(124,92,255,.12); }
.history-main { min-width:0; }
.history-file { overflow:hidden; color:#dfe5ef; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.history-route,.history-ips { margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-ips { font-size:.7rem; opacity:.72; }
.history-meta { display:grid; gap:3px; justify-items:end; white-space:nowrap; }
.transport-badge { padding:2px 6px; border-radius:999px; font-size:.62rem; font-weight:850; letter-spacing:.05em; }
.transport-badge.p2p { color:#bfffe8; background:rgba(69,211,155,.13); }
.transport-badge.turn { color:#d8d0ff; background:rgba(124,92,255,.18); }
.transport-badge.unknown { color:var(--muted); background:#202737; }
@media (max-width:560px) { .status-grid { grid-template-columns:1fr; } .history-row { grid-template-columns:22px minmax(0,1fr); } .history-meta { grid-column:2; grid-template-columns:repeat(3,auto); justify-content:start; gap:10px; } }