/* PriceMonitor global styles and design tokens. */

:root {
  --pm-primary: #3362cc;
  --pm-primary-dark: #2b56b6;
  --pm-primary-darker: #25499b;
  --pm-primary-light: #7fa5e6;
  --pm-primary-soft: #4a7ad8;
  --pm-primary-bg: #edf2fa;
  --pm-primary-bg-soft: #f6f8fc;
  --pm-accent: #06b6d4;
  --pm-accent-light: #22d3ee;
  --pm-navy: #1d2a4a;
  --pm-navy-dark: #16203a;
  --pm-heading: #1d2a4a;
  --pm-text: #0f172a;
  --pm-text-muted: #475569;
  --pm-text-faint: #94a3b8;
  --pm-surface: #ffffff;
  --pm-surface-alt: #f1f5f9;
  --pm-border: #e2e8f0;
  --pm-success: #16a34a;
  --pm-success-dark: #14532d;
  --pm-success-bg: #dcfce7;
  --pm-warning: #d97706;
  --pm-warning-dark: #b45309;
  --pm-warning-bg: #fef3c7;
  --pm-danger: #dc2626;
  --pm-danger-dark: #b91c1c;
  --pm-danger-bg: #fee2e2;
  --pm-radius: 12px;
  --pm-radius-lg: 24px;
  --pm-shadow: 0 1px 3px rgb(15 23 42 / 0.06), 0 8px 24px rgb(15 23 42 / 0.06);
  --pm-shadow-lg: 0 4px 12px rgb(15 23 42 / 0.08), 0 16px 48px rgb(15 23 42 / 0.1);
  --pm-font: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--pm-font);
  color: var(--pm-text);
  background: var(--pm-surface-alt) linear-gradient(160deg, #fafbfd 0%, #f4f6fa 45%, #eef1f6 100%) fixed;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--pm-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* A címsorok a bal oldali menü mély tengerészkékjét viszik tovább,
   így a feliratok színvilága az egész appban a menühöz igazodik. */
h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
  font-weight: 700;
  color: var(--pm-heading);
}

p {
  margin: 0;
}

button {
  font-family: inherit;
}

input[type='text'],
input[type='email'],
input[type='password'],
textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
  resize: vertical;
  min-height: 5rem;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
textarea:focus {
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgb(51 98 204 / 0.15);
}

input::placeholder {
  color: var(--pm-text-faint);
}

[hidden] {
  display: none !important;
}

/* Shared UI building blocks */

/* Egységes vonalas SVG ikon: a befogadó elem betűméretével skálázódik,
   a színét a szövegszíntől (currentColor) örökli. */
.pm-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  vertical-align: -0.2em;
}

.pm-icon--success {
  color: var(--pm-success);
}

.pm-icon--warning {
  color: var(--pm-warning);
}

.pm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.pm-btn:hover {
  text-decoration: none;
}

.pm-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Count pill inside a button (e.g. the number of selected rows). */
.pm-btn__count {
  min-width: 1.5rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  background: rgb(0 0 0 / 0.08);
  border-radius: 999px;
}

.pm-btn-primary {
  color: #fff;
  background: var(--pm-primary);
  box-shadow: 0 2px 10px rgb(51 98 204 / 0.22);
}

.pm-btn-primary:hover:not(:disabled) {
  background: var(--pm-primary-dark);
}

.pm-btn-secondary {
  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
}

/* Hoverre a másodlagos gomb is a márka kékjével jelez vissza, így minden
   gomb ugyanahhoz a színvilághoz tartozik. */
.pm-btn-secondary:hover:not(:disabled) {
  color: var(--pm-primary-dark);
  background: var(--pm-primary-bg-soft);
  border-color: var(--pm-primary-light);
}

.pm-btn-block {
  width: 100%;
  border-radius: var(--pm-radius);
}

.pm-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

.pm-field label {
  font-weight: 600;
  font-size: 0.95rem;
}

.pm-field__counter {
  align-self: flex-end;
  font-size: 0.8rem;
  color: var(--pm-text-muted);
}

.pm-alert {
  padding: 0.8rem 1rem;
  border-radius: var(--pm-radius);
  font-size: 0.95rem;
  margin-bottom: 1.1rem;
}

.pm-alert-error {
  color: var(--pm-danger);
  background: var(--pm-danger-bg);
}

.pm-alert-success {
  color: var(--pm-success);
  background: var(--pm-success-bg);
}

.pm-card {
  background: var(--pm-surface);
  border-radius: var(--pm-radius-lg);
  box-shadow: var(--pm-shadow);
}

/* Brand logo */

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.2rem;
}

.brand-logo__icon {
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
}

.brand-logo__name {
  color: var(--pm-text);
}

/* A márkanév "Mester" tagja a márka kékjével emeli ki a nevet. */
.brand-logo__name-accent {
  color: var(--pm-primary);
}

.brand-panel .brand-logo__name,
.dashboard__sidebar .brand-logo__name {
  color: #fff;
}

/* Sötét hátterű panelen a kék akcent világosabb árnyalatot kap az olvashatóságért. */
.brand-panel .brand-logo__name-accent,
.dashboard__sidebar .brand-logo__name-accent {
  color: var(--pm-primary-light);
}

/* Language switcher */

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--pm-border);
}

.lang-switcher__btn {
  display: inline-flex;
  padding: 3px;
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.lang-switcher__btn:hover {
  opacity: 1;
}

.lang-switcher__btn--active {
  opacity: 1;
  border-color: var(--pm-primary);
  box-shadow: 0 2px 8px rgb(51 98 204 / 0.25);
}

.lang-switcher__btn svg {
  display: block;
  border-radius: 5px;
}

/* Site header */

.site-header {
  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-border);
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-header__brand:hover {
  text-decoration: none;
}

.site-header .brand-logo {
  font-size: 1.4rem;
}

/* A menüt és a gombokat egy közös blokk fogja össze, hogy keskeny nézetben
   együtt csukódjanak be a hamburger gomb mögé. */
.site-header__menu {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

/* A hamburger gomb csak keskeny nézetben látszik. */
.site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin-left: auto;
  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  cursor: pointer;
}

.site-header__toggle-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.site-header__toggle .site-header__toggle-icon--close,
.site-header__toggle[aria-expanded='true'] .site-header__toggle-icon--open {
  display: none;
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-icon--close {
  display: block;
}

/* A menü a logó és a jobb oldali gombok között középre igazodik. */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  margin: 0 auto;
}

.site-header__link {
  color: var(--pm-text);
  font-size: 1.02rem;
  font-weight: 500;
  white-space: nowrap;
}

.site-header__link:hover {
  color: var(--pm-primary);
  text-decoration: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.site-header__auth {
  padding: 0.6rem 1.4rem;
  border-radius: var(--pm-radius);
  white-space: nowrap;
}

/* Site footer */

.site-footer {
  margin-top: auto;
  background: var(--pm-surface);
  border-top: 1px solid var(--pm-border);
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-footer__copy {
  color: var(--pm-text-muted);
  font-size: 0.95rem;
}

.site-footer__company {
  color: inherit;
  text-decoration: none;
}

.site-footer__company:hover {
  color: var(--pm-primary);
}

.site-footer__links {
  display: flex;
  gap: 1.2rem;
}

.site-footer__links a {
  color: var(--pm-text-muted);
  font-size: 0.95rem;
}

.site-footer__links a:hover {
  color: var(--pm-primary);
}

/* Landing */

.section {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.section__title {
  font-size: 1.9rem;
  text-align: center;
}

.section__title--left {
  text-align: left;
}

.section__subtitle {
  margin-top: 0.5rem;
  text-align: center;
  color: var(--pm-text-muted);
}

.hero {
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 3rem;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
}

.hero__title {
  font-size: 3.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero__title-accent {
  color: var(--pm-primary);
}

.hero__lead {
  max-width: 34rem;
  color: var(--pm-text-muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.hero__lead-intro {
  color: var(--pm-primary);
  font-weight: 700;
}

.hero__actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.hero__cta-arrow {
  margin-left: 0.3rem;
}

.hero__chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.hero__chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.2rem;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--pm-heading);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
}

.hero__chip-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  color: var(--pm-primary);
  background: var(--pm-primary-bg);
}

/* A hero jobb oldali, dekoratív ÁrMester-figurája. */

.hero__visual {
  min-width: 0;
}

.hero-figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border-radius: var(--pm-radius-lg);
  background: linear-gradient(150deg, #e8f0fb 0%, #f3f8fd 45%, #d9e6f6 100%);
  overflow: hidden;
}

/* Egyszer átfutó, finom fénycsík a nyitó képen. */

.hero-figure::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 45%;
  height: 140%;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  animation: hero-figure-shine 1.6s ease-in-out 0.9s 1 both;
}

@keyframes hero-figure-shine {
  from {
    left: -60%;
  }

  to {
    left: 130%;
  }
}

.hero-figure__img {
  width: min(26rem, 100%);
  height: auto;
  animation: hero-figure-float 5s ease-in-out infinite;
}

.hero-figure__name {
  position: absolute;
  left: 50%;
  /* Matches the card's bottom padding so the badge bottom aligns with the image bottom. */
  bottom: 2rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: max-content;
  max-width: calc(100% - 2.4rem);
  padding: 0.7rem 1.9rem 0.8rem;
  text-align: center;
  background: linear-gradient(135deg, var(--pm-navy) 0%, var(--pm-navy-dark) 55%, #111a33 100%);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgb(22 32 58 / 0.35);
}

.hero-figure__brand {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #ffffff;
}

.hero-figure__brand-accent {
  background: linear-gradient(90deg, var(--pm-accent-light) 0%, var(--pm-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-figure__tagline {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.35;
  color: #b9cbe8;
}

@keyframes hero-figure-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-figure__img {
    animation: none;
  }

  .hero-figure::after {
    content: none;
  }
}

.how {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}

.how__card {
  padding: 1.8rem;
}

.how__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--pm-primary);
  border-radius: 50%;
}

.how__card-title {
  margin: 0.9rem 0 0.5rem;
  font-size: 1.15rem;
}

.how__card-text {
  color: var(--pm-text-muted);
  font-size: 0.95rem;
}

.how__note {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  grid-column: 1 / -1;
  padding: 1.1rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pm-heading);
  background: var(--pm-primary-bg);
  border-radius: var(--pm-radius);
}

.how__note-icon {
  display: inline-flex;
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--pm-primary);
}

.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.feature {
  padding: 2.2rem 2.4rem;
}

.feature__text {
  color: var(--pm-text-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.feature__text + .feature__text {
  margin-top: 1.1rem;
}

.feature__highlight {
  color: var(--pm-primary);
  font-weight: 600;
}

.start {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.start__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.start__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  font-weight: 700;
  color: #fff;
  background: var(--pm-primary);
  border-radius: 50%;
}

.start__title {
  font-size: 1.05rem;
}

.start__text {
  color: var(--pm-text-muted);
  font-size: 0.95rem;
}

.cta-box {
  padding: 3rem 2rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, var(--pm-primary-soft) 0%, var(--pm-primary) 55%, var(--pm-primary-dark) 100%);
  border-radius: var(--pm-radius-lg);
}

.cta-box__title {
  font-size: 2rem;
  color: #fff;
}

.cta-box__text {
  margin: 0.8rem 0 1.6rem;
  color: rgb(255 255 255 / 0.85);
}

.cta-box__actions {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.cta-box__primary {
  color: var(--pm-primary-darker);
  background: #fff;
}

.cta-box__secondary {
  color: #fff;
  background: rgb(255 255 255 / 0.15);
  border: 1px solid rgb(255 255 255 / 0.4);
}

/* Landing – fogalommagyarázó (SEO) blokk */

.seo-intro {
  max-width: 62rem;
  margin: 1.6rem auto 0;
}

.seo-intro__text {
  margin: 0 0 1rem;
  color: var(--pm-text-muted);
  font-size: 1.02rem;
  line-height: 1.75;
}

.seo-intro__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.6rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.seo-intro__list-item {
  position: relative;
  padding-left: 1.6rem;
  color: var(--pm-text-muted);
  font-size: 0.97rem;
  line-height: 1.6;
}

.seo-intro__list-item::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--pm-primary);
  border-radius: 50%;
}

/* Landing – gyakori kérdések (GYIK) */

.faq {
  display: grid;
  gap: 0.9rem;
  max-width: 62rem;
  margin: 2rem auto 0;
}

.faq__item {
  padding: 0 1.6rem;
  overflow: hidden;
}

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
}

.faq__summary::-webkit-details-marker {
  display: none;
}

.faq__question {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.faq__marker {
  position: relative;
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--pm-primary);
}

.faq__marker::before,
.faq__marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentcolor;
  border-radius: 1px;
  transform: translateY(-50%);
}

