:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --ink:#eef2ff; --muted:#98a2b3; --accent:#8b5cf6; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 15% 10%,#35205e 0,transparent 32%),radial-gradient(circle at 85% 85%,#123a4b 0,transparent 35%),#090b12; }
.shell { width:min(1180px,calc(100% - 32px)); min-width:0; margin:auto; padding:32px 0 64px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:48px; }
.brand { display:flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:-.02em; }
.mark { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg,#a78bfa,#6366f1); box-shadow:0 8px 25px #7c3aed55; }
.main-nav { display:flex; gap:6px; padding:4px; border:1px solid #ffffff12; border-radius:12px; background:#11141d99; }
.main-nav a { padding:8px 13px; border-radius:8px; color:#b8c0d0; text-decoration:none; font-size:14px; font-weight:700; }
.main-nav a:hover { color:white; background:#ffffff0d; }
.card { padding:clamp(24px,5vw,48px); border:1px solid #ffffff17; border-radius:28px; background:#11141dcc; box-shadow:0 30px 80px #0007; backdrop-filter:blur(16px); }
.upload-card { max-width:760px; margin-inline:auto; }
.login-card { max-width:480px; margin:auto; }
.eyebrow { margin:0 0 8px; color:#a78bfa; font-size:12px; font-weight:800; letter-spacing:.16em; }
h1 { margin:0; font-size:clamp(32px,6vw,48px); letter-spacing:-.045em; }
.lede { color:var(--muted); margin:12px 0 30px; }
label { display:block; color:#cbd5e1; font-size:13px; font-weight:650; margin:16px 0; }
input:not([type=file]) { width:100%; margin-top:7px; padding:14px 15px; color:white; background:#090b12; border:1px solid #293041; border-radius:11px; font:inherit; outline:none; }
input:focus { border-color:#8b5cf6; box-shadow:0 0 0 3px #8b5cf633; }
button { width:100%; border:0; border-radius:11px; padding:14px; color:white; background:linear-gradient(135deg,#8b5cf6,#6366f1); font-weight:750; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.error { min-height:20px; color:#fda4af; font-size:13px; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:30px; }
.text-button { width:auto; color:#b8c0d0; background:transparent; padding:10px; }
.drop-zone { padding:58px 20px; text-align:center; border:1.5px dashed #46506a; border-radius:20px; background:#0b0e16; cursor:pointer; transition:.2s ease; outline:none; }
.drop-zone:hover,.drop-zone:focus,.drop-zone.dragging { border-color:#a78bfa; background:#171329; transform:translateY(-2px); box-shadow:0 15px 45px #7c3aed20; }
.upload-icon { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 18px; border-radius:16px; font-size:26px; background:#8b5cf622; color:#c4b5fd; }
h2 { margin:0; font-size:22px; }
.drop-zone p { color:var(--muted); margin:8px 0 18px; }
.drop-zone p span { color:#a78bfa; font-weight:700; }
.drop-zone small { color:#697386; }
.queue { display:grid; gap:10px; margin-top:18px; }
.file-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 15px; border-radius:12px; background:#090b12; color:#dbe2f0; font-size:14px; }
.file-status { margin-left:auto; color:#98a2b3; white-space:nowrap; }
.file-row.ok .file-status { color:#6ee7b7; }
.file-row.fail .file-status { color:#fda4af; }
.files-list { display:grid; gap:10px; }
.stored-file { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px; border:1px solid #ffffff0d; border-radius:14px; background:#090b12; }
.file-details { min-width:0; display:grid; gap:5px; }
.file-details strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-details span { color:var(--muted); font-size:13px; }
.download-link,.primary-link { flex:none; padding:10px 14px; border-radius:10px; color:#ddd6fe; background:#8b5cf622; text-decoration:none; font-size:13px; font-weight:750; }
.download-link:hover,.primary-link:hover { background:#8b5cf638; color:white; }
.file-actions { display:flex; align-items:center; gap:8px; flex:none; }
.file-actions form { margin:0; }
.delete-button { width:auto; padding:10px 14px; color:#fda4af; background:#fb71851a; border:1px solid #fb718533; }
.delete-button:hover { color:#fecdd3; background:#fb71852c; }
.delete-button.compact { padding:7px 10px; font-size:12px; }
.empty-state { padding:44px 20px; text-align:center; border:1px dashed #364057; border-radius:18px; background:#0b0e16; }
.empty-state p { color:var(--muted); margin-bottom:24px; }
.file-filters { display:flex; align-items:flex-end; gap:10px; margin-bottom:22px; }
.search-field { flex:1; margin:0; }
.search-field input { margin:0; }
.page-size-field { display:flex; align-items:center; gap:7px; margin:0; white-space:nowrap; }
select { padding:12px 10px; color:white; background:#090b12; border:1px solid #293041; border-radius:10px; }
.file-filters button { width:auto; }
.clear-link { padding:12px 4px; color:#a78bfa; text-decoration:none; font-size:13px; font-weight:700; }
.table-wrap { max-width:100%; overflow-x:auto; border:1px solid #ffffff0d; border-radius:14px; }
.files-table { width:100%; border-collapse:collapse; background:#090b12; }
.files-table th,.files-table td { padding:14px 15px; text-align:left; border-bottom:1px solid #ffffff0d; white-space:nowrap; }
.files-table th { color:#8f99ab; font-size:12px; letter-spacing:.04em; }
.files-table th a { color:inherit; text-decoration:none; }
.files-table tbody tr:last-child td { border-bottom:0; }
.selectable-file { cursor:pointer; transition:background .15s ease; }
.selectable-file:hover,.selectable-file:focus-visible { background:#151925; outline:none; }
.selectable-file[aria-selected="true"] { background:#8b5cf61a; box-shadow:inset 3px 0 #8b5cf6; }
.file-name { max-width:260px; overflow:hidden; text-overflow:ellipsis; color:#e5e7eb; font-weight:650; }
.files-workspace { min-width:0; }
.files-workspace.preview-open { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); gap:20px; align-items:start; }
.files-browser { min-width:0; }
.file-preview { min-width:0; padding:18px; border:1px solid #ffffff12; border-radius:16px; background:#090b12; }
.preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.preview-head h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }
.preview-head .eyebrow { margin-bottom:5px; }
.preview-close { width:34px; height:34px; flex:none; padding:0; color:#b8c0d0; background:#ffffff0d; font-size:24px; line-height:1; }
.preview-controls { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; }
.preview-controls button { width:auto; min-width:34px; padding:8px 11px; background:#8b5cf622; }
.preview-controls span { min-width:48px; color:var(--muted); text-align:center; font-size:12px; }
.preview-viewport { display:grid; place-items:center; height:460px; overflow:hidden; border:1px solid #ffffff0d; border-radius:12px; background:#05070c; }
.preview-image { display:block; width:100%; height:100%; object-fit:contain; transform-origin:center; transition:transform .15s ease; }
.preview-frame { width:100%; height:100%; border:0; background:white; }
.preview-unavailable { max-width:240px; padding:24px; color:var(--muted); text-align:center; line-height:1.5; }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; color:var(--muted); font-size:13px; }
.pagination div { display:flex; gap:8px; }
.pagination a { padding:8px 11px; color:#ddd6fe; background:#8b5cf622; border-radius:8px; text-decoration:none; font-weight:700; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:900px) { .files-workspace.preview-open{grid-template-columns:1fr}.preview-viewport{height:min(460px,70vh)} }
@media(max-width:620px) { .shell{padding-top:20px}.site-header{margin-bottom:24px}.card-head{display:block}.text-button{margin-top:12px;padding-left:0}.drop-zone{padding:42px 14px}.file-filters{align-items:stretch;flex-wrap:wrap}.search-field{flex-basis:100%}.file-filters button{flex:1}.pagination{align-items:flex-start;flex-direction:column}.stored-file{align-items:flex-start;flex-direction:column}.file-actions{width:100%}.download-link,.file-actions form,.file-actions .delete-button{width:100%;text-align:center}.preview-viewport{height:60vh} }