/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #f4f1ff;
  --bg2:         #ede9ff;
  --card:        #ffffff;
  --border:      #e0d9ff;
  --text:        #1e1b4b;
  --text-muted:  #7c71b8;
  --accent:      #6d28d9;
  --accent2:     #a855f7;
  --accent-soft: rgba(109,40,217,.12);
  --accent-glow: rgba(168,85,247,.4);
  --green:       #059669;
  --green-bg:    #d1fae5;
  --yellow:      #d97706;
  --yellow-bg:   #fef3c7;
  --orange:      #ea580c;
  --orange-bg:   #ffedd5;
  --red:         #dc2626;
  --red-bg:      #fee2e2;
  --radius:      20px;
  --shadow:      0 4px 24px rgba(109,40,217,.10);
  --shadow-lg:   0 8px 40px rgba(109,40,217,.16);
}

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ===== Header ===== */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: linear-gradient(135deg, #6d28d9 0%, #a855f7 100%);
  box-shadow: 0 2px 16px rgba(109,40,217,.35);
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.5px;
}

.header-stats { display: flex; gap: 28px; }

.stat { display: flex; flex-direction: column; align-items: flex-end; }

.stat-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.7);
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ===== Progress bar ===== */
.progress-bar { height: 5px; background: #e9d5ff; }

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #f97316, #ec4899);
  transition: width .6s cubic-bezier(.4,0,.2,1);
  width: 0%;
  border-radius: 0 3px 3px 0;
}

/* ===== Main ===== */
main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 20px 40px;
}

.screen { width: 100%; max-width: 620px; }
.hidden { display: none !important; }

/* ===== Loading ===== */
#screen-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
  gap: 20px;
  color: var(--text-muted);
  font-size: 1rem;
}

.spinner {
  width: 52px; height: 52px;
  border: 5px solid var(--bg2);
  border-top-color: var(--accent2);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Product Card ===== */
.product-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: slideUp .4s cubic-bezier(.4,0,.2,1);
}

@keyframes slideUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Product image — large and prominent */
.product-image-wrap {
  width: 100%;
  height: 340px;
  background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Decorative circles behind image */
.product-image-wrap::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,.08) 0%, transparent 70%);
  pointer-events: none;
}

#product-img {
  max-width: 90%;
  max-height: 310px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(109,40,217,.18));
  position: relative;
  z-index: 1;
  transition: transform .3s ease;
}

#product-img:hover { transform: scale(1.03); }

.no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
}
.no-image span { font-size: 4rem; }
.no-image p    { font-size: .9rem; }

