:root {
  --bg: #070a10;
  --bg-soft: rgba(10,14,23,.82);
  --panel: rgba(15,20,31,.78);
  --panel-2: rgba(20,27,41,.86);
  --panel-3: rgba(26,34,51,.92);
  --line: rgba(148,163,184,.16);
  --line-soft: rgba(148,163,184,.09);
  --text: #f4f7fb;
  --muted: #98a4b7;
  --muted-dim: #647084;
  --accent: #6ea8ff;
  --accent-soft: #b7d1ff;
  --accent-dim: #334b78;
  --accent-bg: rgba(110,168,255,.12);
  --violet: #9b7cff;
  --violet-bg: rgba(155,124,255,.12);
  --cyan: #58d9ff;
  --ok: #45e0a1;
  --ok-bg: rgba(69,224,161,.11);
  --err: #ff667a;
  --err-bg: rgba(255,102,122,.11);
  --warn: #ffc15a;
  --warn-bg: rgba(255,193,90,.11);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 18px 60px rgba(0,0,0,.28);
  --glow: 0 0 40px rgba(110,168,255,.11);
}

* { box-sizing:border-box; }
html { min-height:100%; scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; color:var(--text); font-family:var(--sans);
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(110,168,255,.14), transparent 62%),
    radial-gradient(800px 520px at 95% 5%, rgba(155,124,255,.10), transparent 60%),
    radial-gradient(700px 500px at 50% 105%, rgba(88,217,255,.06), transparent 62%),
    var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px; mask-image:linear-gradient(to bottom,black,transparent 85%); }