.faq__marker::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__marker::after {
  transform: translateY(-50%) rotate(0deg);
}

.faq__answer {
  margin: 0;
  padding: 0 0 1.3rem;
  color: var(--pm-text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Brand panel (auth pages) */

.brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.5rem;
  background: linear-gradient(160deg, var(--pm-primary-soft) 0%, var(--pm-primary) 45%, var(--pm-primary-dark) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.brand-panel::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 280px;
  height: 280px;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 50%;
  pointer-events: none;
}

.brand-panel__content {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.brand-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgb(255 255 255 / 0.15);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
}

.brand-panel__headline {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
}

.brand-panel__subline {
  max-width: 26rem;
  color: rgb(255 255 255 / 0.85);
}

.brand-panel__bullets {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-weight: 600;
}

.brand-panel__bullets li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.brand-panel__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  font-size: 0.85rem;
  background: rgb(255 255 255 / 0.2);
  border-radius: 50%;
}

.brand-panel__copy {
  color: rgb(255 255 255 / 0.6);
  font-size: 0.9rem;
}

/* Auth pages (login / register) */

.auth-page__main {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}

.auth-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  width: 100%;
  max-width: 1080px;
  overflow: hidden;
}

.auth-split__form {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-split__title {
  font-size: 2rem;
}

.auth-split__subtitle {
  margin: 0.5rem 0 1.8rem;
  color: var(--pm-text-muted);
}

.auth-split__hint {
  font-size: 0.85rem;
  color: var(--pm-text-muted);
}

.auth-split__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem;
  font-size: 0.95rem;
}

.auth-split__remember {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.auth-split__forgot {
  font-weight: 600;
}

.auth-split__switch {
  margin-top: 1.8rem;
  text-align: center;
  color: var(--pm-text-muted);
}

.auth-split__switch a {
  font-weight: 600;
}

.register-terms {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  margin-bottom: 1.4rem;
  font-size: 0.95rem;
  background: var(--pm-surface-alt);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  cursor: pointer;
}

.register-terms input {
  margin-top: 0.25rem;
}

/* Forgot password */

.forgot-page__main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6rem 1.5rem 3rem;
}

.forgot-card {
  width: 100%;
  max-width: 460px;
  padding: 3rem 2.5rem;
  text-align: center;
}

.forgot-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.4rem;
  color: var(--pm-primary);
  background: var(--pm-primary-bg);
  border-radius: var(--pm-radius);
}

.forgot-card__title {
  font-size: 1.8rem;
}

.forgot-card__subtitle {
  margin: 0.6rem 0 1.8rem;
  color: var(--pm-text-muted);
}

.forgot-card__field {
  text-align: left;
}

.forgot-card__submit {
  border-radius: 999px;
}

.forgot-card__divider {
  margin: 1.8rem 0 1.4rem;
  border: none;
  border-top: 1px solid var(--pm-border);
}

.forgot-card__back {
  font-weight: 600;
}

/* Dashboard */

/* A dashboard a footer feletti maradék helyet tölti ki, így a footer mindig
   a tartalom alatt, a viewport alján marad. */
.dashboard {
  flex: 1 1 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 250px 1fr;
}

.dashboard__sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.6rem 1.2rem;
  background: linear-gradient(180deg, var(--pm-navy) 0%, var(--pm-navy-dark) 100%);
}

/* A fejléc-blokk (logó + mobil menügomb) és a menütörzs: asztali nézetben
   egymás alatt, mobilon a törzs a hamburger gombbal nyitható. */
.dashboard__sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dashboard__sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1;
  min-height: 0;
}

/* A menünyitó gomb csak keskeny nézetben látszik. */
.dashboard__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: #fff;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--pm-radius);
  cursor: pointer;
}

.dashboard__menu-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.dashboard__menu-toggle .dashboard__menu-icon--close,
.dashboard__menu-toggle[aria-expanded='true'] .dashboard__menu-icon--open {
  display: none;
}

.dashboard__menu-toggle[aria-expanded='true'] .dashboard__menu-icon--close {
  display: block;
}

.dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.dashboard__nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem;
  color: rgb(255 255 255 / 0.8);
  font-weight: 500;
  border-radius: var(--pm-radius);
  transition: background 0.15s ease;
}

.dashboard__nav-item:hover {
  background: rgb(255 255 255 / 0.1);
  text-decoration: none;
}

.dashboard__nav-item--active {
  color: #fff;
  background: rgb(255 255 255 / 0.16);
}

.dashboard__nav-subitem {
  margin-left: 1.5rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.92rem;
}

.dashboard__nav-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.dashboard__nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dashboard__nav-toggle {
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

.dashboard__nav-chevron {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.dashboard__nav-toggle[aria-expanded='true'] .dashboard__nav-chevron {
  transform: rotate(180deg);
}

.dashboard__nav-sublist {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dashboard__nav-sublist[hidden] {
  display: none;
}

.dashboard__logout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  color: rgb(255 255 255 / 0.8);
  font-size: 1rem;
  font-weight: 500;
  background: none;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--pm-radius);
  cursor: pointer;
  transition: background 0.15s ease;
}

.dashboard__logout:hover {
  background: rgb(255 255 255 / 0.1);
}

.dashboard__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dashboard__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 2rem;
  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-border);
}

.dashboard__title {
  font-size: 1.5rem;
}

.dashboard__subtitle {
  color: var(--pm-text-muted);
  font-size: 0.95rem;
}

.dashboard__main {
  padding: 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dashboard__demo-notice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  color: var(--pm-text-muted);
  background: var(--pm-primary-bg-soft);
  border: 1px dashed var(--pm-primary-light);
  border-radius: var(--pm-radius);
}

.dashboard__page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dashboard__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.dashboard__stats--three {
  grid-template-columns: repeat(3, 1fr);
}

.stat-card {
  display: flex;
  flex-direction: column;
  padding: 1.3rem 1.4rem;
}

.stat-card--link {
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

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

.stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 1.3rem;
  color: var(--pm-primary);
  background: var(--pm-primary-bg);
  border-radius: 12px;
}

.stat-card__value {
  margin-top: 0.5rem;
  font-size: 2rem;
  font-weight: 800;
}

.stat-card__label {
  font-weight: 600;
}

.stat-card__sub {
  color: var(--pm-text-muted);
  font-size: 0.85rem;
}

.dashboard__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.dashboard__table-card,
.dashboard__activity-card {
  min-width: 0;
  padding: 1.5rem;
}

.dashboard__card-title {
  font-size: 1.15rem;
}

.dashboard__card-subtitle {
  margin: 0.3rem 0 1rem;
  color: var(--pm-text-muted);
  font-size: 0.9rem;
}

.dashboard__table-wrap {
  overflow-x: auto;
}

/* Prev/next pager below the dashboard lists; only visible when the list has
   more rows than one page. */
.dashboard-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1rem;
}

.dashboard-pager__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dashboard-pager__page {
  min-width: 4rem;
  text-align: center;
  color: var(--pm-text-muted);
  font-variant-numeric: tabular-nums;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.price-table th {
  padding: 0.6rem 0.5rem;
  text-align: left;
  color: var(--pm-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--pm-border);
}

.price-table td {
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--pm-surface-alt);
  white-space: nowrap;
}

.price-table__name {
  font-weight: 600;
  white-space: normal;
}

.price-table__recommended {
  font-weight: 700;
  color: var(--pm-primary);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 999px;
}

.status-badge--ok {
  color: var(--pm-success);
  background: var(--pm-success-bg);
}

.status-badge--lower {
  color: var(--pm-warning);
  background: var(--pm-warning-bg);
}

.status-badge--raise {
  color: var(--pm-primary);
  background: var(--pm-primary-bg);
}

.status-badge--skip {
  color: var(--pm-danger);
  background: var(--pm-danger-bg);
}

.activity-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.activity-list__item {
  display: flex;
  gap: 0.8rem;
  font-size: 0.92rem;
}

.activity-list__dot {
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.4rem;
  flex-shrink: 0;
  background: var(--pm-primary);
  border-radius: 50%;
}

.activity-list__time {
  color: var(--pm-text-faint);
  font-size: 0.8rem;
}

/* Admin overview: stat cards with two trend charts below them. */

.admin-overview {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.admin-overview__charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.admin-overview__chart-card {
  min-width: 0;
  padding: 1.5rem;
}

/* Responsive */

@media (max-width: 1100px) {
  .dashboard__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard__grid {
    grid-template-columns: 1fr;
  }

  .admin-overview__charts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .hero__title {
    font-size: 2.3rem;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero__chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .features {
    grid-template-columns: 1fr;
  }

  .start {
    grid-template-columns: 1fr;
  }

  .how {
    grid-template-columns: 1fr;
  }

  .seo-intro__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .auth-split {
    grid-template-columns: 1fr;
  }

  .auth-split .brand-panel {
    display: none;
  }

  .auth-split__form {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 760px) {
  .hero__chips {
    grid-template-columns: 1fr;
  }

  .hero-figure {
    padding: 1.2rem;
  }

  .hero-figure__name {
    bottom: 1.2rem;
  }

  .hero-figure__brand {
    font-size: 1.15rem;
  }

  .hero-figure__tagline {
    font-size: 0.75rem;
  }
}

/* Keskeny nézetben a menü a fejléc alá törik, teljes szélességben középre igazítva. */
@media (max-width: 960px) {
  .site-header__inner {
    flex-wrap: wrap;
    row-gap: 0.8rem;
  }

  .site-header__menu {
    flex-wrap: wrap;
    row-gap: 0.8rem;
  }

  .site-header__nav {
    order: 3;
    width: 100%;
    justify-content: center;
    margin: 0;
  }

  .site-header__actions {
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  .site-header__nav {
    gap: 1rem;
  }

  .site-header__actions {
    gap: 0.5rem;
  }

  .site-header__auth {
    padding: 0.5rem 1rem;
  }
}

/* Admin users page */

.dashboard__topbar-side {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.users__count {
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pm-text-muted);
  background: var(--pm-surface-alt);
  border-radius: 999px;
  white-space: nowrap;
}

.users {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

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

.users__search {
  position: relative;
  flex: 1 1 320px;
  max-width: 480px;
}

.users__package-filter {
  width: auto;
  min-width: 180px;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
}

.users__search-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: var(--pm-text-muted);
  pointer-events: none;
}

.users__search input {
  padding-left: 2.6rem;
}

.users__card {
  padding: 0;
  overflow: hidden;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.user-table th {
  padding: 0.85rem 1.5rem;
  text-align: left;
  color: var(--pm-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--pm-surface-alt);
  border-bottom: 1px solid var(--pm-border);
}

.user-table th.user-table__actions-col {
  text-align: right;
}

/* Sortable column header: a borderless button that inherits the header text
   style, so the column looks unchanged until it is hovered or active. */
.user-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.user-table__sort:hover,
.user-table__sort--active {
  color: var(--pm-primary);
}

.user-table__sort:focus-visible {
  outline: 2px solid var(--pm-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.user-table__sort-arrow {
  font-size: 0.85rem;
  line-height: 1;
}

.user-table td {
  padding: 0.95rem 1.5rem;
  border-bottom: 1px solid var(--pm-surface-alt);
  vertical-align: middle;
  white-space: nowrap;
}

.user-table tr:last-child td {
  border-bottom: none;
}

.user-table__row--marked td {
  background: var(--pm-primary-bg);
}

.user-table__row--marked td:first-child {
  box-shadow: inset 3px 0 0 var(--pm-primary);
}

.user-table__date {
  color: var(--pm-text-muted);
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pm-primary);
  background: var(--pm-primary-bg);
  border-radius: 50%;
}

.user-cell__name {
  font-weight: 700;
}

.user-cell__email {
  color: var(--pm-text-muted);
  font-size: 0.88rem;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pm-text-muted);
  background: var(--pm-surface-alt);
  border-radius: 999px;
}

.role-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.role-badge--admin,
.role-badge--paid {
  color: var(--pm-primary);
  background: var(--pm-primary-bg);
}

.user-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.user-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--pm-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.user-btn--danger {
  color: var(--pm-danger);
  border-color: var(--pm-danger);
}

.user-btn--danger:hover:not(:disabled) {
  background: var(--pm-danger-bg);
}

.user-btn--danger:disabled {
  color: var(--pm-text-faint);
  border-color: var(--pm-border);
  cursor: not-allowed;
}

.user-btn--accent {
  color: var(--pm-primary);
}

.user-btn--accent:hover {
  border-color: var(--pm-primary);
  background: var(--pm-primary-bg);
}

.user-btn--neutral {
  color: var(--pm-text-muted);
}

.user-btn--neutral:hover {
  background: var(--pm-surface-alt);
}

.users__empty {
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--pm-text-muted);
}

/* Profile settings page */

.profile {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.profile__summary {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.6rem 1.8rem;
  flex-wrap: wrap;
}

.profile__avatar {
  width: 72px;
  height: 72px;
  font-size: 1.6rem;
}

.profile__summary-info {
  flex: 1;
  min-width: 200px;
}

.profile__name {
  font-size: 1.35rem;
}

.profile__email {
  color: var(--pm-text-muted);
}

.profile__member-since {
  margin-top: 0.3rem;
  color: var(--pm-text-faint);
  font-size: 0.85rem;
}

.profile__summary-badges {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.profile__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items: start;
}

.profile__column {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-width: 0;
}

.profile__card {
  padding: 1.5rem;
}

.profile__card form {
  margin-top: 1rem;
}

.profile__hint {
  color: var(--pm-text-faint);
  font-size: 0.85rem;
}

/* Veszélyzóna: a fiók és minden adat végleges törlése. */
.profile__danger {
  padding: 0;
  overflow: hidden;
}

.profile__danger-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--pm-border);
}

.profile__danger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--pm-danger);
  background: var(--pm-danger-bg);
  border-radius: 0.7rem;
}

.profile__danger-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pm-danger);
}

