/**
 * Dedikált mobil / keskeny nézet réteg — kérdőív kitöltő (fill).
 * A :root --fill-* változók a fill_survey Jinja template-ben definiáltak (márka: színek, háttér, font családok).
 * Tipográfia és sűrűség fix tokenek; nem a szerkesztői fontSize / elementScale értékek.
 * Breakpoint: 1024px — telefon + tablet (iPad); egyezik a SurveyJS isMobile szinkronnal (scripts).
 */

@media (max-width: 1024px) {
  /* ── Konténer / kártya ── */
  #fillApp.fill-container {
    max-width: 100% !important;
    padding-left: max(0.35rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.35rem, env(safe-area-inset-right, 0px));
    padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
    padding-bottom: 0.5rem;
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }

  #fillApp .fill-card-inner {
    padding: 0.65rem 0.5rem !important;
  }

  #fillApp .fill-card {
    --sjs-base-unit: 6px !important;
    /* SurveyJS theme: kisebb függőleges ritmus mobilon */
    --sd-base-vertical-padding: 8px !important;
    /* Aktív / elsődleges szín: kék (SurveyJS alap #19b394) */
    --sjs-primary-backcolor: #2563eb !important;
    --sjs-primary-forecolor: #ffffff !important;
    border-radius: 0.5rem !important;
  }

  #fillApp .fill-card .sd-title.sd-container-modern__title {
    box-shadow: 0 2px 0 #2563eb !important;
  }

  #fillApp .fill-header {
    margin-bottom: 1rem;
  }
  #fillApp .fill-header h1 {
    font-size: 1.3em;
  }
  #fillApp .fill-footer {
    margin-top: 1rem;
  }
  #fillApp .fill-success {
    padding: 2rem 0.75rem;
  }

  /* ── Landing overlay ── */
  .landing-overlay .landing-bg {
    justify-content: center;
    padding: 1rem;
    margin: 0.5rem;
  }
  .landing-overlay .landing-card {
    width: 95%;
    min-width: 0;
    margin-right: 0;
    padding: 2rem 1.5rem;
    font-family: var(--fill-font-family, system-ui, sans-serif);
  }
  .landing-overlay .landing-card h1 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--fill-text, #1f2937);
  }
  .landing-overlay .landing-card .landing-date {
    color: var(--fill-text, #1f2937);
  }
  .landing-overlay .landing-card .landing-desc {
    margin-bottom: 1.25rem;
  }
  .landing-overlay .landing-card .landing-btn {
    padding: 0.55rem 1.25rem;
    width: 100%;
    text-align: center;
    font-family: var(--fill-font-family, system-ui, sans-serif);
    background: #2563eb !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
  }

  /* ── SurveyJS: általános szöveg (márka szín, fix méret) ── */
  #fillApp .fill-card .sd-root-modern,
  #fillApp .fill-card .sv-root-modern,
  #fillApp .fill-card .sd-body,
  #fillApp .fill-card .sv-body,
  #fillApp .fill-card .sd-page,
  #fillApp .fill-card .sd-question,
  #fillApp .fill-card .sd-question__description,
  #fillApp .fill-card .sd-item,
  #fillApp .fill-card .sd-item__control-label,
  #fillApp .fill-card .sd-selectbase__label,
  #fillApp .fill-card .sd-input,
  #fillApp .fill-card .sd-text,
  #fillApp .fill-card .sd-comment,
  #fillApp .fill-card .sd-checkbox__label,
  #fillApp .fill-card .sd-radio__label,
  #fillApp .fill-card .sd-rating,
  #fillApp .fill-card .sd-rating__item-text,
  #fillApp .fill-card .sd-boolean__label,
  #fillApp .fill-card .sd-matrix__label,
  #fillApp .fill-card .sv-root-modern .sv-body,
  #fillApp .fill-card .sv-root-modern .sv-page,
  #fillApp .fill-card .sv-root-modern .sv-question,
  #fillApp .fill-card .sv-item__control-label,
  #fillApp .fill-card .sv-selectbase__label,
  #fillApp .fill-card .sv-text input,
  #fillApp .fill-card .sv-comment,
  #fillApp .fill-card .sv-dropdown select {
    font-family: var(--fill-font-family, system-ui, sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: var(--fill-text, #1f2937) !important;
    line-height: 1.45 !important;
  }

  #fillApp .fill-card .sd-title,
  #fillApp .fill-card .sd-description,
  #fillApp .fill-card .sd-header__text h3,
  #fillApp .fill-card .sd-header__text h5,
  #fillApp .fill-card .sd-title.sd-container-modern__title {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    color: var(--fill-text, #1f2937) !important;
  }

  #fillApp .fill-card .sd-description {
    font-size: 0.875rem !important;
  }

  #fillApp .fill-card .sd-question__title,
  #fillApp .fill-card .sd-element__title,
  #fillApp .fill-card .sv-question__title {
    font-family: var(--fill-title-font-family, system-ui, sans-serif) !important;
  }

  #fillApp .fill-card .sd-panel__title,
  #fillApp .fill-card .sd-panel__title h3,
  #fillApp .fill-card .sd-panel__title span,
  #fillApp .fill-card h3.sd-panel__title {
    font-family: var(--fill-title-font-family, system-ui, sans-serif) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--fill-title, #111827) !important;
    margin: 0 !important;
  }

  /* Panel / szekció — SurveyJS nagy függőleges paddingek és címek kompakt mobilra */
  #fillApp .fill-card .sd-panel {
    margin-top: 0.35rem !important;
    margin-bottom: 0.35rem !important;
  }
  #fillApp .fill-card .sd-panel__header {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    margin: 0 !important;
  }
  #fillApp .fill-card .sd-panel--as-page > .sd-panel__header.sd-panel__header {
    padding-top: 0.5rem !important;
    padding-bottom: 0.35rem !important;
  }
  #fillApp .fill-card .sd-panel__content {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  #fillApp .fill-card .sd-panel__footer {
    padding-top: 0.35rem !important;
  }

  #fillApp .fill-card .sd-element__num,
  #fillApp .fill-card .sd-question__num,
  #fillApp .fill-card .sv-question__num {
    font-family: var(--fill-q-num-font-family, system-ui, sans-serif) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--fill-q-num, #111827) !important;
  }

  #fillApp .fill-card .sd-element__title span:not(.sd-element__num):not(.sd-question__num):not(.sd-question__required-text),
  #fillApp .fill-card .sd-question__title span:not(.sd-element__num):not(.sd-question__num):not(.sd-question__required-text),
  #fillApp .fill-card .sv-question__title span:not(.sv-question__num):not(.sd-question__required-text) {
    font-family: var(--fill-title-font-family, system-ui, sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--fill-title, #111827) !important;
  }

  #fillApp .fill-card .sd-table__cell--header,
  #fillApp .fill-card .sd-table__cell--header span,
  #fillApp .fill-card .sd-table__cell--row-text,
  #fillApp .fill-card .sd-table__cell--row-text span,
  #fillApp .fill-card .sd-table__responsive-title,
  #fillApp .fill-card .sd-matrix__responsive-title,
  #fillApp .fill-card th.sd-table__cell,
  #fillApp .fill-card th.sd-table__cell span,
  #fillApp .fill-card .sd-matrix__cell,
  #fillApp .fill-card .sd-matrix__cell span,
  #fillApp .fill-card .sd-matrix__text,
  #fillApp .fill-card .sd-matrix table thead th,
  #fillApp .fill-card .sd-matrix table thead th span,
  #fillApp .fill-card .sd-matrixdropdown thead th,
  #fillApp .fill-card .sd-matrixdynamic thead th,
  #fillApp .fill-card .sd-table thead th,
  #fillApp .fill-card .sd-table thead th span {
    font-family: var(--fill-th-font-family, system-ui, sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--fill-th, #374151) !important;
  }

  #fillApp .fill-card .sd-input,
  #fillApp .fill-card .sd-input input,
  #fillApp .fill-card .sd-input textarea,
  #fillApp .fill-card .sd-input select,
  #fillApp .fill-card .sd-text input,
  #fillApp .fill-card .sd-comment textarea,
  #fillApp .fill-card .sd-table__question-wrapper input,
  #fillApp .fill-card .sd-table__question-wrapper textarea,
  #fillApp .fill-card .sd-table__question-wrapper select {
    font-family: var(--fill-input-font-family, system-ui, sans-serif) !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    min-height: 2.35rem !important;
    padding: 0.35rem 0.5rem !important;
    box-sizing: border-box !important;
    color: var(--fill-input, #1f2937) !important;
  }

  /*
   * Dropdown: placeholder/input — szimmetrikus függőleges padding + line-height
   * (nem minimális padding-block, nem flex a gyerek szövegen).
   */
  #fillApp .fill-card .sd-dropdown {
    --sjs-internal-font-editorfont-size: 14px !important;
    font-family: var(--fill-input-font-family, system-ui, sans-serif) !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    min-height: 2.5rem !important;
    max-height: none !important;
    height: auto !important;
    padding: 0.4rem 1.5rem 0.4rem 0.5rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    color: var(--fill-input, #1f2937) !important;
    overflow: visible !important;
  }

  #fillApp .fill-card .sd-tagbox {
    font-family: var(--fill-input-font-family, system-ui, sans-serif) !important;
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    min-height: 2rem !important;
    padding: 0.2rem 0.4rem !important;
    box-sizing: border-box !important;
    color: var(--fill-input, #1f2937) !important;
  }

  #fillApp .fill-card .sd-dropdown__value,
  #fillApp .fill-card .sd-table__question-wrapper .sd-dropdown__value {
    font-family: var(--fill-input-font-family, system-ui, sans-serif) !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    padding: 0 0.2rem 0 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
    min-width: 0 !important;
    min-height: auto !important;
    overflow: visible !important;
    gap: 0.25rem !important;
  }

  #fillApp .fill-card .sd-dropdown__value span,
  #fillApp .fill-card .sd-table__question-wrapper .sd-dropdown__value span {
    line-height: 1.45 !important;
  }

  /* „Select…” / placeholder — kevesebb függőleges padding, ne lógjon ki a doboz alján (WebKit) */
  #fillApp .fill-card .sd-dropdown__filter-string-input,
  #fillApp .fill-card .sd-dropdown__value input,
  #fillApp .fill-card .sd-dropdown__value textarea {
    line-height: 1.25 !important;
    padding: 0.1rem 0.15rem !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    align-self: center !important;
  }

  #fillApp .fill-card .sd-dropdown__input-field-component {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    min-height: auto !important;
    width: 100% !important;
  }

  #fillApp .fill-card .sd-dropdown select,
  #fillApp .fill-card .sd-table__question-wrapper .sd-dropdown select {
    font-family: var(--fill-input-font-family, system-ui, sans-serif) !important;
    font-size: 0.9rem !important;
    line-height: normal !important;
    padding: 0.45rem 0.45rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    align-self: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 2.1rem !important;
  }

  #fillApp .fill-card .sd-table__question-wrapper .sd-dropdown {
    min-height: 2.5rem !important;
    max-height: none !important;
    padding: 0.4rem 1.4rem 0.4rem 0.45rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  /* SurveyJS .sd-dropdown--empty>* min-height — felülírás; érték flex marad */
  #fillApp .fill-card .sd-dropdown.sd-dropdown--empty > *,
  #fillApp .fill-card .sd-dropdown--empty > .sd-dropdown__value {
    min-height: auto !important;
    line-height: 1.25 !important;
    align-items: center !important;
  }
  #fillApp .fill-card .sd-dropdown.sd-dropdown--empty .sd-dropdown__value span {
    line-height: 1.25 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  #fillApp .fill-card .sd-tagbox__item {
    font-size: 0.85rem !important;
    padding: 0.15rem 0.35rem !important;
    min-height: 0 !important;
  }

  #fillApp .fill-card .sd-dropdown .sd-clean-button,
  #fillApp .fill-card .sd-dropdown .sd-dropdown__clean-button,
  #fillApp .fill-card .sd-dropdown .sd-selectbase__clean-button,
  #fillApp .fill-card .sd-dropdown .sv-clean-button {
    width: 1.2rem !important;
    height: 1.2rem !important;
    min-height: 1.2rem !important;
    min-width: 1.2rem !important;
    padding: 0.1rem !important;
    align-self: center !important;
    flex-shrink: 0 !important;
  }

  #fillApp .fill-card .sd-question[data-name="consent_text"] .sd-html,
  #fillApp .fill-card .sd-question[data-name="consent_text"] .sd-html *,
  #fillApp .fill-card .sd-panel[data-name="consent_block"] .sd-html,
  #fillApp .fill-card .sd-panel[data-name="consent_block"] .sd-html * {
    font-family: var(--fill-consent-font-family, system-ui, sans-serif) !important;
    font-size: 0.95rem !important;
    color: var(--fill-consent, #374151) !important;
  }

  /* Ne vágjuk le a mátrix/táblázat vízszintes görgetését — a .sd-table-wrapper kapja az overflow-t */
  #fillApp .fill-card .sd-root-modern,
  #fillApp .fill-card .sv-root-modern,
  #fillApp .fill-card .sd-container-modern {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: visible !important;
  }
  #fillApp .fill-card .sd-body,
  #fillApp .fill-card .sd-body__page,
  #fillApp .fill-card .sd-page,
  #fillApp .fill-card .sd-row {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  #fillApp .fill-card .sd-element--with-frame {
    padding: 0.5rem 0.65rem !important;
    margin-bottom: 0.35rem !important;
  }
  #fillApp .fill-card .sd-element--with-frame > .sd-element__header,
  #fillApp .fill-card .sd-question__header {
    padding-bottom: 0.15rem !important;
    margin-bottom: 0.15rem !important;
  }
  #fillApp .fill-card .sd-body__page,
  #fillApp .fill-card .sd-page {
    gap: 0.2rem !important;
  }
  #fillApp .fill-card .sd-row {
    margin-top: 0.15rem !important;
  }
  /* overflow-x: auto itt függőlegesen is levághat (böngésző: y → auto); dropdown szöveg ne legyen csonka */
  #fillApp .fill-card .sd-question__content {
    padding-top: 0.05rem !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }
  #fillApp .fill-card .sd-question__content .sd-table-wrapper {
    overflow-x: auto !important;
  }
  #fillApp .fill-card .sd-question__content > .sd-input,
  #fillApp .fill-card .sd-question__content .sd-input {
    overflow: visible !important;
  }
  /* Matrix / matrixdynamic: kevesebb üres hely a cím és a táblázat között */
  #fillApp .fill-card .sd-matrixdynamic,
  #fillApp .fill-card .sd-matrixdropdown {
    margin-top: 0.15rem !important;
  }
  #fillApp .fill-card .sd-matrixdynamic .sd-table td,
  #fillApp .fill-card .sd-matrixdynamic .sd-table__cell {
    padding: 0.2rem 0.3rem !important;
    vertical-align: middle !important;
  }
  #fillApp .fill-card .sd-matrixdynamic .sd-input {
    min-height: 2.1rem !important;
    padding: 0.25rem 0.4rem !important;
  }
  #fillApp .fill-card .sd-matrixdynamic .sd-dropdown {
    --sjs-internal-font-editorfont-size: 14px !important;
    min-height: 2.5rem !important;
    max-height: none !important;
    line-height: 1.45 !important;
    padding: 0.4rem 1.4rem 0.4rem 0.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }
  /*
   * Matrixdynamic mobil: Remove a sor akciós cellájában — Survey negatív margin (-3×base) a .sd-action-bar-on
   * + vízszintes flex + nowrap cella → „Eltávolítás” sortörésnél kilóg balra.
   * Oszlopos flex: a törlés eleve külön sorban (a részletek / mezők alatt), margin nullázva.
   */
  #fillApp .fill-card .sd-question--mobile .sd-matrixdynamic .sd-table__cell.sd-table__cell--actions {
    white-space: normal !important;
  }
  #fillApp .fill-card .sd-question--mobile .sd-matrixdynamic .sd-table__cell.sd-table__cell--actions .sd-action-bar,
  #fillApp .fill-card .sd-question--mobile .sd-matrixdynamic .sd-table__cell.sd-table__cell--actions .sv-action-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
  }
  #fillApp .fill-card .sd-question--mobile .sd-matrixdynamic .sd-table__cell.sd-table__cell--actions #show-detail-mobile {
    flex-grow: 0 !important;
    align-self: stretch !important;
  }
  #fillApp .fill-card .sd-question--mobile .sd-matrixdynamic .sd-table__cell.sd-table__cell--actions .sd-action.sd-matrixdynamic__remove-btn {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    max-width: 100% !important;
  }
  /* Matrixdynamic törlés oszlop — csak ha NEM Survey mobil nézet (mobilon a szöveges Eltávolítás középre: lentebb) */
  #fillApp .fill-card .sd-question:not(.sd-question--mobile) .sd-matrixdynamic tbody td:last-child {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    overflow: visible !important;
    text-align: left !important;
  }
  #fillApp .fill-card .sd-question:not(.sd-question--mobile) .sd-matrixdynamic tbody .sd-action:not(.sd-matrixdynamic__btn),
  #fillApp .fill-card .sd-question:not(.sd-question--mobile) .sd-matrixdynamic tbody td:last-child .sd-action {
    margin-left: 0 !important;
  }
  #fillApp .fill-card .sd-matrixdynamic__footer {
    padding-left: 0.35rem !important;
    overflow: visible !important;
  }

  /*
   * Matrixdynamic mobil: „Eltávolítás” + „Add project” — ugyanaz a bal padding mint a kártyának (.fill-card-inner),
   * balra igazítva (nem középre), hogy a Remove ne lógjon ki, és egy vonalban legyen az Add gombbal.
   */
  #fillApp .fill-card .sd-question--mobile .sd-matrixdynamic__footer::before {
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #fillApp .fill-card .sd-question--mobile .sd-matrixdynamic__footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    overflow: visible !important;
    text-align: start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #fillApp .fill-card .sd-question--mobile .sd-matrixdynamic .sd-table__cell--footer {
    text-align: start !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    overflow: visible !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #fillApp .fill-card .sd-question--mobile .sd-matrixdynamic__footer .sd-action.sd-matrixdynamic__remove-btn,
  #fillApp .fill-card .sd-question--mobile .sd-matrixdynamic .sd-table__cell--footer .sd-action.sd-matrixdynamic__remove-btn {
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    text-align: start !important;
  }
  #fillApp .fill-card .sd-question--mobile .sd-matrixdynamic__footer .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
    margin-left: 0 !important;
    align-self: flex-start !important;
  }

  /*
   * Paneldynamic (ismételhető szekció, pl. „Add project”): nem táblázatos matrixdynamic.
   * SurveyJS: .sd-paneldynamic__panels-container { overflow:hidden } + .sd-element__header { margin-inline-start: -sd-base-padding }
   * + .sd-action-bar { margin-left: -3×base } → a „Remove” bal széle a vágókereten kívülre kerül („emove”).
   */
  #fillApp .fill-card .sd-paneldynamic__panels-container {
    overflow: visible !important;
  }
  #fillApp .fill-card .sd-paneldynamic .sd-element__header {
    margin-inline-start: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #fillApp .fill-card .sd-paneldynamic .sd-action-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #fillApp .fill-card .sd-paneldynamic__panel-footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: static !important;
    top: auto !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    box-sizing: border-box !important;
  }
  #fillApp .fill-card .sd-paneldynamic__panel-footer .sv-action-bar {
    overflow: visible !important;
    margin-left: 0 !important;
    white-space: normal !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #fillApp .fill-card .sd-paneldynamic__footer,
  #fillApp .fill-card .sd-paneldynamic__buttons-container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  #fillApp .fill-card .sd-paneldynamic__footer .sd-paneldynamic__add-btn {
    margin-left: 0 !important;
    align-self: flex-start !important;
  }
  #fillApp .fill-card .sd-paneldynamic .sd-action.sd-paneldynamic__remove-btn,
  #fillApp .fill-card .sd-paneldynamic .sd-action.sd-action--negative {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  #fillApp .fill-card .sd-question[data-type="boolean"] .sd-question__content {
    padding: 0.5rem 0.5rem 0.75rem 0.5rem !important;
  }

  /* Fájl feltöltés */
  #fillApp .fill-card .sd-file,
  #fillApp .fill-card .sd-file__choose-btn,
  #fillApp .fill-card .sd-file__choose-btn * {
    font-size: 0.9rem !important;
    min-height: 2.35rem !important;
  }

  /* Navigáció */
  #fillApp .fill-card .sd-action-bar {
    padding: 0.5rem 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.4rem !important;
  }
  #fillApp .fill-card .sd-btn,
  #fillApp .fill-card .sd-navigation__complete-btn,
  #fillApp .fill-card .sd-navigation__next-btn,
  #fillApp .fill-card .sd-navigation__prev-btn {
    font-family: var(--fill-font-family, system-ui, sans-serif) !important;
    padding: 0.45rem 0.85rem !important;
    font-size: 0.9rem !important;
    min-height: 2.5rem !important;
  }

  /* Mátrix */
  #fillApp .fill-card .sd-table-wrapper {
    -webkit-overflow-scrolling: touch;
  }
  #fillApp .fill-card .sd-table td,
  #fillApp .fill-card .sd-table__cell,
  #fillApp .fill-card .sd-matrix__cell,
  #fillApp .fill-card .sd-matrix__table td {
    padding: 0.25rem 0.35rem !important;
    font-size: 0.8rem !important;
  }
  #fillApp .fill-card .sd-table th,
  #fillApp .fill-card .sd-table__cell--header {
    padding: 0.35rem 0.35rem !important;
    font-size: 0.75rem !important;
  }

  /* Rating */
  #fillApp .fill-card .sd-rating {
    flex-wrap: wrap !important;
    gap: 0.2rem !important;
  }
  #fillApp .fill-card .sd-rating__item {
    padding: 0.3rem 0.3rem !important;
    min-height: 2.35rem !important;
    min-width: 2rem;
  }
  #fillApp .fill-card .sd-rating__min-text,
  #fillApp .fill-card .sd-rating__max-text {
    font-size: 0.8rem !important;
    color: var(--fill-text, #1f2937) !important;
  }

  /* Radiogroup / checkbox — lista; rádió kör + szöveg középre igazítva (Survey: vertical-align:top + flex stretch) */
  #fillApp .fill-card .sd-selectbase__list,
  #fillApp .fill-card .sd-selectbase__column {
    padding-left: 0 !important;
    margin-left: 0 !important;
    gap: 0.2rem !important;
  }
  #fillApp .fill-card .sd-item,
  #fillApp .fill-card .sd-selectbase__item {
    padding-left: 0 !important;
    padding-inline-start: 0.25rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  #fillApp .fill-card .sd-item {
    align-items: center !important;
  }
  #fillApp .fill-card .sd-selectbase__label {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
  }
  #fillApp .fill-card .sd-item__control-label,
  #fillApp .fill-card .sd-selectbase__label {
    padding-left: 0.35rem !important;
  }
  #fillApp .fill-card .sd-item__control-label {
    line-height: 1.35 !important;
  }
  /*
   * SurveyJS: .sd-item__decorator { margin-top: calc((1.5×editorFont − 3×baseUnit) / 2) } — a rádió kört
   * a 1.5× line-height szöveghez igazítja. A fill mobil line-height / base-unit felülírások mellett ez félrevisz;
   * flex középre + margin nullázás = kör és felirat középvonala egybeesik.
   */
  #fillApp .fill-card .sd-item__decorator {
    flex-shrink: 0 !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Boolean */
  #fillApp .fill-card .sd-boolean__thumb,
  #fillApp .fill-card .sd-boolean__label {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.9rem !important;
  }

  /* Pontelosztás (custom) */
  #fillApp .fill-card .sb-allocation-ui {
    margin-bottom: 0.5rem;
  }
  #fillApp .fill-card input.sb-allocation-range[type="range"] {
    min-height: 2.25rem;
  }
  /* Pontelosztás: mobil réteg = kék sáv (nem teal) */
  #fillApp .fill-card .sb-allocation-bar-fill {
    background: #2563eb !important;
  }
  #fillApp .fill-card .sb-allocation-bar {
    background: rgba(37, 99, 235, 0.2) !important;
  }
  #fillApp .fill-card input.sb-allocation-range[type="range"]::-webkit-slider-thumb {
    background: #2563eb !important;
    border-color: #fff !important;
  }
  #fillApp .fill-card input.sb-allocation-range[type="range"]::-moz-range-thumb {
    background: #2563eb !important;
  }

  /* Saját progress */
  #fillApp .fill-card .custom-progress {
    padding: 1rem 0 0.35rem;
  }
  #fillApp .fill-card .custom-progress__dot {
    width: 8px;
    height: 8px;
  }
  #fillApp .fill-card .custom-progress__dot--active {
    width: 12px;
    height: 12px;
    border-width: 2px;
  }
  #fillApp .fill-card .custom-progress__text {
    font-size: 0.7rem;
    font-family: var(--fill-font-family, system-ui, sans-serif);
  }

  /* ── SurveyJS dropdown popup ── */
  .sv-popup__container {
    width: 95vw !important;
    max-width: 95vw !important;
    left: 2.5vw !important;
  }
  .sv-popup__scrolling-content {
    max-height: 40vh !important;
  }
  .sv-list__item,
  .sd-list__item {
    font-family: var(--fill-input-font-family, system-ui, sans-serif) !important;
    font-size: 0.95rem !important;
    color: var(--fill-input, #1f2937) !important;
  }

  /* ── Mobil réteg jelző: kék akcent (a fő stílus zöld/teal helyett) — ha kéket látsz, ez a réteg él ── */
  #fillApp .fill-card .custom-progress__dot--active {
    border-color: #2563eb !important;
  }
  #fillApp .fill-card .custom-progress__dot--done {
    background: #2563eb !important;
  }
  #fillApp .fill-card .custom-progress__line--done {
    background: #2563eb !important;
  }
  #fillApp .fill-card .sd-item--checked .sd-item__decorator,
  #fillApp .fill-card .sd-radio--checked .sd-item__decorator,
  #fillApp .fill-card .sd-checkbox--checked .sd-item__decorator {
    border-color: #2563eb !important;
  }
  #fillApp .fill-card .sd-input:focus-within,
  #fillApp .fill-card .sd-text:focus-within,
  #fillApp .fill-card .sd-comment:focus-within,
  #fillApp .fill-card .sd-dropdown:focus-within,
  #fillApp .fill-card .sd-tagbox:focus-within {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
  }
  #fillApp .fill-card .sd-rating__item--selected,
  #fillApp .fill-card .sd-rating__item.sd-rating__item--selected {
    border-color: #2563eb !important;
    color: #2563eb !important;
  }
  #fillApp .fill-card .sd-boolean--checked .sd-boolean__thumb,
  #fillApp .fill-card .sd-boolean--checked .sd-boolean__slider {
    background: #2563eb !important;
  }
  .sv-list__item--selected,
  .sd-list__item--selected {
    background: #2563eb !important;
  }
  .sv-list__item--selected:hover,
  .sd-list__item--selected:hover {
    background: #1d4ed8 !important;
  }
  .sv-list__item--selected,
  .sv-list__item--selected .sv-list__item-body,
  .sd-list__item--selected {
    color: #ffffff !important;
  }

  /* Popup lista: hover / fókusz — kék (nem szürke/teal a téma alapból) */
  .sv-popup--dropdown .sv-list__item:hover:not(.sv-list__item--selected) .sv-list__item-body,
  .sv-popup--dropdown .sv-list__item:focus:not(.sv-list__item--selected) .sv-list__item-body,
  .sv-popup--dropdown .sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body,
  .sv-popup--dropdown-overlay .sv-list__item:hover:not(.sv-list__item--selected) .sv-list__item-body,
  .sv-popup--dropdown-overlay .sv-list__item:focus:not(.sv-list__item--selected) .sv-list__item-body,
  .sv-popup--dropdown-overlay .sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
    background: rgba(37, 99, 235, 0.14) !important;
  }
  .sv-popup--dropdown .sv-list__item--hovered:not(.sv-list__item--selected) > .sv-list__item-body,
  .sv-popup--dropdown-overlay .sv-list__item--hovered:not(.sv-list__item--selected) > .sv-list__item-body {
    background: rgba(37, 99, 235, 0.14) !important;
  }
}