::selection { background:rgba(110,168,255,.28); color:#fff; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(148,163,184,.20); border-radius:99px; }

.wrap { width:min(1100px, calc(100% - 32px)); margin:0 auto; padding:34px 0 100px; position:relative; z-index:1; }
.wrap.narrow { max-width:470px; padding-top:72px; }

/* App navigation */
.topnav {
  position:sticky; top:12px; z-index:50; width:min(1180px, calc(100% - 24px)); margin:12px auto 8px;
  padding:11px 14px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  background:rgba(8,12,20,.72); border:1px solid var(--line); border-radius:18px; backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 12px 50px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
}
.topnav-left,.topnav-right { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.topnav .mark { width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px rgba(110,168,255,.9); margin:0 4px 0 3px; }
.topnav .brand { color:var(--text); text-decoration:none; font-size:14px; font-weight:800; letter-spacing:-.02em; padding:9px 11px; margin-right:4px; }
.navlink { color:var(--muted); text-decoration:none; font-size:12.5px; font-weight:600; padding:9px 10px; border-radius:10px; transition:.2s ease; }
.navlink:hover { color:var(--text); background:rgba(255,255,255,.055); }
.navlink.logout:hover { color:#ff9aa8; background:var(--err-bg); }
.nav-user { color:#b5c0d1; font-family:var(--mono); font-size:11px; padding:7px 10px; border:1px solid var(--line-soft); border-radius:99px; background:rgba(255,255,255,.025); }

h1 { font-size:clamp(27px,4vw,42px); line-height:1.03; font-weight:820; letter-spacing:-.045em; margin:0 0 9px; }
h2 { font-size:15px; font-weight:750; margin:0 0 14px; letter-spacing:-.015em; }
h3 { font-weight:700; }
.page-sub { color:var(--muted); font-size:13.5px; margin-bottom:28px; line-height:1.65; max-width:820px; }

.panel {
  position:relative; overflow:hidden; background:linear-gradient(145deg,rgba(20,27,41,.86),rgba(11,16,26,.78));
  border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:18px; box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(16px);
}
.panel::before { content:""; position:absolute; width:260px; height:140px; right:-120px; top:-100px; background:rgba(110,168,255,.10); filter:blur(55px); pointer-events:none; }
.panel > * { position:relative; z-index:1; }

form { display:flex; gap:10px; }
input[type=text],input[type=password],input[type=number],input[type=file],textarea,select {
  flex:1; min-width:0; background:rgba(7,11,19,.68); border:1px solid var(--line); color:var(--text); font-family:var(--sans); font-size:14px;
  padding:12px 14px; border-radius:var(--radius-sm); outline:none; transition:.2s ease; box-shadow:inset 0 1px rgba(255,255,255,.025);
}
input[type=file] { color:var(--muted); }
input:focus,textarea:focus,select:focus { border-color:rgba(110,168,255,.72); box-shadow:0 0 0 4px rgba(110,168,255,.09); }
input::placeholder,textarea::placeholder { color:#596579; }
label { font-size:11.5px; color:var(--muted); display:block; margin-bottom:6px; font-weight:650; }

button,.btn {
  background:linear-gradient(135deg,#6ea8ff,#8a7dff); color:#fff; border:1px solid rgba(255,255,255,.12); font-weight:750; font-size:13px;
  padding:12px 19px; border-radius:var(--radius-sm); cursor:pointer; text-decoration:none; display:inline-block; transition:.2s ease;
  box-shadow:0 8px 24px rgba(71,108,190,.20), inset 0 1px rgba(255,255,255,.20);
}
button:hover:not(:disabled),.btn:hover { transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 12px 28px rgba(71,108,190,.28),inset 0 1px rgba(255,255,255,.22); }
button:active:not(:disabled),.btn:active { transform:translateY(0); }
button:disabled { background:#25334e; color:#697891; border-color:transparent; cursor:default; box-shadow:none; }
.btn-sm { padding:8px 12px; font-size:11.5px; }
.btn-outline { background:rgba(255,255,255,.025); border:1px solid var(--line); color:var(--text); box-shadow:none; }
.btn-outline:hover { border-color:rgba(110,168,255,.55); background:var(--accent-bg); box-shadow:0 0 24px rgba(110,168,255,.10); }
.btn-danger { background:rgba(255,102,122,.06); border:1px solid rgba(255,102,122,.28); color:#ff91a0; box-shadow:none; }
.btn-danger:hover { background:var(--err-bg); }
.btn-muted { background:rgba(255,255,255,.045); color:var(--muted); border:1px solid var(--line); box-shadow:none; }

.error-msg,.ok-msg { font-size:13px; padding:11px 14px; border-radius:var(--radius-sm); margin-top:12px; backdrop-filter:blur(10px); }
.error-msg { color:#ff9aaa; background:var(--err-bg); border:1px solid rgba(255,102,122,.23); }
.ok-msg { color:#77efba; background:var(--ok-bg); border:1px solid rgba(69,224,161,.22); }
.badge { font-family:var(--mono); font-size:10px; padding:4px 9px; border-radius:99px; border:1px solid var(--line); color:var(--muted); font-weight:650; white-space:nowrap; }
.badge.admin { color:var(--accent-soft); background:var(--accent-bg); border-color:rgba(110,168,255,.2); }
.badge.locked { color:#ff8999; background:var(--err-bg); border-color:rgba(255,102,122,.18); }
.badge.active { color:#72efb6; background:var(--ok-bg); border-color:rgba(69,224,161,.16); }

/* Hero */
.hero { position:relative; padding:18px 0 30px; margin-bottom:8px; }
.hero::after { content:""; position:absolute; width:420px; height:180px; left:-120px; top:20px; background:rgba(110,168,255,.12); filter:blur(80px); pointer-events:none; }
.hero > * { position:relative; z-index:1; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; color:#9bbcff; font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; padding:7px 10px; border:1px solid rgba(110,168,255,.17); background:rgba(110,168,255,.07); border-radius:99px; }
.hero-eyebrow .dot,.live-dot { width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 12px rgba(69,224,161,.8); display:inline-block; }
.hero h1 { max-width:800px; margin-top:18px; font-size:clamp(36px,7vw,66px); }
.hero-desc { max-width:700px; color:#9da9bb; font-size:15px; line-height:1.75; }
.hero-features { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.hero-feature { padding:8px 11px; background:rgba(255,255,255,.035); border:1px solid var(--line-soft); border-radius:99px; color:#b6c1d1; font-size:11.5px; }
.hero-feature .icon { margin-right:5px; }

/* Download start panel */
#startPanel { padding:16px; border-color:rgba(110,168,255,.19); box-shadow:0 24px 80px rgba(0,0,0,.30),0 0 50px rgba(110,168,255,.06); }
#startForm { display:grid; grid-template-columns:1fr auto; gap:9px; }
#urlInput { font-size:14px; padding:14px 15px; }
#startBtn { min-width:105px; }
.format-toggle { display:flex; gap:8px; margin-top:10px; }
.format-opt { flex:1; background:rgba(255,255,255,.025); color:var(--muted); border:1px solid var(--line); font-weight:700; font-size:12.5px; padding:10px 14px; border-radius:10px; cursor:pointer; text-align:center; transition:.2s ease; box-shadow:none; }
.format-opt.active { background:linear-gradient(135deg,rgba(110,168,255,.16),rgba(155,124,255,.12)); color:#c5d8ff; border-color:rgba(110,168,255,.48); box-shadow:0 0 26px rgba(110,168,255,.08); }
.format-opt:hover:not(.active) { border-color:#45516a; color:var(--text); }

/* Live download */
#liveSection { border-color:rgba(110,168,255,.18); }
.summary-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; flex-wrap:wrap; gap:10px; }
.summary-row .url,.recent-row .url { font-family:var(--mono); font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:520px; }
.status-pill { font-family:var(--mono); font-size:10.5px; padding:5px 9px; border-radius:99px; border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.025); }
.status-pill.laedt,.status-pill.pausiert { color:#a9c8ff; border-color:rgba(110,168,255,.3); background:var(--accent-bg); }
.status-pill.fertig { color:#74efb6; border-color:rgba(69,224,161,.25); background:var(--ok-bg); }
.status-pill.fehler { color:#ff91a0; border-color:rgba(255,102,122,.25); background:var(--err-bg); }
.cancel-btn { background:transparent; color:#ff8798; border:1px solid rgba(255,102,122,.25); font-weight:700; font-size:11px; padding:6px 10px; border-radius:9px; cursor:pointer; box-shadow:none; }
.cancel-btn:hover:not(:disabled) { background:var(--err-bg); }
.progress-bar { height:8px; background:rgba(255,255,255,.05); border-radius:99px; overflow:hidden; margin-bottom:8px; }
.progress-bar > div { height:100%; background:linear-gradient(90deg,var(--accent),var(--violet),var(--cyan)); width:0%; transition:width .3s ease; box-shadow:0 0 18px rgba(110,168,255,.45); }
.counts { font-family:var(--mono); font-size:10.5px; color:var(--muted); display:flex; gap:16px; flex-wrap:wrap; }
.counts b { color:#e8edf5; }
.now-playing { display:flex; align-items:center; gap:14px; padding:15px 16px; background:linear-gradient(135deg,rgba(110,168,255,.08),rgba(155,124,255,.06)); border:1px solid var(--line-soft); border-radius:12px; margin-top:16px; }
.wave { display:flex; align-items:flex-end; gap:3px; height:24px; flex-shrink:0; }
.wave span { width:3px; background:linear-gradient(to top,var(--accent),var(--violet)); border-radius:2px; animation:bounce 1s ease-in-out infinite; box-shadow:0 0 8px rgba(110,168,255,.35); }
@keyframes bounce { 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }
.video-list { max-height:420px; overflow-y:auto; border-top:1px solid var(--line); margin-top:16px; }
.video-row { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line-soft); font-size:12.5px; }
.video-row .idx { font-family:var(--mono); color:#4f5b6e; font-size:10px; width:26px; text-align:right; }
.video-row .vtitle { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.video-row .vstatus { font-family:var(--mono); font-size:10.5px; flex-shrink:0; width:90px; text-align:right; }
.video-row .vstatus.laedt { color:#9dbfff; }.video-row .vstatus.fertig{color:#71eab3}.video-row .vstatus.fehler{color:#ff8798}.video-row .vstatus.wartet{color:#5d697b}
.log-console { background:rgba(3,6,11,.78); border:1px solid var(--line); border-radius:10px; padding:11px 13px; max-height:170px; overflow-y:auto; font-family:var(--mono); font-size:10.5px; line-height:1.75; }
.log-console .line { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.log-console .line .ts{color:#4f5b6e;margin-right:8px}.log-console .empty{color:#4f5b6e}
.recent-jobs { margin-top:30px; }.recent-jobs h2{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}.recent-row{display:flex;justify-content:space-between;align-items:center;padding:12px 3px;border-bottom:1px solid var(--line-soft);cursor:pointer;font-size:12.5px;gap:10px;flex-wrap:wrap}.recent-row:hover .url{color:var(--text)}

/* Files */
.folder-card { display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px solid var(--line-soft); gap:12px; flex-wrap:wrap; transition:.2s ease; }
.folder-card:hover { transform:translateX(2px); }.folder-info .name{font-weight:750;font-size:14px}.folder-info .meta{color:var(--muted);font-size:11.5px;margin-top:4px}.folder-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.share-code-display{font-family:var(--mono);background:linear-gradient(135deg,rgba(110,168,255,.08),rgba(155,124,255,.07));border:1px dashed rgba(110,168,255,.32);color:#b8d1ff;padding:10px 13px;border-radius:10px;font-size:12.5px;letter-spacing:.06em;margin-top:10px;display:none}.empty-state{color:var(--muted);font-size:13px;padding:14px 0}.file-row{padding:9px 0;border-bottom:1px solid var(--line-soft)}

/* Admin / metrics */
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:9px; margin-top:16px; }.metric-card{background:rgba(255,255,255,.025);border:1px solid var(--line-soft);border-radius:12px;padding:13px 14px;transition:.2s}.metric-card:hover{border-color:rgba(110,168,255,.22);transform:translateY(-1px)}.metric-card .metric-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.metric-card .metric-value{font-size:20px;font-weight:800;color:var(--text);margin-top:7px;font-variant-numeric:tabular-nums}.disk-card{margin-top:13px;background:rgba(255,255,255,.025);border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px}.disk-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}.disk-card-head .disk-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.disk-card-head .disk-path{color:var(--muted-dim);font-family:var(--mono);font-size:10px;margin-left:6px}.disk-card-head .disk-numbers{font-size:11.5px;color:var(--muted)}.disk-card-head .disk-numbers b{color:var(--text)}.disk-bar-track{height:8px;background:rgba(255,255,255,.045);border-radius:99px;overflow:hidden;margin-top:10px}.disk-bar-fill{height:100%;border-radius:99px;width:0%;background:linear-gradient(90deg,var(--ok),var(--accent));transition:width .3s ease}.net-table-wrap{overflow-x:auto;margin-top:16px}
table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;color:var(--muted);font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;padding:10px;border-bottom:1px solid var(--line);font-weight:700}td{padding:12px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}tr:last-child td{border-bottom:none}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px;margin-top:14px}.stat-card{background:rgba(255,255,255,.025);border:1px solid var(--line-soft);border-radius:12px;padding:13px 14px}.stat-card .stat-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.stat-card .stat-value{font-size:19px;font-weight:800;color:var(--text);margin-top:6px}
.warning-banner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;margin-bottom:18px;font-size:12.5px;line-height:1.6}.warning-banner.danger{background:var(--err-bg);border:1px solid rgba(255,102,122,.22)}.warning-banner.warn{background:var(--warn-bg);border:1px solid rgba(255,193,90,.22)}.warning-banner .wb-icon{font-size:18px}.warning-banner .wb-title{font-weight:800;margin-bottom:3px}.locked-panel{border-color:rgba(255,102,122,.28);}

/* Invite */
.invite-row{position:relative;display:flex;justify-content:space-between;align-items:center;padding:17px 0;border-bottom:1px solid var(--line-soft);gap:14px;flex-wrap:wrap}.invite-code{font-family:var(--mono);font-size:17px;font-weight:800;letter-spacing:.12em;color:#c5d8ff}.invite-link{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:5px;word-break:break-all}.invite-row:first-of-type{padding-top:6px}

/* Changelog */
.changelog-entry{padding:18px 0;border-bottom:1px solid var(--line-soft)}.changelog-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.changelog-version{font-family:var(--mono);font-weight:800;font-size:13px;color:#b8d1ff;padding:5px 9px;border-radius:8px;background:var(--accent-bg);border:1px solid rgba(110,168,255,.15)}.changelog-meta{color:var(--muted-dim);font-size:10.5px;font-family:var(--mono)}.changelog-notes{margin-top:10px;font-size:13px;line-height:1.7;white-space:pre-wrap;color:#d4dbe6}

/* Login / public auth */
.login-card{box-shadow:0 30px 100px rgba(0,0,0,.4),0 0 60px rgba(110,168,255,.06);}.login-card h1{text-align:center;margin-bottom:5px;font-size:32px}.login-card .sub{text-align:center;color:var(--muted);font-size:12px;margin-bottom:26px}.login-card form{flex-direction:column}.login-card label{margin-top:12px}.login-card label:first-child{margin-top:0}.login-card button{margin-top:18px;width:100%}.wrap.narrow::before{content:"";position:absolute;inset:0 -250px;background:radial-gradient(circle at center,rgba(110,168,255,.08),transparent 55%);pointer-events:none}

.back-link{display:inline-block;color:var(--muted);font-size:11px;font-family:var(--mono);text-decoration:none;margin-bottom:13px}.back-link:hover{color:var(--accent-soft)}
.guide-step{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line-soft)}.guide-step:last-child{border-bottom:none}.guide-step .num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,rgba(110,168,255,.18),rgba(155,124,255,.16));color:var(--accent-soft);border:1px solid rgba(110,168,255,.18);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}.guide-step .body{font-size:13px;line-height:1.65}.source-tag{font-family:var(--mono);font-size:10px;padding:4px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}.source-tag.own{color:var(--ok);background:var(--ok-bg);border-color:transparent}.source-tag.global{color:var(--warn);background:var(--warn-bg);border-color:transparent}.source-tag.none{color:var(--err);background:var(--err-bg);border-color:transparent}
.terms-section{margin-bottom:24px}.terms-section h2{font-size:14px;margin-bottom:8px}.terms-section p,.terms-section li{font-size:13px;line-height:1.75;color:#d6dce6}.terms-hint{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:11px;padding:13px 15px;font-size:11.5px;color:var(--muted);margin-top:24px;line-height:1.65}

@media (max-width:760px){
  .topnav{position:relative;margin:8px;width:calc(100% - 16px);border-radius:15px}.topnav-left,.topnav-right{width:100%;gap:3px}.topnav-right{justify-content:flex-end}.navlink{font-size:11.5px;padding:8px 7px}.topnav .brand{padding-left:6px}.wrap{width:min(100% - 22px,1100px);padding-top:24px}.hero h1{font-size:38px}.hero-desc{font-size:13.5px}.panel{padding:17px}.summary-row .url{max-width:100%}#startForm{grid-template-columns:1fr}#startBtn{width:100%}.format-toggle{flex-direction:column}.invite-row{align-items:flex-start}.invite-row>div:last-child{width:100%}.invite-row button{width:100%}
}
@media (max-width:480px){.topnav-left{overflow-x:auto;flex-wrap:nowrap}.topnav-right{overflow-x:auto;flex-wrap:nowrap}.nav-user{display:none}.hero{padding-top:8px}.hero h1{font-size:33px}.hero-features{gap:6px}.hero-feature{font-size:10.5px}.counts{gap:9px}.panel{border-radius:13px}}

/* Small polish hooks for existing inline components */
.zip-progress{display:none;align-items:center;gap:10px;margin-top:10px;font-size:11.5px;color:var(--muted)}.zip-progress .zip-bar{flex:1;height:6px;background:rgba(255,255,255,.05);border-radius:99px;overflow:hidden;max-width:180px}.zip-progress .zip-bar>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--violet));width:0%;transition:width .25s ease}.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:20px;flex-wrap:wrap}.pagination a,.pagination span{display:inline-block;min-width:32px;text-align:center;padding:7px 10px;border-radius:8px;font-size:11.5px;text-decoration:none;border:1px solid var(--line);color:var(--text);background:rgba(255,255,255,.02)}.pagination a:hover{border-color:rgba(110,168,255,.45);color:var(--accent-soft)}.pagination .current{background:var(--accent-bg);border-color:rgba(110,168,255,.35);color:var(--accent-soft);font-weight:800}.pagination .disabled{color:var(--muted-dim);border-color:var(--line-soft);pointer-events:none}