:root{
  --bg:#fafafa;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#2962ff;
  --primary-ink:#ffffff;
  --danger:#e53935;
  --success:#2e7d32;

  --radius:16px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.08);
  --shadow-2: 0 4px 14px rgba(0,0,0,.12);
  --shadow-3: 0 10px 24px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height:1.55;
}

.elevation-1{ box-shadow: var(--shadow-1); }
.elevation-2{ box-shadow: var(--shadow-2); }

.app-bar{
  position:sticky; top:0; z-index:10;
  background:var(--card);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #eee;
}
.brand{display:flex; align-items:center; gap:8px}
.brand h1{font-size:18px; margin:0; font-weight:700}
.bar-actions{display:flex; gap:8px; align-items:center}

.container{
  max-width:1100px; margin:24px auto; padding:0 16px;
  display:flex; flex-direction:column; gap:20px;
}

.panel{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
}

.panel-title{
  display:flex; align-items:center; gap:8px;
  margin:0 0 12px 0; font-size:18px; font-weight:600;
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#f3f4f6; color:var(--text);
  padding:10px 14px; border-radius:999px; border:none; cursor:pointer;
  transition: transform .05s ease, box-shadow .15s ease;
}
.btn:hover{ box-shadow: var(--shadow-1); }
.btn:active{ transform: translateY(1px); }
.btn.primary{ background:var(--primary); color:var(--primary-ink); }
.btn.text-btn{ background:transparent; padding:8px 10px; border-radius:8px; }
.btn.text-btn:hover{ background:#f5f5f5; }
.btn.danger{ color:var(--danger); }

.fab{
  width:44px; height:44px; border-radius:50%;
  display:inline-grid; place-items:center;
  border:none; background:#f3f4f6; cursor:pointer;
}

.helper{
  margin-top:10px; color:var(--muted); display:flex; align-items:center; gap:6px;
  font-size:14px;
}

.upload-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
}
@media (min-width:900px){
  .upload-grid{ grid-template-columns:repeat(3,1fr); }
}
.upload-card{
  padding:12px; border-radius:12px; background:var(--card);
}
.upload-card h3{ margin:0 0 10px 0; font-size:16px; display:flex; gap:6px; align-items:center }
.file-input input[type=file]{ display:none }
.thumb-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px;
}
.thumb{
  position:relative; border-radius:10px; overflow:hidden; background:#f3f4f6;
  aspect-ratio:1/1; display:grid; place-items:center;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb .del{
  position:absolute; top:4px; right:4px; background:rgba(0,0,0,.54);
  color:#fff; border:none; border-radius:50%; width:24px; height:24px;
  display:grid; place-items:center; cursor:pointer;
}

.viewer-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.viewer-actions{ display:flex; gap:6px; }

.outfit-card{
  background:linear-gradient(180deg, #fff, #fafafa);
  border-radius:24px; margin-top:12px; padding:12px;
  outline:none;
}
.outfit-stage{
  display:grid; gap:10px;
  grid-template-columns:1fr; align-items:stretch;
}
@media (min-width:720px){
  .outfit-stage{ grid-template-columns:repeat(3,1fr); }
}
.piece{
  margin:0; background:#fff; border-radius:16px; padding:10px;
  display:grid; grid-template-rows: 1fr auto; gap:6px; min-height:220px;
  border:1px solid #eee;
}
.piece img{ width:100%; height:100%; object-fit:contain; }
.piece figcaption{ text-align:center; color:var(--muted); font-size:14px; }

.stage-meta{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap }
.chip{
  padding:8px 10px; border-radius:999px; background:#eef2ff; color:#1e40af;
  font-size:13px;
}
.swipe-hint{
  margin-top:8px; color:var(--muted); display:flex; align-items:center; gap:6px; font-size:13px;
}

.controls{
  margin-top:12px; display:flex; gap:10px; align-items:center; justify-content:center;
}

.liked-panel{
  margin-top:14px;
}
.liked-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px;
}
@media (min-width:720px){
  .liked-grid{ grid-template-columns:repeat(4,1fr); }
}
.liked{
  border:1px solid #eee; border-radius:12px; background:#fff; overflow:hidden;
}
.liked .row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:#fafafa;
}
.liked img{ width:100%; height:100px; object-fit:cover; display:block; background:#f3f4f6; }
.liked footer{
  padding:8px; display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--muted);
}
.liked .del-like{
  border:none; background:transparent; color:var(--danger); cursor:pointer;
}

.snackbar{
  pointer-events:none;
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px);
  background:#111; color:#fff; padding:10px 14px; border-radius:999px;
  opacity:0; transition: all .25s ease; font-size:14px;
  box-shadow: var(--shadow-3);
}
.snackbar.show{
  opacity:1; transform:translateX(-50%) translateY(0);
}