:root { --cust-primary: #4F46E5; --cust-bg: #F8FAFC; }

body.cust-body { background: var(--cust-bg); min-height: 100vh; }
.cust-main { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }

.cust-progress-wrap { height: 4px; background: #e2e8f0; }
.cust-progress-bar { height: 4px; background: var(--cust-primary); transition: width .3s; }

.cust-hero { text-align: center; padding: 60px 16px; }
.cust-hero h1 { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
.cust-hero p { color: #64748b; margin-bottom: 24px; }

.cust-card { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 20px; }

.cust-mood-grid, .cust-image-grid, .cust-tag-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 480px) {
  .cust-mood-grid, .cust-image-grid, .cust-tag-grid { grid-template-columns: repeat(2, 1fr); }
}

.cust-mood-card, .cust-tag-card {
  border: 2px solid #e2e8f0; border-radius: 14px; padding: 16px 8px; text-align: center;
  cursor: pointer; transition: all .15s; background: #fff;
}
.cust-mood-card .emoji { font-size: 28px; display: block; margin-bottom: 6px; }
.cust-mood-card.selected, .cust-tag-card.selected { border-color: var(--cust-primary); background: #eef2ff; }

.cust-image-pick {
  position: relative; border-radius: 14px; overflow: hidden; cursor: pointer; border: 3px solid transparent;
  aspect-ratio: 1;
}
.cust-image-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cust-image-pick.selected { border-color: var(--cust-primary); }
.cust-image-pick .check {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center; color: var(--cust-primary);
  opacity: 0; transition: opacity .15s;
}
.cust-image-pick.selected .check { opacity: 1; }

.cust-zoom-btn {
  position: absolute; bottom: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: none; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; z-index: 2;
}
.cust-zoom-btn:active { background: rgba(0,0,0,.75); }

.cust-btn-primary {
  background: var(--cust-primary); color: #fff; border: none; border-radius: 999px;
  padding: 12px 28px; font-weight: 600; width: 100%;
}
.cust-btn-secondary {
  background: #fff; color: #334155; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 12px 28px; font-weight: 600; width: 100%;
}

.cust-result-card { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.cust-result-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cust-result-badge {
  position: absolute; top: 8px; left: 8px; background: var(--cust-primary); color: #fff;
  font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
}