*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* B1: Forhindre horisontal scroll på mobil */
html, body { overflow-x: hidden; max-width: 100vw; -webkit-text-size-adjust: 100%; }
img, video, iframe, table { max-width: 100%; height: auto; }

:root {
  --cream: #f7f3ee;
  --warm-white: #fdfaf6;
  --olive: #5c6b3a;
  --olive-light: #8a9e5a;
  --olive-muted: #d4dcc4;
  --earth: #8b6b4a;
  --text: #2a2520;
  --text-muted: #7a6f65;
  --border: #e4ddd5;
  --card-bg: #ffffff;
  --shadow: 0 2px 12px rgba(42,37,32,0.08);
  --shadow-hover: 0 8px 32px rgba(42,37,32,0.14);
}

body {
  font-family: 'DM Sans', sans-serif;
  background: #e9e5dd;  /* AO40: litt mørkere enn cream så app-shell-rammen er synlig på wide */
  color: var(--text);
  min-height: 100dvh;
}
@supports not (min-height: 100dvh) {
  body { min-height: 100vh; }
}

/* ── LOGIN ── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(92,107,58,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(139,107,74,0.06) 0%, transparent 50%);
}

.login-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow);
  text-align: center;
}

.login-mark {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.12em;
  color: var(--olive);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.login-title {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 32px;
  line-height: 1.2;
}

.login-field {
  margin-bottom: 16px;
  text-align: left;
}

.login-field label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.login-field input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--warm-white);
  outline: none;
  transition: border-color 0.2s;
}

.login-field input:focus {
  border-color: var(--olive);
}

.login-btn {
  width: 100%;
  padding: 13px;
  background: var(--olive);
  color: white;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
}

.login-btn:hover { background: #4a5630; }
.login-btn:disabled { opacity: 0.6; cursor: default; }

.login-error {
  margin-top: 14px;
  font-size: 13px;
  color: #c0392b;
  background: #fdf0ee;
  border-radius: 6px;
  padding: 10px 14px;
}

/* ── APP ── */
.app-header {
  background: var(--card-bg);
  /* border-bottom fjernet — filter-baren under skaper den naturlige separasjonen */
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  /* AO41b: fixed-position fungerer pålitelig på alle browsere, også inni flex-column.
     left/right følger app-rammen (--app-side) på ultra-wide skjermer. */
  position: fixed;
  top: 0;
  left: var(--app-side);
  right: var(--app-side);
  z-index: 100;
}

.header-brand {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.header-brand span {
  color: var(--olive);
  font-style: italic;
  font-weight: 400;
}

.header-brand .versjon-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.6;
  margin-left: 6px;
  letter-spacing: 0.5px;
  vertical-align: super;
}

.ukemeny-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: white;
  background: var(--olive);
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
  margin-right: 8px;
}
.ukemeny-btn:hover { background: #4a5630; }

.logout-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.logout-btn:hover { color: var(--text); border-color: var(--text-muted); }

/* ── FILTERS ── */
.filter-bar {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Filterbar — fixed rett under app-header (AO41b). Begge fixed slik at de
   visuelt henger sammen og forblir på topp under scroll. left/right følger
   app-rammen via --app-side på ultra-wide skjermer. */
.oppskrifter-side .filter-bar-fast {
  position: fixed;
  top: calc(52px + env(safe-area-inset-top));
  left: var(--app-side);
  right: var(--app-side);
  z-index: 90;
  box-shadow: 0 1px 0 var(--border);
}
.oppskrifter-side .results-bar { margin-top: var(--filter-bar-h, 130px); }
@media (min-width: 768px) {
  .oppskrifter-side .filter-bar-fast { top: 60px; }
  .oppskrifter-side .results-bar { margin-top: var(--filter-bar-h, 80px); }
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 15px;
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--warm-white);
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus { border-color: var(--olive); }

.filter-select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--warm-white);
  outline: none;
  cursor: pointer;
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a6f65' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.filter-select:focus { border-color: var(--olive); }

.score-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.score-filter input[type=range] {
  width: 80px;
  accent-color: var(--olive);
}

.reset-btn {
  font-size: 13px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reset-btn:hover { color: var(--text); }

/* ── RESULTS COUNT ── */
.results-bar {
  padding: 12px 24px 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* ── GRID ── */
.grid {
  display: grid;
  /* AO40: auto-fit lar få kort fylle raden i stedet for å klumpe seg til venstre
     med tomme grid-tracks ved siden av. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  padding: 16px 16px 48px;
}
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    padding: 20px 24px 48px;
  }
}

/* ── CARD ── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--olive-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  flex-shrink: 0;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: 10px 12px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.tag {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--olive-muted);
  color: var(--olive);
}

.tag-type {
  background: #e8e0d5;
  color: var(--earth);
}

.card-title {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 6px;
}

@media (min-width: 768px) {
  .card-body { padding: 14px 16px 16px; }
  .card-title { font-size: 16px; -webkit-line-clamp: 2; }
  .card-desc { font-size: 12px; }
  .tag { font-size: 10px; padding: 3px 8px; }
}

.scores {
  display: flex;
  gap: 10px;
}

.score {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.score-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: white;
}
.scores { display: flex; gap: 6px; }
.score { gap: 3px; font-size: 10px; }
.score-ai { background: var(--olive); }
.score-lk { background: var(--earth); }

.card-time {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

@media (min-width: 768px) {
  .score-dot { width: 22px; height: 22px; font-size: 10px; }
  .score { font-size: 12px; gap: 4px; }
  .card-time { font-size: 12px; gap: 4px; }
}

/* ── MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42,37,32,0.55);
  z-index: 1100; /* over bottom-nav (1000) så ingen overlap */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain; /* hindrer scroll-chaining til bakgrunnssiden */
  backdrop-filter: blur(3px);
}

.modal {
  background: var(--card-bg);
  border-radius: 18px;
  width: 100%;
  max-width: 680px;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(42,37,32,0.25);
  animation: modalIn 0.22s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 480px;
  object-fit: cover;
  background: var(--olive-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  position: relative;
}

.modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.2s;
}

.modal-close:hover { background: white; }

.modal-body {
  padding: 28px 32px 36px;
}

.modal-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 8px;
}

.modal-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.modal-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--cream);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 60px;
}

.stat-val {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
}

.porsjon-stat { min-width: 110px; gap: 6px; }
.porsjon-slider {
  width: 90px;
  accent-color: var(--olive);
  cursor: grab;
}
.porsjon-slider:active { cursor: grabbing; }

.modal-section-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 12px;
}

