/* ============================================================================
   DESIGN TOKENEK - felület-testreszabás (Megjelenés/Beállítások, platform-
   szintű funkció). Ez az egyetlen hely, ahol téma-színt/méretet definiálunk -
   MINDEN komponens-szabály ezekre a tokenekre (vagy egy belőlük színt
   származtató color-mix()-re) hivatkozzon, SOHA ne írj ide színt/méretet
   közvetlenül egy osztály-szabályba, különben a téma-váltás (js/theme.js
   applyTheme) nem fog hatni rá. Az itt megadott értékek a BEÉPÍTETT ALAP
   téma ("RG alap") - ezt írja felül futásidőben a felhasználó ui_preferences
   -e, majd (ha van nyitott projekt) a projekt ui_overrides-a.
   ============================================================================ */
:root {
  --bg: #1C1A17;
  --surface: #242220;
  --text: #F0EDE8;
  --text-muted: #B5A898;
  --accent: #8FAF8F;
  --accent-contrast: #1C1A17;   /* automatikusan újraszámolva téma-váltáskor (js/theme.js pickContrastColor) */
  --border: color-mix(in srgb, var(--text) 8%, transparent);
  --font-scale: 1;
  --card-radius: 18px;
  --card-density: 1;            /* 1 = kényelmes, ~0.65 = kompakt - lásd [data-density] lent */

  /* Fix, NEM felhasználó által testreszabható szemantikus státusz-színek
     (hiba/figyelmeztetés) - szándékosan kimaradtak a személyre szabható
     tokenkészletből (lásd CLAUDE.md Megjelenés szekció): egy "piros hiba"
     jelentése félreérthető lenne, ha bárki átszínezhetné. A hozzájuk tartozó
     kontraszt-szín is fix - NEM a felhasználó --bg/--text tokenjéből
     származik, mert az user-adjustable, és nem garantált kombináció lenne. */
  --danger: #B47A7A;
  --warning: #C4A35A;
  --status-contrast: #1C1A17;

  /* --card-radius-ból/--accent-ból származtatott, NEM önállóan
     testreszabható segéd-tokenek - konzisztens skálázás/kontraszt, ha a
     felhasználó módosítja az alap-tokent. */
  --card-radius-lg: calc(var(--card-radius) + 6px);
  --card-radius-sm: max(4px, calc(var(--card-radius) - 4px));
  --control-radius: max(6px, calc(var(--card-radius) * 0.6));
  --accent-strong: color-mix(in srgb, var(--accent) 85%, black);
}

* {
  box-sizing: border-box;
}

html {
  font-size: calc(16px * var(--font-scale));
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: radial-gradient(circle at top, color-mix(in srgb, var(--accent) 20%, transparent), transparent 35%), var(--bg);
  color: var(--text);
}

body {
  display: grid;
  place-items: center;
  padding: 2rem;
}

.app-shell {
  width: min(1200px, 100%);
  max-width: 1200px;
}

.card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: calc(2rem * var(--card-density));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
}

.header-row,
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.header-row h1,
.dashboard-header h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.header-row .meta,
.dashboard-header .meta,
.auth-header p,
.project-meta,
.placeholder-note {
  color: var(--text-muted);
  line-height: 1.6;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.75rem;
}

.button,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.2rem;
  border-radius: var(--control-radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.button {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  color: var(--accent-contrast);
}

.button-secondary {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
}

.button:hover:not(:disabled),
.button-secondary:hover:not(:disabled),
.button:focus-visible:not(:disabled),
.button-secondary:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  opacity: 0.95;
}

.button:disabled,
.button-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.filter-chip {
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
  cursor: pointer;
}

.filter-chip.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.projects-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.project-card {
  position: relative;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: var(--card-radius);
  padding: calc(1.5rem * var(--card-density));
  display: grid;
  gap: 1rem;
}

.project-card-clickable {
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.project-card-clickable:hover,
.project-card-clickable:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  outline: none;
}

.project-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

/* Hely fenntartása a "⋮" kártya-menünek (top:1rem; right:1rem; 2rem széles),
   hogy a csillag/szín ne csússzon egybe vele. */
.project-card.has-menu .project-top {
  padding-right: 2rem;
}

.project-name {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
}

.project-meta {
  margin: 0;
  font-size: 0.95rem;
}

.project-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.project-badge {
  display: inline-flex;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font-size: 0.83rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.badge-active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.badge-paused { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--warning); }
.badge-archived { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--text-muted); }
.badge-trash { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.project-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.project-star {
  font-size: 1.2rem;
  color: var(--text-muted);
  cursor: pointer;
}

.project-star.active {
  color: var(--warning);
}

.button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.2rem;
  border-radius: var(--control-radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--danger);
  color: var(--status-contrast);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.button-danger:hover:not(:disabled),
.button-danger:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  opacity: 0.95;
}

.button-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.delete-confirm-text {
  color: var(--danger);
  font-size: 0.88rem;
  margin: 0;
}

/* "⋮" kártya-menü (renderClientCards) - jobb felső sarokban lebegő
   műveletek gomb + lenyíló panel. Jelenleg csak Törlés/Visszaállítás,
   később ide kerül a jogosultság-kezelés is.
   A `.card-menu*` a MEGOSZTOTT, generikus alakja ugyanennek a mintának -
   generált tartalom kártyáin (Trendfigyelő, Kulcsszókutatás stb.) az
   "Ötletládához adás" menühöz (buildCardIdeaMenuHtml, block_utils.js) -,
   nincs duplikált szabály, csak a szelektor-lista bővül. */
.client-menu,
.card-menu {
  position: relative;
  z-index: 5;
}

.client-menu {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.card-menu {
  display: inline-flex;
  margin-left: auto;
}

.client-menu-trigger,
.card-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.client-menu-trigger:hover,
.client-menu-trigger:focus-visible,
.card-menu-trigger:hover,
.card-menu-trigger:focus-visible {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}

.client-menu-dropdown,
.card-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 0.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  z-index: 10;
}

.client-menu-item,
.card-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.client-menu-item:hover,
.client-menu-item:focus-visible,
.card-menu-item:hover,
.card-menu-item:focus-visible {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.client-menu-item-danger {
  color: var(--danger);
}

.client-menu-confirm {
  display: grid;
  gap: 0.6rem;
  min-width: 220px;
}

.client-menu-confirm .button-danger,
.client-menu-confirm .button-secondary {
  padding: 0.65rem 0.9rem;
  width: 100%;
}

.header-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.block-picker-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.block-picker-card {
  display: block;
  width: 100%;
  text-align: left;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: var(--card-radius);
  padding: calc(1.5rem * var(--card-density));
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.block-picker-card:hover,
.block-picker-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.block-picker-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.block-picker-card .meta {
  margin: 0;
}

/* Blokk-választó szakterületi csoportosítása (accordion, felhasználói kérés
   2026-08-06) - natív <details>/<summary>, csak design tokenekre hivatkozva
   (lásd a fájl tetejei megjegyzés), hogy a téma-rendszer (világos/sötét,
   projekt-accent) ide is hasson. A `.block-picker-grid` a <details> BELSEJÉBEN
   változatlan marad, így a rács/lista téma-beállítás (lásd lent,
   [data-layout="list"]) továbbra is érvényesül. */
.block-groups {
  display: grid;
  gap: 1.25rem;
}

.block-group {
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: var(--card-radius);
  padding: calc(1rem * var(--card-density)) calc(1.5rem * var(--card-density));
}

.block-group[open] {
  padding-bottom: calc(1.5rem * var(--card-density));
}

.block-group > .block-picker-grid {
  margin-top: 1rem;
}

.block-group-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  list-style: none;
  color: var(--text);
  font-weight: 600;
  font-size: 1.05rem;
}

.block-group-summary::-webkit-details-marker {
  display: none;
}

.block-group-summary::before {
  content: '▸';
  display: inline-block;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.block-group[open] > .block-group-summary::before {
  transform: rotate(90deg);
}

.block-group-count {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Ügyfél adatlap (CLAUDE.md 6.4.1 szekció) - a 10 szekció a fenti
   .block-group accordion-mintát használja változatlanul; az alábbi
   szabályok csak a szekciókon BELÜLI, korábban nem létező elem-típusokat
   fedik le (kapcsolattartó-sorok, aktivitás/csapat/dokumentum-listák,
   stratégia-kivonat kártyák) - csak design tokenekre hivatkozva. */
.contact-persons-list {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.contact-person-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.cd-activity-list,
.cd-team-list,
.cd-documents-list {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  padding: 0;
  margin: 0.5rem 0 1rem;
}

.cd-activity-list li,
.cd-team-list li,
.cd-documents-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cd-strategy-channel {
  border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.cd-strategy-channel:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.cd-integrations-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.client-detail-tabs {
  margin-top: 1rem;
}

/* Ötletláda (CLAUDE.md 11. szekció) - a lista/kanban kártyák és oszlopok,
   csak design tokenekre hivatkozva, hogy a téma-rendszer (világos/sötét,
   projekt-accent) ide is hasson. A `.block-groups`/`.block-group` accordion
   (fent) és a `.project-badge`/`.badge-*` (lásd a fájl elején) újrahasznosítva,
   itt csak a korábban nem létező elem-típusok kapnak szabályt. */
.idea-subview-tabs {
  margin: 1rem 0;
}

.idea-quick-add-form {
  margin-top: 1rem;
}

.idea-filter-row {
  margin-bottom: 1rem;
}

.idea-filter-row select {
  width: auto;
  flex: 1 1 160px;
}

.idea-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
  align-items: start;
}

.idea-card {
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: var(--card-radius);
  padding: 1rem;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  background: var(--surface);
}

.idea-card[draggable='true'] {
  cursor: grab;
}

.idea-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.idea-card-content {
  margin: 0;
  color: var(--text);
}

.idea-card-rationale {
  margin: 0;
}

.idea-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.idea-card-launch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.idea-card-launch select {
  width: auto;
  flex: 1 1 160px;
}

.idea-kanban-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(200px, 1fr));
  gap: 1rem;
  overflow-x: auto;
  margin-top: 0.75rem;
  padding-bottom: 0.5rem;
}

.idea-kanban-column {
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  border-radius: var(--card-radius);
  padding: 0.75rem;
  min-height: 200px;
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.idea-kanban-column.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.idea-kanban-column-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.idea-empty-state {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: 1.5rem 0;
}

.idea-card-ai {
  display: grid;
  gap: 0.5rem;
}

.idea-develop-result {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.idea-develop-result ol {
  margin: 0;
  padding-left: 1.25rem;
}

.idea-cluster-group {
  border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.idea-cluster-group:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 720px) {
  .idea-kanban-board {
    grid-template-columns: 1fr;
  }
}

.form-field {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.form-field label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.input,
.select,
.textarea {
  width: 100%;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  padding: 0.95rem 1rem;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
  font: inherit;
}

.textarea {
  min-height: 100px;
  resize: vertical;
}

.checkboxes {
  display: grid;
  gap: 0.75rem;
}

.checkboxes label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  cursor: pointer;
}

.checkboxes input {
  accent-color: var(--accent);
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.placeholder-note {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.94rem;
}

.message {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.message.error {
  color: var(--danger);
}

.block-card {
  border-radius: var(--card-radius-lg);
  padding: calc(2rem * var(--card-density));
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.output-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.block-output-card {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: calc(1.4rem * var(--card-density));
}

.output-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.output-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.output-badge {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
}

.output-section {
  margin-bottom: 1rem;
}

.output-section h4 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

.feedback-row {
  display: grid;
  gap: 0.75rem;
}

.rating-stars {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.star-button {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
  cursor: pointer;
}

.star-button.active {
  background: var(--accent);
  color: var(--accent-contrast);
}

.output-actions {
  display: flex;
  justify-content: flex-end;
}

.ads-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.ads-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.92rem;
}

.char-count {
  color: var(--text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.char-count.char-over {
  color: var(--danger);
  font-weight: 600;
}

.ai-warning {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid var(--warning);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--text);
  line-height: 1.5;
}

.seo-body {
  white-space: pre-wrap;
  word-break: break-word;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.6;
  max-height: 420px;
  overflow-y: auto;
}

/* Megosztott vízszintes-görgető konténer bármely szélesebb tartalomhoz
   (elsősorban a .keyword-table `white-space: nowrap` cellái miatt, amik
   `min-width: 640px`-re tágíthatják a táblát) - 2026-08-04, layout-hiba
   javítás után bevezetve. Korábban ez minden hívási helyen külön,
   ismételt inline style="overflow-x: auto;" volt (keyword_research_block.js,
   seo_audit_block.js, strategy_plan_block.js) - EZ volt a tényleges baj:
   a strategy_plan_block.js egyik hívási helyén (a modulírás négyes
   struktúrájában megjelenő táblázatoknál) ez a wrapper LEMARADT, így egy
   AI-generált, több oszlopos táblázat szabadon kitágíthatta a szülő
   `.audit-block-panel`-t (lásd lentebb) - ez okozta az asztali nézetben
   jelentkező "elcsúszást". A javítás megosztott szinten: (1) ez az egy
   class minden hívási helyen, (2) `.audit-block-panel > * { min-width: 0 }`
   VÉDŐHÁLÓKÉNT, hogy egy jövőbeli, hasonlóan lemaradó wrapper se tudja
   újra kitágítani az egész panelt/kártyát - lásd ott. */
.table-scroll {
  overflow-x: auto;
}

.keyword-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 640px;
}

.keyword-table th,
.keyword-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.keyword-table th {
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.keyword-table td:first-child,
.keyword-table th:first-child {
  white-space: normal;
}

/* Statisztika blokk - Megtérülés-számítás (Block 6, CLAUDE.md 8.6 szekció).
   A színkód-csoportok a referencia Excel fájl saját cella-színezését
   tükrözik (zöld = projektindításkor bekérendő, rózsaszín = alkalmankénti
   felülvizsgálat, narancs = optimalizáláskor/minden számításnál frissen
   megadandó) - lásd CLAUDE.md 8.6 szekció jegyzete. A meglévő design
   tokenekre (--accent-strong/--danger/--warning) épül, nem új színt vezet
   be - a `--primary` tokent a felület-testreszabás (2026-08-04) megszüntette,
   ezt a hivatkozást itt utólag javítottuk (lásd fejlesztési napló). */
.settings-color-group {
  border-left: 3px solid var(--border);
  padding-left: 1rem;
  margin-bottom: 1.25rem;
}

.settings-color-green {
  border-left-color: var(--accent-strong);
}

.settings-color-pink {
  border-left-color: var(--danger);
}

.settings-color-orange {
  border-left-color: var(--warning);
}

.settings-color-label {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
}

.roi-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.roi-result-block h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.roi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.roi-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

.roi-table td:first-child {
  color: var(--text-muted);
}

.roi-table td:last-child {
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
}

/* Ft-összeg beviteli mezők (Statisztika blokk) - a "Ft" felirat a mező
   jobb szélén marad, az input jobb oldali paddingje ad neki helyet, hogy
   a beírt szám (élő ezres-tagolással, lásd js/stats_block.js
   attachAmountFieldFormatting) sose csússzon alá. */
.input-suffix-wrap {
  position: relative;
}

.input-suffix-wrap .amount-input {
  padding-right: 2.75rem;
  text-align: right;
}

.input-suffix {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.ranking-sparkline {
  display: block;
  margin: 0.5rem 0;
}

.radio-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.field-disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.auth-header {
  margin-bottom: 2rem;
}

.auth-header h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 3vw, 2.5rem);
}

.auth-header p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.7;
}

@media (max-width: 860px) {
  .header-row,
  .action-row,
  .dashboard-header {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 640px) {
  body {
    padding: 1rem;
  }

  .card {
    padding: calc(1.5rem * var(--card-density));
  }
}

/* Trendfigyelő sub-blokk (CLAUDE.md 8.2 szekció) - folyamatosan bővülő
   lista, NEM a szokásos block-output-card mintát követi (nincs
   csillagozás), ezért saját, egyszerűbb kártya-stílus. */
.trend-items-list {
  display: grid;
  gap: 1rem;
}

.trend-item-card {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: calc(1.4rem * var(--card-density));
  display: grid;
  gap: 0.6rem;
}

.trend-item-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.trend-item-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

/* SEO Audit sub-blokk (CLAUDE.md 8.3 szekció, 4️⃣ pont) - a 12 blokkos
   munkamenet lépcső-navigációja és a blokkonkénti négyes struktúra
   megjelenítése. */
.audit-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.audit-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
}

.audit-step.active {
  border-color: var(--accent);
  color: var(--text);
}

.audit-step-key {
  font-weight: 600;
}

.audit-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.audit-step-status-var { background: var(--text-muted); }
.audit-step-status-adatra_var { background: var(--warning); }
.audit-step-status-elemzes_kesz { background: var(--accent); }
.audit-step-status-jovahagyva { background: var(--accent-strong); }
/* Stratégiai terv (Block 8) modul-státuszai - ugyanazt a .audit-step-dot
   osztályt hasznosítja újra, csak a strategy_modules CHECK-jének megfelelő
   státusz-nevekkel (var/keszul/kesz/jovahagyva). */
.audit-step-status-keszul { background: var(--warning); }
.audit-step-status-kesz { background: var(--accent); }

/* Stratégiai terv (Block 8, CLAUDE.md 8.8 szekció) - modullista/vázlat/
   PÉLDA-doboz megjelenítés. */
.strategy-module-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0;
}

.strategy-module-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.strategy-module-row input[type="checkbox"] {
  margin-top: 0.2rem;
}

.strategy-outline-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.strategy-outline-item {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.strategy-example-box {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
  overflow-wrap: break-word;
}

.audit-block-panel {
  display: grid;
  gap: 0.75rem;
}

/* Védőháló a CSS Grid "min-width: auto" alapértelmezése ellen: grid-elemek
   (itt a panel közvetlen gyerekei - a form-grid, a block-output-card stb.)
   alapból nem zsugorodhatnak a bennük lévő tartalom min-content méretéhez
   képest kisebbre, tehát egy nem-tördelhető, széles elem (pl. egy
   wrapper NÉLKÜL renderelt táblázat) az EGÉSZ panelt, és rajta keresztül a
   `.card`/`.app-shell`-t is szélesebbre tolhatja a viewportnál - ez okozta
   a 2026-08-04-i "elcsúszott" layout-hibát a Stratégiai terv nézetben. A
   `min-width: 0` engedi, hogy a gyerek a szülő tényleges szélességére
   zsugorodjon, a belső túlcsordulást pedig a `.table-scroll` (vagy
   hasonló, saját overflow-x:auto-val rendelkező) elem kezelje LOKÁLISAN,
   ne az egész oldal-layout. Ez a `.audit-block-panel`-t a SEO Audit ÉS a
   Stratégiai terv is használja, tehát ez a javítás mindkét blokkot védi. */
.audit-block-panel > * {
  min-width: 0;
}

.audit-analysis-section h4 {
  margin: 0 0 0.4rem;
  color: var(--accent);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.audit-upload-list {
  margin: 0.25rem 0;
  padding-left: 1.2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Webfejlesztés blokk (CLAUDE.md 8.4 szekció, Block 4) - típusválasztó
   kijelölt állapota, élő preview iframe, súlyosság-jelvények, storage-advice
   kódblokkok. */
.block-picker-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.webdev-preview-section {
  margin: 1rem 0;
}

/* A `background: #fff` itt SZÁNDÉKOSAN nincs tokenre cserélve - ez nem app-
   chrome, hanem egy élő preview iframe, ami egy valós weboldalt szimulál
   (a generált HTML a felhasználó saját, fehér hátterű oldala lesz éles
   környezetben is), ezért nem követi a felület témáját. */
.webdev-preview-frame {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  height: 520px;
}

.webdev-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.webdev-issues-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.webdev-issues-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.severity-hiba { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.severity-figyelmeztetes { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.severity-javaslat { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-muted); }

.webdev-storage-advice-section {
  margin-top: 1rem;
}

.webdev-code-block {
  max-height: 280px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
}

/* Termékfotó generátor sub-blokk (CLAUDE.md 8.2 szekció, 2026-07-29) -
   generálási form (leírás + opcionális referenciakép drag&drop) + a
   generated_images tábla folyamatosan bővülő galériája, a Trendfigyelő
   kártya-mintáját követve. */
.product-image-form {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0;
}

.product-image-dropzone {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 1.2rem;
  text-align: center;
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.product-image-dropzone.dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.product-image-dropzone.has-preview {
  border-style: solid;
}

.product-image-reference-preview {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
}

.product-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.product-image-card {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--card-radius-sm);
  overflow: hidden;
  display: grid;
}

.product-image-thumb {
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-image-placeholder {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-image-body {
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.5rem;
}

.product-image-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.product-image-prompt {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.identity-check {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}

.identity-match {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.identity-mismatch {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}

.identity-unknown {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text-muted);
}

/* Infógyűjtő blokk (CLAUDE.md 8.5 szekció, 2026-07-30) - kutatási form,
   szekciózott narrative riport, versenytárs-kártyák + kereszt-analízis
   mátrix táblázat. */
.info-gatherer-form {
  display: grid;
  gap: 0.6rem;
  margin: 1rem 0;
}

.info-gatherer-report {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.info-gatherer-section h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.info-gatherer-section p {
  line-height: 1.6;
  white-space: pre-wrap;
}

.info-gatherer-matrix-wrapper {
  overflow-x: auto;
}

.info-gatherer-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.info-gatherer-matrix th,
.info-gatherer-matrix td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.info-gatherer-matrix th {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  font-weight: 600;
}

.info-gatherer-competitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.info-gatherer-competitor-card {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--card-radius-sm);
  padding: calc(1.1rem * var(--card-density));
  display: grid;
  gap: 0.5rem;
}

.info-gatherer-competitor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.info-gatherer-competitor-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.info-gatherer-ads ul {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
}

.ad-estimate-note {
  color: var(--warning);
}

.ad-estimate-banner {
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid var(--warning);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  color: var(--warning);
}

/* ============================================================================
   Felület-testreszabás - kártya-elrendezés (rács/lista), lásd CLAUDE.md
   Megjelenés szekció. A `data-layout` attribútum a `document.documentElement`-
   re kerül (js/theme.js applyTheme) - UGYANAZ a DOM-fa (kártya-grid),
   csak a CSS Grid oszlop-száma vált 1-re "lista" nézetben. Csak azokra a
   rácsokra vonatkozik, amik ténylegesen "kártyalistát" jelenítenek meg
   (ügyfél-kártyák, blokk-választó) - a belső, tartalmi rácsok (pl.
   .form-grid, .info-gatherer-competitor-grid) nem "kártyalisták" ebben az
   értelemben, azok mindig a saját optimális elrendezésüket tartják. */
[data-layout="list"] .projects-grid,
[data-layout="list"] .block-picker-grid {
  grid-template-columns: 1fr;
}

/* Megjelenés - kész téma előnézeti csík (theme_settings_block.js
   buildPresetCards) + persistens globális fejléc gyorsváltó (app.js). A
   fejléc a bejelentkezés előtt is látszik, de üres (csak bejelentkezés
   után jelenik meg benne a gyorsváltó gomb - lásd renderGlobalHeader). */
.theme-preset-swatch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  border-radius: 10px;
  border: 1px solid;
  padding: 0 0.75rem;
  margin-bottom: 0.75rem;
}

.theme-preset-swatch span {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.theme-preset-swatch span:last-child {
  width: auto;
  height: auto;
  border-radius: 0;
  font-weight: 700;
  font-size: 0.95rem;
  margin-left: auto;
}

.theme-header {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0;
  min-height: 1px;
}

/* Globális toast - a "⋮" kártya-menü "Hozzáadás az Ötletládához" gombjának
   visszajelzése (saveCardAsIdea, app.js). Egyetlen közös komponens, mert 6+
   különböző blokk-állapot mindegyikébe bekötni saját üzenet-mezőt sokkal
   duplikáltabb lenne. */
#global-toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 50;
  padding: 0.85rem 1.1rem;
  border-radius: var(--control-radius);
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  max-width: min(320px, calc(100vw - 2.5rem));
}

#global-toast.toast-error {
  border-color: var(--danger);
  color: var(--danger);
}

.theme-quick-switcher {
  position: relative;
}

/* Ötletláda fejléc gyors-hozzáadás - a .theme-quick-switcher/.theme-quick-
   trigger/.theme-quick-dropdown mintáját újrahasznosítja (l. idea_box_block.js
   buildIdeaQuickAddTrigger), csak a kívülre-kattintás ellenőrzéshez kell
   önálló osztály. */
.idea-quick-switcher {
  position: relative;
}

.theme-quick-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--control-radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.theme-quick-trigger:hover,
.theme-quick-trigger:focus-visible {
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.theme-quick-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 0.85rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  z-index: 30;
  display: grid;
  gap: 0.75rem;
}

.theme-quick-dropdown .form-field {
  margin-bottom: 0;
}

.theme-quick-link {
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
}

/* Kampánykezelő blokk (Block 7, CLAUDE.md 8.7 szekció) - a `.filters`/
   `.filter-chip` osztályokat újrahasznosítja fül-váltóként, a
   `.block-output-card`/`.roi-table`/`.table-scroll`/`.ai-warning` mintákat
   pedig az eredmények megjelenítéséhez (nincs önálló kártya-alapstílus,
   csak a saját, kis kiegészítő elrendezés-szabályok lent). */
.campaign-tabs {
  margin-bottom: 1.5rem;
}

.campaign-tab-panel {
  display: grid;
  gap: 1rem;
}

.campaign-objectives-list {
  display: grid;
  gap: 0.6rem;
}

.campaign-objective-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.campaign-objective-name {
  flex: 1;
  min-width: 200px;
}

.campaign-objective-budget {
  flex: 1;
  min-width: 160px;
  max-width: 240px;
}

.campaign-objective-remove {
  flex-shrink: 0;
}

.campaign-channel-tab-empty {
  border-style: dashed;
  color: var(--text-muted);
  opacity: 0.85;
}

.campaign-objectives-total {
  margin-top: 0.2rem;
}

.campaign-objective-group {
  margin-bottom: 1rem;
}

.campaign-objective-group-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.campaign-objective-group-title.over-budget {
  color: var(--danger);
}

.campaign-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.campaign-card {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--card-radius-sm);
  padding: calc(1.1rem * var(--card-density));
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.campaign-card h4 {
  margin: 0;
  font-size: 1rem;
}

.campaign-optimizations-list {
  display: grid;
  gap: 1rem;
}