/* Extra szűk telefon: függőleges navigáció */
@media (max-width: 480px) {
  #fillApp.fill-container {
    padding-left: max(0.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.25rem, env(safe-area-inset-right, 0px));
  }

  #fillApp .fill-card-inner {
    padding: 0.75rem !important;
  }

  #fillApp .fill-card {
    border-radius: 0.375rem !important;
  }

  .landing-overlay .landing-bg {
    margin: 0.25rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
  }
  .landing-overlay .landing-card {
    width: 100%;
    padding: 1.5rem 1rem;
    border-radius: 0.75rem;
  }
  .landing-overlay .landing-card h1 {
    font-size: 1.2rem;
  }

  #fillApp .fill-card .sd-title,
  #fillApp .fill-card .sd-title.sd-container-modern__title,
  #fillApp .fill-card .sd-header__text h3,
  #fillApp .fill-card .sd-header__text h5 {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
  }
  #fillApp .fill-card .sd-description {
    font-size: 0.8rem !important;
  }

  #fillApp .fill-card .sd-element--with-frame {
    padding: 0.5rem !important;
  }
  #fillApp .fill-card .sd-body__page,
  #fillApp .fill-card .sd-page {
    gap: 0.2rem !important;
  }

  #fillApp .fill-card .sd-action-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #fillApp .fill-card .sd-btn,
  #fillApp .fill-card .sd-navigation__complete-btn,
  #fillApp .fill-card .sd-navigation__next-btn,
  #fillApp .fill-card .sd-navigation__prev-btn {
    width: 100% !important;
    text-align: center !important;
  }

  #fillApp .fill-card .sd-rating__item {
    min-width: 2rem !important;
    font-size: 0.85rem !important;
    padding: 0.2rem 0.3rem !important;
  }

  #fillApp .fill-card .sd-table td,
  #fillApp .fill-card .sd-table__cell,
  #fillApp .fill-card .sd-matrix__cell,
  #fillApp .fill-card .sd-matrix__table td {
    padding: 0.2rem 0.25rem !important;
    font-size: 0.75rem !important;
  }
  #fillApp .fill-card .sd-table th,
  #fillApp .fill-card .sd-table__cell--header {
    padding: 0.25rem 0.25rem !important;
    font-size: 0.7rem !important;
  }

  #fillApp .fill-card .custom-progress__dot {
    width: 6px;
    height: 6px;
  }
  #fillApp .fill-card .custom-progress__dot--active {
    width: 10px;
    height: 10px;
  }
  #fillApp .fill-card .custom-progress__line {
    height: 1.5px;
  }
}