/* Product info */
.product-info {
  padding: 18px 22px 14px;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-info h2 {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
}

/* Tags */
.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tag {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.tag-brand { background: #ede9fe; color: #7c3aed; }
.tag-qty   { background: #cffafe; color: #0e7490; }
.tag-cat   { background: #fef3c7; color: #92400e; }

/* Nutri / Eco badges */
.nutri-badge, .eco-badge {
  font-size: .68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
}
.nutri-a  { background: #059669; }
.nutri-b  { background: #34d399; color: #065f46; }
.nutri-c  { background: #fbbf24; color: #78350f; }
.nutri-d  { background: #f97316; }
.nutri-e  { background: #dc2626; }

.eco-a-plus { background: #064e3b; }
.eco-a      { background: #059669; }
.eco-b      { background: #34d399; color: #065f46; }
.eco-c      { background: #fbbf24; color: #78350f; }
.eco-d      { background: #f97316; }
.eco-e      { background: #dc2626; }

/* Store badge */
.store-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #ede9fe, #fdf4ff);
  border: 1.5px solid #ddd6fe;
  border-radius: 12px;
  padding: 10px 14px;
}
.store-badge.hidden { display: none; }

.store-icon { font-size: 1.3rem; flex-shrink: 0; }
.store-text { display: flex; flex-direction: column; gap: 1px; }
.store-name { font-size: .95rem; font-weight: 800; color: var(--accent); line-height: 1.2; }
.store-location { font-size: .75rem; color: var(--text-muted); }

/* ===== Guess section ===== */
.guess-section {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.guess-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
}

/* Single price input */
.price-input-row {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 2.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.price-input-row:focus-within {
  border-color: var(--accent2);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.price-currency {
  padding: 0 4px 0 20px;
  font-size: 2rem;
  font-weight: 300;
  color: var(--text-muted);
  flex-shrink: 0;
  user-select: none;
}

#price-input {
  flex: 1;
  height: 76px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 2.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 0 20px 0 8px;
  text-align: right;
  -moz-appearance: textfield;
}

#price-input::-webkit-inner-spin-button,
#price-input::-webkit-outer-spin-button { -webkit-appearance: none; }

#price-input::placeholder { color: #d8d0f0; }

/* ===== Button ===== */
.btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s, box-shadow .2s, filter .15s;
  letter-spacing: .04em;
}
.btn:active { transform: scale(.96); }

.btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(124,58,237,.45);
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 28px rgba(124,58,237,.55);
}

/* ===== Result Card ===== */
.result-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: slideUp .4s cubic-bezier(.4,0,.2,1);
}

.result-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.result-img-wrap {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1.5px solid var(--border);
}

.result-img-wrap img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.result-product-info { flex: 1; }
.result-product-info h3 { font-size: 1rem; font-weight: 800; line-height: 1.3; margin-bottom: 4px; color: var(--text); }
.result-product-info p  { font-size: .8rem; color: var(--text-muted); }

/* Price comparison */
.price-comparison {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.price-box {
  flex: 1;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}

.price-box-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}

.price-box-value {
  font-size: 1.6rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.guess-box  { border-color: #ddd6fe; background: #faf5ff; }
.actual-box { border-color: #a7f3d0; background: #ecfdf5; }

.guess-box  .price-box-value { color: #7c3aed; }
.actual-box .price-box-value { color: #059669; }

.vs {
  font-size: .85rem;
  color: var(--text-muted);
  font-weight: 800;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Score */
.result-score {
  text-align: center;
  padding: 12px;
  background: var(--bg);
  border-radius: 14px;
  border: 1.5px solid var(--border);
}

.points-earned {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}

.accuracy-label { font-size: .9rem; color: var(--text-muted); margin-top: 6px; }

/* ===== Final Card ===== */
.final-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: slideUp .4s cubic-bezier(.4,0,.2,1);
  text-align: center;
}

.final-card h2 { font-size: 2rem; font-weight: 900; color: var(--text); }

.final-score-wrap { display: flex; align-items: baseline; gap: 8px; }

.final-score {
  font-size: 5rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -4px;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.final-max { font-size: 1.2rem; color: var(--text-muted); }

.final-stars { font-size: 2.2rem; letter-spacing: 6px; min-height: 2.8rem; }

.final-msg { color: var(--text-muted); font-size: 1rem; max-width: 340px; }

/* ===== Score color helpers ===== */
.score-great { color: var(--green)  !important; }
.score-good  { color: var(--yellow) !important; }
.score-ok    { color: var(--orange) !important; }
.score-bad   { color: var(--red)    !important; }

/* Override for final score gradient */
.final-score.score-great {
  background: linear-gradient(135deg, #059669, #10b981);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.final-score.score-good {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.final-score.score-ok {
  background: linear-gradient(135deg, #ea580c, #f97316);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.final-score.score-bad {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== Input error shake ===== */
.input-error {
  animation: shake .4s cubic-bezier(.36,.07,.19,.97);
  border-color: var(--red) !important;
}
@keyframes shake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* ===== Responsive ===== */
@media (max-width: 520px) {
  header { padding: 12px 18px; }
  .logo  { font-size: 1.15rem; }
  main   { padding: 16px 12px 32px; }
  .product-image-wrap { height: 260px; }
  #price-input { font-size: 2rem; height: 66px; }
  .price-currency { font-size: 1.6rem; }
  .final-score { font-size: 3.8rem; }
  .points-earned { font-size: 2.4rem; }
}