.profile__danger-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
}

.profile__danger-text {
  margin: 0;
}

.profile__danger-legal {
  width: 100%;
  padding: 0.9rem 1.1rem;
  color: var(--pm-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  background: var(--pm-surface-alt);
  border: 1px solid var(--pm-border);
  border-left: 3px solid var(--pm-danger);
  border-radius: var(--pm-radius);
}

.pm-btn-danger-outline {
  color: var(--pm-danger);
  background: transparent;
  border: 1px solid var(--pm-danger);
}

.pm-btn-danger-outline:hover:not(:disabled) {
  color: #fff;
  background: var(--pm-danger);
}

.profile__2fa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.profile__2fa-enabled-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  color: var(--pm-success);
  background: var(--pm-success-bg);
  border-radius: var(--pm-radius);
}

.profile__2fa-setup {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--pm-border);
}

.profile__2fa-step {
  margin-bottom: 0.7rem;
  font-size: 0.95rem;
}

.profile__qr {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto 1.1rem;
  padding: 0.6rem;
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  image-rendering: pixelated;
}

.profile__2fa-manual-hint {
  display: block;
  margin-bottom: 0.5rem;
}

.profile__secret {
  display: block;
  margin-bottom: 1.1rem;
  padding: 0.8rem 1rem;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  word-break: break-all;
  color: var(--pm-primary-darker);
  background: var(--pm-primary-bg);
  border: 1px dashed var(--pm-primary-light);
  border-radius: var(--pm-radius);
}

.profile__backup {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--pm-border);
}

.profile__backup-title {
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

.profile__backup-list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.profile__backup-list li {
  padding: 0.45rem 0.8rem;
  font-family: 'Consolas', 'Menlo', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-align: center;
  background: var(--pm-surface-alt);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
}

@media (max-width: 1100px) {
  .profile__grid {
    grid-template-columns: 1fr;
  }
}

/* Termékimport varázsló */
.import-wizard {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.import-wizard__step {
  padding: 1.5rem;
}

.import-wizard__step-title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.import-wizard__hint {
  margin: 0 0 1rem;
  color: var(--pm-text-muted);
  font-size: 0.9rem;
}

.import-wizard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}

.import-wizard__file-label {
  cursor: pointer;
}

.import-wizard__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}

.import-wizard__chip {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--pm-surface-alt);
  font-size: 0.85rem;
  font-weight: 600;
}

.import-wizard__changes {
  white-space: normal;
  color: var(--pm-text-muted);
  font-size: 0.85rem;
  max-width: 32rem;
}

.import-wizard__warn {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  color: var(--pm-warning);
  white-space: nowrap;
}

.import-wizard__errors-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.2rem 0 0.5rem;
  font-size: 1rem;
}

/* Products page */

.products {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.products__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.products__search {
  flex: 1 1 260px;
  max-width: 480px;
}

.products__import-btn {
  margin-left: auto;
}

/* Unas sync button: brand logo plus a subtle Unas-blue accent on the
   secondary pill so the platform is recognizable at a glance. */
.products__unas-btn {
  color: #1273b8;
  border-color: rgb(18 115 184 / 0.35);
  box-shadow: 0 1px 3px rgb(18 115 184 / 0.15);
}

.products__unas-btn:hover:not(:disabled) {
  background: rgb(18 115 184 / 0.08);
  border-color: #1273b8;
  box-shadow: 0 2px 8px rgb(18 115 184 / 0.25);
}

.products__unas-logo {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.3rem;
}

/* Narrow leading column of the product table with the row selection
   checkboxes for the bulk AI competitor search. */
.user-table__select-col {
  width: 2.6rem;
}

.pm-select {
  padding: 0.75rem 2.4rem 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--pm-text);
  background: var(--pm-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.85rem;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  outline: none;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-select:focus {
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgb(51 98 204 / 0.15);
}

/* Full-width variant so a select lines up with the text/number inputs
   of a modal form instead of shrinking to its content. */
.pm-select--block {
  width: 100%;
}

.pm-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-input:focus {
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgb(51 98 204 / 0.15);
}

/* Modal */

.pm-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgb(15 23 42 / 0.55);
}

.pm-modal {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.8rem 2rem;
  background: var(--pm-surface);
  border-radius: var(--pm-radius-lg);
  box-shadow: var(--pm-shadow);
}

.pm-modal--wide {
  max-width: 900px;
}

.pm-modal__title {
  margin-bottom: 1.2rem;
  font-size: 1.3rem;
}

/* Modal header row: title on the left, status switch in the top right corner. */
.pm-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.pm-modal__header .pm-modal__title {
  margin-bottom: 1.2rem;
}

/* Muted close (X) button in the modal's top right corner — matches the
   chart modal's close button so every modal closes the same way. */
.pm-modal__close {
  padding: 0.2rem 0.45rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--pm-text-muted);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.pm-modal__close:hover {
  background: rgb(15 23 42 / 0.08);
}

/* Small labelled on/off switch (checkbox based). */
.pm-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
}

.pm-switch__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pm-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 2.6rem;
  height: 1.4rem;
  background: var(--pm-border);
  border-radius: 999px;
  transition: background 0.15s ease;
}

.pm-switch__track::after {
  content: '';
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--pm-surface);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.25);
  transition: transform 0.15s ease;
}

.pm-switch__input:checked + .pm-switch__track {
  background: var(--pm-primary);
}

.pm-switch__input:checked + .pm-switch__track::after {
  transform: translateX(1.2rem);
}

.pm-switch__input:focus-visible + .pm-switch__track {
  outline: 2px solid var(--pm-primary);
  outline-offset: 2px;
}

.pm-switch__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pm-text);
}

.pm-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.1rem;
}

.pm-modal__grid input[type='number'],
.pm-form-section__grid input[type='number'],
.admin-packages__form-grid input[type='number'] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-modal__grid input[type='number']:focus,
.pm-form-section__grid input[type='number']:focus,
.admin-packages__form-grid input[type='number']:focus {
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgb(51 98 204 / 0.15);
}

/* Labelled form sections inside a modal: separator line, small caps title,
   optional description and a two column field grid with uniform controls. */
.pm-form-section {
  padding-top: 1.2rem;
  border-top: 1px solid var(--pm-border);
}

.pm-form-section:first-child {
  padding-top: 0;
  border-top: none;
}

.pm-form-section__title {
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pm-text-muted);
}

.pm-form-section__hint {
  margin-top: -0.5rem;
  margin-bottom: 0.9rem;
  font-size: 0.88rem;
  color: var(--pm-text-muted);
}

.pm-form-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.1rem;
}

.pm-form-section__grid input:disabled {
  color: var(--pm-text-faint);
  background: var(--pm-surface-alt);
  cursor: not-allowed;
}

.pm-modal__full {
  grid-column: 1 / -1;
}

.pm-modal__hint {
  margin-bottom: 1.2rem;
  color: var(--pm-text-muted);
  font-size: 0.88rem;
}

.pm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
}

@media (max-width: 640px) {
  .pm-modal__grid,
  .pm-form-section__grid {
    grid-template-columns: 1fr;
  }

  .products__import-btn {
    margin-left: 0;
  }
}

/* Settings dashboard: tile links to the settings sub-pages. */
.settings-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}

.settings-tile {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.75rem;
  color: var(--pm-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.settings-tile:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgb(29 78 216 / 0.16);
}

.settings-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  color: var(--pm-primary);
  background: var(--pm-primary-bg);
  border-radius: 14px;
}

.settings-tile__title {
  font-size: 1.1rem;
  font-weight: 600;
}

.settings-tile__description {
  color: var(--pm-text-muted);
  font-size: 0.92rem;
}

/* Settings page: branded section header and the country multi-select dropdown. */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem;
}

.pm-section-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--pm-border);
}

.pm-section-head__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pm-primary), var(--pm-primary-darker));
  color: #fff;
  box-shadow: 0 4px 12px rgb(51 98 204 / 0.25);
}

.pm-section-head__icon svg {
  width: 22px;
  height: 22px;
}

.pm-section-head__hint {
  margin-top: 0.25rem;
  color: var(--pm-text-muted);
  font-size: 0.88rem;
}

.settings-field__label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pm-text-muted);
}

.pm-multiselect {
  position: relative;
  max-width: 560px;
}

.pm-multiselect__trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.45rem 0.9rem;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-multiselect__trigger:hover {
  border-color: var(--pm-primary-light);
}

.pm-multiselect__trigger:focus-visible,
.pm-multiselect--open .pm-multiselect__trigger {
  outline: none;
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgb(51 98 204 / 0.15);
}

.pm-multiselect__chips {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.pm-multiselect__placeholder {
  color: var(--pm-text-faint);
  font-size: 0.92rem;
}

.pm-multiselect__chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--pm-text-muted);
  transition: transform 0.15s ease;
}

.pm-multiselect--open .pm-multiselect__chevron {
  transform: rotate(180deg);
}

.pm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.35rem 0.25rem 0.55rem;
  background: var(--pm-primary-bg);
  border: 1px solid rgb(51 98 204 / 0.2);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pm-primary-darker);
}

.pm-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--pm-primary-dark);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

.pm-chip__remove:hover {
  background: rgb(51 98 204 / 0.15);
}

.pm-multiselect__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 0.4rem;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow-lg);
}

.pm-multiselect__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}

.pm-multiselect__option:hover {
  background: var(--pm-surface-alt);
}

.pm-multiselect__option:has(input:checked) {
  background: var(--pm-primary-bg);
}

.pm-multiselect__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pm-flag {
  flex: 0 0 auto;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  outline: 1px solid rgb(0 0 0 / 0.08);
  outline-offset: -1px;
}

.pm-chip .pm-flag {
  width: 17px;
  height: 12px;
}

.pm-multiselect__name {
  flex: 1;
  min-width: 0;
}

.pm-multiselect__option input:checked ~ .pm-multiselect__name {
  font-weight: 600;
  color: var(--pm-primary-darker);
}

.pm-multiselect__code {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--pm-text-faint);
}

.pm-multiselect__check {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--pm-primary);
  opacity: 0;
}

.pm-multiselect__option input:checked ~ .pm-multiselect__check {
  opacity: 1;
}

.settings-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pm-border);
}

.settings-card__count {
  font-size: 0.85rem;
  color: var(--pm-text-muted);
}

@media (max-width: 640px) {
  .settings-card {
    padding: 1.25rem;
  }

  .settings-card__footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* Product competitors page: stacked cards, inline forms and suggestion table. */
.competitors-page {
  width: 100%;
}

.competitors-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-top: 1.5rem;
}

.competitors-card > .dashboard__card-title,
.competitors-card > .pm-modal__hint,
.competitors-card > .competitors-inline-form {
  padding: 0 1.75rem;
}

.competitors-card > .pm-modal__hint {
  margin-bottom: 0;
}

.competitors-card > .dashboard__table-wrap {
  margin-top: 0.75rem;
}

.competitors-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.25rem 0 0.5rem;
}