.modal-eier {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  text-align: right;
}
.modal-eier-link {
  color: var(--olive);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-style: italic;
}
.modal-eier-link:hover { color: #4a5630; text-decoration-thickness: 2px; }

/* Helse Pro — utvidet næring i modal og ukemeny */
.modal-helse-pro {
  margin-top: 18px;
  border: 1px solid rgba(122, 62, 156, 0.25);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(122, 62, 156, 0.04) 0%, var(--card-bg) 60%);
  overflow: hidden;
}
.helse-pro-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.helse-pro-toggle:hover { background: rgba(122, 62, 156, 0.06); }
.helse-pro-pil { color: var(--olive); font-size: 12px; }
.helse-pro-innhold { padding: 0 16px 14px; }
.helse-pro-gruppe { margin-top: 12px; }
.helse-pro-gruppe-tittel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.helse-pro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 12px;
}
.helse-pro-stoff {
  padding: 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.helse-pro-stoff-navn {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.helse-pro-stoff-verdi {
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.helse-pro-stoff-dri {
  font-size: 10px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.helse-pro-disclaimer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
}

/* Helse Pro teaser for ikke-Pro brukere */
.modal-helse-pro-teaser {
  margin-top: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(122, 62, 156, 0.08) 0%, rgba(184, 116, 26, 0.05) 100%);
  border: 1px solid rgba(122, 62, 156, 0.2);
  border-radius: 12px;
}
.teaser-emoji { font-size: 24px; }
.teaser-tekst { flex: 1; font-size: 13px; line-height: 1.4; }
.teaser-tekst small { color: var(--text-muted); }

/* Næring-knapp på ukemeny dagsoverskrift */
/* ── ABONNEMENT-SIDE ── */
.abonnement-side {
  max-width: 1100px;
  margin: 0 auto;
}
.abonnement-undertittel {
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
  margin: -8px 0 28px;
}
.abonnement-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 28px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 4px;
  width: fit-content;
}
.abonnement-toggle-knapp {
  padding: 8px 22px;
  border: none;
  background: none;
  color: var(--text-muted);
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.abonnement-toggle-knapp.aktiv {
  background: var(--olive);
  color: white;
}
.rabatt-badge {
  background: rgba(184, 116, 26, 0.15);
  color: #b8741a;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 700;
}
.abonnement-toggle-knapp.aktiv .rabatt-badge { background: rgba(255,255,255,0.2); color: white; }

.abonnement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}
.tier-kort {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.tier-kort:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.tier-kort.fremhevet {
  background: linear-gradient(180deg, rgba(184, 116, 26, 0.04) 0%, var(--card-bg) 40%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.tier-kort.naavaerende {
  border-color: #7a3e9c;
  border-width: 2px;
  background: rgba(122, 62, 156, 0.04);
}
.tier-badge-pop {
  position: absolute;
  top: -10px;
  background: #b8741a;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.04em;
}
.tier-navn {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}
.tier-beskr {
  color: var(--text-muted);
  font-size: 13px;
  margin: 4px 0 14px;
  min-height: 36px;
}
.tier-pris {
  margin: 8px 0 18px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.tier-pris-tall {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tier-pris-periode {
  font-size: 13px;
  color: var(--text-muted);
}
.tier-velg-knapp {
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: var(--olive);
  color: white;
  font-weight: 600;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.tier-velg-knapp:hover:not(:disabled) { background: #6a7e54; }
.tier-velg-knapp:disabled { background: var(--border); color: var(--text-muted); cursor: default; }
.tier-velg-knapp.naavaerende { background: #7a3e9c; color: white; opacity: 0.85; }
.tier-kort.tier-pro .tier-velg-knapp { background: #7a3e9c; }
.tier-kort.tier-pro .tier-velg-knapp:hover:not(:disabled) { background: #682f88; }

.tier-vipps-knapp {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px dashed #ff5b24;
  border-radius: 8px;
  background: rgba(255, 91, 36, 0.06);
  color: #ff5b24;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tier-vipps-knapp:hover:not(:disabled) {
  background: rgba(255, 91, 36, 0.1);
  border-style: solid;
}
.tier-vipps-knapp:disabled { opacity: 0.6; cursor: not-allowed; }
.tier-vipps-knapp small { opacity: 0.7; font-weight: 400; }

/* Feature-matrise */
.abonnement-feature-matrise {
  margin: 20px 0 30px;
}
.feature-gruppe {
  margin-bottom: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.feature-gruppe-tittel {
  background: var(--warm-white);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13px;
  color: var(--olive);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.feature-tabell {
  width: 100%;
  border-collapse: collapse;
}
.feature-tabell th {
  text-align: center;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.feature-tabell td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 13px;
}
.feature-tabell tr:last-child td { border-bottom: none; }
.feature-navn {
  color: var(--text);
}
.feature-verdi {
  text-align: center;
  color: var(--olive);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.feature-verdi:empty::before { content: '–'; color: var(--text-muted); font-weight: 400; }

.abonnement-info {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  padding: 20px 0;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}
.abonnement-info p { margin: 6px 0; }

@media (max-width: 600px) {
  .abonnement-grid { grid-template-columns: 1fr; }
  .feature-tabell th { font-size: 11px; padding: 6px 4px; }
  .feature-tabell td { font-size: 12px; padding: 6px 4px; }
  .feature-navn { font-size: 12px; }
  .tier-kort { padding: 18px 14px; }
}

/* Tom-filter-melding på oppskriftsside */
.tom-filter-aktive {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 8px;
  max-width: 400px;
  justify-content: center;
}
.tom-filter-chip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.tom-filter-chip strong { color: var(--text); }
.tom-filter-reset {
  margin-top: 12px;
  background: var(--olive);
  color: white;
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
}
.tom-filter-reset:hover { background: #6a7e54; }

.naering-knapp {
  background: none;
  border: 1px solid rgba(122, 62, 156, 0.25);
  border-radius: 6px;
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 12px;
  cursor: pointer;
  vertical-align: middle;
  font-family: inherit;
  transition: all 0.15s;
}
.naering-knapp:hover {
  background: rgba(122, 62, 156, 0.08);
  border-color: rgba(122, 62, 156, 0.5);
}
.dagsnaering-shell { padding: 28px 24px; }
.dagsnaering-tittel { margin: 0 0 8px; font-family: 'Playfair Display', serif; font-size: 22px; color: var(--text); }
.dagsnaering-info { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }

.ingredients-list {
  list-style: none;
  margin-bottom: 24px;
}

.ingredients-list li {
  font-size: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: baseline;
  color: var(--text);
}

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

.ing-amount {
  color: var(--text-muted);
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ing-navn { color: var(--text); }

@media (max-width: 480px) {
  .ingredients-list li { grid-template-columns: 80px 1fr; gap: 10px; }
}

.fremgangsmåte {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
}

/* ── LOADING / EMPTY ── */
.center-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--text-muted);
  gap: 12px;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--olive);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .filter-bar { padding: 12px 16px; }
  .grid { padding: 16px 16px 40px; gap: 14px; }
  .modal-body { padding: 20px 20px 28px; }
  .modal-stats { gap: 12px; }
  .score-filter { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   UKEMENY-DRAWER
   Rendret som HTML-strenger fra ukemeny.js
   ════════════════════════════════════════════════════════════════ */

@keyframes ukFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ukSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.uk-overlay {
  position: fixed; inset: 0;
  background: rgba(42,37,32,0.55);
  backdrop-filter: blur(3px);
  z-index: 1000;
  animation: ukFadeIn 0.2s ease;
}

.uk-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(700px, 100vw);
  background: #f7f3ee;
  z-index: 1001;
  overflow-y: auto;
  box-shadow: -8px 0 40px rgba(42,37,32,0.18);
  animation: ukSlideIn 0.3s cubic-bezier(0.16,1,0.3,1);
  font-family: 'DM Sans', sans-serif;
}

.uk-header {
  background: #5c6b3a;
  color: #f7f3ee;
  padding: 26px 32px 22px;
  position: sticky; top: 0; z-index: 10;
}

.uk-header-top {
  display: flex; justify-content: space-between; align-items: flex-start;
}

.uk-header-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 600;
}

.uk-header-meta {
  font-size: 13px; opacity: 0.75; margin-top: 3px;
}

.uk-meta-check { color: #c8e89a; }

.uk-close-btn {
  background: rgba(255,255,255,0.15);
  border: none; color: #f7f3ee;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px; line-height: 1;
  transition: background 0.2s;
}
.uk-close-btn:hover { background: rgba(255,255,255,0.25); }

.uk-active-banner {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.12);
  border-radius: 8px;
  font-size: 13px;
}

.uk-handleliste-btn {
  margin-left: 10px;
  background: #c8e89a; color: #2c3e2d;
  border: none;
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px; font-weight: 700;
}

.uk-body { padding: 24px 32px 60px; }

.uk-loading {
  text-align: center; padding: 60px 0;
  color: #5c6b3a; font-size: 32px;
}

.uk-loading-text {
  font-family: 'Playfair Display', serif;
  font-size: 18px; display: block; margin-top: 12px;
}

.uk-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 16px;
  color: #991b1b;
  font-size: 14px;
}

.uk-section-head { margin-bottom: 24px; }

.uk-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; color: #2a2520;
  margin-bottom: 5px;
}

.uk-section-sub { font-size: 13px; color: #7a6f65; }

.uk-mal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.uk-no-maler {
  grid-column: 1 / -1;
  text-align: center; padding: 40px;
  color: #7a6f65; font-size: 14px;
}

.uk-no-maler-sub { font-size: 12px; opacity: 0.7; }

.uk-kort {
  border: 2px solid #e4ddd5;
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: relative;
}
.uk-kort:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(92,107,58,0.2);
}
.uk-kort[data-selected="true"] {
  border-color: #5c6b3a;
  background: #eef2e6;
  box-shadow: 0 4px 18px rgba(92,107,58,0.15);
}

.uk-aktiv-badge {
  position: absolute; top: 10px; right: 10px;
  background: #5c6b3a; color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
}

.uk-mal-kat {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  /* bg + color settes inline pga dynamic kategori-farger */
}

.uk-mal-navn {
  font-family: 'Playfair Display', serif;
  font-size: 16px; color: #2a2520;
  margin-bottom: 6px; line-height: 1.3;
}

.uk-mal-beskrivelse {
  font-size: 12px; color: #7a6f65;
  line-height: 1.5; margin-bottom: 10px;
}

.uk-mal-stats {
  display: flex; gap: 10px; flex-wrap: wrap;
}

.uk-mal-stat-kcal { font-size: 12px; color: #5c6b3a; font-weight: 600; }
.uk-mal-stat-makro { font-size: 12px; color: #7a6f65; }

.uk-toggle-hint {
  margin-top: 12px;
  font-size: 12px; color: #5c6b3a; font-weight: 600;
}

.uk-ai-pro {
  border: 2px dashed #c8b87a;
  border-radius: 14px;
  padding: 20px;
  background: linear-gradient(135deg, #fdfcf5, #f5efd8);
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
}

.uk-ai-locked {
  border: 1px solid #e4ddd5;
  border-radius: 14px;
  padding: 18px;
  background: #fdfaf6;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px; opacity: 0.75;
}

.uk-ai-icon { font-size: 28px; }
.uk-locked-icon { font-size: 22px; }

.uk-ai-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px; color: #2a2520; margin-bottom: 4px;
}

.uk-locked-title { font-size: 14px; color: #2a2520; font-weight: 600; margin-bottom: 3px; }

.uk-ai-desc { font-size: 13px; color: #7a6f65; margin-bottom: 10px; }
.uk-locked-desc { font-size: 12px; color: #7a6f65; margin-bottom: 8px; }

.uk-ai-btn {
  background: #5c6b3a; color: #fff;
  border: none; padding: 9px 18px;
  border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600;
}

.uk-locked-btn {
  background: #2a2520; color: #fff;
  border: none; padding: 7px 16px;
  border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 600;
}

.uk-plan-wrap {
  border-top: 2px solid #e4ddd5;
  padding-top: 24px;
}

.uk-plan-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}

.uk-plan-title {
  font-family: 'Playfair Display', serif;
  font-size: 19px; color: #2a2520;
}

.uk-velg-btn {
  background: #5c6b3a; color: #fff;
  border: none; padding: 9px 20px;
  border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600;
  transition: background 0.2s;
}
.uk-velg-btn[data-active="true"] { background: #8a9e5a; }

.uk-tom-mal {
  text-align: center; padding: 40px;
  color: #7a6f65; font-size: 14px;
}

.uk-dag {
  border-radius: 10px;
  margin-bottom: 5px;
  padding: 12px 14px;
}
.uk-dag:nth-child(odd) { background: rgba(92,107,58,0.04); }

.uk-dag-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}

.uk-dag-navn { font-weight: 600; color: #2a2520; font-size: 14px; }
.uk-dag-naering { font-size: 12px; color: #7a6f65; }

.uk-maltider {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.uk-maltid {
  background: white;
  border-radius: 8px;
  padding: 9px;
  border: 1px solid #f0ebe2;
}

.uk-maltid-icon {
  font-size: 10px; color: #7a6f65; font-weight: 600;
  letter-spacing: 0.5px; margin-bottom: 3px;
}

.uk-maltid-tittel {
  font-size: 12px; color: #2a2520; font-weight: 600; line-height: 1.3;
}

.uk-maltid-batch { font-size: 10px; color: #7a6f65; }

.uk-maltid-meta { font-size: 11px; color: #7a6f65; margin-top: 2px; }

.uk-maltid-tom { font-size: 12px; color: #c8c0b4; font-style: italic; }

.uk-hl-wrap {
  border-top: 2px solid #e4ddd5;
  padding-top: 24px; margin-top: 24px;
}

.uk-hl-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; flex-wrap: wrap; gap: 8px;
}

.uk-hl-title {
  font-family: 'Playfair Display', serif;
  font-size: 19px; color: #2a2520;
}

.uk-hl-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.uk-dl-btn {
  background: #5c6b3a; color: #fff;
  border: none; padding: 8px 14px;
  border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 600;
  text-decoration: none;
}

.uk-cp-btn {
  background: #f0ebe2; color: #5c6b3a;
  border: 1px solid #d8d0c4;
  padding: 8px 14px;
  border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 600;
}

.uk-oda-btn {
  background: #e4ddd5; color: #7a6f65;
  border: none; padding: 8px 14px;
  border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 600;
}

.uk-kat-group { margin-bottom: 14px; }

.uk-kat-label {
  font-size: 11px; font-weight: 700;
  color: #7a6f65; letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.uk-vare {
  display: flex; justify-content: space-between;
  padding: 7px 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #f0ebe2;
  margin-bottom: 3px;
  font-size: 13px;
}

.uk-vare-navn { color: #2a2520; }
.uk-vare-mengde { color: #5c6b3a; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
   WIZARD — brukerprofil-onboarding (js/wizard.js)
   ════════════════════════════════════════════════════════════════ */

.wiz-overlay {
  position: fixed; inset: 0;
  background: var(--cream);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(92,107,58,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(139,107,74,0.06) 0%, transparent 50%);
  z-index: 500;
  overflow-y: auto;
  padding: 24px 16px 48px;
}

.wiz-shell {
  max-width: 540px;
  margin: 24px auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 36px 32px 28px;
  position: relative;
}

.wiz-skip {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wiz-skip:hover { color: var(--text); }

.wiz-progress {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}

.wiz-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s, transform 0.2s;
}
.wiz-dot.done { background: var(--olive-light); }
.wiz-dot.active { background: var(--olive); transform: scale(1.3); }

.wiz-body { min-height: 200px; }

.wiz-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.2;
}

.wiz-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

.wiz-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 16px 0 6px;
}

.wiz-label-sm { font-size: 11px; color: var(--text-muted); }

.wiz-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--warm-white);
  outline: none;
  transition: border-color 0.2s;
}
.wiz-input:focus { border-color: var(--olive); }

.wiz-row {
  display: flex; gap: 10px; align-items: flex-end;
  margin-top: 8px;
}

.wiz-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.wiz-kort {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 16px 14px;
  cursor: pointer;
  background: var(--warm-white);
  text-align: center;
  transition: all 0.15s;
}
.wiz-kort:hover {
  border-color: var(--olive-light);
  transform: translateY(-1px);
}
.wiz-kort.valgt {
  border-color: var(--olive);
  background: var(--olive-muted);
  box-shadow: 0 4px 14px rgba(92,107,58,0.18);
}

.wiz-kort-emoji {
  font-size: 28px;
  margin-bottom: 6px;
}

.wiz-kort-label {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
}

.wiz-kort-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

.wiz-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.wiz-chip {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  background: var(--warm-white);
  color: var(--text);
  transition: all 0.15s;
}
.wiz-chip:hover { border-color: var(--olive-light); }
.wiz-chip.valgt {
  background: var(--olive);
  color: white;
  border-color: var(--olive);
}

.wiz-radio-rad {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 6px;
}

.wiz-radio {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--warm-white);
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 180px;
  transition: all 0.15s;
}
.wiz-radio:hover { border-color: var(--olive-light); }
.wiz-radio.valgt {
  border-color: var(--olive);
  background: var(--olive-muted);
}
.wiz-radio input[type=radio] {
  accent-color: var(--olive);
}
.wiz-radio small {
  color: var(--text-muted);
  font-size: 12px;
}

.wiz-info {
  background: var(--olive-muted);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--olive);
  margin-top: 12px;
  line-height: 1.5;
}

.wiz-feil {
  background: #fdf0ee;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #c0392b;
  margin-top: 16px;
}

.wiz-husstand {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.wiz-h3 {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 10px;
}

.wiz-passiv {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}

.wiz-btn-sm {
  background: var(--olive);
  color: white;
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.wiz-btn-sm:hover { background: #4a5630; }

.wiz-btn-add {
  background: none;
  color: var(--olive);
  border: 1px dashed var(--olive-light);
  width: 100%;
  margin-top: 8px;
}
.wiz-btn-add:hover { background: var(--olive-muted); }

.wiz-btn-x {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 32px; height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  align-self: flex-end;
}
.wiz-btn-x:hover { color: #c0392b; border-color: #c0392b; }

.wiz-btn-ghost {
  background: none;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 9px 16px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.wiz-btn-ghost:hover { color: #c0392b; border-color: #c0392b; }

.wiz-handlekurv {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--cream);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}

.wiz-invitasjon {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px;
  font-size: 14px;
}

.wiz-summary {
  text-align: center;
  padding: 24px 0;
}

.wiz-summary-check {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--olive);
  color: white;
  font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}

.wiz-summary-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  text-align: left;
  margin: 24px auto 32px;
  max-width: 360px;
}

.wiz-summary-key {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 500;
  padding-top: 2px;
}

.wiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.wiz-tilbake {
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
}
.wiz-tilbake:hover { color: var(--text); }

.wiz-btn-primary {
  background: var(--olive);
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.wiz-btn-primary:hover { background: #4a5630; }
.wiz-btn-primary:disabled { opacity: 0.6; cursor: default; }

/* Wizard-banner i header (når brukeren har hoppet over) */
.wiz-banner {
  background: var(--olive-muted);
  color: var(--olive);
  padding: 8px 16px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.wiz-banner:hover { background: #c8d1b0; }

@media (max-width: 600px) {
  .wiz-shell { padding: 24px 18px 20px; margin: 12px auto; }
  .wiz-grid-2 { grid-template-columns: 1fr; }
  .wiz-radio { min-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   NAVIGASJON — BottomNav (mobil) + TopNav (desktop) + app-shell
   ════════════════════════════════════════════════════════════════ */

/* AO40 — global arbeidsbredde: 1280px maks, sentrert med subtil ramme.
   --app-side regnes ut for fixed-elementer (filter-bar, bottom-nav) så de
   også holder seg innenfor rammen på ultra-wide skjermer. */
:root {
  --app-max: 1280px;
  --app-side: max(0px, calc((100vw - var(--app-max)) / 2));
}

.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: var(--app-max);
  margin: 0 auto;
  background: var(--cream);
  /* Subtil grense: tynn linje + diskret skygge når viewport > app-max */
  border-left: 1px solid rgba(0,0,0,0.06);
  border-right: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 0 32px rgba(0,0,0,0.04);
}
/* Studio + Logger er back-office for superbruker — full bredde, ingen ramme */
.app-shell.app-shell-wide {
  max-width: 100%;
  border-left: none;
  border-right: none;
  box-shadow: none;
}
@supports not (min-height: 100dvh) {
  .app-shell { min-height: 100vh; }
}

.app-main {
  flex: 1;
  /* AO41b: gi plass til fixed topnav (desktop 60px / mobil 52px allerede dekket via app-shell padding-top) */
  padding-top: 60px;
}
@media (max-width: 700px) {
  /* På mobil håndteres dette allerede av .app-shell padding-top */
  .app-main { padding-top: 0; }
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.top-nav-links {
  display: flex;
  gap: 18px;
  flex: 1;
  margin-left: 32px;
}

.top-nav-link {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  text-decoration: none;
  position: relative;
  transition: color 0.15s;
}
.top-nav-link:hover { color: var(--text); }
.top-nav-link.aktiv {
  color: var(--olive);
  font-weight: 500;
}
.top-nav-link.aktiv::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--olive);
}

.top-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.profil-btn {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
}
.profil-btn.aktiv {
  background: var(--olive-muted);
  border-color: var(--olive);
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  /* AO40: følger app-rammen på wide skjermer */
  left: var(--app-side);
  right: var(--app-side);
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(42,37,32,0.06);
  display: flex;
  z-index: 1000;
  /* Hardware-acceleration så iOS Safari ikke "mister" elementet ved scroll/adresselinje-endring */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px 4px;
  min-height: 60px;
  transition: color 0.15s;
}
.bottom-nav-item.aktiv {
  color: var(--olive);
}
.bottom-nav-emoji {
  font-size: 20px;
  line-height: 1;
}
.bottom-nav-label {
  font-size: 11px;
  font-weight: 500;
}
.bottom-nav-item.aktiv .bottom-nav-label {
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   SIDE-INNHOLD (felles for ProfilSide, UkemenySide osv.)
   ════════════════════════════════════════════════════════════════ */

.side-content {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.side-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: var(--text);
  margin-bottom: 20px;
}

.profil-seksjon {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 20px;
}

.profil-tier-seksjon {
  padding: 16px 20px;
}
.profil-tier-rad {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.profil-tier-navn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.profil-tier-emoji {
  font-size: 22px;
}
.profil-tier-kvote {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.profil-tier-status {
  margin-top: 6px;
  font-size: 12px;
  color: var(--olive);
  font-style: italic;
}
.profil-pro-funksjoner {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.profil-pro-tittel {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.profil-pro-liste {
  margin: 0;
  padding-left: 4px;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.profil-pro-liste-grayed {
  color: var(--text-muted);
  font-style: italic;
}
.profil-oppgrader-btn {
  background: var(--olive);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.profil-oppgrader-btn:hover { background: #6a7e54; }

.profil-h2 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: var(--text);
  margin-bottom: 16px;
}

.profil-h3 {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: var(--text);
  margin: 20px 0 10px;
}

.profil-tom {
  color: var(--text-muted);
  font-size: 14px;
  font-style: italic;
}

.husstand-info {
  background: var(--cream);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 14px;
}

.husstand-totalt {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.medlem-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.medlem-rad {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}

.medlem-rolle { font-size: 18px; }
.medlem-navn { flex: 1; }
.medlem-faktor { color: var(--text-muted); font-size: 13px; }

.passiv-leggtil {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.placeholder-side {
  max-width: 500px;
  margin: 80px auto;
  text-align: center;
  padding: 24px;
}
.placeholder-emoji { font-size: 64px; margin-bottom: 16px; }
.placeholder-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--text);
}
.placeholder-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════
   UKEMENY-EDITOR (UkemenySide)
   ════════════════════════════════════════════════════════════════ */

.plan-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.plan-tab {
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  min-height: 38px;
}
.plan-tab:hover { border-color: var(--olive-light); }
.plan-tab.aktiv {
  background: var(--olive);
  color: white;
  border-color: var(--olive);
}
.plan-tab.markert { font-weight: 600; }

.plan-tab-rename {
  background: white;
  color: var(--text);
  border: none;
  padding: 2px 6px;
  width: 80px;
  font-size: 14px;
}

.plan-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.plan-aktiv-info {
  font-size: 14px;
  color: var(--olive);
  font-weight: 500;
}

.uke-grid {
  display: grid;
  grid-template-columns: 100px repeat(7, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.uke-grid-hjorne { /* tom celle øverst venstre */ }

.uke-grid-dag-hode,
.uke-grid-maltid-hode {
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.04em;
}
.uke-grid-maltid-hode { text-align: left; padding-left: 8px; }

.slot {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 90px;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.slot.fylt {
  border-left: 3px solid var(--olive);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.slot.fylt:hover {
  border-color: var(--olive);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.slot.tom {
  border: 1px dashed var(--border);
  background: var(--warm-white);
  padding: 8px;
}
.slot.personlig {
  border-left: 3px solid #5a7da0;
}

.slot-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(92,107,58,0.15);
}
.slot-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 0;
  flex: 1;
  min-width: 0;
}

/* Desktop uke-grid: bilde øverst på hele bredden */
.slot-bilde {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
}
.slot-content > .slot-bilde { border-radius: 0; }
.slot.fylt:not(:has(.slot-bilde)) .slot-tekst { padding-top: 10px; }

.slot-navn {
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.slot-meta {
  font-size: 10px;
  color: var(--text-muted);
}

.slot-tom {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 20px 4px;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slot-tom:hover { color: var(--olive); }

.slot-personlig-toggle {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.6;
  padding: 2px;
}
.slot-personlig-toggle:hover { opacity: 1; }

.slot-maltid-hode {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Mobil-visning */
.uke-mobil { display: none; }
.uke-mobil-dager {
  display: flex;
  gap: 4px;
  padding-bottom: 8px;
  /* AO37-korrigering Endring 2: alle 7 dager på én linje, ingen scroll */
  justify-content: space-between;
  flex-wrap: nowrap;
}
.uke-mobil-dag {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card-bg);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  min-height: 40px;
  text-align: center;
}
.uke-mobil-dag.aktiv {
  background: var(--olive);
  color: white;
  border-color: var(--olive);
  font-weight: 600;
}
.uke-mobil-tittel {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  margin: 16px 0 12px;
  color: var(--text);
}
.slot.mobil {
  min-height: 96px;
  margin-bottom: 10px;
}
.slot.mobil .slot-maltid-hode {
  padding: 8px 12px 0;
  margin-bottom: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Mobil: bilde til venstre, innhold til høyre, actions under */
.slot.mobil .slot-content {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: auto auto;
  gap: 0;
  align-items: stretch;
}
.slot.mobil .slot-bilde {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 96px;
  height: 100%;
  min-height: 96px;
  aspect-ratio: auto;
  border-radius: 0;
}
.slot.mobil .slot-tekst {
  grid-column: 2;
  grid-row: 1;
  padding: 10px 12px 4px;
}
.slot.mobil .slot-actions {
  grid-column: 2;
  grid-row: 2;
  padding: 0 12px 10px;
  margin-top: 0;
}
/* Mobil-slot uten bilde — full bredde for tekst */
.slot.mobil .slot-content:not(:has(.slot-bilde)) {
  grid-template-columns: 1fr;
}
.slot.mobil .slot-content:not(:has(.slot-bilde)) .slot-tekst {
  grid-column: 1;
  grid-row: 1;
}
.slot.mobil .slot-content:not(:has(.slot-bilde)) .slot-actions {
  grid-column: 1;
  grid-row: 2;
}
.slot.mobil .slot-navn {
  font-size: 14px;
  -webkit-line-clamp: 2;
}

/* Slot-actions allokerer plass i bunn på alle visninger */
.slot .slot-actions {
  padding: 6px 10px 8px;
  margin-top: auto;
}

/* Preview-panel */
.preview-panel,
.bytt-panel {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.preview-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42,37,32,0.5);
  backdrop-filter: blur(2px);
}

.preview-shell,
.bytt-shell {
  position: relative;
  background: var(--card-bg);
  width: min(440px, 100vw);
  max-width: 100vw;
  padding: 32px 28px;
  overflow-y: auto;
  animation: previewSlide 0.25s cubic-bezier(0.16,1,0.3,1);
}

@keyframes previewSlide {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.preview-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: none;
  background: rgba(0,0,0,0.05);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: var(--text);
}

.preview-bilde {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 16px;
}

.preview-tittel {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  margin-bottom: 8px;
  line-height: 1.2;
}

.preview-meta {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 14px;
}

.preview-beskrivelse {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 18px;
}

.preview-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.kopier-hoyre-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--olive-muted, #eef0e4);
  color: var(--olive);
  border: 1px solid var(--olive-light, #8a9e5a);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  min-height: 44px;
}
.kopier-hoyre-btn:active { background: var(--olive); color: white; }

/* Tilbake-knapp i modal når åpnet fra ukemeny */
.modal-tilbake {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  touch-action: manipulation;
}
.modal-tilbake:active { background: var(--olive); color: white; }

/* Enkeltrett-handleliste modal — må ligge OVER modal-overlay (1100) for å være synlig */
.enkeltrett-overlay { z-index: 1200; }
.enkeltrett-modal {
  background: var(--card-bg);
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 22px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.enkeltrett-tittel {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  margin: 0 0 4px;
  color: var(--text);
}
.enkeltrett-undertittel {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.enkeltrett-kat { margin-bottom: 18px; }
.enkeltrett-kat-tittel {
  font-weight: 700;
  font-size: 14px;
  color: var(--olive);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.enkeltrett-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}
.enkeltrett-liste li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}
.enkeltrett-mengde {
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.maltids-info {
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 0 4px;
  padding: 6px 10px;
  background: var(--cream);
  border-radius: 6px;
  display: inline-block;
}

.bytt-tittel {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  margin-bottom: 12px;
}

.bytt-resultater {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bytt-resultat {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--warm-white);
  align-items: center;
  transition: all 0.15s;
}
.bytt-resultat:hover {
  border-color: var(--olive);
  background: var(--olive-muted);
}

.bytt-bilde {
  width: 50px; height: 50px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.bytt-tekst { flex: 1; min-width: 0; }
.bytt-navn { font-weight: 600; font-size: 14px; color: var(--text); }
.bytt-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════
   MOBILRESPONSIVITET — gjennomgående
   ════════════════════════════════════════════════════════════════ */

/* Grid: 2 kolonner på mobil */
@media (max-width: 767px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px;
    gap: 12px;
  }

  /* Filter-bar: horisontal scroll i stedet for wrap */
  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px;
  }
  .filter-bar > * { flex-shrink: 0; }
  .search-wrap { min-width: 180px; max-width: none; }

  /* Modal: full-skjerm — bruk dvh (dynamic viewport) så bunnen ikke gjemmes bak nettleser-UI */
  .modal {
    max-width: 100vw;
    width: 100vw;
    min-height: 100dvh;
    border-radius: 0;
    margin: 0;
    /* Plass i bunn slik at innholdet ikke gjemmes bak bottom-nav på mobil */
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .modal-overlay {
    padding: 0;
    min-height: 100dvh;
    /* Fjern backdrop-filter på mobil — den bryter position:fixed for descendants */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .modal-img { aspect-ratio: 1 / 1; max-height: 360px; height: auto; }

  /* Tilbake-knapp skal følge med viewport, ikke scrollen */
  .modal-tilbake {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 12px;
    z-index: 1200;
  }

  /* Bunn-padding for å gi plass til bottom nav */
  body { padding-bottom: 60px; }

  /* Side-content padding mindre */
  .side-content { padding: 16px; }
  .side-title { font-size: 22px; }

  /* Profil-seksjoner kompakt */
  .profil-seksjon { padding: 18px 16px; }
  .passiv-leggtil { flex-direction: column; align-items: stretch; }

  /* Header mindre på mobil — nav er nederst.
     Fast øverst, respekterer notch via safe-area. */
  .app-header.mobil {
    padding: 0 14px;
    height: 52px;
    position: fixed;
    top: 0;
    /* AO40: app-side er 0 på mobil (viewport < 1280), så ingen effekt der */
    left: var(--app-side);
    right: var(--app-side);
    z-index: 100;
    padding-top: env(safe-area-inset-top);
    box-sizing: content-box;
  }
  /* Plass for fast header på mobil — main må starte under */
  .app-shell { padding-top: calc(52px + env(safe-area-inset-top)); }

  /* Ukemeny: skjul desktop-grid, vis mobil-versjon */
  .uke-grid.desktop { display: none; }
  .uke-mobil { display: block; }

  /* Wizard responsive — overstyr min-width på radio */
  .wiz-radio { min-width: 100%; flex: 1; }
}

/* Desktop og oppover */
@media (min-width: 768px) {
  /* Skjul bottom nav på desktop */
  .bottom-nav { display: none; }

  /* Skjul mobil-header på desktop */
  .app-header.mobil { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   FELLES MÅLTIDSPROFIL + MEDLEM-KORT (ProfilSide A2)
   ════════════════════════════════════════════════════════════════ */

.medlem-kort {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.medlem-kort-hode {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.medlem-kort-detaljer {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  padding-left: 30px;
}

.medlem-kort-detaljer strong {
  color: var(--text);
}

.felles-profil {
  background: var(--cream);
  border-radius: 10px;
  padding: 16px 18px;
}

.felles-info {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 12px;
}

.felles-rader {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.felles-rad {
  display: grid;
  grid-template-columns: 24px 140px 1fr;
  align-items: center;
  font-size: 13px;
  gap: 8px;
}

.felles-rad.ja span:first-child { color: var(--olive); font-weight: 700; }
.felles-rad.nei span:first-child { color: var(--text-muted); }

.felles-rad .felles-navn { font-weight: 500; color: var(--text); }
.felles-rad .felles-status { color: var(--text-muted); font-size: 12px; }

.felles-forklaring {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
}

/* ════════════════════════════════════════════════════════════════
   FILTER-CHIPS i bytt-panel (UkemenySide B)
   ════════════════════════════════════════════════════════════════ */

.filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.filter-chips-label {
  font-size: 12px;
  color: var(--text-muted);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--olive-muted);
  color: var(--olive);
  border-radius: 16px;
  padding: 4px 4px 4px 10px;
  font-size: 12px;
  font-weight: 500;
}

.filter-chip-x {
  background: rgba(0,0,0,0.1);
  color: var(--olive);
  border: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  min-height: auto;
}
.filter-chip-x:hover { background: rgba(0,0,0,0.2); }

.vis-alle-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  min-height: auto;
}
.vis-alle-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════
   AI-GENERER-KNAPP
   ════════════════════════════════════════════════════════════════ */

.ai-generer-btn {
  background: linear-gradient(135deg, #5c6b3a, #8a9e5a);
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ai-generer-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(92,107,58,0.25);
}
.ai-generer-btn:disabled {
  opacity: 0.6; cursor: default;
  transform: none;
}

/* Touch-target minimum 44px på alle knapper/inputs */
button, input[type="email"], input[type="text"], input[type="password"],
input[type="number"], select {
  min-height: 38px;
}
@media (max-width: 767px) {
  button, input[type="email"], input[type="text"], input[type="password"],
  input[type="number"], select {
    min-height: 44px;
  }
  /* Unntak: små knapper i listene */
  .wiz-btn-x, .preview-close, .bottom-nav-item { min-height: 36px; }
  .bottom-nav-item { min-height: 60px; }
  .slot-pf-knapp { min-height: 32px; padding: 6px 12px; }
  .slot-pf-knapp.matrix-pf-knapp { min-height: 28px; padding: 4px 10px; }

  /* B3: 16px font-size på input/select/textarea forhindrer iOS-auto-zoom */
  input, select, textarea, .search-input, .filter-select, .wiz-input {
    font-size: 16px !important;
  }

  /* B4: Touch-targets minimum 44px */
  .uke-mobil-dag, .plan-tab, .filter-chip, .vis-alle-btn { min-height: 44px; }
  .preview-close { min-height: 44px; min-width: 44px; }

  /* B2: Plass for bottom-nav (64px height + safe-area + litt luft) */
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .app-main { padding-bottom: 16px; }

  /* B5: Fade-indikator for horisontal-scrollende filter-rader.
     AO37-korrigering: uke-mobil-dager scroller ikke lenger — fjernes fra fade-regelen. */
  .filter-bar, .plan-tabs {
    position: relative;
    -webkit-overflow-scrolling: touch;
  }
  .plan-tabs::after {
    content: '';
    position: sticky;
    right: 0; top: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--cream));
    pointer-events: none;
    margin-left: -32px;
    flex-shrink: 0;
  }
}

/* ════════════════════════════════════════════════════════════════
   SLOT-MAKRO (kcal · K · P · F) — grid og preview
   ════════════════════════════════════════════════════════════════ */

.slot-makro {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.2;
  margin-top: 2px;
}
.slot-makro .makro-k { color: #b8741a; }
.slot-makro .makro-p { color: #2e6a4a; }
.slot-makro .makro-f { color: #9c5230; }

.preview-meta .slot-makro {
  font-size: 13px;
  gap: 10px;
}
.preview-tid { color: var(--text-muted); font-size: 13px; }

.bytt-resultat .slot-makro {
  font-size: 11px;
  margin-top: 2px;
  margin-bottom: 2px;
}

/* Dagssum-rad i grid-hode */
.uke-grid-dag-hode .dag-sum {
  font-size: 10px;
  font-weight: 500;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 8px;
  display: inline-block;
}
.uke-grid-dag-hode .dag-sum.ok { background: #e6f0d9; color: #3b5a1a; }
.uke-grid-dag-hode .dag-sum.medium { background: #fff3d9; color: #8a5a1a; }
.uke-grid-dag-hode .dag-sum.avvik { background: #fae0dc; color: #962e1a; }

/* Dag-makrosum: kcal · K · P · F per dag */
.dag-makrosum {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.3;
  justify-content: center;
}
.dag-makrosum span { white-space: nowrap; }
/* AO37 dagsheader-fargekoding: rød over budsjett, grønn innenfor */
.dag-makrosum .over,
.matrix-kcal.over,
.matrix-makro .over {
  color: #c0392b;
  font-weight: 700;
}
.dag-makrosum .innenfor,
.matrix-kcal.innenfor {
  color: #3b6a1a;
  font-weight: 700;
}
/* Σ-summen er fjernet i AO37 — beholder klasse skjult for sikkerhets skyld */
.makro-sum { display: none; }
.dag-makrosum.mobil {
  font-size: 12px;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 6px;
}
.uke-mobil-tittel-rad {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 16px 0 12px;
}
.uke-mobil-tittel-rad .uke-mobil-tittel { margin: 0; }

/* ════════════════════════════════════════════════════════════════
   AO42 — Kompakt editorial ukemeny-header
   ════════════════════════════════════════════════════════════════ */
/* AO42c — full app-shell-bredde og fixed rett under fixed topnav (60px).
   Sticky var upålitelig i app-shell sin flex-column. Bruker --app-side
   så den følger app-rammen på ultra-wide. */
.uk-topp {
  position: fixed;
  top: 60px;
  left: var(--app-side);
  right: var(--app-side);
  z-index: 95;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px -8px rgba(122,142,98,0.18);
  flex-wrap: wrap;
}
/* Innhold under uk-topp må få plass — padding-top på .ukemeny-side */
.ukemeny-side { padding-top: 64px; }
@media (max-width: 700px) {
  /* Mobil: fixed-header er 52px, uk-topp havner under */
  .uk-topp { top: calc(52px + env(safe-area-inset-top)); }
  /* Mobil uk-topp wrapper til 2 rader → mer padding nødvendig */
  .ukemeny-side { padding-top: 110px; }
}
.uk-topp-venstre {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.uk-topp-midt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
}
.uk-topp-hoyre {
  display: flex;
  align-items: center;
  gap: 10px;
}
.uk-topp-tittel {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  color: var(--olive);
  margin: 0;
  line-height: 1.1;
  cursor: help;
}
.uk-topp-skille {
  color: var(--text-muted);
  font-size: 16px;
  margin: 0 -2px;
}
.uk-topp-rename {
  border: 1px solid var(--olive);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  font-family: inherit;
}
.uk-topp-handleliste {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--olive);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 18px;
  transition: background 0.15s;
}
.uk-topp-handleliste:hover { background: var(--olive-muted, #eef0e4); }
.uk-handleliste-ikon { font-size: 15px; }

/* Plan-velger — kompakt pille med dropdown */
.plan-velger { position: relative; display: inline-block; }
.plan-velger-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1px dashed var(--olive);
  color: var(--olive);
  padding: 6px 12px;
  border-radius: 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-style 0.15s;
}
.plan-velger-trigger:hover {
  background: var(--olive-muted, #eef0e4);
  border-style: solid;
}
.plan-velger-merke {
  color: var(--olive);
  font-size: 8px;
  line-height: 1;
}
.plan-velger-caret {
  font-size: 9px;
  opacity: 0.7;
}
.plan-velger-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 40px -16px rgba(42,37,32,0.25);
  min-width: 220px;
  padding: 6px;
  z-index: 200;
  animation: pop-glir-ned 0.18s ease-out;
}
@keyframes pop-glir-ned {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.plan-velger-rad,
.plan-velger-handling {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s;
}
.plan-velger-rad:hover,
.plan-velger-handling:hover { background: var(--olive-muted, #eef0e4); }
.plan-velger-rad.valgt { background: var(--olive-muted, #eef0e4); font-weight: 600; }
.plan-velger-rad-merke { color: var(--olive); font-size: 8px; }
.plan-velger-skille {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

/* AI-popover trigger og panel */
.ai-popover-wrapper { position: relative; display: inline-block; }
.ai-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, var(--olive), #6e8254);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(122,142,98,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ai-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(122,142,98,0.35);
}
.ai-trigger:active { transform: translateY(0); }
.ai-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-trigger-ikon {
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.4));
}
.ai-trigger-caret { font-size: 9px; opacity: 0.85; }
.ai-trigger-kvote {
  background: rgba(255,255,255,0.20);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
}
.ai-popover-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42,37,32,0.40);
  z-index: 1199;
}
.ai-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 50px -20px rgba(42,37,32,0.35);
  width: 520px;
  max-width: calc(100vw - 32px);
  padding: 22px;
  z-index: 1200;
  animation: ai-pop-glir-ned 0.2s ease-out;
}
@keyframes ai-pop-glir-ned {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-popover.bottom-sheet {
  position: fixed;
  top: auto;
  right: 0;
  left: 0;
  /* AO44a: løft over bottom-nav (64px + safe-area) så Send-knapp ikke skjules */
  bottom: calc(64px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 100%;
  border-radius: 18px 18px 0 0;
  padding: 12px 18px 20px;
  max-height: 70vh;
  overflow-y: auto;
  /* AO44c: må være OVER backdrop (1199) — ellers fanger backdroppen klikkene */
  z-index: 1200;
  animation: ai-pop-glir-opp 0.22s ease-out;
}
@keyframes ai-pop-glir-opp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.ai-popover-handle {
  width: 36px;
  height: 4px;
  background: #d0cdc6;
  border-radius: 2px;
  margin: 0 auto 14px;
  cursor: pointer;
}
.ai-popover-tittel-rad {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 12px;
}
.ai-popover-tittel {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.ai-popover-undertittel {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}
.ai-popover-info {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: all 0.15s;
}
.ai-popover-info:hover, .ai-popover-info.aktiv {
  background: var(--olive);
  color: var(--card-bg);
  border-color: var(--olive);
}
.ai-popover-hjelp {
  background: linear-gradient(135deg, #f6efe1 0%, #efe5d2 100%);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  animation: ai-pop-hjelp 0.18s ease-out;
}
@keyframes ai-pop-hjelp {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-popover-hjelp-tittel {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.7;
}
.ai-popover-hjelp-liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-popover-hjelp-eksempel {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(122,142,98,0.25);
  color: var(--text);
  text-align: left;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 13px;
  padding: 7px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.3;
}
.ai-popover-hjelp-eksempel:hover {
  background: var(--card-bg);
  border-color: var(--olive);
  transform: translateX(2px);
}
.ai-popover-lukk {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 16px;
}
.ai-popover-lukk:hover { background: var(--olive-muted, #eef0e4); color: var(--text); }
.ai-popover-input-rad {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.ai-popover-textarea {
  flex: 1;
  background: #f0ece4;
  border: 1px solid rgba(122,142,98,0.20);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 70px;
  line-height: 1.4;
  color: var(--text);
}
.ai-popover-textarea:focus {
  outline: none;
  border-color: var(--olive);
}
.ai-popover-mic {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--olive);
  background: white;
  color: var(--olive);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.ai-popover-mic:hover { background: var(--olive-muted, #eef0e4); }
.ai-popover-mic.tar-opp {
  background: #c0392b;
  color: white;
  border-color: #c0392b;
  animation: mic-puls 1.5s ease-in-out infinite;
}
.ai-popover-mic.transkriberer {
  background: var(--olive-muted, #eef0e4);
  opacity: 0.7;
}
@keyframes mic-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.5); }
  50% { box-shadow: 0 0 0 12px rgba(192, 57, 43, 0); }
}
.ai-popover-feil {
  color: #c0392b;
  font-size: 12px;
  margin-bottom: 10px;
}
.ai-popover-knapper {
  display: flex;
  gap: 10px;
}
.ai-popover-knapp {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}
.ai-popover-knapp:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-popover-knapp.sekundaer {
  background: white;
  border: 1.5px solid var(--olive);
  color: var(--olive);
}
.ai-popover-knapp.sekundaer:hover:not(:disabled) {
  background: var(--olive-muted, #eef0e4);
}
.ai-popover-knapp.primaer {
  background: linear-gradient(180deg, var(--olive), #6e8254);
  color: white;
  box-shadow: 0 2px 6px rgba(122,142,98,0.30);
}
.ai-popover-knapp.primaer:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(122,142,98,0.40);
}
.ai-popover-knapp.brukt {
  background: #c1995e;
  box-shadow: none;
}
.ai-popover-knapp-tittel {
  font-size: 14px;
  font-weight: 600;
}
.ai-popover-knapp-tag {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 2px;
}

/* Mobil-tilpasninger for uk-topp */
@media (max-width: 700px) {
  .uk-topp {
    padding: 10px 14px;
    gap: 10px;
    margin: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .uk-topp-venstre { flex: 1 1 100%; }
  .uk-topp-midt { flex: 1 1 0; min-width: 0; }
  .uk-topp-hoyre { flex: 0 0 auto; }
  .uk-topp-tittel { font-size: 22px; }
  .uk-handleliste-tekst { display: none; }
  .uk-topp-handleliste { padding: 8px 10px; font-size: 18px; }
  .view-toggle { width: 100%; }
  .view-toggle-btn { flex: 1; min-height: 44px; }
  .ai-trigger { padding: 10px 12px; font-size: 13px; }
  .ai-popover-knapper { flex-direction: column; }
}
@media (min-width: 701px) and (max-width: 1023px) {
  /* Nettbrett: 2 rader */
  .uk-topp { flex-wrap: wrap; }
  .uk-topp-venstre { flex: 1 1 100%; }
  .uk-topp-midt { flex: 1 1 0; justify-content: flex-start; }
  .uk-topp-hoyre { flex: 0 0 auto; }
}

/* AO37 Del 4 — Uke-visning på mobil: vertikal liste med klart skille mellom dagene */
.uke-mobil.visning-uke .dag-seksjon {
  padding: 14px 0 18px;
  border-top: 2px solid var(--border);
}
.uke-mobil.visning-uke .dag-seksjon:first-of-type { border-top: none; padding-top: 4px; }
.uke-mobil.visning-uke .uke-mobil-tittel-rad { margin: 0 0 10px; }
.uke-mobil.visning-uke .uke-mobil-tittel {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: var(--olive);
}
.uke-mobil.visning-uke .dag-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Dag-visning beholder eksisterende stil */
.uke-mobil.visning-dag .dag-seksjon { padding: 0; border-top: none; }
.uke-mobil.visning-dag .dag-slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* AO37-korrigering Endring 4 — Dag-visning per enhet:
   - Mobil + nettbrett stående: én kolonne (default ovenfor)
   - Nettbrett liggende: to kolonner, samme mobil-format per slot
   - Desktop: N kolonner (N = profil.antall_maltider), vertikalt slot-format */
@media (min-width: 768px) and (orientation: landscape) and (max-width: 1023px) {
  .uke-mobil.visning-dag .dag-slots {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .uke-mobil.visning-dag .dag-slots {
    grid-template-columns: repeat(var(--antall-maltider, 4), minmax(0, 1fr));
    gap: 14px;
  }
  /* Desktop dag-slot: vertikalt — bilde 1:1 aspect ratio full bredde øverst, info under */
  .uke-mobil.visning-dag .slot.mobil .meal-kort {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .uke-mobil.visning-dag .slot.mobil .meal-kort-bildeplass {
    order: -1;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
  }
  .uke-mobil.visning-dag .slot.mobil .meal-kort-bilde,
  .uke-mobil.visning-dag .slot.mobil .meal-kort-bilde-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .uke-mobil.visning-dag .slot.mobil .meal-kort-tekst {
    padding: 14px 16px;
  }
  /* Dagpiller skjules i desktop dag-visning — kun én dag av gangen er meningsfullt */
  .uke-mobil.visning-dag .uke-mobil-dager {
    max-width: 480px;
    margin: 0 auto 18px;
  }
}

/* AO41d — Uke-visning desktop: bilde 1:1 aspect ratio, full slot-bredde,
   helt ut til kantene. Info under fyller resten. */
@media (min-width: 768px) {
  .uke-grid.desktop .meal-kort {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .uke-grid.desktop .meal-kort-bildeplass {
    order: -1;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
  }
  .uke-grid.desktop .meal-kort-bilde,
  .uke-grid.desktop .meal-kort-bilde-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}

/* Mal-katalog */
.mal-katalog {
  margin-bottom: 16px;
}
.mal-katalog-toggle {
  background: none;
  border: none;
  color: var(--olive);
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  font-size: 14px;
}
.mal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.mal-kort {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.mal-kort:hover {
  border-color: var(--olive);
  box-shadow: 0 2px 12px rgba(92,107,58,0.12);
}
.mal-kategori-tag {
  display: inline-block;
  background: var(--olive);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 8px;
}
.mal-navn {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  margin-bottom: 6px;
}
.mal-beskrivelse {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0 0 8px 0;
}
.mal-kcal {
  font-size: 13px;
  font-weight: 600;
  color: var(--olive);
}
.mal-import-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* View-toggle — segmented pille (AO42-stil) */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--card-bg);
  padding: 2px;
}
.view-toggle-btn {
  background: none;
  border: none;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  min-height: 34px;
  font-family: 'DM Sans', sans-serif;
  border-radius: 16px;
  transition: all 0.18s ease-out;
  font-weight: 500;
}
.view-toggle-btn:hover { color: var(--text); }
.view-toggle-btn.aktiv {
  background: var(--olive);
  color: white;
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
}

/* Dag-seksjon (stack-rendering for uke-view på mobil) */
.dag-seksjon {
  margin-bottom: 20px;
}
.dag-seksjon .uke-mobil-tittel-rad { margin: 8px 0 6px; }

/* Skjul desktop-grid når dag-view er aktiv */
.uke-grid.desktop.skjult { display: none; }
.uke-mobil.skjult { display: none; }

/* ─── MATRIX-VIEW ─── kompakt 7×N grid med kun nøkkeltall */
.matrix-view {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.matrix-rad {
  display: grid;
  grid-template-columns: 90px repeat(var(--matrix-kolonner, 3), minmax(0, 1fr));
  gap: 6px;
}
.matrix-hode {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  padding-bottom: 2px;
}
.matrix-cell-hode {
  text-align: center;
  padding: 4px 2px;
}
.matrix-cell-dag {
  background: var(--cream);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.matrix-dagnavn {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.matrix-kcal {
  font-size: 11px;
  font-weight: 600;
  color: var(--olive);
}
.matrix-kcal.avvik { color: #c0392b; }
.matrix-makro {
  display: flex;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.matrix-makro .avvik { color: #c0392b; font-weight: 700; }
.matrix-makro .makro-k { color: #b8741a; }
.matrix-makro .makro-p { color: #2e6a4a; }
.matrix-makro .makro-f { color: #9c5230; }

.matrix-cell {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 80px;
  transition: all 0.15s;
  touch-action: manipulation;
  overflow: hidden;
}
/* AO41h — alle matrix-celler eksakt 100px på tablet+desktop så bildet (1:1) passer perfekt */
@media (min-width: 768px) {
  .matrix-cell {
    height: 100px;
    min-height: 100px;
  }
  .matrix-cell.fylt .matrix-navn {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }
}
.matrix-cell:hover { border-color: var(--olive); }
.matrix-cell.fylt.personlig { border-left: 3px solid var(--olive); }
.matrix-cell.tom {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
/* AO41i — Matrix-cellen er flexbox med tekst-kolonne (med padding) til
   venstre og bilde (uten padding) flush mot høyre kant. Bilde følger
   slot-rammens border-radius via overflow:hidden på cellen. */
.matrix-cell.fylt {
  display: flex;
  flex-direction: row;
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.matrix-cell.fylt .matrix-tekst {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 8px 8px 10px;
  gap: 4px;
}
.matrix-cell.fylt .matrix-navn {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* AO41j: reserver alltid plass til 2 linjer, så kcal + stjerner og pille-rad
     havner på samme vertikale posisjon i alle slots uansett navne-lengde */
  min-height: 2.5em;
}
.matrix-cell.fylt .matrix-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.matrix-cell.fylt .matrix-meta .matrix-kcal-sm {
  font-weight: 600;
  color: var(--text);
}
.matrix-cell.fylt .slot-actions {
  margin-top: auto;     /* pille-rad nederst */
  flex-wrap: wrap;
}
.matrix-bildeplass {
  display: block;
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  margin: 0;
  overflow: hidden;
}
.matrix-bilde {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.matrix-bilde-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(122,142,98,0.40);
  background: #F0EDE8;
}
.matrix-cell.fylt .matrix-navn,
.matrix-cell.fylt .matrix-stjerner,
.matrix-cell.fylt .matrix-tall,
.matrix-cell.fylt .slot-actions {
  grid-column: 1;
}
@media (max-width: 700px) {
  .matrix-bildeplass { display: none; }
  /* Mobil: matrix-cell beholder enkel vertikal flex (ingen bilde-kolonne) */
  .matrix-cell.fylt {
    display: flex;
    flex-direction: column;
  }
}
.matrix-navn {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.matrix-tall {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 10px;
  color: var(--text-muted);
}
.matrix-tall .matrix-kcal-sm { font-weight: 600; color: var(--text); }
.matrix-tall .makro-k { color: #b8741a; }
.matrix-tall .makro-p { color: #2e6a4a; }
.matrix-tall .makro-f { color: #9c5230; }
.matrix-pf {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

@media (max-width: 480px) {
  .matrix-rad { grid-template-columns: 60px repeat(var(--matrix-kolonner, 3), minmax(0, 1fr)); gap: 4px; }
  .matrix-cell { padding: 6px 6px; min-height: 70px; }
  .matrix-navn { font-size: 11px; }
  .matrix-tall, .matrix-makro { font-size: 9px; }
  .matrix-kcal { font-size: 10px; }
  .matrix-dagnavn { font-size: 12px; }
  .matrix-cell-hode { font-size: 10px; }
}

/* ── FAVORITTER — hjerteknapp + filter-chip ── */
.hjerte-knapp {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: transform 0.15s ease, background 0.15s;
  padding: 0;
  min-height: 44px;
  min-width: 44px;
}
.hjerte-knapp:active { transform: scale(0.9); }
.hjerte-knapp.aktiv { background: rgba(255,255,255,0.95); }
.hjerte-knapp.stor { width: 48px; height: 48px; font-size: 24px; top: 12px; right: 12px; }

.favoritt-filter-chip {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  min-height: 38px;
  touch-action: manipulation;
  transition: all 0.15s;
}
.favoritt-filter-chip.aktiv {
  background: #ffe0e0;
  border-color: #c0392b;
  color: #c0392b;
  font-weight: 600;
}
.favoritt-filter-chip:hover { border-color: var(--olive); }

.card-img { position: relative; }

/* ── VERDIKNAPP — universell chip som åpner vertikal slider ── */
.verdi-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  background: var(--card-bg);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  min-height: 44px;
  width: 100%;
  touch-action: manipulation;
  transition: all 0.15s;
}
.verdi-knapp:active {
  background: var(--olive-muted);
  border-color: var(--olive);
  transform: scale(0.98);
}
.verdi-knapp.filter-verdi-knapp {
  width: auto;
  padding: 6px 12px;
  font-size: 13px;
  min-height: 36px;
}

/* ── PF SLIDER VERTIKAL ── */
.slot-pf-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: var(--olive-muted, #eef0e4);
  color: var(--olive);
  border: none;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  min-height: 26px;
  touch-action: manipulation;
  font-family: inherit;
}
.slot-pf-knapp:active {
  background: var(--olive);
  color: white;
}
.slot-pf-knapp.matrix-pf-knapp {
  padding: 2px 8px;
  font-size: 10px;
  min-height: 0;
}

/* Bytt-knapp ved siden av POR — varm aksent for å skille fra POR */
.slot-bytt-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 10px;
  background: rgba(184, 116, 26, 0.12);
  color: #b8741a;
  border: none;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  min-height: 26px;
  touch-action: manipulation;
  font-family: inherit;
}
.slot-bytt-knapp:active {
  background: #b8741a;
  color: white;
}

/* Actions-rad: POR + Bytt ved siden av hverandre */
.slot-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  justify-content: flex-start;
}
.matrix-cell .slot-actions {
  justify-content: center;
  margin-top: auto;
  padding-top: 4px;
}
.matrix-cell .slot-actions .slot-pf-knapp,
.matrix-cell .slot-actions .slot-bytt-knapp {
  padding: 2px 6px;
  font-size: 10px;
  min-height: 0;
}

.pf-slider-overlay {
  position: fixed;
  inset: 0;
  /* Må over modal (1100), bytt-popover (1300) og fei-toast (1400) — alt som
     kan inneholde et felt som åpner slider. ao30e. */
  z-index: 1600;
  background: transparent;
  touch-action: none;
}

.pf-slider-spor {
  position: absolute;
  width: 56px;
  height: 190px;
  background: rgba(238, 240, 228, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
}
.pf-spor-tall {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.pf-spor-tall.topp { position: absolute; top: 6px; }
.pf-spor-tall.bunn { position: absolute; bottom: 6px; }
.pf-thumb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 56px;
  height: 38px;
  background: var(--olive);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(92,107,58,0.45);
  transition: none;
}
.pf-thumb-tekst {
  color: white;
  font-weight: 700;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
}

.pf-slider-boble {
  position: absolute;
  background: white;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  width: 130px;
  pointer-events: none;
  text-align: center;
}
.pf-boble-stor {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--olive);
  line-height: 1.1;
}
.pf-boble-mid {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-top: 3px;
}
.pf-boble-dag {
  font-size: 12px;
  margin-top: 2px;
  font-weight: 500;
}

/* Desktop: vis mobil-views når visning=dag eller mal-import åpen */
@media (min-width: 768px) {
  .uke-grid.desktop:not(.skjult) ~ .uke-mobil:not(.skjult) { display: none; }
  .uke-grid.desktop.skjult ~ .uke-mobil.visning-uke { display: block; max-width: 720px; margin: 0 auto; }
  /* AO37-korrigering: desktop dag-visning får full bredde for N-kolonne-grid */
  .uke-grid.desktop.skjult ~ .uke-mobil.visning-dag { display: block; max-width: none; margin: 0; }
}

/* Bytt-panel slidere */
.bytt-slidere {
  display: flex;
  gap: 14px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.bytt-slider {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bytt-slider-label {
  font-size: 12px;
  color: var(--text-muted);
}
.bytt-slider input[type="range"] {
  width: 100%;
  accent-color: var(--olive);
  min-height: auto;
}

/* ════════════════════════════════════════════════════════════════
   UNIVERSELL SLIDER-KOMPONENT — inline, alltid synlig
   ════════════════════════════════════════════════════════════════ */

.slider-wrapper {
  width: 100%;
  padding: 12px 0 8px;
  user-select: none;
  -webkit-user-select: none;
}

.slider-tall-rad {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  padding: 0 4px;
  gap: 12px;
}

.slider-stor {
  font-size: 30px;
  font-weight: 700;
  color: var(--olive);
  font-family: 'Playfair Display', serif;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(92,107,58,0.15);
  min-width: 60px;
}

.slider-stor-input {
  width: 90px;
  font-size: 28px;
  font-weight: 700;
  color: var(--olive);
  font-family: 'Playfair Display', serif;
  border: none;
  border-bottom: 2px solid var(--olive);
  background: transparent;
  outline: none;
  padding: 2px 4px;
}

.slider-midt {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  flex: 1;
}

.slider-dagssum {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: right;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.visning-enkel .slider-tall-rad { justify-content: center; }
.visning-enkel .slider-stor { text-align: center; font-size: 28px; }
.visning-dag .slider-tall-rad { justify-content: center; }
.visning-dag .slider-stor { font-size: 24px; text-align: center; }

.slider-spor-wrapper {
  position: relative;
  padding: 0 4px;
}

/* Native range — fullt custom, gradient via CSS-var --val */
.slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--olive) 0%,
    var(--olive) calc((var(--val, 0) - var(--min, 0)) / (var(--max, 1) - var(--min, 0)) * 100%),
    var(--border) calc((var(--val, 0) - var(--min, 0)) / (var(--max, 1) - var(--min, 0)) * 100%),
    var(--border) 100%
  );
  outline: none;
  cursor: pointer;
  touch-action: none;
  padding: 0;
  margin: 0;
  min-height: 0;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--olive);
  box-shadow: 0 2px 12px rgba(92, 107, 58, 0.45);
  cursor: grab;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  border: none;
}
.slider-input:active::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 4px 20px rgba(92, 107, 58, 0.55);
  cursor: grabbing;
}
.slider-input::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--olive);
  border: none;
  box-shadow: 0 2px 12px rgba(92, 107, 58, 0.45);
  cursor: grab;
}
.slider-input:focus { outline: none; }
.slider-input::-moz-range-track { background: transparent; }

.slider-min-max {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  padding: 0 2px;
}

/* Dagssum progress-bar */
.dagssum-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.dagssum-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.dagssum-progress-fyll {
  height: 100%;
  background: var(--olive);
  transition: width 0.25s;
}
.dagssum-progress-fyll.lav { background: #c89a2e; }
.dagssum-progress-fyll.avvik { background: #c0392b; }

/* PF-visning i grid */
.slot-pf {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.slot-pf .pf-tot { font-weight: 600; color: var(--text); }

.slot-batch {
  font-size: 10px;
  color: var(--olive);
  font-weight: 600;
}

/* Preview-panel PF-rad */
.preview-por-rad {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  padding: 10px 12px;
  background: var(--cream);
  border-radius: 8px;
}
.preview-por-label {
  font-weight: 600;
  font-size: 13px;
}
.preview-por-total {
  margin-left: auto;
  font-weight: 600;
  font-size: 14px;
  color: var(--olive);
}

/* AI-instruksjon-input */
.ai-input-seksjon {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.ai-input-seksjon textarea {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  background: var(--warm-white, #fff);
}
.ai-input-seksjon label {
  font-size: 12px;
  color: var(--text-muted);
}

/* Bytt-slider grid-celle */
.bytt-slider-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
}

/* ── INSTALL-BANNER (PWA) ── */
.install-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  padding: 18px 20px 16px;
  z-index: 1200;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  animation: install-banner-inn 0.3s ease-out;
}
@keyframes install-banner-inn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.install-banner-tittel {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--olive);
  margin-bottom: 8px;
}
.install-banner-tekst {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.install-banner-steg {
  margin: 8px 0 0;
  padding-left: 22px;
}
.install-banner-steg li {
  margin: 4px 0;
}
.install-banner-knapp {
  display: inline-block;
  margin-top: 12px;
  background: var(--olive);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.install-banner-knapp:hover { background: #6a7e54; }
.install-banner-fallback {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.install-banner-x {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.install-banner-x:hover { color: var(--text); }

/* På mobil: full bredde nederst, ikke flytende */
@media (max-width: 768px) {
  .install-banner {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    max-width: none;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* ── AI-LOADER ── */
.ai-loader-overlay {
  position: fixed; inset: 0;
  background: rgba(245, 242, 236, 0.95);
  backdrop-filter: blur(4px);
  z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.ai-loader-boks {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.ai-loader-stjerne {
  font-size: 38px;
  color: var(--olive);
  animation: ai-puls 2s ease-in-out infinite;
}
@keyframes ai-puls {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
}
.ai-loader-tittel {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin: 12px 0 18px;
}
.ai-loader-melding {
  min-height: 24px;
  font-size: 15px;
  color: var(--olive);
  font-weight: 500;
  margin-bottom: 16px;
  animation: ai-melding-inn 0.5s ease-out;
}
@keyframes ai-melding-inn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-loader-prikker {
  display: flex; gap: 6px; justify-content: center;
  margin-bottom: 18px;
}
.ai-loader-prikker span {
  width: 8px; height: 8px;
  background: var(--olive);
  border-radius: 50%;
  animation: ai-prikk 1.4s ease-in-out infinite;
}
.ai-loader-prikker span:nth-child(2) { animation-delay: 0.2s; }
.ai-loader-prikker span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-prikk {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
.ai-loader-tip {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── AI-KVOTE-KNAPP ── */
.ai-knapp-gruppe {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch;
}
.matematisk-generer-btn {
  background: var(--olive-muted);
  color: var(--text);
  border: 1px solid var(--olive);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.matematisk-generer-btn:hover { background: var(--olive); color: white; }
.ai-generer-btn.brukt {
  background: #ddd6cf;
  color: #888;
  cursor: pointer;
  border: 1px dashed #b0a89e;
}
.ai-kvote-tekst {
  font-size: 11px;
  display: block;
  margin-top: 2px;
  font-weight: normal;
  opacity: 0.85;
}
.flash-melding {
  background: var(--olive-muted);
  border: 1px solid var(--olive);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  margin: 12px 0;
  animation: ai-melding-inn 0.4s ease-out;
}

/* ── STUDIO ── */
.studio-side { max-width: 1100px; }
.studio-badge {
  display: inline-block;
  background: var(--olive);
  color: white;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 10px;
  vertical-align: middle;
}
.studio-modus-toggle {
  display: flex; gap: 8px; margin: 16px 0 20px; flex-wrap: wrap;
}
.modus-btn {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.modus-btn.aktiv {
  background: var(--olive);
  color: white;
  border-color: var(--olive);
}
.studio-input-seksjon {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}
.studio-h2 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--text);
}
.studio-h3 {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--olive);
}
.studio-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin: 12px 0 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.studio-tekst, .studio-sok {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  resize: vertical;
  background: var(--warm-white);
  box-sizing: border-box;
}
.studio-fil-input {
  margin: 8px 0;
}
.studio-bilde-info {
  background: var(--olive-muted);
  border: 1px solid var(--olive);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.studio-fjern-btn {
  background: none;
  border: none;
  color: #c0392b;
  cursor: pointer;
  font-size: 13px;
}
.studio-analyser-btn, .studio-publiser-btn {
  background: var(--olive);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 16px;
}
.studio-analyser-btn:disabled, .studio-publiser-btn:disabled { opacity: 0.6; cursor: wait; }
.studio-avbryt-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 14px;
  cursor: pointer;
}
.studio-slett-oppskrift-btn {
  background: #c0392b;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.studio-slett-oppskrift-btn:hover { background: #962e1a; }
.studio-feil {
  background: #fdf0ee;
  border: 1px solid #c0392b;
  border-radius: 6px;
  padding: 10px 14px;
  color: #962e1a;
  font-size: 14px;
  margin: 12px 0;
}
.studio-forhandsvisning { display: flex; flex-direction: column; gap: 20px; }
.studio-seksjon {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
.studio-original-vs-ny {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .studio-original-vs-ny { grid-template-columns: 1fr; }
}
.studio-kolonne {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.studio-kolonne.original {
  background: #f9f6f1;
}
.studio-kolonne.oddny {
  background: var(--olive-muted);
  border-color: var(--olive);
}
.studio-kolonne-tittel {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.studio-original-tekst {
  white-space: pre-wrap;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  max-height: 320px;
  overflow-y: auto;
}
.studio-original-sammendrag {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.studio-omarbeid-btn {
  background: var(--olive);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.studio-ing-tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.studio-ing-tabell th, .studio-ing-tabell td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.studio-ing-tabell th {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
}
.studio-ing-tabell tr.mangler-kobling {
  background: #fff5f0;
}
.studio-ing-tabell tr.mangler-kobling td:first-child::before {
  content: '🚩 ';
  color: #c0392b;
}
.studio-ing-input { width: 100%; border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.studio-ing-select { width: 100%; border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px; font-size: 12px; color: var(--text-muted); }

/* AO38 Del 2 — Søkbar ingrediens-dropdown */
.ing-sok { position: relative; }
.ing-sok-trigger {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 24px 5px 7px;
  font-size: 12px;
  color: var(--text);
  background: white;
  text-align: left;
  cursor: pointer;
  position: relative;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ing-sok-trigger.tom { color: var(--text-muted); }
.ing-sok-trigger:hover { border-color: var(--olive); }
.ing-sok-pil {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-muted);
}
.ing-sok-pop {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: white;
  border: 1px solid var(--olive);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 200;
  padding: 8px;
  min-width: 280px;
  max-width: 360px;
}
.ing-sok-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 13px;
  margin-bottom: 6px;
  font-family: inherit;
}
.ing-sok-input:focus { outline: 1px solid var(--olive); border-color: var(--olive); }
.ing-sok-liste {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.ing-sok-rad {
  background: none;
  border: none;
  text-align: left;
  padding: 6px 8px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  white-space: normal;
  line-height: 1.3;
}
.ing-sok-rad:hover { background: var(--olive-muted, #eef0e4); }
.ing-sok-rad.valgt { background: var(--olive-muted, #eef0e4); font-weight: 600; }
.ing-sok-tom { padding: 12px 8px; color: var(--text-muted); font-size: 12px; text-align: center; }
.ing-sok-fjern {
  margin-top: 6px;
  width: 100%;
  border: 1px solid var(--border);
  background: white;
  color: #c0392b;
  border-radius: 5px;
  padding: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.ing-sok-fjern:hover { background: #fae0dc; }

/* AO38 Del 3 — Smak-toggle */
.ing-smak-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.ing-smak-toggle input { margin: 0; cursor: pointer; }
.ing-smak-toggle:hover { color: var(--text); }

/* Smak-rad — visuelt avdempet, ingen rød flagg */
tr.ing-smak { background: rgba(122,142,98,0.04); }
tr.ing-smak .studio-ing-mengde,
tr.ing-smak .studio-ing-enhet { opacity: 0.4; }
tr.ing-smak::before { content: none !important; }
tr.ing-smak .studio-ing-input { font-style: italic; color: var(--text-muted); }

/* AO38 Del 4 — Næringsstatus-banner */
.naering-status {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin: 0 0 14px;
  line-height: 1.4;
}
.naering-status.ok {
  background: rgba(59, 106, 26, 0.08);
  color: #3b6a1a;
  border: 1px solid rgba(59, 106, 26, 0.25);
  font-weight: 600;
}
.naering-status.mangler {
  background: #fae0dc;
  color: #962e1a;
  border: 1px solid #c0392b;
}
.naering-status.mangler strong { color: #6c1f10; }
.studio-ing-mengde { width: 70px; border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.studio-ing-enhet { width: 60px; border: 1px solid var(--border); border-radius: 5px; padding: 5px 4px; font-size: 12px; }
.studio-ing-notat { width: 100%; border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px; font-size: 12px; color: var(--text-muted); }
.studio-ing-mini { width: 80px; border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px; font-size: 13px; }
.studio-ing-kcal {
  font-weight: 600;
  color: var(--olive);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  white-space: nowrap;
}
.studio-ing-navn-celle { min-width: 200px; }

/* Kolonne-bredder for ingredient-tabellen */
.studio-ing-tabell .kol-mengde { width: 78px; text-align: right; }
.studio-ing-tabell .kol-enhet { width: 68px; }
.studio-ing-tabell .kol-kcal { width: 55px; text-align: right; }
.studio-ing-tabell .kol-navn { width: auto; }
.studio-ing-tabell .kol-notat { width: 160px; }
.studio-ing-tabell .kol-slett { width: 32px; }

/* Mobil: konverter tabell-rader til kort så ingenting blir off-screen */
@media (max-width: 768px) {
  .studio-ing-tabell { font-size: 13px; display: block; }
  .studio-ing-tabell thead { display: none; }
  .studio-ing-tabell tbody { display: block; }
  .studio-ing-tabell tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 12px 52px 12px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    position: relative;
  }
  .studio-ing-tabell tr.mangler-kobling { background: #fff5f0; }
  .studio-ing-tabell tr.mangler-kobling td:first-child::before { content: none; }
  .studio-ing-tabell td {
    display: block;
    padding: 0;
    border: none;
    vertical-align: middle;
  }
  /* Navn-cella øverst på full bredde (3. siste td uansett modus) */
  .studio-ing-tabell tr td:nth-last-child(3) {
    order: 1;
    flex: 1 1 100%;
    min-width: 0;
  }
  /* Notat-cella nederst på full bredde (2. siste td) */
  .studio-ing-tabell tr td:nth-last-child(2) {
    order: 3;
    flex: 1 1 100%;
  }
  /* Slett-knapp absolutt plassert i øvre høyre hjørne av kortet */
  .studio-ing-tabell tr td:last-child {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
  }
  /* Mengde / enhet / kcal flyter på en linje midt i (order 2) */
  .studio-ing-tabell tr td { order: 2; }
  .studio-ing-mengde { width: 70px; }
  .studio-ing-enhet { width: 60px; }
  .studio-ing-navn-celle .studio-ing-input { font-size: 15px; }
  .studio-ing-notat { width: 100%; font-size: 12px; }
  .studio-ing-kcal { font-size: 13px; min-width: 40px; text-align: right; }
}
.studio-slett-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(192, 57, 43, 0.1);
  border: 1px solid rgba(192, 57, 43, 0.3);
  color: #c0392b;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 0.15s;
  line-height: 1;
}
.studio-slett-btn:hover {
  background: #c0392b;
  color: white;
  border-color: #c0392b;
  transform: scale(1.05);
}
.kol-slett-celle {
  text-align: center;
  vertical-align: middle !important;
}
@media (max-width: 768px) {
  .studio-slett-btn { width: 36px; height: 36px; font-size: 18px; }
  .studio-ing-tabell .kol-slett { width: 44px; }
}
.studio-legg-til-btn {
  background: none;
  border: 1px dashed var(--olive);
  color: var(--olive);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  margin-top: 10px;
}
.studio-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.studio-meta-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.studio-meta-grid input, .studio-meta-grid select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  background: var(--warm-white);
}
.studio-meta-fullbredde { grid-column: 1 / -1; }
.studio-porsjon-info {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}
.studio-naering {
  background: var(--olive-muted);
  border: 1px solid var(--olive);
  border-radius: 10px;
  padding: 16px 20px;
}
.studio-naering-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  text-align: center;
}
.studio-naering-grid div { display: flex; flex-direction: column; }
.studio-naering-grid strong { font-size: 22px; color: var(--olive); }
.studio-naering-grid span { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 768px) {
  .studio-naering-grid { grid-template-columns: repeat(3, 1fr); }
}
.studio-publiser-rad {
  display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap;
}
.studio-sok-treff {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.studio-sok-rad {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.studio-sok-rad:hover { background: var(--olive-muted); }
.studio-sok-rad:last-child { border-bottom: none; }
.sok-navn { font-weight: 500; }
.sok-meta { color: var(--text-muted); font-size: 12px; }
.studio-bekreftelse {
  position: fixed; inset: 0;
  background: rgba(245, 242, 236, 0.95);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 1400;
}
.studio-bekreftelse-boks {
  background: var(--card-bg);
  border: 1px solid var(--olive);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  max-width: 460px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.studio-bekreftelse-knapper {
  display: flex; gap: 10px; justify-content: center; margin-top: 18px;
}

/* Studio-link i profil */
.studio-link-seksjon { text-align: center; }
.studio-link-btn {
  background: var(--olive);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.studio-link-btn:hover { background: #6a7e54; }

/* AO28 — universell sirkulær ikon-knapp (.ikon-knapp) */
.ikon-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease, background 0.15s, color 0.15s;
  touch-action: manipulation;
}
.ikon-knapp:active { transform: scale(0.92); }
@media (max-width: 700px) {
  .ikon-knapp { width: 44px; height: 44px; }
}

/* ✏ rediger-knapp — sirkulær (AO28) */
.rediger-knapp {
  position: absolute;
  top: 8px;
  right: 60px;
  border: 1px solid var(--olive);
  color: var(--olive);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 5;
}
.rediger-knapp:hover { background: var(--olive); color: white; }
@media (max-width: 700px) {
  .rediger-knapp { right: 64px; }
}

/* Studio: AI-chat-panel */
.studio-chat {
  margin-top: 16px;
  padding: 14px;
  background: var(--olive-muted);
  border: 1px solid var(--olive);
  border-radius: 10px;
}
.studio-chat-tittel {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.studio-chat-reset {
  background: none;
  border: 1px solid var(--olive);
  color: var(--olive);
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 11px;
  cursor: pointer;
}
.studio-chat-reset:hover { background: var(--olive); color: white; }
.studio-chat-meldinger {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.studio-chat-hjelp {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  text-align: center;
  padding: 12px;
}
.studio-chat-boble {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 80%;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.studio-chat-boble.user {
  background: var(--olive);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.studio-chat-boble.assistant {
  background: #ede8df;
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.studio-chat-boble.skriver {
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.8;
}
.studio-chat-input-rad {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.studio-chat-input {
  flex: 1;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  resize: vertical;
}
.studio-chat-send {
  background: var(--olive);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.studio-chat-send:hover { background: #6a7e54; }
.studio-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
.studio-chat-tips {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: right;
}

/* Chat: timeglass + prikker mens AI tenker */
.studio-chat-boble.skriver {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-timeglass {
  display: inline-block;
  animation: chat-spin 1.6s linear infinite;
  font-size: 16px;
}
@keyframes chat-spin {
  0%, 30% { transform: rotate(0deg); }
  50%, 80% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
.chat-prikker {
  display: inline-flex; gap: 3px; margin-left: 2px;
}
.chat-prikker span {
  width: 4px; height: 4px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: chat-prikk 1.2s ease-in-out infinite;
}
.chat-prikker span:nth-child(2) { animation-delay: 0.15s; }
.chat-prikker span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-prikk {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

/* ── STJERNE-VURDERINGER ── */
/* Halvstjerne via to lag: grå bunn (☆☆☆☆☆) + gul fyll (★★★★★) klippet i bredde */
.stjerne-rad {
  position: relative;
  display: inline-block;
  line-height: 1;
  letter-spacing: 2px;
  font-family: 'Apple Color Emoji', 'Segoe UI Symbol', 'Noto Sans Symbols', system-ui, sans-serif;
  user-select: none;
}
.stjerne-rad.sm { font-size: 14px; letter-spacing: 1px; }
.stjerne-rad.md { font-size: 18px; letter-spacing: 1.5px; }
.stjerne-rad.lg { font-size: 26px; letter-spacing: 2px; }
.stjerne-rad-bunn {
  color: #d0d0d0;
}
.stjerne-rad-fyll {
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #f4b942;
  pointer-events: none;
}

.stjerne-visning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.stjerne-tall {
  color: var(--text-muted);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
  text-align: left;
}
.stjerne-tips {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
}

/* Kompakt inline-vurderingsrad */
.vurdering-kompakt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  margin: 10px 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-wrap: wrap;
}
.vurdering-del {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vurdering-mini-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Interaktiv stjerne-input — hele stjerne-raden er drag-flate (AO30c).
   PointerDown åpner vertikal verdi-slider med bobble for 1.0-5.0. */
.stjerne-klikkbar {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  position: relative;
}
.stjerne-klikkbar.drag .stjerne-klikkbar-stjerner {
  cursor: grab;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(244, 185, 66, 0.10);
  border: 1px solid rgba(244, 185, 66, 0.30);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.15s;
}
.stjerne-klikkbar.drag .stjerne-klikkbar-stjerner:hover { background: rgba(244, 185, 66, 0.18); }
.stjerne-klikkbar.drag .stjerne-klikkbar-stjerner:active { cursor: grabbing; background: rgba(244, 185, 66, 0.25); }
/* Kompakt variant for bruk inni slot/matrix-celle */
.stjerne-klikkbar.kompakt { gap: 4px; }
.stjerne-klikkbar.kompakt.drag .stjerne-klikkbar-stjerner {
  padding: 3px 6px;
  border-radius: 6px;
}
.stjerne-klikkbar.kompakt { min-width: 110px; gap: 2px; }
.stjerne-klikkbar.lg { min-width: 170px; }
.stjerne-klikkbar-stjerner {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
}
.stjerne-soner {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  z-index: 2;
}
.stjerne-sone-celle {
  flex: 1;
  display: flex;
}
.stjerne-sone {
  flex: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  min-height: 28px;
}
.stjerne-sone:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 1px;
  border-radius: 4px;
}
/* Slider — bruker accent-color for plattform-konsistent stil */
.stjerne-slider-range {
  width: 100%;
  height: 22px;
  cursor: pointer;
  margin: 0;
  padding: 0;
  accent-color: #f4b942;
}
.stjerne-klikkbar.kompakt .stjerne-slider-range { height: 16px; }
.stjerne-klikkbar .stjerne-tall {
  align-self: center;
  min-width: 28px;
  text-align: center;
}
.stjerne-klikkbar.kompakt .stjerne-tall { font-size: 11px; min-width: 22px; }

.card-stjerner {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.card-stjerne-antall { color: var(--text-muted); font-size: 10px; }

.slot-stjerner {
  display: flex;
  justify-content: flex-start;
  margin-top: 2px;
}
.slot.mobil .slot-stjerner,
.matrix-cell .slot-stjerner { justify-content: flex-start; }

/* Studio: chat-knapper (mic + send) */
.studio-chat-knapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: stretch;
}
.studio-chat-mic {
  background: var(--card-bg);
  color: var(--olive);
  border: 1px solid var(--olive);
  border-radius: 8px;
  padding: 0 14px;
  font-size: 18px;
  cursor: pointer;
  min-height: 36px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.studio-chat-mic:hover { background: var(--olive); color: white; }
.studio-chat-mic.tarOpp {
  background: #c0392b;
  color: white;
  border-color: #962e1a;
  animation: mic-puls 1s ease-in-out infinite;
}
@keyframes mic-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(192,57,43,0); }
}
.studio-chat-mic:disabled { opacity: 0.5; cursor: not-allowed; }

/* Studio: label + mic-knapp side-om-side */
.studio-label-rad {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.studio-label-rad .studio-label { margin: 0; }
.studio-input-mic {
  padding: 8px 14px;
  font-size: 13px;
  min-height: 36px;
  flex-shrink: 0;
}

.studio-eier-info {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin: -6px 0 16px;
}

/* Studio: bilde-generering — løftet opp under Seksjon A */
.studio-seksjon-bilde {
  background: linear-gradient(180deg, rgba(184, 116, 26, 0.05) 0%, var(--card-bg) 60%);
  border-color: rgba(184, 116, 26, 0.25);
}
.studio-bilde-forhandsvis {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--card-bg);
  border: 1px solid rgba(122, 142, 98, 0.3);
  border-radius: 10px;
}
.studio-bilde-aktiv {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
}
.studio-bilde-forhandsvis-tekst {
  font-size: 13px;
  color: var(--olive);
  font-weight: 500;
  line-height: 1.4;
}
.studio-bilde-hjelp {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
/* Stil-presets — chip-rad */
.studio-stil-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.studio-stil-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 18px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  user-select: none;
}
.studio-stil-chip:hover {
  border-color: var(--olive);
  background: var(--olive-muted, #eef0e4);
}
.studio-stil-chip.aktiv {
  background: var(--olive);
  color: white;
  border-color: var(--olive);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.studio-stil-emoji { font-size: 14px; }

.studio-bilde-prompt-rad {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
.studio-bilde-prompt {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  resize: vertical;
}
.studio-bilde-knapper {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.studio-bilde-knapper .studio-chat-mic {
  min-width: 48px;
  padding: 0 12px;
}
.studio-bilde-btn {
  background: var(--olive);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.studio-bilde-btn:hover { background: #6a7e54; }
.studio-bilde-btn:disabled { opacity: 0.6; cursor: wait; }
.studio-bilde-varianter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.studio-bilde-variant {
  background: none;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s;
}
.studio-bilde-variant:hover { border-color: var(--olive); }
.studio-bilde-variant img {
  width: 100%;
  height: auto;
  display: block;
}
.studio-bilde-velg {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(122, 142, 98, 0.92);
  color: white;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.15s, transform 0.15s;
}
.studio-bilde-variant:hover .studio-bilde-velg {
  opacity: 1;
  transform: translateY(0);
}

.studio-mic-feil {
  background: #fdf0ee;
  border: 1px solid #c0392b;
  border-radius: 6px;
  padding: 8px 12px;
  color: #962e1a;
  font-size: 12px;
  margin-top: 8px;
}

/* ── FEIL-TOAST ── */
.feil-toast-wrap {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
  pointer-events: none;
}
@media (min-width: 768px) {
  .feil-toast-wrap { bottom: 24px; }
}
.feil-toast {
  background: #fdf0ee;
  border: 1px solid #c0392b;
  border-left: 4px solid #c0392b;
  border-radius: 8px;
  padding: 10px 32px 10px 14px;
  font-size: 13px;
  color: #2c2a26;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: feil-toast-inn 0.3s ease-out;
  pointer-events: auto;
  position: relative;
}
.feil-toast.niva-advarsel {
  background: #fef7e6;
  border-color: #b8741a;
  border-left-color: #b8741a;
}
.feil-toast-tittel {
  font-weight: 600;
  color: #962e1a;
  margin-bottom: 4px;
}
.feil-toast.niva-advarsel .feil-toast-tittel { color: #8a5a1a; }
.feil-toast-melding {
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
  margin-bottom: 6px;
}
.feil-toast-kopier {
  background: none;
  border: none;
  color: #962e1a;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
}
.feil-toast-x {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  font-size: 18px;
  color: #962e1a;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
@keyframes feil-toast-inn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ── LOGGER-SIDE ── */
.logger-side { max-width: 1200px; }
.logger-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.logger-kontekster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
  align-items: center;
}
.logger-kontekster-label {
  font-size: 11px;
  color: var(--text-muted);
}
.logger-kontekst-chip {
  background: var(--olive-muted);
  border: 1px solid var(--olive);
  color: var(--olive);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}
.logger-kontekst-chip:hover { background: var(--olive); color: white; }
.logger-tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}
.logger-tabell th, .logger-tabell td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.logger-tabell th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--card-bg);
}
.logger-rad { cursor: pointer; }
.logger-rad:hover { background: var(--olive-muted); }
.logger-rad.niva-feil { border-left: 3px solid #c0392b; }
.logger-rad.niva-advarsel { border-left: 3px solid #b8741a; }
.logger-rad.niva-info { border-left: 3px solid #7a8e62; }
.logger-tid { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-muted); }
.logger-niva {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.logger-niva.feil { background: #fdf0ee; color: #962e1a; }
.logger-niva.advarsel { background: #fef7e6; color: #8a5a1a; }
.logger-niva.info { background: var(--olive-muted); color: var(--olive); }
.logger-kontekst { font-weight: 500; font-family: 'DM Sans', sans-serif; }
.logger-melding {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 12px;
}
.logger-versjon { font-size: 11px; color: var(--text-muted); font-family: monospace; }
.logger-detalj { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.logger-detalj > div { word-break: break-word; }
.logger-pre {
  background: #f5f2ec;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  margin: 4px 0;
}
@media (max-width: 768px) {
  .logger-tabell th:nth-child(5),
  .logger-tabell td:nth-child(5) { display: none; }
  .logger-melding { max-width: 160px; }
}

/* ════════════════════════════════════════════════════════════════
   AO43 — Handleliste-redesign: kompakt sticky header + masonry-grid
   ════════════════════════════════════════════════════════════════ */
.hl-topp {
  position: fixed;
  top: 60px;
  left: var(--app-side);
  right: var(--app-side);
  z-index: 95;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px -8px rgba(122,142,98,0.18);
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .hl-topp { top: calc(52px + env(safe-area-inset-top)); padding: 10px 14px; gap: 10px; }
}
.hl-innhold { padding-top: 64px; }
@media (max-width: 700px) {
  /* Header wrapper til 3 rader på mobil — gi mer plass så toppen ikke skjules */
  .hl-innhold { padding-top: 150px; }
}

.hl-topp-venstre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hl-topp-midt { display: flex; align-items: center; gap: 10px; }
.hl-topp-hoyre { display: flex; align-items: center; gap: 8px; }

.hl-topp-tittel {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  color: var(--olive);
  margin: 0;
  line-height: 1.1;
}
.hl-topp-skille { color: var(--text-muted); font-size: 16px; margin: 0 -2px; }
.hl-topp-plan {
  font-size: 13px;
  color: var(--text);
  background: var(--olive-muted, #eef0e4);
  padding: 4px 10px;
  border-radius: 14px;
  font-weight: 500;
  cursor: help;
}
.hl-topp-teller {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
@media (max-width: 700px) { .hl-topp-tittel { font-size: 22px; } }

/* Dag-range-velger */
.hl-dagrange { position: relative; }
.hl-dagrange-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1px dashed var(--olive);
  color: var(--olive);
  padding: 6px 12px;
  border-radius: 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.hl-dagrange-trigger:hover { background: var(--olive-muted, #eef0e4); border-style: solid; }
.hl-dagrange-caret { font-size: 9px; opacity: 0.7; }
.hl-dagrange-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 40px -16px rgba(42,37,32,0.25);
  padding: 12px;
  z-index: 200;
  min-width: 200px;
  animation: pop-glir-ned 0.18s ease-out;
}
.hl-dagrange-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.hl-dagrange-rad:last-child { margin-bottom: 0; }
.hl-dagrange-rad label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.hl-dagrange-rad select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  background: white;
  min-width: 100px;
}

/* Generer-knapp */
.hl-generer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, var(--olive), #6e8254);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(122,142,98,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.hl-generer-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(122,142,98,0.35);
}
.hl-generer-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Eksport-dropdown */
.hl-eksport { position: relative; display: inline-flex; gap: 6px; }
.hl-share-btn,
.hl-eksport-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--olive);
  color: var(--olive);
  padding: 7px 12px;
  border-radius: 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.hl-share-btn:hover,
.hl-eksport-trigger:hover { background: var(--olive-muted, #eef0e4); }
.hl-eksport-caret { font-size: 9px; opacity: 0.7; }
.hl-eksport-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 50px -20px rgba(42,37,32,0.35);
  min-width: 320px;
  padding: 8px;
  z-index: 200;
  animation: pop-glir-ned 0.18s ease-out;
}
.hl-eksport-overskrift {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 8px 10px 4px;
}
.hl-eksport-valg {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.hl-eksport-valg:hover { background: var(--olive-muted, #eef0e4); }
.hl-eksport-emoji { font-size: 18px; flex-shrink: 0; }
.hl-eksport-tekst { display: flex; flex-direction: column; min-width: 0; }
.hl-eksport-tekst strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
}
.hl-eksport-tekst small {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.hl-eksport-skille {
  height: 1px;
  background: var(--border);
  margin: 6px 8px;
}

/* Tom-melding når ingen plan / ingen liste */
.hl-tom-melding {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 24px;
  color: var(--text-muted);
  text-align: center;
}
.hl-tom-melding p { margin: 0; font-size: 14px; max-width: 360px; line-height: 1.5; }

.hl-feil {
  background: #fae0dc;
  border: 1px solid #c0392b;
  color: #962e1a;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 16px;
  font-size: 13px;
}

/* AO43b — CSS columns for naturlig masonry-balanse (korte/lange kategorier
   flyter naturlig inn der det er plass — ingen ujevne haler). */
.hl-kategorier {
  column-count: 3;
  column-gap: 16px;
  padding-top: 8px;
}
@media (max-width: 1023px) {
  .hl-kategorier { column-count: 2; }
}
@media (max-width: 700px) {
  .hl-kategorier { column-count: 1; }
}
.hl-kategori-kort {
  break-inside: avoid;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow: 0 2px 6px -2px rgba(42,37,32,0.06);
  margin-bottom: 16px;
  display: block;
}
.hl-kategori-tittel {
  font-weight: 700;
  font-size: 13px;
  color: var(--olive);
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.hl-vareliste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.hl-vare {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 6px;
  font-size: 13px;
  transition: background 0.12s, opacity 0.18s;
  cursor: pointer;
  user-select: none;
}
.hl-vare:hover { background: var(--olive-muted, #eef0e4); }
.hl-vare-sjekk {
  font-size: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  transition: color 0.15s;
}
.hl-vare-navn {
  color: var(--text);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  transition: color 0.15s;
}
.hl-vare-mengde {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.hl-vare.avhuket {
  opacity: 0.45;
}
.hl-vare.avhuket .hl-vare-sjekk { color: var(--olive); }
.hl-vare.avhuket .hl-vare-navn,
.hl-vare.avhuket .hl-vare-mengde {
  text-decoration: line-through;
}

/* ════════════════════════════════════════════════════════════════
   AO28 — ThumbSlider og MealKort
   ════════════════════════════════════════════════════════════════ */

/* ThumbSlider — universell chip som åpner vertikal slider */
.thumb-slider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 14px;
  background: var(--olive-muted, #eef0e4);
  color: var(--olive);
  border: 1px solid transparent;
  border-radius: 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  /* touch-action: none — vertikal drag på chip-en skal IKKE scrolle modalen.
     iOS Safari avgjør scroll på første touchmove, så preventDefault i
     visVerdiSlider rekker ikke. (ao30g) */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.thumb-slider:active { background: var(--olive); color: white; }
.thumb-slider:hover { border-color: var(--olive); }

.thumb-slider--stjerner {
  /* Vertikal thumbnail: tall pill, stjerne inni + tall under */
  background: rgba(241, 196, 15, 0.18);
  color: #b8741a;
  width: 44px;
  height: 56px;
  min-width: 44px;
  min-height: 56px;
  padding: 4px 0;
  border-radius: 22px;
  border: 1px solid rgba(244, 185, 66, 0.45);
}
.thumb-slider--stjerner:active { background: rgba(241,196,15,0.35); }
.stjerne-thumb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}
.stjerne-thumb-star {
  font-size: 20px;
  color: #f4b942;
  line-height: 1;
}
.stjerne-thumb-val {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.thumb-slider--por {
  background: rgba(184, 116, 26, 0.12);
  color: #b8741a;
}
.thumb-slider--por:active { background: #b8741a; color: white; }

.thumb-slider-tall { font-size: 22px; line-height: 1; }
.stjerne-thumb-label {
  display: inline-flex; align-items: center; gap: 4px;
}
.stjerne-thumb-emoji { font-size: 18px; }
.stjerne-thumb-tall { font-size: 13px; font-weight: 600; }

/* MealKort — bilde høyre, tekst venstre, pille-rad nederst */
.meal-kort {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 96px;
  background: var(--card-bg);
}
.meal-kort-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  min-width: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(92,107,58,0.15);
}
.meal-kort-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.meal-kort-navn {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.meal-kort-makro {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.meal-kort-makro .meal-kcal { color: var(--text); font-weight: 600; }
.meal-kort-makro .makro-k { color: #b8741a; }
.meal-kort-makro .makro-p { color: #2e6a4a; }
.meal-kort-makro .makro-f { color: #9c5230; }
.meal-kort-piller {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}
/* Strammere mellomrom mellom stjerner og POR-pille — gir plass til kopi-pille
   til høyre for ↻ Bytt (ao30m). */
.meal-kort-piller .meal-stjerner + .meal-pille--por { margin-left: -2px; }
.meal-pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border: none;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  min-height: 26px;
  font-family: inherit;
  touch-action: manipulation;
}
.meal-pille--por {
  background: var(--olive-muted, #eef0e4);
  color: var(--olive);
}
.meal-pille--por:active { background: var(--olive); color: white; }
.meal-pille--bytt {
  background: rgba(184, 116, 26, 0.12);
  color: #b8741a;
}
.meal-pille--bytt:active { background: #b8741a; color: white; }
.meal-pille--kopi {
  background: rgba(122,142,98,0.10);
  color: var(--olive);
  padding: 4px 8px;
  font-size: 14px;
}
.meal-pille--kopi:active { background: var(--olive); color: white; }
.meal-pille--kopi.aktiv { background: var(--olive); color: white; }
.meal-stjerner { display: inline-flex; align-items: center; }
/* AO37 — bilde og plassholder i fast wrapper med standardisert størrelse per visning */
.meal-kort-bildeplass {
  display: block;
  align-self: stretch;
  background: var(--cream);
  overflow: hidden;
  flex-shrink: 0;
}
.meal-kort-bilde {
  width: 100%;
  height: 100%;
  min-height: 96px;
  object-fit: cover;
  display: block;
}
.meal-kort-bilde-placeholder {
  width: 100%;
  height: 100%;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: rgba(122,142,98,0.40);
  background: #F0EDE8;
}
/* AO46h: fast slot-høyde + fast kvadratbilde (Spotify-stil).
   Forrige aspect-ratio:1/1 + stretch skapte feedback-loop der kortet
   kunne eksplodere på enkelte slots. Nå er begge dimensjoner låst. */
.meal-kort--matrix .meal-kort-bildeplass { width: 80px; }
.meal-kort--dag,
.meal-kort--uke {
  min-height: 130px;
  height: 130px;
}
.meal-kort--dag .meal-kort-bildeplass,
.meal-kort--uke .meal-kort-bildeplass {
  width: 130px;
  height: 130px;
  flex-shrink: 0;
  align-self: stretch;
}
.meal-kort--dag .meal-kort-bilde,
.meal-kort--uke .meal-kort-bilde,
.meal-kort--dag .meal-kort-bilde-placeholder,
.meal-kort--uke .meal-kort-bilde-placeholder {
  width: 130px;
  height: 130px;
  min-height: 0;
  object-fit: cover;
}
@media (min-width: 768px) {
  .meal-kort--matrix .meal-kort-bildeplass { width: 90px; }
}

/* Slot-wrapper i uke-grid og mobil — MealKort fyller hele slot */
.slot.fylt .meal-kort {
  border-radius: inherit;
  overflow: hidden;
}

/* Matrix-cellens nye stjerne-rad */
.matrix-stjerner {
  display: flex;
  justify-content: center;
  margin: 2px 0;
}
@media (max-width: 700px) {
  .matrix-stjerner { transform: scale(0.85); transform-origin: center; }
}

/* AO28 Del 5 — bottom-nav konsistens: bytt 100vh → 100dvh for overlays */
.modal-overlay,
.bytt-panel,
.preview-panel { min-height: 100dvh; }
@supports not (height: 100dvh) {
  .modal-overlay,
  .bytt-panel,
  .preview-panel { min-height: 100vh; }
}

/* ════════════════════════════════════════════════════════════════
   AO29 — ByttPopover (flytende), kopi-paste-mønster
   ════════════════════════════════════════════════════════════════ */
.bytt-popover-rot {
  position: fixed;
  inset: 0;
  z-index: 1300;
}
.bytt-popover-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42,37,32,0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bytt-popover {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(42,37,32,0.22);
  padding: 14px;
  gap: 10px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
}
.bytt-popover-close {
  position: absolute;
  top: 6px; right: 8px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.bytt-popover-tittel {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  margin: 0 28px 0 0;
  color: var(--text);
}
.bytt-popover-sok {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--warm-white, #faf6ef);
  font-family: inherit;
  font-size: 14px;
}
.bytt-popover-filtre {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bytt-popover-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 12px;
}
.bytt-popover-score-rad {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.bytt-popover-resultater {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 -4px;
  padding: 0 4px;
}
.bytt-popover-resultat {
  display: flex;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  transition: background 0.12s;
}
.bytt-popover-resultat:hover { background: var(--olive-muted, #eef0e4); }
.bytt-popover-bilde {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.bytt-popover-tekst {
  flex: 1;
  min-width: 0;
}
.bytt-popover-navn {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bytt-popover-tom {
  text-align: center;
  padding: 30px 12px;
  color: var(--text-muted);
  font-size: 13px;
}
.favoritt-filter-chip.mini {
  padding: 4px 10px;
  min-height: 30px;
  font-size: 14px;
}

/* Kopi-paste-mønster — knapp på slot + lim-inn-overlay */
.slot-kopier-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: rgba(122,142,98,0.10);
  color: var(--olive);
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-height: 26px;
  touch-action: manipulation;
}
.slot-kopier-knapp:hover { background: rgba(122,142,98,0.20); }
.slot-kopier-knapp.aktiv {
  background: var(--olive);
  color: white;
}
/* (meal-kopier-ikon var den gamle absolutt-posisjonerte sirkelen — erstattet
   med inline .meal-pille--kopi i pille-raden i ao30m) */
.meal-kort.kopier-aktiv {
  outline: 2px solid var(--olive);
  outline-offset: -2px;
}
.meal-kort.kan-lim-inn {
  cursor: pointer;
  position: relative;
}
.meal-lim-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(122,142,98,0.18);
  font-size: 28px;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}
.matrix-cell.kopier-aktiv { outline: 2px solid var(--olive); outline-offset: -2px; }
.matrix-cell.kan-lim-inn { background: rgba(122,142,98,0.18); cursor: pointer; }
.slot-tom.kan-lim-inn { background: rgba(122,142,98,0.12); color: var(--olive); }

/* MealKort må ha position:relative for at lim-overlay og kopier-ikon plasseres riktig */
.meal-kort { position: relative; }

/* ════════════════════════════════════════════════════════════════
   AO30 — HeroBanner og ukemeny-heading
   ════════════════════════════════════════════════════════════════ */
.hero-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(122,142,98,0.10) 0%, rgba(184,116,26,0.08) 100%);
  border: 1px solid rgba(122,142,98,0.20);
  border-radius: 16px;
  padding: 24px 22px 22px;
  margin: 0 0 18px;
}
.hero-banner--pro {
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(122,142,98,0.15) 0%, rgba(122,142,98,0.05) 100%);
}
.hero-skjul {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.hero-skjul:hover { background: rgba(0,0,0,0.05); color: var(--text); }
.hero-overskrift {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  line-height: 1.18;
  color: var(--text);
  margin: 0 32px 18px 0;
  font-weight: 600;
}
.hero-velkomst {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: var(--olive);
  margin: 0 32px 0 0;
  font-weight: 600;
}
.hero-ikoner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 16px;
}
.hero-ikon-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.hero-ikon-emoji {
  font-size: 28px;
  line-height: 1;
}
.hero-ikon-tittel {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.hero-ikon-undertekst {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}
.hero-cta {
  background: var(--olive);
  color: white;
  border: none;
  border-radius: 22px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.hero-cta:hover { background: #6a7e54; }
.hero-cta:active { transform: scale(0.98); }
@media (max-width: 700px) {
  .hero-banner { padding: 18px 14px 16px; margin-bottom: 14px; }
  .hero-overskrift { font-size: 20px; margin-right: 28px; margin-bottom: 14px; }
  .hero-velkomst { font-size: 18px; }
  .hero-ikoner { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
  .hero-ikon-emoji { font-size: 24px; }
  .hero-cta { padding: 9px 16px; font-size: 13px; }
}

/* Ukemeny-heading — Din uke */
.ukemeny-heading {
  margin: 0 0 16px;
}
.ukemeny-heading-tittel {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--olive);
  margin: 0 0 4px;
  line-height: 1.1;
}
.ukemeny-heading-undertekst {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}
@media (max-width: 700px) {
  .ukemeny-heading-tittel { font-size: 26px; }
  .ukemeny-heading-undertekst { font-size: 13px; }
}

/* AO37 — FELLES-chip og gammel emoji-toggle fjernet helt. */
.slot-personlig-chip, .slot-personlig-toggle { display: none !important; }

/* ── AO46: liste-veksler (aktiv/forrige) ──────────────────────────── */
.hl-liste-velger {
  display: inline-flex;
  align-items: center;
  background: var(--olive-muted, #eef0e4);
  border-radius: 12px;
  padding: 2px;
  margin-left: 4px;
}
.hl-liste-pille {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.hl-liste-pille.aktiv {
  background: var(--card-bg);
  color: var(--olive);
  box-shadow: 0 1px 3px rgba(42,37,32,0.1);
}
.hl-liste-pille:hover:not(.aktiv) { color: var(--text); }

/* ── AO44: AI-handleliste ─────────────────────────────────────────── */

/* AI-trigger i header */
.hl-ai-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f6efe1 0%, #efe5d2 100%);
  border: 1px solid var(--olive);
  color: var(--olive);
  padding: 7px 12px;
  border-radius: 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.hl-ai-trigger:hover { background: linear-gradient(135deg, #efe5d2 0%, #e6d8be 100%); transform: translateY(-1px); }
.hl-ai-trigger.aktiv { background: var(--olive); color: var(--card-bg); }
.hl-ai-kvote {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  padding-left: 4px;
  border-left: 1px solid currentColor;
  margin-left: 2px;
}

/* AI-merket vare i lista */
.hl-vare.ai-lagt-til {
  background: linear-gradient(90deg, rgba(246,239,225,0.5) 0%, transparent 60%);
}
.hl-vare-ai {
  font-size: 11px;
  margin-right: 4px;
  opacity: 0.8;
}

/* AI-chat overlay */
.hl-ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42,37,32,0.4);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: hl-ai-fade-in 0.18s ease;
}
@keyframes hl-ai-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hl-ai-modal {
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(42,37,32,0.5);
  width: 100%;
  max-width: 560px;
  max-height: min(720px, calc(100dvh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: hl-ai-slide-up 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hl-ai-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.hl-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #fbf7ec 0%, #f6efe1 100%);
}
.hl-ai-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  margin: 0;
  color: var(--text);
  font-weight: 600;
}
.hl-ai-header small {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.hl-ai-lukk {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.hl-ai-lukk:hover { background: rgba(0,0,0,0.06); }

.hl-ai-meldinger {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
}
.hl-ai-overlay { overscroll-behavior: contain; }
.hl-ai-modal { overscroll-behavior: contain; }
.hl-ai-melding { display: flex; }
.hl-ai-melding.hl-ai-assistant { justify-content: flex-start; }
.hl-ai-melding.hl-ai-user { justify-content: flex-end; }
.hl-ai-boble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.hl-ai-assistant .hl-ai-boble {
  background: var(--olive-muted, #eef0e4);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.hl-ai-user .hl-ai-boble {
  background: var(--olive);
  color: var(--card-bg);
  border-bottom-right-radius: 4px;
}

.hl-ai-laster { display: inline-flex; gap: 4px; padding: 14px; }
.hl-ai-dot {
  width: 6px; height: 6px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: hl-ai-bounce 1.2s infinite ease-in-out;
}
.hl-ai-dot:nth-child(2) { animation-delay: 0.15s; }
.hl-ai-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes hl-ai-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.hl-ai-feil {
  padding: 8px 18px;
  font-size: 12px;
  color: #b04a3a;
  background: rgba(176,74,58,0.08);
  border-top: 1px solid rgba(176,74,58,0.2);
}

.hl-ai-input-rad {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
  align-items: flex-end;
}
.hl-ai-input-rad textarea {
  flex: 1;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: #fafaf6;
  line-height: 1.4;
  min-height: 60px;
  max-height: 240px;
  overflow-y: auto;
}
.hl-ai-input-rad textarea:focus {
  outline: none;
  border-color: var(--olive);
  background: var(--card-bg);
}
.hl-ai-mic, .hl-ai-send {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  border: 1px solid var(--olive);
  background: var(--card-bg);
  color: var(--olive);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hl-ai-mic:hover, .hl-ai-send:hover { background: var(--olive-muted, #eef0e4); }
.hl-ai-mic.tar-opp {
  background: #c5413a;
  color: white;
  border-color: #c5413a;
  animation: hl-ai-puls 1.1s infinite;
}
@keyframes hl-ai-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197,65,58,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(197,65,58,0); }
}
.hl-ai-send {
  width: auto;
  padding: 0 16px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  background: var(--olive);
  color: var(--card-bg);
  border-color: var(--olive);
}
.hl-ai-send:hover { background: var(--olive-dark, #6a7d54); }
.hl-ai-send:disabled, .hl-ai-mic:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 700px) {
  .hl-ai-overlay { padding: 0; align-items: flex-end; }
  .hl-ai-modal {
    max-width: 100%;
    max-height: 90dvh;
    border-radius: 16px 16px 0 0;
    animation: hl-ai-slide-up-mobil 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes hl-ai-slide-up-mobil {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .hl-ai-kvote { display: none; }
}