:root {
  --radius:16px;
}

/* Dark theme */
[data-theme="dark"] {
  --bg: #0b0c10;       /* app background */
  --panel: #1a1d23;    /* card surfaces, a bit lighter than bg */
  --border: #2a2e37;   /* subtle border gray */
  --muted: #9aa0a6;
  --text: #e8eaed;     /* primary text */
  --brand: #8ab4f8;    /* accent blue */
  --accent: #34a853;   /* success green */
  --danger: #ea4335;   /* error red */
}

/* Light theme */
[data-theme="light"] {
  --bg: #f8f9fa;       /* very light gray, not pure white */
  --panel: #ffffff;    /* card surfaces */
  --border: #e0e3e7;   /* neutral border */
  --muted: #5f6368;    /* muted text */
  --text: #202124;     /* strong text */
  --brand: #1a73e8;    /* Google blue */
  --accent: #188038;   /* green */
  --danger: #d93025;   /* red */
}

/* Adjust primary button background for light mode */
[data-theme="light"] .btn {
  background: color-mix(in srgb, var(--brand) 80%, white 20%);
  color: #fff; /* keep text legible */
}

[data-theme="light"] .btn:hover {
  background: color-mix(in srgb, var(--brand) 70%, black 10%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1000px;margin:0 auto;padding:20px}
.header,.footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.header nav a{margin-left:16px;padding:6px 2px;display:inline-block}
.header nav a.active{border-bottom:2px solid var(--brand);padding-bottom:2px;opacity:1}
.header nav a{opacity:.9}
.logo{font-weight:700}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;background:var(--brand);color:#09101a;font-weight:700;border:0;cursor:pointer;min-height:44px}
.btn.secondary{background:#a6e3a1;color:#0a0f14}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text);padding:10px 14px;font-weight:600}
.btn:disabled{opacity:.6;cursor:not-allowed}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.8rem;background:var(--panel);color:var(--brand)}
.progress{height:8px;background:var(--border);border-radius:999px;overflow:hidden}
.progress > div{height:100%;background:var(--accent);width:0%}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
input[type="radio"]{accent-color:var(--brand)}
ul.clean{list-style:none;margin:0;padding:0}
img.thumb{width:100%;height:160px;object-fit:cover;border-radius:12px;background:var(--panel)}
.field{padding:12px;border-radius:12px;background:var(--panel);border:1px solid var(--border)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 10px;border-radius:999px;border:1px solid var(--border);cursor:pointer}
.chip.active{background:var(--brand);color:#fff}
small.muted{color:var(--muted)}
.footer{opacity:.8}
code.inline{background:var(--panel);border:1px solid var(--border);padding:2px 6px;border-radius:6px}

/* selection cards */
.select-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.select-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px;cursor:pointer;transition:transform .08s ease,border-color .12s ease,box-shadow .12s ease}
.select-card:hover{transform:translateY(-1px);border-color:var(--brand);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.select-card.selected{border-color:var(--brand);box-shadow:0 0 0 2px rgba(138,180,248,.15) inset}
.select-card img.avatar{width:72px;height:72px;border-radius:12px;display:block;background:var(--panel);margin-bottom:10px}
.select-card .title{font-weight:700;margin-bottom:6px}
.subtle{color:var(--muted);font-size:.9rem}

/* Results Page Enhancements */

/* Product card */
.results-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.results-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Product image */
.results-card img.thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
  background: var(--panel);
}

/* Title */
.results-card h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

/* Affiliate button inside card */
.results-card a.btn {
  margin-top: auto; /* pushes button to bottom */
  text-align: center;
}

/* Confidence bar */
.confidence-bar {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
  margin: 6px 0 12px 0;
}
.confidence-bar > div {
  height: 100%;
  transition: width .3s;
}

/* Confidence colors */
.confidence-high { background: #34a853; }   /* green */
.confidence-mid  { background: #fbbc04; }   /* amber */
.confidence-low  { background: #ea4335; }   /* red */

/* Chat bubbles */
.msg { display:flex; margin:6px 0; }
.msg.user { justify-content:flex-end; }
.msg.assistant { justify-content:flex-start; }

.bubble {
  max-width:70%;
  padding:10px 14px;
  border-radius:16px;
  line-height:1.45;
  font-size:.95rem;
}

.msg.user .bubble {
  background: var(--brand);
  color:#fff;
  border-bottom-right-radius:4px;
}

.msg.assistant .bubble {
  background: var(--panel);
  color: var(--text);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;
}

.msg .bubble em { opacity:.9; font-style:italic; }
.msg .bubble strong { font-weight:600; }

/* Helper two-pane layout */
.helper-grid {
  grid-template-columns: 1fr 1.2fr; /* left selector, right results */
  gap: 20px;
}
.helper-left .helper-title { margin: 0; }
.helper-subtitle { margin: 0 0 8px 0; font-size: 1rem; font-weight: 600; }
.helper-section + .helper-section { margin-top: 8px; }
.sel-count { font-weight: 600; }

/* Pills for suggestions in empty state */
.pill {
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-size:.85rem;
}

/* Results cards (reuse from results page) */
.results-card {
  display:flex; flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.results-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.results-card img.thumb {
  width:100%; height:180px; object-fit:cover;
  border-radius:12px; margin-bottom:12px; background:var(--panel);
}
.results-card h3 { margin:0 0 8px 0; font-size:1.1rem; font-weight:600; color:var(--text); }

/* Confidence bar */
.confidence-bar { height:8px; border-radius:999px; overflow:hidden; background:var(--border); margin:6px 0 12px 0; }
.confidence-bar > div { height:100%; transition:width .3s; }
.confidence-high { background:#34a853; }
.confidence-mid  { background:#fbbc04; }
.confidence-low  { background:#ea4335; }

/* Empty state */
.empty-state { background:var(--panel); border:1px dashed var(--border); border-radius:12px; padding:12px; }
.empty-state p { margin:.25rem 0; }

/* Selects (match .field look) */
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  line-height: 1.2;
  min-width: 180px;
}
.select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Helper two-pane layout (already added earlier, here for completeness) */
.helper-grid {
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
}
.helper-left .helper-title { margin: 0; }
.helper-subtitle { margin: 0 0 8px 0; font-size: 1rem; font-weight: 600; }
.helper-section + .helper-section { margin-top: 8px; }
.sel-count { font-weight: 600; }

.pill {
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-size:.85rem;
}

.results-card {
  display:flex; flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.results-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.results-card img.thumb {
  width:100%; height:180px; object-fit:cover;
  border-radius:12px; margin-bottom:12px; background:var(--panel);
}
.results-card h3 { margin:0 0 8px 0; font-size:1.1rem; font-weight:600; color:var(--text); }

.empty-state { background:var(--panel); border:1px dashed var(--border); border-radius:12px; padding:12px; }
.empty-state p { margin:.25rem 0; }

/* ==== Category tints: tokens only (no layout impact) ==== */

/* Light theme tints (soft) */
[data-theme="light"] {
  --cat-personal-bg:  #fde7ef;  --cat-personal-fg:  #8a3458;  --cat-personal-bd:  #f7cfe0;
  --cat-experience-bg:#fff1e6;  --cat-experience-fg:#8a4d2b;  --cat-experience-bd:#ffd9bf;
  --cat-gadget-bg:    #eaf2ff;  --cat-gadget-fg:    #274e96;  --cat-gadget-bd:    #d6e4ff;
  --cat-practical-bg: #e9f4ee;  --cat-practical-fg: #295a45;  --cat-practical-bd: #d3e9dd;
  --cat-luxury-bg:    #f2ecff;  --cat-luxury-fg:    #5a3d8f;  --cat-luxury-bd:    #e2d7ff;
  --cat-fun-bg:       #e9fbf1;  --cat-fun-fg:       #1f6b47;  --cat-fun-bd:       #c8f0da;
}

/* Dark theme tints (tasteful, readable) */
[data-theme="dark"] {
  --cat-personal-bg:  #2a1c25;  --cat-personal-fg:  #f4b6cf;  --cat-personal-bd:  #3b2834;
  --cat-experience-bg:#2b211b;  --cat-experience-fg:#f2c7a6;  --cat-experience-bd:#3a2c23;
  --cat-gadget-bg:    #1b2534;  --cat-gadget-fg:    #bcd2ff;  --cat-gadget-bd:    #253147;
  --cat-practical-bg: #14241d;  --cat-practical-fg: #b8e3cf;  --cat-practical-bd: #1e2f27;
  --cat-luxury-bg:    #241c33;  --cat-luxury-fg:    #d8c7fb;  --cat-luxury-bd:    #2f2642;
  --cat-fun-bg:       #132a26;  --cat-fun-fg:       #b5efe0;  --cat-fun-bd:       #1b3a34;
}

/* Category badge variants (inherits your .badge sizing & shape) */
.badge.cat-personal   { background: var(--cat-personal-bg);   color: var(--cat-personal-fg);   border:1px solid var(--cat-personal-bd); }
.badge.cat-experience { background: var(--cat-experience-bg); color: var(--cat-experience-fg); border:1px solid var(--cat-experience-bd); }
.badge.cat-gadget     { background: var(--cat-gadget-bg);     color: var(--cat-gadget-fg);     border:1px solid var(--cat-gadget-bd); }
.badge.cat-practical  { background: var(--cat-practical-bg);  color: var(--cat-practical-fg);  border:1px solid var(--cat-practical-bd); }
.badge.cat-luxury     { background: var(--cat-luxury-bg);     color: var(--cat-luxury-fg);     border:1px solid var(--cat-luxury-bd); }
.badge.cat-fun        { background: var(--cat-fun-bg);        color: var(--cat-fun-fg);        border:1px solid var(--cat-fun-bd); }

/* =========================
   Support banner (Buy me a coffee)
   ========================= */

/* Theme tokens for the banner (gentle contrast vs. page) */
[data-theme="light"] {
  --support-bg:    #fff8e6;   /* soft warm tint that pops on light bg */
  --support-bd:    #ffe2a8;   /* matching border */
  --support-cta:   #ff9f1a;   /* orange, high-visibility CTA */
  --support-cta-h: #e88f12;   /* hover */
}

[data-theme="dark"] {
  --support-bg:    #1c2230;   /* a bit cooler than panel to stand out */
  --support-bd:    #2a3242;
  --support-cta:   #ffb347;   /* warm CTA that reads on dark */
  --support-cta-h: #ffa22b;
}

.support-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background: var(--support-bg);
  border: 1px solid var(--support-bd);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 8px 0 18px 0;
}

.support-copy {
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
}

.support-emoji {
  font-size: 1.4rem;
  line-height: 1;
}

.support-text strong {
  display:block;
  margin-bottom: 2px;
}

.btn-support {
  background: var(--support-cta);
  color: #121212;
  border: 0;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .2px;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.btn-support:hover { background: var(--support-cta-h); }
.btn-support:focus { outline: 2px solid var(--support-cta); outline-offset: 2px; }

/* Responsive: stack on small screens */
@media (max-width: 640px) {
  .support-banner { flex-direction: column; align-items: stretch; }
  .btn-support { width: 100%; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Mini bars in rationale panel */
.mini-bar {
  height:6px;
  border-radius:999px;
  background:var(--border);
  margin:4px 0 10px 0;
}
.mini-bar > div {
  height:100%;
  background: var(--brand);
}

/* View Gift buttons (stronger CTA) */
.btn.view-gift {
  background:#ff9f1a;
  color:#121212;
  font-weight:800;
}
.btn.view-gift:hover { background:#e88f12; }

/* Make cards equal height inside the grid */
.grid.grid-2 {
  align-items: stretch;
}

/* Flex layout inside each card */
.card.stack {
  display: flex;
  flex-direction: column;
}

/* Push button to bottom */
.card.stack .btn.ghost {
  display: inline-block;
  margin-top: auto;
  text-align: center;
}

/* Hover/focus state */
.card.stack .btn.ghost:hover,
.card.stack .btn.ghost:focus {
  background: #0059c9;
  border-color: #0059c9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* === Fix unreadable form text in Helper (dark mode only, scoped) === */
[data-theme="dark"] .helper-left .field {
  color: var(--text) !important;      /* typed text */
  caret-color: var(--text) !important;
}
[data-theme="dark"] .helper-left .field::placeholder {
  color: var(--muted) !important;     /* placeholder contrast */
}

[data-theme="dark"] .helper-left .select {
  color: var(--text) !important;      /* collapsed select text */
  background: var(--panel) !important;
  border-color: var(--border);
}
[data-theme="dark"] .helper-left .select option {
  color: var(--text) !important;      /* dropdown menu items */
  background: var(--panel) !important;
}

/* --- Fix dim typed text in "Describe them" (dark mode, scoped) --- */
[data-theme="dark"] .helper-left #msg {
  color: var(--text) !important;               /* typed text color */
  -webkit-text-fill-color: var(--text) !important; /* Chrome/Safari force */
  caret-color: var(--text) !important;
  background: var(--panel) !important;         /* keep panel bg */
  border-color: var(--border) !important;
}

/* Make placeholder clearly different so it doesn't look like dim text */
[data-theme="dark"] .helper-left #msg::placeholder {
  color: var(--muted) !important;
  opacity: 1; /* some browsers reduce placeholder opacity */
}

/* In case the browser applies autofill styling */
[data-theme="dark"] .helper-left #msg:-webkit-autofill,
[data-theme="dark"] .helper-left #msg:-webkit-autofill:hover,
[data-theme="dark"] .helper-left #msg:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--panel) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Hint the UA to render dark dropdowns; helps selects/menus in Windows */
[data-theme="dark"] select { color-scheme: dark; }

/* Blog cards: keep layout flex so the Read button stays at bottom */
.grid.grid-2 .card { display:flex; flex-direction:column; }
.grid.grid-2 .card a.btn[href^="./blog/"] { margin-top:auto; align-self:flex-start; }

/* 1) Reserve three lines, no truncation */
.grid.grid-2 .card h3 {
  line-height: 1.25;
  min-height: calc(1.25em * 3);
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

/* 2) Tag style: remove border, keep subtle muted text */
.grid.grid-2 .card small.muted {
  display: inline-block;
  padding: 0;                       /* no pill padding */
  border: none;                     /* <-- remove border */
  background: transparent;
  color: var(--muted);
  text-transform: capitalize;       /* “budget” -> “Budget” */
  margin: 2px 0 10px;
}

.logo {
  font-family: "Schoolbell", sans-serif;
  font-weight: 550;
  font-size: 2rem;
  letter-spacing: -0.5px;
}