.competitors-inline-form input[type='text'],
.competitors-inline-form input[type='url'] {
  flex: 1 1 220px;
  max-width: 480px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  font-size: 0.9rem;
}

.competitors-check-col {
  width: 3rem;
}

/* The product's short description shown under the product name in the page
   header; long texts are clamped so the header stays compact. */
.competitors-product-description {
  max-width: 42rem;
  margin-top: 0.2rem;
  font-size: 0.88rem;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Animated availability check outcome shown after the check button:
   a green circled check mark on success, a red circled X on failure. */
.check-result {
  display: inline-grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  animation: check-result-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.check-result--ok {
  color: var(--pm-success);
  background: var(--pm-success-bg);
  box-shadow: inset 0 0 0 2px var(--pm-success);
}

.check-result--fail {
  color: var(--pm-danger);
  background: var(--pm-danger-bg);
  box-shadow: inset 0 0 0 2px var(--pm-danger);
}

.check-result svg {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}

.check-result__mark {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: check-result-draw 0.4s ease-out 0.15s forwards;
}

@keyframes check-result-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes check-result-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Competitor suggestion row header: the shop name with the discovered price
   badge next to it, so the price is visible without scrolling the table. */
.suggestion-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.suggestion-price {
  padding: 0.15rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--pm-primary);
  background: var(--pm-primary-bg);
  border-radius: 8px;
}

.competitors-reasoning {
  max-width: 420px;
  font-size: 0.85rem;
  color: var(--pm-text-muted);
}

/* Missing competitor price/stock info: shown as a muted dash. */
.metric-null {
  color: var(--pm-text-muted);
  letter-spacing: 0.04em;
}

/* Custom checkbox matching the app design (larger, rounded, primary color). */
.pm-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  background: var(--pm-surface);
  border: 2px solid var(--pm-border);
  border-radius: 7px;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-checkbox:hover:not(:disabled) {
  border-color: var(--pm-primary-light);
}

.pm-checkbox:focus-visible {
  outline: none;
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgb(51 98 204 / 0.15);
}

.pm-checkbox::before {
  content: '';
  width: 0.8rem;
  height: 0.8rem;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  background: var(--pm-surface);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.pm-checkbox:checked {
  background: var(--pm-primary);
  border-color: var(--pm-primary);
}

.pm-checkbox:checked::before {
  transform: scale(1);
}

.pm-checkbox:disabled {
  cursor: not-allowed;
  background: var(--pm-surface-alt);
  border-color: var(--pm-border);
  opacity: 0.6;
}

/* AI badge: gradient chip with a twinkling spark and a periodic sheen sweep,
   used on the discovery button and the discovery modal title instead of a
   plain "(AI)" text suffix. Vertical padding is asymmetric on purpose: the
   line box reserves descender space below the baseline that the all-caps
   "AI" never uses, so equal padding would leave the glyphs sitting ~0.14em
   above the chip's optical center. */
.ai-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  padding: 0.28em 0.5em 0.04em 0.42em;
  border-radius: 0.55em;
  background: linear-gradient(135deg, var(--pm-primary-soft) 0%, #2e9cc9 45%, #14a5bd 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3), 0 2px 8px rgb(14 165 233 / 0.3);
  color: #ffffff;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  vertical-align: 0.12em;
  overflow: hidden;
}

.ai-badge::before {
  content: '✦';
  font-size: 0.85em;
  animation: ai-badge-twinkle 2.4s ease-in-out infinite;
}

.ai-badge::after {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -30%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgb(255 255 255 / 0.55), transparent);
  animation: ai-badge-shine 3.2s ease-in-out infinite;
}

.pm-btn-ai {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

@keyframes ai-badge-twinkle {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.85) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.1) rotate(18deg);
  }
}

@keyframes ai-badge-shine {
  0%,
  55% {
    transform: translateX(-90%) skewX(-20deg);
  }

  100% {
    transform: translateX(330%) skewX(-20deg);
  }
}

/* AI search loader: a dark stage where two spotlight beams sweep back and
   forth over the dimmed AI letters and light up the part they hit, while
   rotating messages keep the user entertained during the discovery. */
.ai-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 2.25rem 1rem 2.5rem;
  text-align: center;
}

.ai-loader__stage {
  position: relative;
  width: 280px;
  height: 150px;
  border-radius: var(--pm-radius);
  background:
    radial-gradient(120% 90% at 50% 110%, rgb(51 98 204 / 0.3), transparent 60%),
    linear-gradient(180deg, #0f1c3d 0%, #080f22 100%);
  box-shadow: inset 0 0 0 1px rgb(51 98 204 / 0.25), var(--pm-shadow);
  overflow: hidden;
}

.ai-loader__beam {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 150px;
  height: 156px;
  margin-left: -75px;
  background: linear-gradient(180deg, rgb(169 195 238 / 0.8), rgb(74 122 216 / 0.16) 60%, transparent 92%);
  clip-path: polygon(46% 0, 54% 0, 94% 100%, 6% 100%);
  transform-origin: 50% 0;
  mix-blend-mode: screen;
  filter: blur(1px);
  animation: ai-loader-sweep-left 3.2s ease-in-out infinite;
}

.ai-loader__beam--right {
  background: linear-gradient(180deg, rgb(165 243 252 / 0.75), rgb(34 211 238 / 0.14) 60%, transparent 92%);
  animation-name: ai-loader-sweep-right;
}

.ai-loader__letters {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: rgb(255 255 255 / 0.1);
  user-select: none;
}

/* The lit layer sits exactly on top of the dim letters; two light spots are
   clipped to the glyphs and move in sync with the beam sweeps. */
.ai-loader__letters--lit {
  color: transparent;
  background-image:
    radial-gradient(circle 55px at 50% 50%, rgb(200 216 240), rgb(74 122 216 / 0.5) 55%, transparent 78%),
    radial-gradient(circle 55px at 50% 50%, rgb(207 250 254), rgb(34 211 238 / 0.45) 55%, transparent 78%);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ai-loader-scan 3.2s ease-in-out infinite;
}

.ai-loader__floor {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 190px;
  height: 16px;
  margin-left: -95px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(96 165 250 / 0.45), transparent 70%);
  filter: blur(4px);
  animation: ai-loader-floor 3.2s ease-in-out infinite;
}

.ai-loader__message {
  min-height: 1.4em;
  font-weight: 600;
  color: var(--pm-text);
}

.ai-loader__message--swap {
  animation: ai-loader-fade-in 0.4s ease;
}

.ai-loader__note {
  font-size: 0.85rem;
  color: var(--pm-text-muted);
}

@keyframes ai-loader-sweep-left {
  0%,
  100% {
    transform: rotate(-26deg);
  }

  50% {
    transform: rotate(26deg);
  }
}

@keyframes ai-loader-sweep-right {
  0%,
  100% {
    transform: rotate(26deg);
  }

  50% {
    transform: rotate(-26deg);
  }
}

@keyframes ai-loader-scan {
  0%,
  100% {
    background-position: -80px 0, 80px 0;
  }

  50% {
    background-position: 80px 0, -80px 0;
  }
}

@keyframes ai-loader-floor {
  0%,
  100% {
    opacity: 0.6;
    transform: scaleX(0.85);
  }

  50% {
    opacity: 1;
    transform: scaleX(1.05);
  }
}

@keyframes ai-loader-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Featured nav item (AI pricing): the most used menu entry gets a gradient
   highlight and the same periodic sheen sweep as the AI badge, so it stands
   out from the plain sidebar items. */
.dashboard__nav-item--featured {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, rgb(74 122 216 / 0.4) 0%, rgb(14 165 233 / 0.32) 45%, rgb(6 182 212 / 0.28) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}

.dashboard__nav-item--featured::after {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -30%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgb(255 255 255 / 0.3), transparent);
  animation: ai-badge-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

.dashboard__nav-item--featured:hover {
  background: linear-gradient(135deg, rgb(74 122 216 / 0.55) 0%, rgb(14 165 233 / 0.45) 45%, rgb(6 182 212 / 0.4) 100%);
}

.dashboard__nav-item--featured.dashboard__nav-item--active {
  background: linear-gradient(135deg, rgb(74 122 216 / 0.65) 0%, rgb(14 165 233 / 0.55) 45%, rgb(6 182 212 / 0.5) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3);
}

/* AI pricing page */

.ai-pricing__card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.75rem;
}

.ai-pricing__heading {
  margin: 0 0 1.1rem;
  font-size: 1.15rem;
}

/* Scope selector: image cards acting as radio buttons — illustration on top,
   label below, hidden native input, check badge on the selected card. */
.ai-pricing__scopes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ai-pricing__scope {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  background: var(--pm-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ai-pricing__scope input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ai-pricing__scope:hover {
  border-color: var(--pm-primary-light);
  box-shadow: var(--pm-shadow);
  transform: translateY(-2px);
}

.ai-pricing__scope:has(input:checked) {
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgb(51 98 204 / 0.14), var(--pm-shadow);
}

.ai-pricing__scope:has(input:focus-visible) {
  outline: 2px solid var(--pm-primary);
  outline-offset: 2px;
}

.ai-pricing__scope-media {
  display: block;
  aspect-ratio: 5 / 3;
  background: var(--pm-primary-bg);
}

.ai-pricing__scope-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.ai-pricing__scope:hover .ai-pricing__scope-media img {
  transform: scale(1.04);
}

.ai-pricing__scope-check {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  color: #fff;
  background: var(--pm-primary);
  box-shadow: 0 2px 6px rgb(43 86 182 / 0.35);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ai-pricing__scope-check svg {
  width: 0.95rem;
  height: 0.95rem;
}

.ai-pricing__scope:has(input:checked) .ai-pricing__scope-check {
  opacity: 1;
  transform: scale(1);
}

.ai-pricing__scope-label {
  padding: 0.75rem 0.9rem 0.85rem;
  font-weight: 600;
  text-align: center;
}

.ai-pricing__scope:has(input:checked) .ai-pricing__scope-label {
  color: var(--pm-primary-darker);
}

.ai-pricing__target-field {
  max-width: 420px;
  margin-bottom: 1rem;
}

.ai-pricing__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.4rem;
}

.ai-pricing__eligible {
  margin: 0;
  font-size: 0.9rem;
  color: var(--pm-text-muted);
}

.ai-pricing__suggested {
  font-weight: 700;
}

.ai-pricing__note {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--pm-text-muted);
}

.ai-pricing__decision-col {
  width: 6.5rem;
  text-align: center;
  white-space: nowrap;
}

/* Price delta chip in the result table: up arrow for an increase, down arrow
   for a decrease compared to the current selling price. */
.ai-pricing-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
}

.ai-pricing-delta--up {
  color: var(--pm-success);
}

.ai-pricing-delta--down {
  color: var(--pm-danger);
}

.ai-pricing-delta__arrow {
  font-size: 0.8em;
}

/* Competitor price rank badge next to the delta: gold "No. 1" when the
   suggested price is the best on the market, muted badge otherwise. */
.ai-pricing-rank {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--pm-border);
  border-radius: 999px;
  background: var(--pm-surface);
  color: var(--pm-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: help;
}

.ai-pricing-rank--best {
  border-color: #f0c34e;
  background: #fdf6e0;
  color: #9a7213;
}

.ai-pricing-rank__icon {
  font-size: 0.9em;
}

/* Accept / reject toggle buttons at the end of each result row; the active
   side is filled, the inactive side stays muted. */
.ai-pricing-decide {
  width: 2rem;
  height: 2rem;
  margin: 0 0.15rem;
  border: 1px solid var(--pm-border);
  border-radius: 50%;
  background: var(--pm-surface);
  color: var(--pm-text-muted);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ai-pricing-decide--accept.ai-pricing-decide--active {
  background: var(--pm-success);
  border-color: var(--pm-success);
  color: #fff;
}

.ai-pricing-decide--reject.ai-pricing-decide--active {
  background: var(--pm-danger);
  border-color: var(--pm-danger);
  color: #fff;
}

.ai-pricing-decide:hover {
  border-color: var(--pm-primary);
}

.ai-pricing-decide:disabled {
  opacity: 0.5;
  cursor: default;
}

/* --- Bulk AI pricing decision workspace ---------------------------------- */

/* Result modal of a bulk run: nearly full width on a 1920 screen and a fixed
   height, so the toolbar and the approve bar stay put while only the row list
   scrolls — no horizontal scrolling, no lost table header. */
.pm-modal--full {
  max-width: min(1780px, 96vw);
  height: min(92vh, 1000px);
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
}

.ai-pricing-run {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* While the run is in progress there is no table yet, so the dialog shrinks
   to the loader instead of showing a mostly empty full-height sheet. */
.pm-modal--full.ai-pricing-run--loading {
  height: auto;
}

.ai-pricing-run__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.75rem 1rem;
  border-bottom: 1px solid var(--pm-border);
}

.ai-pricing-run__header .pm-modal__title {
  margin-bottom: 0;
}

.ai-pricing-run > .pm-alert {
  margin: 1rem 1.75rem 0;
}

.ai-pricing-run > .ai-loader {
  flex: 1 1 auto;
  justify-content: center;
}

.ai-pricing-run__results {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

/* Headline numbers of the finished run: how many products were priced, how
   many carry a change and how many of those are already accepted. */
.ai-pricing-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1rem 1.75rem 0.35rem;
}

.ai-pricing-summary__chip {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--pm-border);
  border-radius: 999px;
  background: var(--pm-surface-alt);
  font-size: 0.85rem;
  color: var(--pm-text-muted);
  white-space: nowrap;
}

.ai-pricing-summary__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pm-text);
  font-variant-numeric: tabular-nums;
}

.ai-pricing-summary__chip--up .ai-pricing-summary__value {
  color: var(--pm-success);
}

.ai-pricing-summary__chip--down .ai-pricing-summary__value {
  color: var(--pm-danger);
}

.ai-pricing-summary__chip--issues .ai-pricing-summary__value {
  color: var(--pm-warning);
}

.ai-pricing-summary__chip--accepted {
  border-color: var(--pm-primary-light);
  background: var(--pm-primary-bg);
}

.ai-pricing-summary__chip--accepted .ai-pricing-summary__value {
  color: var(--pm-primary-darker);
}

/* Filter / search / bulk decision row above the result table. */
.ai-pricing-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 0.75rem 1.75rem 0.9rem;
  border-bottom: 1px solid var(--pm-border);
}

.ai-pricing-toolbar__search {
  flex: 1 1 240px;
  max-width: 380px;
  padding: 0.55rem 0.9rem;
  font-size: 0.9rem;
}

.ai-pricing-toolbar__bulk {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.ai-pricing-filter {
  display: inline-flex;
  padding: 0.2rem;
  border: 1px solid var(--pm-border);
  border-radius: 999px;
  background: var(--pm-surface-alt);
}

.ai-pricing-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.95rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--pm-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ai-pricing-filter__btn:hover {
  color: var(--pm-primary);
}

.ai-pricing-filter__btn--active {
  background: var(--pm-surface);
  color: var(--pm-primary-darker);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

.ai-pricing-filter__count {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.06);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.ai-pricing-bulk-btn {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--pm-border);
  border-radius: 999px;
  background: var(--pm-surface);
  color: var(--pm-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ai-pricing-bulk-btn--accept:hover {
  border-color: var(--pm-success);
  background: var(--pm-success-bg);
  color: var(--pm-success-dark);
}

.ai-pricing-bulk-btn--reject:hover {
  border-color: var(--pm-danger);
  background: var(--pm-danger-bg);
  color: var(--pm-danger-dark);
}

.ai-pricing-bulk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Only the row list scrolls; the column header sticks to the top of it. */
.ai-pricing-table__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.ai-pricing-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.ai-pricing-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.7rem 1rem;
  text-align: left;
  color: var(--pm-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--pm-surface-alt);
  border-bottom: 1px solid var(--pm-border);
}

/* Inside the run modal the table is flush with the modal edges, so its first
   and last column line up with the toolbar above it. */
.ai-pricing-run .ai-pricing-table th:first-child,
.ai-pricing-run .ai-pricing-table td:first-child {
  padding-left: 1.75rem;
}

.ai-pricing-run .ai-pricing-table th:last-child,
.ai-pricing-run .ai-pricing-table td:last-child {
  padding-right: 1.75rem;
}

.ai-pricing-table td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--pm-surface-alt);
  vertical-align: middle;
  white-space: nowrap;
}

.ai-pricing-table tbody tr:hover td {
  background: var(--pm-primary-bg-soft);
}

/* Column widths — the product column takes whatever the fixed columns leave,
   so even long product names fit without a horizontal scrollbar. */
.ai-pricing-table__product-col {
  width: auto;
  min-width: 18rem;
}

.ai-pricing-table__num-col {
  width: 9.5rem;
  text-align: right;
}

.ai-pricing-table__change-col {
  width: 11rem;
}

.ai-pricing-table__market-col {
  width: 9rem;
}

.ai-pricing-table__competitor-col {
  width: 11.5rem;
  text-align: right;
}

.ai-pricing-table__date-col {
  width: 10.5rem;
}

.ai-pricing-table td.ai-pricing-table__num-col,
.ai-pricing-table td.ai-pricing-table__competitor-col {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Product cell: the name wraps to at most two lines, the SKU sits below it. */
.ai-pricing-table__product {
  display: -webkit-box;
  margin: 0;
  font-weight: 600;
  white-space: normal;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.ai-pricing-table__sku {
  margin: 0;
  font-size: 0.8rem;
  color: var(--pm-text-faint);
}

.ai-pricing__note-icon {
  margin-right: 0.15rem;
  vertical-align: -0.15em;
}

.ai-pricing-table__empty {
  padding: 2rem 1.75rem;
  color: var(--pm-text-muted);
  text-align: center;
}

/* Row states: an accepted change is highlighted green, a rejected one is
   dimmed with the suggested price struck through. */
.ai-pricing-row--accepted td {
  background: rgb(22 163 74 / 0.06);
}

.ai-pricing-row--accepted td:first-child {
  box-shadow: inset 3px 0 0 var(--pm-success);
}

.ai-pricing-row--rejected td {
  color: var(--pm-text-faint);
}

.ai-pricing-row--rejected .ai-pricing__suggested {
  text-decoration: line-through;
}

.ai-pricing-row--muted td {
  color: var(--pm-text-muted);
}

.ai-pricing-row--issue td:first-child {
  box-shadow: inset 3px 0 0 var(--pm-warning);
}

/* Secondary line under the price delta: the same change in percent. */
.ai-pricing-delta__percent {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pm-text-muted);
}

.ai-pricing-cell__sub {
  display: block;
  font-size: 0.78rem;
  color: var(--pm-text-faint);
}

/* Decision cell: the two toggle buttons plus the resulting state as text. */
.ai-pricing-decide__state {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pm-text-faint);
}

.ai-pricing-decide__state--accepted {
  color: var(--pm-success);
}

.ai-pricing-run__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.75rem;
  border-top: 1px solid var(--pm-border);
  background: var(--pm-surface);
}

.ai-pricing-run__decision {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pm-text-muted);
}

.ai-pricing-run__buttons {
  display: flex;
  gap: 0.8rem;
  margin-left: auto;
}

/* Progress bar of a bulk run, under the animated AI loader. */
.ai-loader__progress {
  width: min(420px, 70%);
  height: 6px;
  border-radius: 999px;
  background: var(--pm-surface-alt);
  overflow: hidden;
}

.ai-loader__progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pm-primary), var(--pm-accent-light));
  transition: width 0.3s ease;
}

/* Pending approvals card header: title on the left, count and search right. */
.ai-pricing__pending-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.ai-pricing__pending-tools {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.ai-pricing__pending-count {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pm-text-muted);
  white-space: nowrap;
}

.ai-pricing__pending-card .ai-pricing-table__scroll {
  max-height: 60vh;
}

@media (max-width: 1280px) {
  .ai-pricing-table__scroll {
    overflow-x: auto;
  }

  .ai-pricing-table {
    min-width: 1080px;
  }
}

/* AI pricing scheduler (right card) + pending approvals (bottom table) */

.ai-pricing__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  max-width: 1440px;
}

@media (max-width: 1100px) {
  .ai-pricing__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ai-pricing-schedule__status {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  background: var(--pm-surface-alt);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ai-pricing-schedule__status-line {
  margin: 0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ai-pricing-schedule__status-line--muted {
  color: var(--pm-text-muted);
}

.ai-pricing-schedule__status-line--next {
  font-weight: 600;
}

.ai-pricing-schedule__status-line--running {
  color: var(--pm-primary-dark);
  font-weight: 600;
}

.ai-pricing-schedule__spinner {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--pm-primary-light);
  border-top-color: var(--pm-primary-dark);
  border-radius: 50%;
  animation: ai-schedule-spin 0.8s linear infinite;
}

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

.ai-pricing-schedule__badge {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  color: var(--pm-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.ai-pricing-schedule__badge--daily {
  background: var(--pm-primary-bg);
  border-color: var(--pm-primary-light);
  color: var(--pm-primary-dark);
}

.ai-pricing-schedule__scopes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ai-pricing-schedule__scope-pill {
  position: relative;
  cursor: pointer;
}

.ai-pricing-schedule__scope-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ai-pricing-schedule__scope-pill span {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--pm-border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pm-text-muted);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ai-pricing-schedule__scope-pill:hover span {
  border-color: var(--pm-primary-light);
}

.ai-pricing-schedule__scope-pill:has(input:checked) span {
  background: var(--pm-primary-bg);
  border-color: var(--pm-primary);
  color: var(--pm-primary-dark);
}

.ai-pricing-schedule__scope-pill:has(input:focus-visible) span {
  outline: 2px solid var(--pm-primary-light);
  outline-offset: 2px;
}

.ai-pricing-schedule__timing {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}

.ai-pricing-schedule__time-field {
  margin: 0;
}

.ai-pricing-schedule__time-field input[type='time'] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  font: inherit;
  color: var(--pm-text);
  background: var(--pm-surface);
}

.ai-pricing-schedule__recurring {
  margin-bottom: 0.4rem;
}

.ai-pricing-schedule__hint {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--pm-text-faint);
}

.ai-pricing-schedule__footer {
  justify-content: flex-end;
  gap: 0.6rem;
}

.ai-pricing__pending-card {
  margin-top: 1.25rem;
  padding: 1.5rem 1.75rem;
}

.ai-pricing__pending-sub {
  margin: -0.6rem 0 1rem;
  font-size: 0.88rem;
  color: var(--pm-text-muted);
}

.ai-pricing__pending-empty {
  margin: 0;
  padding: 1rem 0;
  color: var(--pm-text-muted);
  font-size: 0.9rem;
}

/* Product categories page */

.categories__card {
  max-width: 860px;
  padding: 1rem 1.25rem;
}

.category-tree {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-tree--nested {
  margin-top: 0.4rem;
  padding-left: 1.6rem;
  border-left: 2px solid var(--pm-border);
}

.category-tree__item {
  display: flex;
  flex-direction: column;
}

.category-tree__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
}

.category-tree__row:hover {
  background: var(--pm-surface-alt);
}

.category-tree__row--draggable {
  cursor: grab;
}

.category-tree__row--dragging {
  opacity: 0.45;
}

.category-tree__row--drop-target {
  background: rgb(51 98 204 / 0.08);
  outline: 2px dashed var(--pm-primary);
  outline-offset: -2px;
}

.category-tree__handle {
  color: var(--pm-text-muted);
  font-size: 0.9rem;
  user-select: none;
}

.category-tree__dropzone {
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.85rem;
  border: 2px dashed var(--pm-border);
  border-radius: 10px;
  color: var(--pm-text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.category-tree__dropzone--over {
  background: rgb(51 98 204 / 0.08);
  border-color: var(--pm-primary);
  color: var(--pm-primary);
}

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

.category-tree__name {
  flex: 1 1 auto;
  font-size: 0.95rem;
}

.category-tree__name--depth1 {
  font-weight: 700;
}

.category-tree__name--depth2 {
  font-weight: 500;
}

.category-tree__count {
  color: var(--pm-text-muted);
  font-weight: 400;
  font-size: 0.85rem;
}

.category-tree__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.category-tree__editor {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Add-mode editor sits directly in the list item (no row wrapper), so it needs its own padding */
.category-tree__item > .category-tree__editor {
  padding: 0.35rem 0.85rem;
}

.category-tree__editor input[type='text'] {
  flex: 1 1 200px;
  max-width: 340px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  outline: none;
}

.category-tree__editor input[type='text']:focus {
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgb(51 98 204 / 0.15);
}

/* Category autocomplete picker */

.category-picker {
  position: relative;
  min-width: 220px;
}

.category-picker input[type='text'] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.category-picker input[type='text']:focus {
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgb(51 98 204 / 0.15);
}

.category-picker__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 280px;
  overflow-y: auto;
  padding: 0.35rem;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow);
}

.category-picker__item {
  padding: 0.5rem 0.7rem;
  font-size: 0.92rem;
  border-radius: 8px;
  cursor: pointer;
}

.category-picker__item--depth1 {
  font-weight: 600;
}

.category-picker__item--depth2 {
  padding-left: 1.7rem;
}

.category-picker__item--depth3 {
  padding-left: 2.7rem;
}

.category-picker__item--active,
.category-picker__item:hover {
  background: var(--pm-surface-alt);
  color: var(--pm-primary);
}

.category-picker__empty {
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  color: var(--pm-text-muted);
}

/* Bulk AI competitor discovery modal on the products page: pager between the
   listed products plus the accept/close actions. */
.bulk-discover__actions {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.8rem;
}

.bulk-discover__pager {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.bulk-discover__pager-label {
  min-width: 4rem;
  text-align: center;
  color: var(--pm-text-muted);
  font-variant-numeric: tabular-nums;
}

.bulk-discover__buttons {
  display: flex;
  gap: 0.8rem;
}

.bulk-discover__product {
  font-weight: 600;
  color: var(--pm-text);
}

/* Bottom pager bar on the products page: result summary on the left, page
   size buttons and prev/next paging on the right. */
.products-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--pm-border);
}

.products-pager__summary {
  font-size: 0.9rem;
  color: var(--pm-text-muted);
}

.products-pager__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.products-pager__size-label {
  font-size: 0.9rem;
  color: var(--pm-text-muted);
  white-space: nowrap;
}

.products-pager__sizes {
  display: flex;
  gap: 0.4rem;
}

.products-pager__size {
  padding: 0.4rem 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: 999px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.products-pager__size:hover {
  background: var(--pm-surface-alt);
}

.products-pager__size--active {
  color: #ffffff;
  background: var(--pm-primary);
  border-color: var(--pm-primary);
}

.products-pager__size--active:hover {
  background: var(--pm-primary-dark);
}

.products-pager__nav {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.products-pager__nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.products-pager__page {
  min-width: 4rem;
  text-align: center;
  color: var(--pm-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Product history chart modal: dedicated icon column in the table, tab row,
   from/to date filter, the SVG chart area and the source legend below it. */
.user-table__chart-col {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.chart-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  background: var(--pm-surface);
  color: var(--pm-text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.chart-icon-btn:hover {
  border-color: var(--pm-primary);
  background: rgb(51 98 204 / 0.08);
  color: var(--pm-primary);
}

.chart-modal__sku {
  margin-top: 0.15rem;
  color: var(--pm-text-muted);
  font-size: 0.85rem;
}

.chart-modal__close {
  padding: 0.2rem 0.45rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--pm-text-muted);
  font-size: 1.05rem;
  cursor: pointer;
}

.chart-modal__close:hover {
  background: rgb(15 23 42 / 0.08);
}

/* Header actions in the top right corner: the three-way segmented chart
   selector next to the close button. */
.chart-modal__header-actions {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex-shrink: 0;
}

.chart-tabs {
  display: inline-flex;
  border: 1px solid var(--pm-border);
  border-radius: 999px;
  overflow: hidden;
}

.chart-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border: none;
  background: var(--pm-surface);
  color: var(--pm-text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.chart-tabs__icon {
  flex-shrink: 0;
}

.chart-tabs__tab + .chart-tabs__tab {
  border-left: 1px solid var(--pm-border);
}

.chart-tabs__tab--active {
  background: var(--pm-primary);
  color: #fff;
}

.chart-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0.9rem 0 0.9rem;
}

.chart-range-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--pm-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chart-range-field input {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  background: var(--pm-surface);
  color: var(--pm-text);
  font-size: 1rem;
  font-family: inherit;
}

.chart-range-field input:focus {
  outline: none;
  border-color: var(--pm-primary);
}

.chart-toolbar__sep {
  padding-bottom: 0.55rem;
  color: var(--pm-text-faint);
  font-size: 1rem;
}

.chart-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
  color: var(--pm-text-muted);
  font-size: 0.78rem;
}

.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.chart-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.chart-legend__line {
  width: 18px;
  border-top: 3px solid var(--pm-text);
  display: inline-block;
}

.chart-legend__line--dashed {
  border-top-style: dashed;
  border-top-color: var(--pm-text-faint);
}

.chart-area {
  min-height: 200px;
}

.chart-area .chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--pm-text-muted);
}

/* Admin AI costs page: filter row above the log table (user picker + date/time
   range per the mock), the numeric columns and the secondary e-mail line. */
.ai-costs__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ai-costs__filter {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ai-costs__filter label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pm-text);
}

.ai-costs__filter input[type='date'],
.ai-costs__filter input[type='time'] {
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
}

.ai-costs__filter input[type='date']:focus,
.ai-costs__filter input[type='time']:focus {
  outline: none;
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgb(51 98 204 / 0.15);
}

.ai-costs__filter--user {
  flex: 1 1 280px;
  min-width: 260px;
}

.ai-costs__filter--user .category-picker input[type='text'] {
  padding-right: 2.4rem;
}

.ai-costs__picker-clear {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  padding: 0.2rem 0.4rem;
  font-size: 0.9rem;
  color: var(--pm-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}

.ai-costs__picker-clear:hover {
  color: var(--pm-text);
}

.ai-costs__actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.ai-costs__num-col,
.ai-costs__num {
  text-align: right;
  white-space: nowrap;
}

.ai-costs__email {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--pm-text-muted);
}

/* Audit log page */

.audit-log__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.audit-log__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.audit-log__filter {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 150px;
}

.audit-log__filter .pm-input {
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
}

.audit-log__filter--search,
.audit-log__filter--user {
  min-width: 230px;
}

.audit-log__filter-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pm-text-muted);
}

.audit-log__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.audit-log__actions .pm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.audit-log__user-box {
  position: relative;
  display: block;
}

.audit-log__user-box .pm-input {
  padding-right: 2.2rem;
}

.audit-log__user-clear {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  padding: 0.25rem;
  border: none;
  background: none;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--pm-text-muted);
  cursor: pointer;
}

.audit-log__user-clear:hover {
  color: var(--pm-text);
}

.audit-log__autocomplete {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  overflow: hidden;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow-lg);
}

.audit-log__autocomplete-item {
  display: block;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--pm-text);
  cursor: pointer;
}

.audit-log__autocomplete-item:hover {
  background: var(--pm-primary-bg);
}

.audit-log__card {
  padding: 0;
  overflow: hidden;
}

.audit-log__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--pm-border);
}

.audit-log__pager .pm-btn {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
}

.audit-log__page-info {
  min-width: 4rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--pm-text-muted);
}

.audit-table__time {
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--pm-text-muted);
}

.audit-table__user {
  font-size: 0.88rem;
  word-break: break-all;
}

.audit-table__action {
  margin: 0;
  font-weight: 600;
}

.audit-table__details {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--pm-text-muted);
}

/* Session countdown in the top bar */

.session-timer {
  display: inline-flex;
  align-items: center;
}

.session-timer__clock {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--pm-border);
  border-radius: 999px;
  background: var(--pm-surface);
  color: var(--pm-text-muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.session-timer__clock:hover {
  border-color: var(--pm-primary-light);
  color: var(--pm-primary-dark);
  background: var(--pm-primary-bg);
}

.session-timer__clock:disabled {
  cursor: default;
  opacity: 0.7;
}

.session-timer__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.session-timer__value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Under one minute the clock turns into a warning. */
.session-timer__clock--warning {
  border-color: var(--pm-danger);
  color: var(--pm-danger);
  background: var(--pm-danger-bg);
}

.session-timer__clock--warning:hover {
  border-color: var(--pm-danger);
  color: var(--pm-danger);
  background: var(--pm-danger-bg);
}

.session-modal {
  max-width: 480px;
}

.session-modal__countdown {
  margin: 0 0 1.2rem;
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pm-danger);
  text-align: center;
}

/* The same slot holds a sentence while the sign-out waits for an operation. */
.session-modal__countdown--note {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pm-warning);
}

/* ── Billing: gombvariánsok ──────────────────────────────────────────────── */

.pm-btn-danger {
  background: var(--pm-danger);
  color: #fff;
}

.pm-btn-danger:hover:not(:disabled) {
  background: var(--pm-danger-dark);
}

.pm-btn-small {
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
}

/* ── Billing: publikus árak oldal és csomagkártyák ───────────────────────── */

.pricing-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* A csomagok száma dinamikus, ezért a rács a kártyaszélességből számolja a
   sávokat: egy sorba legfeljebb három kártya fér (3 * 340px + gap), a többi
   tördelődik. A felső korlát miatt egy-két csomag sem nyúlik szét a teljes
   szélességben, a sor pedig középre igazítva marad. */
.pricing-grid {
  --pricing-card-max: 340px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), var(--pricing-card-max)));
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
  align-items: stretch;
}

/* Mobilon nincs mit egymás mellé tenni, ott a kártya töltse ki a szélességet. */
@media (max-width: 600px) {
  .pricing-grid {
    --pricing-card-max: 1fr;
  }
}

.pricing-grid--compact {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

/* A kártya kiemelő színe adminban állítható; a --card-accent változó viszi
   végig a sávra, ikonra, pipákra és a CTA gombra. */
.pricing-card {
  --card-accent: var(--pm-primary);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.8rem 1.5rem 1.6rem;
  border-top: 4px solid var(--card-accent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-shadow-lg);
}

.pricing-card--current {
  outline: 2px solid var(--card-accent);
}

/* Kiemelt (ajánlott) csomag: hangsúlyos keret és színezett ragyogás. */
.pricing-card--highlighted {
  border: 2px solid var(--card-accent);
  border-top-width: 4px;
  box-shadow: 0 10px 32px color-mix(in srgb, var(--card-accent) 28%, transparent);
}

.pricing-card--highlighted:hover {
  box-shadow: 0 16px 40px color-mix(in srgb, var(--card-accent) 36%, transparent);
}

/* Matrica: enyhén megdöntött címke a kártya sarkában. */
.pricing-card__sticker {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  max-width: 58%;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  background: var(--card-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(3deg);
  box-shadow: 0 3px 10px rgb(15 23 42 / 0.25);
}

.pricing-card__hero {
  display: flex;
  justify-content: center;
  margin: 0.2rem 0;
}

.pricing-card__image {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
  border-radius: var(--pm-radius);
}

.pricing-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-accent) 12%, #fff);
  color: var(--card-accent);
}

.pricing-card__icon svg {
  width: 32px;
  height: 32px;
}

.pricing-card__name {
  font-size: 1.15rem;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.pricing-card__price-amount {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pricing-card__price-period {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pm-text-muted);
}

.pricing-card__yearly {
  font-size: 0.85rem;
  color: var(--pm-text-muted);
}

.pricing-card__description {
  font-size: 0.9rem;
  color: var(--pm-text-muted);
}

.pricing-card__limits,
.pricing-card__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.88rem;
}

.pricing-card__limits li,
.pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.pricing-card__check {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-accent) 14%, #fff);
  color: var(--card-accent);
}

.pricing-card__check svg {
  width: 11px;
  height: 11px;
}

.pricing-card__scheduled {
  font-weight: 600;
}

.pricing-card__actions {
  margin-top: auto;
  padding-top: 0.6rem;
}

/* A CTA a kártya kiemelő színét viszi, finom színátmenettel. */
.pricing-card .pricing-card__cta {
  width: 100%;
  background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 80%, #000));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--card-accent) 30%, transparent);
}

.pricing-card .pricing-card__cta:hover:not(:disabled) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 88%, #000), color-mix(in srgb, var(--card-accent) 70%, #000));
  text-decoration: none;
}

.pricing-card__current-label {
  margin-top: auto;
  padding-top: 0.6rem;
  font-weight: 700;
  color: var(--card-accent);
}

/* ── Billing: előfizetés oldal ───────────────────────────────────────────── */

/* Segmented, tab-like top navigation between the page's three submenus. */

.subscription__nav {
  display: flex;
  gap: 0.3rem;
  width: fit-content;
  margin-bottom: 1.5rem;
  padding: 0.3rem;
  border: 1px solid var(--pm-border);
  border-radius: 999px;
  background: var(--pm-surface);
  box-shadow: var(--pm-shadow);
}

.subscription__nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--pm-text-muted);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.subscription__nav-item:hover {
  background: var(--pm-primary-bg);
  color: var(--pm-primary);
}

