@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root { --ink:#151515; --muted:#717171; --line:#deded8; --paper:#f5f4ef; --acid:#d8ff3e; --white:#fff; --danger:#c7392f; }
* { box-sizing:border-box; }
html { min-height:100%; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.login-page { display:grid; place-items:center; padding:32px 20px; background:linear-gradient(135deg,var(--paper) 50%,#ecebe4 50%); }
.login-card { width:min(100%,480px); padding:48px; background:var(--white); border:1px solid var(--line); box-shadow:16px 16px 0 var(--ink); }
.mark { display:grid; place-items:center; width:64px; height:64px; margin-bottom:34px; background:var(--acid); border-radius:50%; font:600 17px/1 'DM Mono',monospace; }
.mark.small { width:38px; height:38px; margin:0; font-size:12px; }
.eyebrow { margin:0 0 12px; text-transform:uppercase; letter-spacing:.12em; font:500 12px/1.3 'DM Mono',monospace; }
h1 { margin:0; max-width:700px; font-size:clamp(36px,5vw,64px); line-height:1.02; letter-spacing:-.055em; }
.login-card h1 { font-size:42px; }
.subtitle,.hero>p:last-child { color:var(--muted); line-height:1.65; }
.stack { display:grid; gap:20px; margin-top:34px; }
label { display:grid; gap:8px; font-size:13px; font-weight:600; }
input { width:100%; padding:14px 15px; border:1px solid var(--line); border-radius:0; background:#fafafa; outline:none; }
input:focus { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
button { cursor:pointer; }
.stack button { display:flex; justify-content:space-between; padding:15px 18px; color:white; background:var(--ink); border:1px solid var(--ink); font-weight:600; }
.stack button:hover { color:var(--ink); background:var(--acid); }
button:disabled { opacity:.55; cursor:wait; }
.error { color:var(--danger); }
.topbar { height:78px; padding:0 max(24px,4vw); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; color:inherit; text-decoration:none; font-weight:700; }
.ghost { padding:9px 13px; border:1px solid var(--line); background:transparent; }
.ghost:hover { border-color:var(--ink); }
.container { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:80px 0; }
.hero { margin-bottom:48px; }
.hero>p:last-child { max-width:560px; margin:20px 0 0; }
.drop-zone { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:30px; text-align:center; background:var(--white); border:1px dashed #aaa; outline:none; transition:.18s ease; }
.drop-zone:hover,.drop-zone:focus,.drop-zone.dragging { border-color:var(--ink); background:#f0ffd0; transform:translateY(-2px); box-shadow:8px 8px 0 var(--ink); }
.drop-zone.uploading { pointer-events:none; opacity:.7; transform:none; box-shadow:none; }
.drop-zone strong { font-size:20px; }
.drop-zone>span { color:var(--muted); font-size:14px; }
.upload-icon { width:46px; height:46px; display:grid; place-items:center; margin-bottom:8px; background:var(--acid); border-radius:50%; font-size:22px; }
.progress { width:min(360px,80%); height:4px; margin-top:18px; overflow:hidden; background:var(--line); }
.progress i { display:block; width:0; height:100%; background:var(--ink); transition:width .15s; }
.message { position:fixed; right:24px; bottom:24px; z-index:3; margin:0; padding:14px 18px; color:white; background:var(--ink); box-shadow:5px 5px 0 var(--acid); }
.message.error { color:white; background:var(--danger); box-shadow:none; }
.files-section { margin-top:72px; }
.section-title { display:flex; align-items:baseline; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--ink); }
.section-title h2 { margin:0; font-size:22px; }
.section-title span { color:var(--muted); font:12px 'DM Mono',monospace; }
.empty { padding:50px 20px; color:var(--muted); text-align:center; border-bottom:1px solid var(--line); }
.file-card { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:18px; min-height:82px; padding:14px 0; border-bottom:1px solid var(--line); }
.file-type { display:grid; place-items:center; width:52px; height:52px; background:var(--white); border:1px solid var(--line); font:500 12px 'DM Mono',monospace; }
.file-info { min-width:0; display:grid; gap:5px; }
.file-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-info span { color:var(--muted); font-size:12px; }
.file-actions { display:flex; gap:7px; }
.icon-button { width:38px; height:38px; display:grid; place-items:center; padding:0; color:var(--ink); background:transparent; border:1px solid var(--line); text-decoration:none; font-size:18px; }
.icon-button:hover { background:var(--acid); border-color:var(--ink); }
.delete:hover { color:white; background:var(--danger); }
@media (max-width:600px) { .login-card{padding:32px 25px;box-shadow:8px 8px 0 var(--ink)} .login-card h1{font-size:34px} .container{padding:50px 0}.file-card{grid-template-columns:44px minmax(0,1fr)}.file-type{width:44px;height:44px}.file-actions{grid-column:2}.message{left:20px;right:20px;text-align:center} }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }