:root {
  --bg:          #0f1419;
  --card:        #1a2028;
  --text:        #e8eaed;
  --muted:       #9aa0a6;
  --accent:      #ffcb05;
  --accent-text: #1a1a1a;
  --green:       #4caf50;
  --red:         #f44336;
  --border:      #2d3748;
  --topbar-h:    56px;
  --tabbar-h:    62px;
  color-scheme:  dark;
}

[data-theme="light"] {
  --bg:          #fafafa;
  --card:        #ffffff;
  --text:        #1a1a1a;
  --muted:       #6b7280;
  --accent:      #f59e0b;
  --accent-text: #1a1a1a;
  --green:       #16a34a;
  --red:         #dc2626;
  --border:      #e5e7eb;
  color-scheme:  light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  overscroll-behavior-y: none;
}

/* ── Public pages (landing, pricing) ──────────────────────────────────────── */
body.page-public { min-height: 100vh; display: flex; flex-direction: column; }

.public-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.public-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.public-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.public-nav a:hover { color: var(--text); }

.public-nav .btn-cta {
  background: var(--accent);
  color: var(--accent-text);
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  font-weight: 600;
}

/* Mobile: stack the public header vertically — logo gecentreerd boven,
   nav-links eronder. Voorkomt overflow op smalle schermen. */
@media (max-width: 600px) {
  .public-header {
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
  }
  .brand {
    font-size: 1.2rem;
  }
  .public-nav {
    width: 100%;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .public-nav a { font-size: 0.85rem; }
  .public-nav .btn-cta { padding: 0.35rem 0.7rem; }
  .lang-switch {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
  }
}

.lang-switch {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  width: auto;
}

.lang-switch option {
  background: var(--card);
  color: var(--text);
}

.public-main {
  flex: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

.public-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 1.5rem 1rem 2rem;
  border-top: 1px solid var(--border);
}

.public-footer p { margin: 0; }

/* Hero */
.hero {
  text-align: center;
  padding: 2rem 0 3rem;
}

.hero h1 {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  margin: 0 0 1rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.hero-sub {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 auto 2rem;
}

.hero-cta {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
}
.btn-primary:hover { opacity: 0.85; }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--accent); }

.btn-large { padding: 1rem 2rem; font-size: 1.05rem; }

/* Features */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  padding: 2rem 0;
}

.feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
}

.feature h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.feature p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.cta-strip {
  text-align: center;
  padding: 2rem 0 1rem;
}

/* Pricing */
.pricing-header {
  text-align: center;
  padding: 1rem 0 2rem;
}

.pricing-header h1 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  margin: 0 0 0.5rem;
}

.pricing-header p {
  color: var(--muted);
  margin: 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem 0 2rem;
}

@media (min-width: 600px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .pricing-grid { grid-template-columns: repeat(4, 1fr); }
}

.tier {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.tier-popular {
  border-color: var(--accent);
}

.tier-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.tier h2 {
  font-size: 1.2rem;
  margin: 0;
  font-weight: 700;
  text-transform: none;
  color: var(--text);
  letter-spacing: 0;
}

.tier-tag {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.tier-price {
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0.5rem 0 0;
  color: var(--accent);
}

.tier-price .per {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
  margin-left: 0.2rem;
}

.tier-yearly {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

.tier ul {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
  flex: 1;
}

.tier li {
  font-size: 0.9rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  padding-left: 1.4rem;
}

.tier li::before {
  content: "✓";
  color: var(--green);
  position: absolute;
  left: 0;
  top: 0.35rem;
  font-weight: 700;
}

.tier li:last-child { border-bottom: none; }

.tier .btn-primary, .tier .btn-secondary {
  text-align: center;
  margin-top: 0.5rem;
}

.pricing-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 1rem 0 0;
}


/* ── Layout: fixed topbar + scrollable content + fixed tab bar ─────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  padding-top: env(safe-area-inset-top);
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.topbar h1 {
  font-size: 1.15rem;
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.topbar-actions { display: flex; gap: 0.4rem; }

.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 36px; /* height − 2× border */
  text-align: center;
  text-indent: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-block;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.icon-btn:hover { border-color: var(--accent); }

.views {
  padding: calc(var(--topbar-h) + env(safe-area-inset-top) + 0.75rem) 1rem
           calc(env(safe-area-inset-bottom) + 1.5rem);
  max-width: 540px;
  margin: 0 auto;
}

.view { animation: fadein 0.15s; }
.view[hidden] { display: none; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Tab bar ──────────────────────────────────────────────────────────────── */
.tab-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--card);
  border-top: 1px solid var(--border);
  z-index: 10;
}

.tab {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
}

.tab-icon { font-size: 1.3rem; line-height: 1; }
.tab-label { font-size: 0.7rem; }

.tab.active {
  color: var(--accent);
}

/* ── Sub-tabs binnen Zoek-view ────────────────────────────────────────────── */
.sub-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.sub-tab {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 10px;
  padding: 0.55rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.sub-tab.active {
  border-color: var(--accent);
  color: var(--text);
  background: var(--card);
  font-weight: 600;
}

.sub-view[hidden] { display: none; }

/* ── Card containers ──────────────────────────────────────────────────────── */
.card, .views > .view > .card,
.sub-view > .card,
.sub-view > section.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 0.85rem;
}

.hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
}

/* ── Form inputs ──────────────────────────────────────────────────────────── */
form.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="file"], select, textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}

input[type="file"] { padding: 0.5rem; cursor: pointer; }
textarea {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  resize: vertical;
  min-height: 110px;
  font-size: 0.95rem;
}

input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
}

button {
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
button:hover { opacity: 0.85; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Form button below inputs */
.card > button { margin-top: 0.25rem; }

/* ── Search result ────────────────────────────────────────────────────────── */
#result, #photo-result {
  margin-top: 0.85rem;
}

.result {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
}

.result-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.result-name { font-size: 1.4rem; font-weight: 700; margin: 0; }
.result-meta { color: var(--muted); font-size: 0.9rem; margin: 0; }
.result-id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  color: var(--accent);
  margin: 0;
}

.identified-banner {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--green);
  margin-bottom: 0.75rem;
}

.result-image {
  width: 100%;
  max-width: 280px;
  border-radius: 10px;
  display: block;
  margin: 0 auto 1rem;
}

.price-section { margin: 1rem 0; }

.price-section h3 {
  font-size: 0.8rem;
  margin: 0 0 0.5rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.price-row:last-child { border-bottom: none; }
.price-label { color: var(--muted); font-size: 0.95rem; }
.price-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.price-value.big { font-size: 1.2rem; color: var(--accent); }

.cond-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.3rem 0 1rem;
}
.cond-pill {
  flex: 0 0 auto;
  min-width: 2.6rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.cond-pill:hover { border-color: var(--accent); }
.cond-pill.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.metrics-section {
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.4rem 0.8rem;
}
.metrics-section > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
  list-style: none;
  padding: 0.3rem 0;
}
.metrics-section[open] > summary { color: var(--text); margin-bottom: 0.3rem; }
.metrics-section .price-row { padding: 0.35rem 0; font-size: 0.9rem; }

.button-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.button-row a {
  flex: 1 1 calc(50% - 0.25rem);
  min-width: 120px;
  text-align: center;
  padding: 0.65rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.button-row a:hover { border-color: var(--accent); }

.error, .loading {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  text-align: center;
}
.error { color: var(--red); }
.loading { color: var(--muted); }

/* ── Disambiguation options ───────────────────────────────────────────────── */
.options-list { display: flex; flex-direction: column; gap: 0.5rem; }

.option-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "code name" "code set";
  column-gap: 0.75rem;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
}
.option-btn:hover { border-color: var(--accent); }
.option-code { grid-area: code; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; color: var(--accent); font-weight: 600; }
.option-name { grid-area: name; font-weight: 600; }
.option-set  { grid-area: set;  color: var(--muted); font-size: 0.85rem; }

/* ── Trends + Bulk row ────────────────────────────────────────────────────── */
.trends-controls {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.trends-controls button { padding: 0.55rem 1rem; }

#bulk-result, #trends-result {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bulk-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem;
}
.bulk-row.notfound { grid-template-columns: 1fr; opacity: 0.6; }

/* ── Drops ────────────────────────────────────────────────────────────────── */
#drops-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }

.drop-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
}

.drop-naam { font-weight: 600; }
.drop-meta { color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }
.drop-meta .pos { color: var(--green); font-weight: 600; }
.drop-meta .neg { color: var(--red); font-weight: 600; }

#drops-form input[type="text"] { margin-bottom: 0.5rem; }

/* ── Portfolio ────────────────────────────────────────────────────────────── */
.pf-add-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}

.pf-add-row button {
  white-space: nowrap;
  padding: 0.75rem 1.1rem;
}

.portfolio-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.pf-tabs { grid-column: 1 / -1; display: flex; gap: 0.5rem; }
.pf-tab {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 0.55rem;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.pf-tab.active { border-color: var(--accent); color: var(--text); background: var(--card); }

.portfolio-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-link {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.footer-link:hover { color: var(--text); border-color: var(--text); }

#portfolio-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }

.portfolio-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem;
}

.pf-thumb {
  width: 44px; height: 60px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--card);
  flex-shrink: 0;
}
.pf-thumb-empty {
  width: 44px; height: 60px;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--border);
}

.pf-main { min-width: 0; }
.pf-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-code { color: var(--accent); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8rem; }

.pf-prices {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 130px;
}

.pf-price-row { display: flex; justify-content: space-between; gap: 0.75rem; }
.pf-price-row > span:first-child { color: var(--muted); }
.pf-price-row > span:last-child { font-weight: 500; }
.pf-pl.pos > span:last-child { color: var(--green); }
.pf-pl.neg > span:last-child { color: var(--red); }

.pf-actions { display: flex; flex-direction: column; gap: 0.25rem; }
.pf-remove, .pf-sell, .pf-reopen, .pf-history, .pf-alert {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 32px; height: 32px;
  font-size: 1rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}
.pf-remove:hover  { color: var(--red);    border-color: var(--red); }
.pf-sell:hover    { color: var(--green);  border-color: var(--green); }
.pf-reopen:hover  { color: var(--accent); border-color: var(--accent); }
.pf-history:hover { color: var(--accent); border-color: var(--accent); }
.pf-alert:hover   { color: var(--accent); border-color: var(--accent); }

.portfolio-total {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.portfolio-total .pf-price-row { padding: 0.25rem 0; }
.portfolio-total .pf-pl > span:last-child { font-weight: 700; font-size: 1.05rem; }

/* ── AI Grading ───────────────────────────────────────────────────────────── */
.grade-label { display: block; font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0 0.25rem; font-weight: 500; }
#grade-result { margin-top: 1rem; }

.grade-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.grade-est {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.grade-est span { color: var(--muted); font-size: 0.8rem; }
.grade-est strong { font-size: 1.05rem; color: var(--accent); }

.grade-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.5rem;
}
.grade-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem; }
.grade-score { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.grade-score.pos { color: var(--green); }
.grade-score.neg { color: var(--red); }
.grade-notes { color: var(--muted); font-size: 0.85rem; }
.grade-centering-detail { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; }

.grade-warnings {
  background: rgba(244, 67, 54, 0.08);
  border: 1px solid rgba(244, 67, 54, 0.3);
  color: var(--red);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

/* ── Settings drawer ──────────────────────────────────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer[hidden] { display: none; }

.drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  animation: fadein 0.15s;
}

.drawer-panel {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: min(360px, 85%);
  background: var(--card);
  border-left: 1px solid var(--border);
  padding: 1rem;
  padding-top: calc(1rem + env(safe-area-inset-top));
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  animation: slidein 0.2s ease-out;
}

@keyframes slidein {
  from { transform: translateX(100%); }
  to   { transform: none; }
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.drawer-header h2 { margin: 0; font-size: 1.05rem; }

.drawer-info {
  color: var(--muted);
  font-size: 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  margin: 0 0 1rem;
}

.drawer-actions { display: flex; flex-direction: column; gap: 0.4rem; }

.drawer-pref {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.4rem;
}

.drawer-pref label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.drawer-pref select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font-size: 0.9rem;
}

/* 2FA dialog */
#2fa-dialog { max-width: 420px; max-height: 90vh; overflow-y: auto; }

.qr-wrap {
  background: #fff;
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  justify-content: center;
  margin: 0.5rem 0;
}

.qr-wrap svg {
  max-width: 200px;
  height: auto;
  display: block;
}

.tfa-secret {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.95rem;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  text-align: center;
  letter-spacing: 0.05em;
}

.recovery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin: 0.5rem 0;
}

.recovery-grid code {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  text-align: center;
  user-select: all;
}

/* Admin */
.admin-section { margin-bottom: 1rem; }
.admin-section + .admin-section { margin-top: 1rem; }
.admin-h { margin: 0 0 0.5rem; font-size: 1.05rem; }

/* Stats dashboard */
.stats-sub {
  margin: 1.2rem 0 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stats-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.6rem;
  margin: 0.5rem 0;
}
.kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
}
.kpi-num {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kpi-num.pos { color: var(--green); }
.kpi-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}
.stats-funnel { display: flex; flex-direction: column; gap: 0.3rem; }
.funnel-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.4rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
}
.funnel-row strong { font-variant-numeric: tabular-nums; }
.funnel-row .muted { color: var(--muted); font-size: 0.8rem; min-width: 3.5rem; text-align: right; }

.stats-tiers { display: flex; flex-direction: column; gap: 0.4rem; }
.tier-row { display: flex; flex-direction: column; gap: 0.2rem; }
.tier-row-label { font-size: 0.85rem; }
.tier-row-label .muted { color: var(--muted); font-size: 0.75rem; margin-left: 0.4rem; }
.tier-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.tier-bar-fill { height: 100%; transition: width 0.3s; }

#manual-card-dialog { max-width: 480px; }
#manual-card-form input { display: block; width: 100%; margin: 0.3rem 0; }
#manual-card-form details summary { cursor: pointer; padding: 0.3rem 0; }

.search-log-controls {
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.search-log-controls input {
  flex: 1;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
}
.search-kind { font-size: 0.75rem; color: var(--muted); font-weight: 500; }
.search-time { font-size: 0.7rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.trial-urgent {
  background: rgba(255, 203, 5, 0.12);
  border: 1px solid rgba(255, 203, 5, 0.5);
  color: var(--text);
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  margin-top: 0.4rem;
}

/* Language picker (topbar) */
.lang-picker { position: relative; }
.lang-picker .icon-btn { font-size: 1.2rem; }
.lang-picker-menu[hidden] { display: none; }
.lang-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.3rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.lang-option {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 0.5rem 0.7rem;
  border-radius: 7px;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}
.lang-option:hover { background: var(--border); }
.lang-option.active { background: var(--border); font-weight: 600; }

.trial-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.55rem 1rem;
  background: linear-gradient(90deg, #ffcb05 0%, #ffa84a 100%);
  color: #1a1a1a;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  flex-wrap: wrap;
}
.trial-banner.urgent {
  background: linear-gradient(90deg, #ff6b6b 0%, #ffa84a 100%);
  color: #fff;
}
.trial-banner-cta {
  background: rgba(0,0,0,0.15);
  color: inherit;
  padding: 0.25rem 0.7rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.trial-banner-cta:hover { background: rgba(0,0,0,0.28); }
.trial-banner-dismiss {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.3rem;
  line-height: 1;
  opacity: 0.7;
}
.trial-banner-dismiss:hover { opacity: 1; }

/* Back-knop (topbar) — SVG chevron, gecentreerd in de circulaire icon-btn. */
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.2rem;
  line-height: 1;
}
.back-btn[hidden] { display: none; }
.back-btn svg { display: block; }

/* Brand-knop (topbar → home) */
.brand-btn {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  font-family: inherit;
  margin: 0;
}
.brand-btn:hover { opacity: 0.85; }

/* Portfolio-waarde in topbar */
.topbar-pf {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.25rem 0.6rem;
  margin-left: 0.5rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.topbar-pf:hover { border-color: var(--accent); }
.topbar-pf[hidden] { display: none; }
.topbar-pf .pos { color: var(--green); font-weight: 600; }
.topbar-pf .neg { color: var(--red);   font-weight: 600; }
@media (max-width: 480px) {
  .topbar-pf { font-size: 0.75rem; padding: 0.2rem 0.45rem; }
  .topbar-pf .pos, .topbar-pf .neg { display: none; }
}

/* Home tile-grid */
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  padding: 1rem 0.5rem;
}
.home-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.1rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.08s, border-color 0.15s, background 0.15s;
}
.home-tile:hover, .home-tile:focus { text-decoration: none; }
.home-tile:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.home-tile:active { transform: translateY(0); }
.home-tile-icon  { font-size: 1.7rem; line-height: 1; }
.home-tile-label { font-size: 1rem; font-weight: 700; }
.home-tile-hint  { font-size: 0.78rem; color: var(--muted); }
.home-tile-vendor { position: relative; border-color: rgba(255, 203, 5, 0.4); }
.home-tile-vendor:hover { border-color: var(--accent); }
.home-tile-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--accent);
  color: #1a1a1a;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
@media (min-width: 600px) {
  .home-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Price history modal + sparkline */
#price-history-dialog { max-width: 600px; }
.price-history-chart {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem;
  margin: 0.5rem 0;
}
.sparkline { width: 100%; height: auto; display: block; }

/* Portfolio quantity input + chip */
.pf-qty-input { max-width: 80px; }
.pf-qty-chip {
  display: inline-block;
  background: var(--border);
  color: var(--text);
  padding: 0.05rem 0.45rem;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 0.25rem;
  vertical-align: middle;
}

/* Portfolio grade chip */
.pf-grade-chip {
  display: inline-block;
  background: var(--accent);
  color: #1a1a1a;
  padding: 0.05rem 0.45rem;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 0.3rem;
  vertical-align: middle;
}

/* Multi-portfolio selector */
.pf-portfolio-select {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.7rem;
}
.pf-portfolio-select select {
  flex: 1;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
}
.pf-portfolio-btn {
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
}
.pf-portfolio-btn:hover { border-color: var(--accent); }

/* Legal pages (privacy, terms) */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  line-height: 1.6;
}
.legal-page h1 { margin: 0 0 0.5rem; font-size: 1.8rem; }
.legal-page h2 { margin: 1.8rem 0 0.5rem; font-size: 1.15rem; }
.legal-page p, .legal-page li { color: var(--text); }
.legal-page ul { padding-left: 1.2rem; }
.legal-page li { margin: 0.25rem 0; }
.legal-page a { color: var(--accent); }
.legal-page em { color: var(--muted); font-style: normal; background: var(--border); padding: 0 0.3rem; border-radius: 4px; }

/* Billing toggle (pricing page) */
.billing-toggle {
  display: inline-flex;
  margin: 1rem auto 0;
  padding: 0.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.billing-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.billing-toggle-btn:hover { color: var(--accent); }
.billing-toggle-btn.active {
  background: var(--accent);
  color: #1a1a1a;
}
.billing-save {
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(0,0,0,0.18);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.billing-toggle-btn.active .billing-save {
  background: rgba(0,0,0,0.25);
}

/* Status page */
.status-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1rem;
}
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.status-label { font-weight: 500; }
.status-value { color: var(--muted); font-size: 0.9rem; }

/* Developer docs */
.docs-page h3 { margin: 1.2rem 0 0.4rem; font-size: 0.95rem; color: var(--muted); }
.docs-page pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.4rem 0 0.8rem;
}
.docs-page code {
  font-family: ui-monospace, "Fira Code", "Cascadia Code", Menlo, monospace;
  font-size: 0.85em;
}
.docs-page p code, .docs-page li code {
  background: var(--border);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
}
.docs-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 1rem 0 1.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}
.docs-toc a { color: var(--accent); text-decoration: none; }
.docs-toc a:hover { text-decoration: underline; }

/* API keys */
#api-keys-dialog { max-width: 520px; max-height: 80vh; overflow-y: auto; }
#api-keys-dialog code { font-family: ui-monospace, "Fira Code", monospace; font-size: 0.85rem; }

.api-key-create {
  display: flex;
  gap: 0.4rem;
  margin: 0.6rem 0;
}
.api-key-create input {
  flex: 1;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}
.api-key-create button {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  white-space: nowrap;
}

.api-key-new {
  background: var(--bg);
  border: 1px dashed var(--accent);
  border-radius: 10px;
  padding: 0.7rem;
  margin: 0.6rem 0;
}
.api-key-new code {
  display: block;
  background: var(--border);
  padding: 0.5rem;
  border-radius: 6px;
  margin: 0.4rem 0;
  word-break: break-all;
}
.api-key-new button {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
}

.users-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.5rem 0;
  max-height: 60vh;
  overflow-y: auto;
}

.user-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
}

.user-row.banned { opacity: 0.55; }

.user-main { min-width: 0; }
.user-email {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-meta { color: var(--muted); font-size: 0.75rem; }

.user-actions { display: flex; gap: 0.3rem; }
.user-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.75rem;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.user-btn:hover { border-color: var(--accent); }
.user-btn.danger:hover { color: var(--red); border-color: var(--red); }

.drawer-btn {
  display: block;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  width: 100%;
}
.drawer-btn:hover { border-color: var(--accent); }
.drawer-btn-form { margin: 0; padding: 0; }
.drawer-btn-form .drawer-btn { width: 100%; }
.drawer-btn-danger:hover { border-color: var(--red); color: var(--red); }

.admin-status {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  display: none;
  font-variant-numeric: tabular-nums;
}
.admin-status.visible { display: block; }
.admin-status.running { color: var(--accent); }
.admin-status.done    { color: var(--green); }
.admin-status.error   { color: var(--red); }

.admin-progress {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.4rem;
}
.admin-progress-bar {
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width 0.3s;
}

/* ── Dialogs ──────────────────────────────────────────────────────────────── */
dialog {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  max-width: 360px;
  width: calc(100% - 2rem);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

dialog h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

dialog form { display: flex; flex-direction: column; gap: 0.5rem; }

.dialog-buttons {
  display: flex; gap: 0.5rem; margin-top: 0.5rem;
}
.dialog-buttons button { flex: 1; }

#cancel-pw-btn, #cancel-sell-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.pw-msg {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.4rem;
  border-radius: 8px;
}
.pw-msg.ok  { color: var(--green); background: rgba(76, 175, 80, 0.1); }
.pw-msg.err { color: var(--red);   background: rgba(244, 67, 54, 0.1); }