.subscription__nav-item--active,
.subscription__nav-item--active:hover {
  background: var(--pm-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgb(51 98 204 / 0.35);
}

.subscription__nav-icon {
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .subscription__nav {
    width: 100%;
  }

  /* A fülek felirata tördelődhet, hogy a sáv ne lógjon ki a képernyőből. */
  .subscription__nav-item {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 0.55rem 0.5rem;
    font-size: 0.82rem;
    white-space: normal;
    text-align: center;
  }

  .subscription__nav-icon {
    display: none;
  }
}

.subscription__section-title {
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
}

.subscription__current {
  margin-bottom: 1.5rem;
  padding: 1.4rem 1.6rem;
}

.subscription__package-name {
  font-size: 1.3rem;
  font-weight: 700;
}

.subscription__status {
  color: var(--pm-text-muted);
  margin: 0.25rem 0;
}

.subscription__status--pastdue {
  color: var(--pm-warning-dark);
}

.subscription__status--canceled {
  color: var(--pm-danger);
}

.subscription__current-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.subscription__profile,
.subscription__invoices {
  margin-bottom: 1.5rem;
  padding: 1.4rem 1.6rem;
}

.subscription__profile-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 0.8rem;
  max-width: 640px;
}

/* Számlázási adatok: tematikus mezőcsoportok (Cégadatok, Székhely) */

.profile-group {
  margin: 0;
  padding: 0.9rem 1.25rem 0.1rem;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  background: var(--pm-surface);
  min-width: 0;
}

.profile-group__title {
  padding: 0 0.45rem;
  font-weight: 700;
  font-size: 0.98rem;
}

.profile-group__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1rem;
  margin-top: 0.4rem;
}

.profile-group__full {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .profile-group__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.subscription__profile-actions {
  margin-top: 0.3rem;
}

.pm-field--checkbox {
  justify-content: center;
}

.pm-field--checkbox label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  cursor: pointer;
}

.pm-field--full {
  grid-column: 1 / -1;
}

/* ── Billing: csomag-felhasználási sáv a felső sávban ────────────────────── */

.usage-header {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  padding: 0 1rem;
}

/* Egyetlen összefüggő, prémium kapszula-sáv a korábbi különálló dobozok
   helyett — a csomag-chip és a metrika-blokkok egy közös felületen ülnek. */
.usage-header__items {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  min-width: 0;
  gap: 0.15rem;
  padding: 0.3rem;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 10px 28px rgb(51 98 204 / 0.08);
}

.usage-header__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.3rem 0.9rem 0.3rem 0.4rem;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.usage-header__item:hover {
  background: var(--pm-primary-bg-soft);
}

.usage-header__item:hover .usage-header__icon {
  background: var(--pm-primary-bg);
  transform: scale(1.06);
}

a.usage-header__item {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Kör alakú ikonplakett a metrika-blokk elején. */
.usage-header__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  color: var(--pm-primary);
  background: var(--pm-primary-bg-soft);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.usage-header__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.usage-header__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.12rem;
  min-width: 0;
}

/* Sötétkék gradiens csomag-chip — a sáv prémium hangsúlya. */
.usage-header__item--package {
  padding-right: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, var(--pm-navy) 0%, var(--pm-primary-dark) 65%, var(--pm-primary-soft) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 2px 8px rgb(29 42 74 / 0.28);
}

.usage-header__item--package:hover {
  background: linear-gradient(135deg, var(--pm-navy) 0%, var(--pm-primary-darker) 65%, var(--pm-primary) 100%);
}

.usage-header__item--package .usage-header__icon,
.usage-header__item--package:hover .usage-header__icon {
  color: #fde68a;
  background: rgb(255 255 255 / 0.14);
}

.usage-header__item--package .usage-header__value {
  color: #fff;
}

/* A keret közelében (warn) és betelt keretnél (full) az ikonplakett és a
   felhasznált érték is átszíneződik. */
.usage-header__item--warn .usage-header__icon,
.usage-header__item--warn:hover .usage-header__icon {
  color: var(--pm-warning);
  background: var(--pm-warning-bg);
}

.usage-header__item--warn .usage-header__value-used {
  color: var(--pm-warning);
}

.usage-header__item--full .usage-header__icon,
.usage-header__item--full:hover .usage-header__icon {
  color: var(--pm-danger);
  background: var(--pm-danger-bg);
}

.usage-header__item--full .usage-header__value-used {
  color: var(--pm-danger);
}

.usage-header__item--changed:not(.usage-header__item--package) {
  animation: usage-header-flash 1.2s ease;
}

@keyframes usage-header-flash {
  0% {
    background-color: var(--pm-primary-bg);
  }
  100% {
    background-color: transparent;
  }
}

/* Élő állapotpötty a státusz-blokkok (integráció, ütemezett AI) értéke előtt. */
.usage-header__item--status .usage-header__value::before {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--pm-text-faint);
  vertical-align: 0.05rem;
}

.usage-header__item--status-on .usage-header__value::before {
  background: var(--pm-success);
  box-shadow: 0 0 0 3px rgb(22 163 74 / 0.16);
}

.usage-header__label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pm-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}

.usage-header__value {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.usage-header__value-limit {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pm-text-faint);
}

.usage-bar--mini {
  margin-top: 0.2rem;
  height: 0.22rem;
  min-width: 3.5rem;
  background: var(--pm-surface-alt);
}

.usage-bar--mini .usage-bar__fill {
  background: linear-gradient(90deg, var(--pm-primary), var(--pm-accent-light));
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.usage-bar--mini .usage-bar__fill--warn {
  background: linear-gradient(90deg, #f59e0b, var(--pm-warning));
}

.usage-bar--mini .usage-bar__fill--full {
  background: linear-gradient(90deg, #ef4444, var(--pm-danger));
}

.usage-header__upsell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.4rem 0.35rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  background: linear-gradient(115deg, #f59e0b, #f97316 55%, #ef4444);
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  max-width: 27rem;
  overflow: hidden;
  animation: usage-upsell-glow 2.2s ease-in-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.usage-header__upsell:hover {
  text-decoration: none;
  transform: translateY(-1px) scale(1.02);
  animation-play-state: paused;
  box-shadow: 0 6px 20px rgb(249 115 22 / 0.55);
}

/* Periodikus fénycsík, ami végigsöpör a sávon, hogy magára vonja a tekintetet. */
.usage-header__upsell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.35) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: usage-upsell-shine 3s ease-in-out infinite;
  pointer-events: none;
}

.usage-header__upsell-pulse {
  position: relative;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #fff;
}

.usage-header__upsell-pulse::before {
  content: '';
  position: absolute;
  inset: -0.28rem;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.75);
  animation: usage-upsell-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.usage-header__upsell--full {
  background: linear-gradient(115deg, #ef4444, #dc2626 55%, #b91c1c);
  animation-name: usage-upsell-glow-full;
}

.usage-header__upsell--full:hover {
  box-shadow: 0 6px 20px rgb(220 38 38 / 0.55);
}

.usage-header__upsell-cta {
  position: relative;
  z-index: 1;
  flex: none;
  white-space: nowrap;
  padding: 0.32rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: #c2410c;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
  transition: transform 0.2s ease;
}

.usage-header__upsell:hover .usage-header__upsell-cta {
  transform: translateX(2px);
}

.usage-header__upsell--full .usage-header__upsell-cta {
  color: #b91c1c;
}

@keyframes usage-upsell-glow {
  0%,
  100% {
    box-shadow: 0 2px 10px rgb(249 115 22 / 0.35);
  }
  50% {
    box-shadow: 0 4px 18px rgb(249 115 22 / 0.6);
  }
}

@keyframes usage-upsell-glow-full {
  0%,
  100% {
    box-shadow: 0 2px 10px rgb(220 38 38 / 0.4);
  }
  50% {
    box-shadow: 0 4px 18px rgb(220 38 38 / 0.65);
  }
}

@keyframes usage-upsell-shine {
  0% {
    transform: translateX(-100%);
  }
  55%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes usage-upsell-ping {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }
  80%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .usage-header__upsell,
  .usage-header__upsell::after,
  .usage-header__upsell-pulse::before {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .usage-header {
    display: none;
  }
}

/* ── Billing: statisztika kártyák (admin billing áttekintő) ──────────────── */

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

.statistics__card {
  padding: 1.2rem 1.4rem;
}

.statistics__card-title {
  font-size: 0.95rem;
  color: var(--pm-text-muted);
}

.statistics__card-value {
  margin-top: 0.4rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.usage-bar {
  margin-top: 0.7rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--pm-border);
  overflow: hidden;
}

.usage-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--pm-primary);
  transition: width 0.3s ease;
}

.usage-bar__fill--warn {
  background: var(--pm-warning);
}

.usage-bar__fill--full {
  background: var(--pm-danger);
}

/* ── Billing: admin oldalak ──────────────────────────────────────────────── */

.admin-packages__form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.8rem 1.2rem;
}

.admin-packages__hint {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--pm-text-muted);
}

/* ── Csomag-megjelenés szerkesztő (kép, ikon, színek, matrica, előnézet) ── */

.pm-modal--packages {
  max-width: 1040px;
}

.admin-packages__appearance {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--pm-border);
}

.admin-packages__appearance-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.admin-packages__appearance-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pm-heading);
}

.admin-packages__appearance-hint {
  font-size: 0.85rem;
  color: var(--pm-text-muted);
}

/* Balra a vezérlők, jobbra a ragadós élő előnézet. */
.admin-packages__appearance-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  gap: 1.4rem;
  align-items: start;
}

@media (max-width: 860px) {
  .admin-packages__appearance-body {
    grid-template-columns: 1fr;
  }
}

.admin-packages__appearance-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem 1.2rem;
}

.admin-packages__badge-langs {
  display: contents;
}

.admin-packages__image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-packages__control-hint {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--pm-text-faint);
}

.admin-packages__image-error {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--pm-danger);
}

.admin-packages__icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-packages__icon-option {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  background: var(--pm-surface);
  color: var(--pm-text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.admin-packages__icon-option svg {
  width: 22px;
  height: 22px;
}

.admin-packages__icon-option:hover {
  border-color: var(--pm-primary);
  color: var(--pm-primary);
}

.admin-packages__icon-option.is-selected {
  border-color: var(--pm-primary);
  background: var(--pm-primary-bg);
  color: var(--pm-primary);
  box-shadow: 0 0 0 2px rgb(51 98 204 / 0.18);
}

.admin-packages__color-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.admin-packages__color-swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.admin-packages__color-swatch:hover {
  transform: scale(1.12);
}

.admin-packages__color-swatch.is-selected {
  border-color: var(--pm-navy);
  box-shadow: inset 0 0 0 2px #fff;
}

.admin-packages__color-custom {
  width: 36px;
  height: 30px;
  padding: 0 2px;
  border: 1px solid var(--pm-border);
  border-radius: 8px;
  background: var(--pm-surface);
  cursor: pointer;
}

.admin-packages__preview {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-packages__preview-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pm-heading);
}

/* Az előnézeti rácsban egyetlen kártya van, a modálon belül. */
.pricing-grid--preview {
  grid-template-columns: 1fr;
  margin-top: 0;
}

.pricing-grid--preview .pricing-card:hover {
  transform: none;
}

.admin-subscriptions__assign {
  margin-bottom: 1.5rem;
  padding: 1.4rem 1.6rem;
}

/* The invoice card gets the same inner padding as the owner-side invoice list,
   so the table's header band stays inside the card's rounded corners. */
.admin-billing__invoices {
  margin-top: 1.5rem;
  padding: 1.4rem 1.6rem;
}

.admin-subscriptions__assign-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem 1.2rem;
  align-items: end;
  margin-top: 0.8rem;
}

/* The grid aligns items to the bottom edge, so the fields' global
   bottom margin would push the inputs above the submit button. */
.admin-subscriptions__assign-form .pm-field {
  margin-bottom: 0;
}

/* Match the inputs' box height (0.75rem padding + 1px border) so the
   button sits on the same line as the fields next to it. */
.admin-subscriptions__assign-form .pm-btn {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border: 1px solid transparent;
}

.admin-subscriptions__tenant {
  font-family: monospace;
  font-size: 0.8rem;
}

.admin-billing__overview {
  margin-bottom: 1.5rem;
}

/* Integrations page: the stacked cards (platform picker, connection form,
   sync settings) get a visible gap so the blocks don't run together. */
[data-role="integration-content"] {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Platform picker on the Integrations page: side-by-side logo cards acting
   as radio buttons — clicking anywhere on the card (the logo included)
   selects the platform, nothing navigates away from the app. */
.platform-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.platform-picker__option {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  background: var(--pm-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.platform-picker__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.platform-picker__option:hover {
  border-color: var(--pm-primary-light);
  box-shadow: var(--pm-shadow);
  transform: translateY(-2px);
}

.platform-picker__option:has(input:checked) {
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px rgb(51 98 204 / 0.14), var(--pm-shadow);
}

.platform-picker__option:has(input:focus-visible) {
  outline: 2px solid var(--pm-primary);
  outline-offset: 2px;
}

.platform-picker__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 1.2rem;
  background: var(--pm-primary-bg);
}

.platform-picker__logo img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  max-height: 90px;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.platform-picker__logo:hover img {
  transform: scale(1.05);
}

.platform-picker__check {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--pm-primary);
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.platform-picker__check svg {
  width: 0.95rem;
  height: 0.95rem;
}

.platform-picker__option:has(input:checked) .platform-picker__check {
  opacity: 1;
  transform: scale(1);
}

.platform-picker__label {
  padding: 0.75rem 0.9rem 0.85rem;
  font-weight: 600;
  text-align: center;
}

.platform-picker__option:has(input:checked) .platform-picker__label {
  color: var(--pm-primary-darker);
}

/* Connected marker next to the platform name inside the picker. */
.platform-picker__status {
  margin-left: 0.45rem;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobil nézet (iPhone 13 mini és hasonló, ~375 px széles készülékek)
   ══════════════════════════════════════════════════════════════════════════ */

/* Fekvő tájolásban az iOS ne nagyítsa fel magától a szövegeket. */
html {
  -webkit-text-size-adjust: 100%;
}

/* Az oldal soha ne legyen szélesebb a képernyőnél: a kép- és médiaelemek
   beleférnek a szülőjükbe. */
img,
svg,
video,
canvas {
  max-width: 100%;
}

/* ── Vezérlőpult: az oldalsávból felül ragadó fejléc + lenyíló menü lesz ──── */

@media (max-width: 900px) {
  /* Rács helyett blokk, hogy az oldalsáv ragadós tudjon maradni görgetés
     közben is (a rácscellában nem lenne hova elmozdulnia). */
  .dashboard {
    display: block;
  }

  .dashboard__sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    gap: 0;
    padding: 0.55rem 0.9rem;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .dashboard__sidebar .brand-logo {
    font-size: 1.1rem;
  }

  .dashboard__menu-toggle {
    display: inline-flex;
  }

  /* A menütörzs alapból csukva; a hamburger gomb nyitja ki. */
  .dashboard__sidebar-body {
    display: none;
    gap: 1rem;
    padding: 0.85rem 0 0.3rem;
  }

  .dashboard__sidebar--open .dashboard__sidebar-body {
    display: flex;
  }

  /* Ujjal is kényelmesen eltalálható menüpontok. */
  .dashboard__nav-item,
  .dashboard__logout {
    padding: 0.75rem 0.9rem;
  }

  .dashboard__nav-subitem {
    margin-left: 0.9rem;
  }

  .dashboard__topbar {
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    padding: 1rem 1rem;
  }

  .dashboard__title {
    font-size: 1.25rem;
  }

  .dashboard__topbar-side {
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-left: auto;
  }

  .dashboard__main {
    padding: 1.2rem 1rem;
    gap: 1.2rem;
  }
}

/* ── Nyilvános fejléc: hamburger mögé csukott menü ────────────────────────── */

@media (max-width: 700px) {
  .site-header__inner {
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  .site-header .brand-logo {
    font-size: 1.15rem;
  }

  .site-header__toggle {
    display: inline-flex;
  }

  .site-header__menu {
    display: none;
    flex: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .site-header--open .site-header__menu {
    display: flex;
  }

  .site-header__nav {
    order: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
  }

  .site-header__link {
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--pm-border);
  }

  .site-header__actions {
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.7rem;
  }

  .site-header__auth {
    flex: 1 1 8rem;
    padding: 0.7rem 1rem;
  }

  .lang-switcher {
    width: 100%;
    justify-content: center;
    padding-left: 0;
    padding-top: 0.3rem;
    border-left: none;
  }
}

/* ── Tartalom: sűrűbb tördelés és nagyobb érintőfelületek ─────────────────── */

@media (max-width: 640px) {
  /* Az iOS ráközelít a fókuszált mezőre, ha a betűméret 16 px alatt van,
     ezért mobilon minden űrlapelem legalább ekkora. */
  .dashboard input,
  .dashboard select,
  .dashboard textarea,
  .pm-modal-backdrop input,
  .pm-modal-backdrop select,
  .pm-modal-backdrop textarea,
  main input,
  main select,
  main textarea,
  .users__package-filter,
  .ai-pricing-toolbar__search,
  .audit-log__filter .pm-input,
  .competitors-inline-form input[type='text'],
  .competitors-inline-form input[type='url'],
  .category-tree__editor input[type='text'] {
    font-size: 16px;
  }

  /* --- Nyitóoldal --- */
  .section {
    padding: 1.75rem 1rem;
  }

  .section__title {
    font-size: 1.5rem;
  }

  .hero {
    padding: 2rem 1rem 1.5rem;
    gap: 1.6rem;
  }

  .hero__title {
    font-size: 1.95rem;
  }

  .hero__lead {
    font-size: 1rem;
  }

  .hero__actions {
    width: 100%;
  }

  .hero__actions .pm-btn,
  .cta-box__actions .pm-btn {
    flex: 1 1 12rem;
  }

  .how {
    gap: 0.9rem;
  }

  .how__card {
    padding: 1.35rem;
  }

  .how__note {
    padding: 1rem 1.1rem;
  }

  .feature {
    padding: 1.5rem 1.25rem;
  }

  .cta-box {
    padding: 2rem 1.25rem;
  }

  .cta-box__title {
    font-size: 1.5rem;
  }

  .faq__item {
    padding: 0 1.1rem;
  }

  .pricing-section {
    padding: 1.75rem 1rem 2.5rem;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.2rem 1rem;
  }

  .site-footer__links {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* --- Belépés / regisztráció / jelszó --- */
  .auth-page__main {
    padding: 1.5rem 1rem;
  }

  .auth-split__form {
    padding: 1.75rem 1.25rem;
  }

  .auth-split__title {
    font-size: 1.6rem;
  }

  .forgot-page__main {
    padding: 2.5rem 1rem 2rem;
  }

  .forgot-card {
    padding: 2rem 1.25rem;
  }

  /* --- Vezérlőpult tartalom --- */
  .dashboard__topbar {
    padding: 0.9rem 0.85rem;
  }

  .dashboard__main {
    padding: 1rem 0.85rem;
  }

  .dashboard__stats,
  .dashboard__stats--three {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .dashboard__grid,
  .admin-overview__charts {
    gap: 1rem;
  }

  .stat-card {
    padding: 1.1rem 1.15rem;
  }

  .stat-card__value {
    font-size: 1.7rem;
  }

  .dashboard__table-card,
  .dashboard__activity-card,
  .admin-overview__chart-card,
  .profile__card,
  .ai-pricing__card,
  .settings-card,
  .settings-tile,
  .import-wizard__step,
  .subscription__current,
  .subscription__profile,
  .subscription__invoices,
  .admin-subscriptions__assign,
  .admin-billing__invoices {
    padding: 1.1rem;
  }

  .profile__summary {
    padding: 1.2rem;
  }

  .competitors-card > .dashboard__card-title,
  .competitors-card > .pm-modal__hint,
  .competitors-card > .competitors-inline-form {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  /* Táblázatok: a kártyán belül vízszintesen görgethetők, kisebb cellákkal. */
  .dashboard__table-wrap,
  .ai-pricing-table__scroll {
    -webkit-overflow-scrolling: touch;
  }

  .user-table th {
    padding: 0.7rem 0.75rem;
  }

  .user-table td {
    padding: 0.75rem;
  }

  .price-table th,
  .price-table td {
    padding: 0.55rem 0.5rem;
  }

  .user-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .user-cell {
    gap: 0.6rem;
  }

  /* Nagyobb érintőfelület a sorokban lévő gomboknál. */
  .user-btn {
    padding: 0.6rem 1rem;
  }

  .chart-icon-btn,
  .ai-pricing-decide {
    width: 2.4rem;
    height: 2.4rem;
  }

  /* Eszköztárak: a kereső teljes szélességű, a gombok egyenlően osztoznak. */
  .products__search,
  .users__search,
  .ai-pricing-toolbar__search {
    flex: 1 1 100%;
    max-width: none;
  }

  .products__toolbar > .pm-btn,
  .products__toolbar > .pm-btn-secondary,
  .users__toolbar > .pm-btn {
    flex: 1 1 10rem;
  }

  .products__import-btn {
    margin-left: 0;
  }

  .users__package-filter {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .products-pager,
  .audit-log__toolbar,
  .ai-costs__filters {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .products-pager__controls,
  .products-pager__nav {
    width: 100%;
    justify-content: space-between;
  }

  .ai-costs__filter,
  .audit-log__filter {
    flex: 1 1 100%;
    min-width: 0;
  }

  .ai-costs__actions .pm-btn,
  .audit-log__actions .pm-btn {
    flex: 1 1 auto;
  }

  /* --- Modálisok: majdnem teljes képernyő, egymás alatti gombokkal --- */
  .pm-modal-backdrop {
    padding: 0.75rem;
  }

  .pm-modal {
    padding: 1.25rem 1.1rem;
    max-height: 92vh;
    max-height: 92dvh;
  }

  .pm-modal__title {
    font-size: 1.15rem;
  }

  .pm-modal__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .pm-modal__actions .pm-btn {
    width: 100%;
  }

  /* A tömeges AI árazás munkalapja mobilon a képernyő nagy részét kitölti;
     a táblázat vízszintesen görgethető marad. */
  .pm-modal--full {
    max-width: 100%;
    height: 92vh;
    height: 92dvh;
  }

  .ai-pricing-run__header,
  .ai-pricing-summary,
  .ai-pricing-toolbar,
  .ai-pricing-run__actions {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .ai-pricing-run > .pm-alert {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .ai-pricing-run .ai-pricing-table th:first-child,
  .ai-pricing-run .ai-pricing-table td:first-child {
    padding-left: 1rem;
  }

  .ai-pricing-run .ai-pricing-table th:last-child,
  .ai-pricing-run .ai-pricing-table td:last-child {
    padding-right: 1rem;
  }

  .ai-pricing-toolbar__bulk,
  .ai-pricing-run__buttons {
    width: 100%;
    margin-left: 0;
  }

  .ai-pricing-toolbar__bulk .ai-pricing-bulk-btn,
  .ai-pricing-run__buttons .pm-btn {
    flex: 1 1 auto;
  }

  .ai-pricing-filter {
    width: 100%;
    justify-content: space-between;
  }

  .ai-pricing__scopes {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .bulk-discover__pager,
  .bulk-discover__buttons {
    width: 100%;
    justify-content: space-between;
  }

  /* --- Egyéb kártyás nézetek --- */
  .profile__backup-list {
    grid-template-columns: 1fr;
  }

  .chart-modal__header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .chart-tabs__tab {
    padding: 0.45rem 0.7rem;
  }
}

/* ── Nagyon keskeny készülékek (~360 px alatt) ────────────────────────────── */

@media (max-width: 400px) {
  .dashboard__main {
    padding: 0.9rem 0.7rem;
  }

  .hero__title {
    font-size: 1.75rem;
  }

  .section__title {
    font-size: 1.35rem;
  }

  .dashboard__title {
    font-size: 1.15rem;
  }

  .chart-tabs__tab {
    padding: 0.45rem 0.55rem;
    font-size: 0.8rem;
  }
}

/* ── Feltöltőkártyás csomagok ──────────────────────────────────────────────── */

/* A felső sávban a limit mögött megjelenő feltöltött ("+N") egyenleg-jelzés. */
.usage-header__value-topup {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pm-success);
}

/* A feltöltő csomagok szekciócíme a publikus árlistán. */
.pricing-topup__title {
  margin-top: 3rem;
}

/* Egyedi árajánlat-kérő sor az árlisták alján. */
.pricing-quote {
  margin-top: 2.5rem;
  text-align: center;
  color: var(--pm-text-muted);
}

.pricing-quote a {
  margin-left: 0.35rem;
  font-weight: 600;
  color: var(--pm-primary);
  text-decoration: none;
}

.pricing-quote a:hover {
  text-decoration: underline;
}

/* A feltöltött egyenleg kijelzése az önkiszolgáló feltöltő szekcióban. */
.subscription__topup-balance {
  margin: 0.25rem 0 1rem;
  font-weight: 600;
  color: var(--pm-success);
}