/* assets/style.css */
:root{
  --bg:#0b0c10;
  --card:#111218;
  --text:#eaeef3;
  --muted:#9aa4b2;
  --accent:#4f46e5;
  --accent2:#06b6d4;
  --ok:#10b981;
  --warn:#f59e0b;
  --err:#ef4444;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
body{background:var(--bg);color:var(--text);}
a{color:inherit;text-decoration:none}
.container{max-width:900px;margin:0 auto;padding:16px}

.header{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 0;
}
.brand{font-weight:700;letter-spacing:.3px;font-size:1.25rem}
.actions a{
  padding:10px 14px;border-radius:14px;background:var(--accent);
  color:white;font-weight:600;display:inline-block
}
.actions a.secondary{background:var(--accent2)}

.card{
  background:var(--card);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)
}

.hero{
  text-align:center;padding:48px 16px
}
.hero h1{font-size:1.6rem;margin:0 0 8px 0}
.hero p{color:var(--muted);margin:0 0 24px 0}

.grid{
  display:grid;gap:8px;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:480px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:768px){
  .grid{grid-template-columns:repeat(4,1fr)}
}

.thumb{
  display:block;position:relative;border-radius:12px;overflow:hidden;
  aspect-ratio:1/1;background:#0a0b10;
}
.thumb img{
  width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.1) contrast(1.05)
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;border:0;border-radius:14px;
  padding:12px 16px;font-weight:700;cursor:pointer
}
.btn.secondary{background:var(--accent2)}
.btn.ghost{background:transparent;border:1px solid #2b2f36;color:var(--text)}

.center{display:flex;justify-content:center;align-items:center}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.notice{background:#0d0f15;border:1px solid #1c2230;padding:12px;border-radius:12px;color:var(--muted)}

.upload-box{
  border:2px dashed #2b2f36;border-radius:16px;padding:16px;text-align:center;
  background:#0d0f15
}
.upload-box.drag{border-color:var(--accent)}

.progress-item{background:#0d0f15;border:1px solid #1f2633;padding:12px;border-radius:12px;margin:8px 0}
.progressbar{height:8px;background:#1f2633;border-radius:999px;overflow:hidden;margin-top:8px}
.progressbar > div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2))}

footer{opacity:.7;font-size:.9rem;margin:24px 0}