:root{--max:1100px;--brand:#ef5350}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;color:#111;background:#fafafa}
html{scroll-behavior:smooth}
.wrap{max-width:var(--max);margin:auto;padding:16px}
a{text-decoration:none;color:inherit}
.muted{opacity:.75}

/* Header (RED) */
.site-header{position:sticky;top:0;z-index:10;background:var(--brand);border-bottom:1px solid #FF7373;color:#fff}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.site-header a{color:#fff}
.logo{display:flex;align-items:center;gap:10px;font-weight:800}
.logo img{width:30px;height:30px;border-radius:6px}
.logo-ico{font-size:20px}

/* Panels */
.panel{background:#fff;border:1px solid #eee;border-radius:14px;padding:14px}
.panel+.panel{margin-top:16px}
h1{font-size:clamp(22px,4vw,32px);margin:6px 0 8px}
.sub{margin:0}

/* Controls */
.controls{display:grid;gap:16px}
.drop{background:var(--brand);border-radius:16px;border:2px dashed rgba(255,255,255,.9);display:grid;place-items:center;min-height:220px;text-align:center;color:#fff;padding:14px}
.drop.drag{background:#f36a66}
.drop .cta{display:inline-block;background:#fff;color:#c62828;padding:10px 14px;border-radius:12px;font-weight:800;margin-top:6px;cursor:pointer}
.drop input[type=file]{display:none}
.cloud{width:90px;height:90px;opacity:.95;margin-bottom:6px}

.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.toolbar label{display:flex;flex-direction:column;gap:6px;font-size:14px}
.toolbar select,.toolbar input[type=number],.toolbar input[type=text]{padding:10px 12px;border:1px solid #ddd;border-radius:10px;min-width:130px}

.btn-row{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:0;cursor:pointer;font-weight:800}
.btn.primary{background:var(--brand);color:#fff}
.btn.light{background:#f3f3f3}

.progress{height:10px;background:#eee;border-radius:999px;overflow:hidden;margin-top:6px}
.progress>b{display:block;height:100%;width:0;background:linear-gradient(90deg,#ef5350,#c62828);transition:width .25s}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.thumb{background:#f5f5f5;border-radius:10px;display:grid;place-items:center;aspect-ratio:3/4;overflow:hidden}
.thumb img{max-width:100%;height:auto;display:block}
.row{display:flex;gap:8px;flex-wrap:wrap}
.icon-btn{padding:8px 10px;border-radius:10px;border:1px solid #eee;background:#fff;cursor:pointer}

/* Footer (RED) */
.foot{background:var(--brand);color:#fff;padding:20px;text-align:center;font-size:13px}
.foot a{color:#fff;opacity:.95}

/* Back to top (RED bg + white text) */
#backTop{
  position:fixed;right:16px;bottom:16px;width:44px;height:44px;
  border-radius:999px;border:0;background:var(--brand);color:#fff;
  font-weight:800;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.18);
  display:none;place-items:center;line-height:1
}
#backTop:hover{filter:brightness(.95)}

@media (max-width:900px){.toolbar{gap:10px}}