*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,system-ui,'Segoe UI',sans-serif;background:#0f0f10;color:#eee;min-height:100vh}
.hidden{display:none !important}

/* === LOGIN === */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 30% 20%,#1a1a2e 0%,#0f0f10 60%)}
.login-box{background:#1a1a1d;border:1px solid #2a2a2e;border-radius:14px;padding:32px;width:100%;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.login-box h1{font-size:24px;margin-bottom:6px;text-align:center}
.login-sub{font-size:13px;color:#888;text-align:center;margin-bottom:24px}
.login-box form{display:flex;flex-direction:column;gap:10px}
.login-box input{padding:12px 14px;background:#0f0f10;color:#eee;border:1px solid #2a2a2e;border-radius:8px;font-size:14px}
.login-box input:focus{outline:none;border-color:#4ade80}
.login-box button{padding:12px;background:linear-gradient(90deg,#4ade80,#22d3ee);color:#0f0f10;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px}
.login-box button:disabled{opacity:0.6;cursor:not-allowed}
.login-error{color:#f87171;font-size:13px;text-align:center;min-height:18px}

/* === APP === */
.app-screen{padding:20px;max-width:1400px;margin:0 auto}
.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.app-header h1{font-size:24px}
.user-info{display:flex;align-items:center;gap:12px;font-size:13px}
.user-info span{color:#888}
.logout-btn{padding:6px 14px;background:#2a1a1a;color:#f87171;border:1px solid #4a2222;border-radius:6px;cursor:pointer;font-size:13px}
.logout-btn:hover{background:#3a2222}

.controls{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.controls button{padding:8px 12px;background:#1c1c1f;color:#eee;border:1px solid #2e2e33;border-radius:6px;font-size:14px;cursor:pointer;font-weight:500}
.controls button:hover:not(:disabled){background:#27272b}
.controls button:disabled{opacity:0.5;cursor:not-allowed}
.controls .export{background:#1a3a2a;color:#4ade80;border-color:#225a3a}
.controls .zip{background:#2a1a3a;color:#c084fc;border-color:#4a2a5a}
.controls .zip:hover:not(:disabled){background:#3a2a4a}

.stats{background:#1a1a1d;padding:12px 16px;border-radius:10px;margin-bottom:22px;border:1px solid #2a2a2e}
.stats-text{font-size:15px;font-weight:500}
.progress{height:10px;background:#26262a;border-radius:5px;overflow:hidden;margin-top:8px}
.progress-bar{height:100%;background:linear-gradient(90deg,#fbbf24,#4ade80,#22d3ee);transition:width .4s ease}

.level-section{margin-bottom:22px}
.level-header{font-size:16px;font-weight:600;margin-bottom:10px;padding:10px 14px;background:#1a1a1d;border-radius:8px;display:flex;justify-content:space-between;align-items:center;border:1px solid #2a2a2e;gap:10px;flex-wrap:wrap}
.level-header .folder-tag{font-family:monospace;font-size:11px;color:#fbbf24;background:#2a2210;padding:2px 8px;border-radius:4px;font-weight:500}
.level-header .count{font-size:13px;color:#888;font-weight:400}
.level-header .count.full{color:#4ade80;font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.card{background:#1a1a1d;border:1px solid #2a2a2e;border-radius:10px;padding:10px;transition:all .2s;position:relative}
.card.done{border-color:#4ade80;background:#0f1f14}
.card.uploading{opacity:0.6;pointer-events:none}
.card.uploading::after{content:'Uploading...';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#4ade80;font-size:12px;font-weight:600;background:rgba(0,0,0,.7);padding:6px 12px;border-radius:6px}
.card .name{font-size:10.5px;font-family:'SF Mono',Monaco,monospace;word-break:break-all;margin-bottom:8px;color:#999;line-height:1.3;min-height:28px}
.card.done .name{color:#86efac}
.thumb{width:100%;aspect-ratio:1;background:#0a0a0c;border-radius:6px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #232327}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .placeholder{color:#3a3a40;font-size:36px;font-weight:300}
.uploader{font-size:9.5px;color:#666;margin-bottom:6px;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-btn{width:100%;padding:7px;background:#26262a;color:#eee;border:none;border-radius:5px;cursor:pointer;font-size:12px;font-weight:500;display:block;text-align:center}
.upload-btn:hover{background:#33333a}
.card.done .upload-btn{background:#1a3324;color:#86efac}
.card.done .upload-btn:hover{background:#234a31}
input[type=file]{display:none}

.legend{margin-top:30px;padding:14px;background:#1a1a1d;border-radius:10px;font-size:12px;color:#999;border:1px solid #2a2a2e;line-height:1.7}
.legend strong{color:#eee}
.legend code{background:#0a0a0c;padding:2px 6px;border-radius:3px;color:#fbbf24}

.toast{position:fixed;bottom:20px;right:20px;background:#1a3324;color:#86efac;padding:12px 18px;border-radius:8px;border:1px solid #4ade80;font-size:14px;opacity:0;transform:translateY(20px);transition:all .3s;pointer-events:none;z-index:100;max-width:320px}
.toast.show{opacity:1;transform:translateY(0)}
.toast.error{background:#331a1a;color:#fca5a5;border-color:#f87171}