/* P0 mobile-first layout and touch-target refinements. */

/* Fix G — iOS tap highlight suppression and 300ms delay removal (global, no-op on desktop) */
button,
a,
[role="button"],
input,
textarea,
select,
summary,
label {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.prompt-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.25rem;
}

.mobile-mode-switcher {
  display: none;
}

.builder-mobile-open-btn {
  display: none;
}

.organizer-mobile-quick-actions {
  width: 100%;
}

.organizer-mobile-action-btn {
  display: none;
}

.builder-header-open-btn {
  display: none;
}

.header-primary-action-btn[hidden],
#builderHeaderOpenBtn[hidden],
#builderMobileOpenBtn[hidden],
#newBtn[hidden],
#newBtnMobile[hidden] {
  display: none !important;
}

.builder-mobile-backdrop[hidden] {
  display: none;
}

/* Keep favorites control content centered; avoid inheriting generic label column layout. */
.favorites-filter {
  flex-direction: row;
  align-items: center;
}

/* Desktop keeps disclosure content expanded while Prompt Builder uses popup flow. */
@media (min-width: 769px) {
  .mobile-mode-switcher {
    display: none !important;
  }

  body.builder-overlay-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  header nav#headerLinks {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  header nav#headerLinks button#builderHeaderOpenBtn.header-primary-action-btn,
  header nav#headerLinks button#newBtn.header-primary-action-btn,
  header nav#headerLinks button#settingsBtn.header-primary-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    padding: 0 0.9rem;
    border-radius: 999px;
    border: 1.5px solid var(--header-btn-border);
    background: var(--header-btn-bg);
    color: var(--header-btn-text);
    box-shadow: var(--header-btn-shadow);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: var(--leading-tight);
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  header nav#headerLinks button#builderHeaderOpenBtn.header-primary-action-btn:hover,
  header nav#headerLinks button#builderHeaderOpenBtn.header-primary-action-btn:focus-visible,
  header nav#headerLinks button#newBtn.header-primary-action-btn:hover,
  header nav#headerLinks button#newBtn.header-primary-action-btn:focus-visible,
  header nav#headerLinks button#settingsBtn.header-primary-action-btn:hover,
  header nav#headerLinks button#settingsBtn.header-primary-action-btn:focus-visible {
    background: var(--header-btn-hover-bg);
    border-color: var(--header-btn-hover-border);
    color: var(--header-btn-text);
    text-decoration: none;
  }

  header nav#headerLinks button#builderHeaderOpenBtn.header-primary-action-btn[aria-expanded="true"] {
    background: var(--header-btn-hover-bg);
    border-color: var(--header-btn-hover-border);
    color: var(--header-btn-text);
  }

  .organizer-layout #builderMobileOpenBtn {
    display: none !important;
  }

  .organizer-layout #builderMobileOpenBtn[aria-expanded="true"] {
    display: none !important;
  }

  @media (max-width: 980px) {
    header nav#headerLinks {
      gap: 0.38rem;
    }

    header nav#headerLinks button#builderHeaderOpenBtn.header-primary-action-btn,
    header nav#headerLinks button#newBtn.header-primary-action-btn,
    header nav#headerLinks button#settingsBtn.header-primary-action-btn {
      height: 38px;
      min-height: 38px;
      padding: 0 0.68rem;
      font-size: 0.74rem;
      letter-spacing: 0.015em;
    }
  }

  .organizer-layout #builderMobileBackdrop {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(2px);
  }

  .organizer-layout #builderPanel {
    position: fixed;
    top: clamp(0.75rem, 2vh, 1.5rem);
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(1120px, calc(100vw - 2.5rem));
    max-width: min(1120px, calc(100vw - 2.5rem));
    max-height: calc(100vh - 1.5rem);
    margin: 0;
    padding: 0.82rem;
    border-radius: 20px;
    z-index: 220;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -16px);
    transition: transform 0.2s ease, opacity 0.2s ease;
    overflow: hidden;
    box-shadow: 0 24px 42px rgba(15, 23, 42, 0.24);
  }

  .organizer-layout #builderPanel.builder-overlay-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .organizer-layout #builderPanel .builder-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    background: inherit;
    padding-bottom: 0.16rem;
  }

  .organizer-layout #builderPanel .builder-sections {
    max-height: calc(100vh - 175px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.04rem 0.25rem 0 0;
  }

  .organizer-layout #builderPanel .builder-close-btn::after {
    display: none;
    content: none;
  }

  .mobile-disclosure>summary {
    display: none;
  }

  .mobile-filters-disclosure>.controls-row {
    margin-top: 0.35rem;
    display: flex !important;
  }
}

/* Desktop organizer controls compaction for low-resolution screens */
@media (min-width: 1024px) {
  .controls-card {
    display: grid;
    grid-template-columns: minmax(22rem, max-content) max-content;
    column-gap: 0.6rem;
    row-gap: 0;
    align-items: center;
    justify-content: start;
    align-self: center;
    width: fit-content;
    max-width: 100%;
  }

  .controls-row.controls-row-search {
    min-width: 0;
    margin: 0;
  }

  #controls .controls-row.controls-row-search #search {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  #filtersDisclosure.mobile-filters-disclosure {
    min-width: 0;
    margin: 0;
  }

  .mobile-filters-disclosure>.controls-row.controls-row-advanced {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0 !important;
    min-width: 0;
  }

  #controls .controls-row.controls-row-advanced select.form-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  #controls .controls-row.controls-row-advanced #typeFilter {
    width: calc(11ch + 2.9rem);
  }

  #controls .controls-row.controls-row-advanced #sort {
    width: calc(15ch + 2.9rem);
  }

  .mobile-filters-disclosure .favorites-filter {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    padding: 0.2rem 0.45rem;
    font-size: var(--text-sm);
  }

  .mobile-filters-disclosure .favorites-filter-label {
    padding-left: 1.85rem;
    gap: 0.3rem;
  }
}

@media (max-width: 768px) {
  body.builder-mobile-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    row-gap: 0.28rem;
    padding: 0.18rem 0.75rem 0.34rem;
    overflow: visible;
  }

  header h1 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
    min-width: 0;
    white-space: normal;
    padding-right: 0.25rem;
  }

  header h1 .header-logo {
    width: min(56vw, 220px);
    height: auto;
    max-height: 34px;
  }

  .header-tagline {
    display: none !important;
  }

  header nav#headerLinks {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.22rem;
    max-width: none;
    min-width: 0;
    text-align: right;
  }

  header nav#headerLinks .builder-header-open-btn {
    display: none !important;
  }

  header nav#headerLinks button#newBtn.header-primary-action-btn,
  header nav#headerLinks button#settingsBtn.header-primary-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-height: 36px;
    padding: 0.28rem 0.58rem;
    font-size: 0.79rem;
    font-weight: 500;
    line-height: 1;
    max-width: 100%;
    border: 1.5px solid var(--header-btn-border);
    border-radius: 999px;
    background: var(--header-btn-bg);
    color: var(--header-btn-text);
    box-shadow: var(--header-btn-shadow);
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-decoration: none;
  }

  header nav#headerLinks button#newBtn.header-primary-action-btn {
    display: none !important;
  }

  header nav#headerLinks button#newBtn.header-primary-action-btn:hover,
  header nav#headerLinks button#newBtn.header-primary-action-btn:focus-visible,
  header nav#headerLinks button#settingsBtn.header-primary-action-btn:hover,
  header nav#headerLinks button#settingsBtn.header-primary-action-btn:focus-visible {
    background: var(--header-btn-hover-bg);
    border-color: var(--header-btn-hover-border);
    color: var(--header-btn-text);
    text-decoration: none;
  }

  header nav#modeLinks {
    display: none !important;
  }

  .mobile-mode-switcher {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
    display: block;
    position: relative;
  }

  .mobile-mode-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.2);
    color: var(--header-banner-fg);
    border-radius: 999px;
    padding: 0.28rem 0.58rem;
    font: inherit;
    cursor: pointer;
    gap: 0.45rem;
    text-align: left;
  }

  :root[data-theme="dark"] .mobile-mode-trigger {
    border-color: color-mix(in srgb, var(--neutral-300) 46%, transparent 54%);
    background: color-mix(in srgb, var(--neutral-900) 68%, var(--theme-dark-header-banner-color) 32%);
    color: var(--header-banner-fg);
  }

  .mobile-mode-trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .mobile-mode-trigger-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--header-banner-muted-fg);
    opacity: 1;
  }

  .mobile-mode-active-label {
    min-width: 0;
    margin-left: 0.2rem;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--header-banner-fg);
  }

  .mobile-mode-trigger-chevron {
    flex: 0 0 auto;
    font-size: 0.76rem;
    color: var(--header-banner-muted-fg);
    opacity: 1;
    transition: transform 0.2s ease;
  }

  .mobile-mode-trigger[aria-expanded="true"] .mobile-mode-trigger-chevron {
    transform: rotate(180deg);
  }

  .mobile-mode-menu {
    position: absolute;
    z-index: 120;
    left: 0;
    right: 0;
    top: calc(100% + 0.35rem);
    background: var(--surface-primary);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.22);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .mobile-mode-menu[hidden] {
    display: none;
  }

  .mobile-mode-option {
    width: 100%;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    padding: 0.4rem 0.56rem;
    cursor: pointer;
  }

  .mobile-mode-option.is-active {
    background: color-mix(in srgb, var(--brand-500) 10%, transparent 90%);
    border-color: color-mix(in srgb, var(--brand-500) 28%, var(--border-primary) 72%);
  }

  .mobile-mode-option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-500) 55%, #1e3a8a 45%);
    outline-offset: 1px;
  }

  #controls,
  .organizer-layout,
  #list {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .organizer-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.26rem;
    padding-bottom: 0.9rem;
  }

  .organizer-layout #list {
    order: 3;
    padding-left: 0;
    padding-right: 0;
  }

  .organizer-mobile-quick-actions {
    order: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem;
    width: 100%;
    margin: 0;
    padding: 0.08rem 0 0.02rem;
  }

  .organizer-mobile-quick-actions .organizer-mobile-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    flex: 1 1 calc(50% - 0.18rem);
    margin: 0;
    padding: 0.34rem 0.52rem;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: none;
  }

  .organizer-mobile-quick-actions .folder-chips-bar {
    flex: 0 1 auto;
    width: auto;
    margin: 0;
    padding: 0;
    gap: 0.28rem;
    align-items: center;
  }

  .organizer-mobile-quick-actions .folder-chip,
  .organizer-mobile-quick-actions .folder-chip-add {
    min-height: 34px;
    padding: 0.22rem 0.78rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 650;
    box-shadow: none;
  }

  .organizer-mobile-quick-actions .folder-chips-bar--empty .folder-chip-add {
    width: auto;
    justify-content: center;
    border-style: solid;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--brand-500) 30%, var(--border-primary) 70%);
    background: color-mix(in srgb, var(--brand-500) 5%, var(--surface-primary) 95%);
    color: color-mix(in srgb, var(--brand-700) 72%, var(--text-primary));
  }

  .organizer-mobile-quick-actions #newBtnMobile {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--brand-500) 18%, white 82%),
        color-mix(in srgb, var(--brand-500) 10%, var(--surface-primary) 90%));
    border-color: color-mix(in srgb, var(--brand-500) 46%, var(--border-primary) 54%);
    color: color-mix(in srgb, var(--brand-800) 72%, var(--text-primary));
  }

  :root[data-theme="dark"] .organizer-mobile-quick-actions #newBtnMobile {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--brand-400) 30%, var(--theme-dark-surface-raised) 70%),
        color-mix(in srgb, var(--brand-500) 18%, var(--theme-dark-surface-base) 82%));
    border-color: color-mix(in srgb, var(--brand-400) 48%, var(--theme-dark-border) 52%);
    color: var(--header-banner-fg);
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.26);
  }

  :root[data-theme="dark"] .organizer-mobile-quick-actions #newBtnMobile:hover,
  :root[data-theme="dark"] .organizer-mobile-quick-actions #newBtnMobile:focus-visible,
  :root[data-theme="dark"] .organizer-mobile-quick-actions #newBtnMobile:active {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--brand-300) 34%, var(--theme-dark-surface-hover) 66%),
        color-mix(in srgb, var(--brand-400) 22%, var(--theme-dark-surface-raised) 78%));
    border-color: color-mix(in srgb, var(--brand-300) 60%, var(--theme-dark-border) 40%);
    color: var(--header-banner-fg);
  }

  .organizer-mobile-quick-actions #builderMobileOpenBtn {
    background: color-mix(in srgb, var(--surface-secondary) 92%, var(--surface-primary) 8%);
    border-color: color-mix(in srgb, var(--border-primary) 84%, transparent 16%);
    color: var(--text-secondary);
  }

  .organizer-layout #builderMobileOpenBtn {
    order: initial;
  }

  .organizer-layout #builderMobileBackdrop {
    position: fixed;
    inset: 0;
    z-index: 700;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(1.5px);
  }

  .organizer-layout #builderPanel {
    order: 2;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 18px 18px 0 0;
    z-index: 710;
    transform: translateY(102%);
    transition: transform 0.24s ease;
    max-height: min(88vh, 88dvh);
    overflow: hidden;
    padding: 0;
    box-shadow: 0 -26px 34px rgba(15, 23, 42, 0.24);
  }

  .organizer-layout #builderPanel.builder-mobile-open {
    transform: translateY(0);
  }

  .organizer-layout #builderPanel .builder-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-primary);
    padding: 0.56rem 0.8rem 0.18rem;
    border-bottom: 1px solid var(--border-primary);
  }

  .organizer-layout #builderPanel .builder-toggle-btn {
    min-height: 40px;
    padding: 0.38rem 0.62rem;
  }

  .organizer-layout #builderPanel .builder-sections {
    max-height: calc(min(88vh, 88dvh) - 72px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.2rem 0.8rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
  }

  .organizer-layout #builderPanel .builder-sections>* {
    min-width: 0;
  }

  .organizer-layout #builderPanel .builder-output-controls {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
  }

  .organizer-layout #builderPanel .builder-output-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    width: 100%;
  }

  .organizer-layout #builderPanel .builder-output-actions .btn {
    min-height: 44px;
    width: 100%;
  }

  .organizer-layout #builderPanel .builder-toggle-row {
    width: 100%;
    justify-content: flex-start;
  }

  .controls-card {
    padding: 0.3rem 0.4rem 0.24rem;
    border-radius: 14px;
  }

  .controls-row.controls-row-search {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0.12rem;
  }

  #controls .controls-row.controls-row-search #search {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    min-height: 38px;
    margin-bottom: 0;
  }

  .mobile-disclosure {
    margin: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-primary) 80%, transparent 20%);
    padding-top: 0.02rem;
  }

  .mobile-disclosure>summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.1rem 0 0.04rem;
    cursor: pointer;
    user-select: none;
  }

  .mobile-disclosure>summary::-webkit-details-marker {
    display: none;
  }

  .mobile-disclosure-title {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    white-space: nowrap;
  }

  .mobile-disclosure-meta {
    font-size: 0.68rem;
    color: var(--text-tertiary);
    margin-left: auto;
    min-width: 0;
    max-width: min(50vw, 13rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    opacity: 0.82;
  }

  .mobile-disclosure>summary.is-active .mobile-disclosure-title,
  .mobile-disclosure>summary.is-active .mobile-disclosure-meta {
    color: var(--text-primary);
    font-weight: 700;
  }

  .mobile-disclosure-chevron {
    font-size: 0.74rem;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
  }

  .mobile-disclosure[open] .mobile-disclosure-chevron {
    transform: rotate(180deg);
  }

  .mobile-filters-disclosure>.controls-row {
    margin-top: 0.12rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.42rem;
  }

  .mobile-filters-disclosure .form-control,
  .mobile-filters-disclosure .form-select,
  .mobile-filters-disclosure .favorites-filter {
    min-height: 38px;
  }

  .form-select {
    background-image: none !important;
    padding-right: 0.75rem !important;
  }

  .mobile-filters-disclosure .favorites-filter {
    justify-content: center;
  }

  #list.cards {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .card,
  .list-row {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .card.card-modern {
    overflow: visible;
  }

  .card.card-more-open {
    z-index: 1100;
  }

  .card-top-actions {
    gap: 0.14rem;
    margin-left: auto;
  }

  .card-top-actions .favorite-toggle {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.98rem;
  }

  .card {
    --card-checkbox-left: 0.9rem;
    --card-checkbox-top: 1.0625rem;
    --card-checkbox-gap: 0.72rem;
  }

  @media (min-width: 641px) {
    .card {
      --card-checkbox-top: 1.34375rem;
    }
  }

  .list-row {
    --list-checkbox-gap: 0;
  }

  .list-row .bulk-select-checkbox {
    align-self: flex-start;
    margin: 0 0 0.12rem;
  }

  .card .actions.card-actions-enhanced {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
  }

  .card .actions.card-actions-enhanced .actions-primary-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.22rem;
    align-items: center;
    min-width: 0;
  }

  .card .actions.card-actions-enhanced .actions-primary-row>.card-primary-mode-trigger,
  .card .actions.card-actions-enhanced .card-share-trigger,
  .card .actions.card-actions-enhanced .card-more-trigger {
    min-height: 38px;
    width: 100%;
    max-width: 100%;
    padding: 0.28rem 0.38rem;
    justify-content: center;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: none;
    font-size: 0.79rem;
  }

  .card .actions.card-actions-enhanced .actions-primary-row>.card-primary-mode-trigger,
  .card .actions.card-actions-enhanced .actions-primary-row>.card-share-overflow,
  .card .actions.card-actions-enhanced .card-more-overflow,
  .card .actions.card-actions-enhanced .card-share-trigger,
  .card .actions.card-actions-enhanced .card-more-trigger {
    flex: 1 1 0;
    min-width: 0;
  }

  .card .actions.card-actions-enhanced .actions-desktop-secondary {
    display: none;
  }

  .card .actions.card-actions-enhanced .card-actions-overflow {
    position: relative;
    margin-left: 0;
    z-index: 2;
    width: 100%;
  }

  .card .actions.card-actions-enhanced .card-share-overflow {
    min-width: 0;
    width: 100%;
  }

  .card .actions.card-actions-enhanced .card-more-overflow {
    min-width: 0;
    width: 100%;
    justify-self: stretch;
  }

  .card .actions.card-actions-enhanced .card-more-trigger {
    min-width: 72px;
    width: 100%;
    justify-content: center;
    background: color-mix(in srgb, var(--surface-secondary) 94%, var(--surface-primary) 6%);
    border-color: color-mix(in srgb, var(--border-secondary) 92%, transparent 8%);
    color: var(--text-secondary);
  }

  .card .actions.card-actions-enhanced .card-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.3rem);
    z-index: 1102;
    min-width: min(15.5rem, 82vw);
    max-width: 82vw;
    background: var(--surface-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    padding: 0.35rem;
    display: none;
    flex-direction: column;
    gap: 0.22rem;
  }

  .card .actions.card-actions-enhanced .card-actions-overflow.is-open .card-more-menu {
    display: flex;
  }

  .card .actions.card-actions-enhanced .card-actions-overflow.is-open .share-copy-menu,
  .list-row .list-row-actions-group.actions.card-actions-enhanced .card-actions-overflow.is-open .share-copy-menu {
    top: calc(100% + 0.55rem);
  }

  .card .actions.card-actions-enhanced .card-actions-overflow.is-open .share-copy-menu.is-open-upward,
  .list-row .list-row-actions-group.actions.card-actions-enhanced .card-actions-overflow.is-open .share-copy-menu.is-open-upward {
    transform: none !important;
  }

  .card .actions.card-actions-enhanced .share-copy-menu,
  .list-row .list-row-actions-group.actions.card-actions-enhanced .share-copy-menu {
    left: auto !important;
    right: 0 !important;
    max-width: calc(100vw - 0.75rem) !important;
  }

  .card .actions.card-actions-enhanced .card-more-menu button {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    padding: 0.4rem 0.56rem;
  }

  .card .actions.card-actions-enhanced .card-primary-mode-trigger,
  .card .actions.card-actions-enhanced .card-share-trigger,
  .card .actions.card-actions-enhanced .card-more-trigger {
    gap: 0.3rem;
  }

  .card .actions.card-actions-enhanced .card-primary-mode-label,
  .card .actions.card-actions-enhanced .card-share-trigger-label,
  .card .actions.card-actions-enhanced .card-more-trigger-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card .actions.card-actions-enhanced .card-more-trigger-label {
    display: inline;
  }

  .card .actions.card-actions-enhanced .card-more-trigger-icon {
    display: none !important;
  }

  .card .actions.card-actions-enhanced .card-share-trigger {
    background: color-mix(in srgb, var(--brand-500) 8%, var(--surface-primary) 92%);
    border-color: color-mix(in srgb, var(--brand-500) 28%, var(--border-primary) 72%);
    color: color-mix(in srgb, var(--brand-700) 68%, var(--text-primary));
  }

  :root[data-theme="dark"] .card .actions.card-actions-enhanced .card-share-trigger {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--theme-dark-primary) 28%, var(--theme-dark-surface-raised)),
        color-mix(in srgb, var(--theme-dark-primary) 12%, var(--theme-dark-surface-base)));
    border-color: color-mix(in srgb, var(--theme-dark-primary) 48%, var(--theme-dark-border));
    color: color-mix(in srgb, var(--theme-dark-primary) 48%, #ffffff 52%);
    box-shadow: 0 8px 20px rgb(2 6 23 / 0.34);
  }

  :root[data-theme="dark"] .card .actions.card-actions-enhanced .card-share-trigger-icon {
    color: inherit;
    opacity: 1;
  }

  .card .actions.card-actions-enhanced .card-primary-mode-trigger {
    background: color-mix(in srgb, var(--surface-secondary) 88%, var(--surface-primary) 12%);
    border-color: color-mix(in srgb, var(--border-primary) 88%, transparent 12%);
    color: var(--text-primary);
  }

  .card .type-badge,
  .card .token-badge {
    font-size: 0.68rem;
    padding: 0.18rem 0.42rem;
  }

  .card h3,
  .card h2 {
    line-height: 1.2;
  }

  .list-row.list-row-more-open {
    z-index: 40;
    overflow: visible;
  }

  .list-row .list-row-actions-group.actions.card-actions-enhanced {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    gap: 0.22rem;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }

  .list-row .list-row-actions-group.actions.card-actions-enhanced .actions-primary-row {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    flex-wrap: nowrap;
  }

  .list-row .list-row-actions-group.actions.card-actions-enhanced .actions-primary-row>button,
  .list-row .list-row-actions-group.actions.card-actions-enhanced .card-more-trigger {
    min-height: 40px;
    padding: 0.3rem 0.46rem;
    justify-content: flex-start;
    width: auto;
  }

  .list-row .list-row-actions-group.actions.card-actions-enhanced .card-actions-overflow {
    position: relative;
    margin-left: 0;
  }

  .list-row .list-row-actions-group.actions.card-actions-enhanced .card-more-trigger {
    min-width: 40px;
    justify-content: center;
  }

  .list-row .list-row-actions-group.actions.card-actions-enhanced .card-more-trigger-icon {
    display: none;
  }

  .list-row .list-row-actions-group.actions.card-actions-enhanced .card-more-trigger-label {
    display: inline;
  }

  .list-row .list-row-actions-group.actions.card-actions-enhanced .card-more-menu {
    right: 0;
    left: auto;
    top: calc(100% + 0.24rem);
    min-width: min(14rem, 86vw);
    max-width: 86vw;
    padding: 0.3rem;
    gap: 0.22rem;
  }

  .list-row .list-row-actions-group.actions.card-actions-enhanced .card-more-menu button {
    min-height: 44px;
    width: 100%;
    justify-content: flex-start;
    padding: 0.36rem 0.5rem;
  }

  footer[role="contentinfo"] {
    padding-top: 0.5rem;
  }

  .footer-warning-note {
    max-width: min(100%, 22rem);
    margin: 0.08rem auto 0.28rem;
    gap: 0.32rem;
    padding: 0 0.35rem;
    font-size: 0.76rem;
    line-height: 1.24;
  }

  .footer-warning-note p {
    text-wrap: balance;
  }

  .footer-dismiss-btn {
    min-height: 30px;
    min-width: 30px;
    padding: 0.08rem 0.28rem;
  }

  @media (max-width: 640px) {
    .card-top-actions .card-top-sys,
    .card-top-actions .system-prompt-icon {
      display: none;
    }
  }

  .prompt-modal.show {
    padding: 0.5rem;
  }

  #promptModal,
  .prompt-modal,
  #settingsModal,
  .settings-modal,
  #importModal,
  #starterSeedModal,
  #templateVariableModal {
    overflow-x: hidden;
  }

  #promptModal .modal-content,
  .prompt-modal .modal-content,
  #settingsModal .modal-content,
  .settings-modal .modal-content,
  #importModal .modal-content,
  #starterSeedModal .modal-content,
  #templateVariableModal .modal-content {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    margin: 0 auto;
    padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    overscroll-behavior: contain;
  }

  .settings-modal.show {
    padding: 0.3rem;
  }

  .settings-modal .modal-content {
    padding: 0;
    width: calc(100vw - 0.6rem);
    max-width: calc(100vw - 0.6rem);
    max-height: calc(100vh - 0.6rem);
  }

  .settings-modal-header {
    padding: 0.58rem 0.72rem;
  }

  .settings-modal-title-wrap {
    gap: 0.45rem;
  }

  .settings-modal-header h3 {
    font-size: 0.98rem;
  }

  .settings-header-close-btn {
    width: 1.8rem;
    height: 1.8rem;
  }

  .settings-sidebar {
    padding: 0.2rem 0.34rem 0.14rem;
    gap: 0.16rem;
  }

  .settings-nav-item {
    min-height: 1.9rem;
    padding: 0.32rem 0.52rem;
    font-size: 0.8rem;
  }

  .settings-panel-header {
    gap: 0.58rem;
    padding: 0.64rem 0.72rem 0.42rem;
  }

  .settings-panel-icon {
    font-size: 0.95rem;
    margin-top: 0;
  }

  .settings-panel-title {
    margin-bottom: 0;
    font-size: 0.94rem;
  }

  .settings-panel-body {
    padding: 0.42rem 0.64rem 0.6rem;
    gap: 0.4rem;
  }

  .settings-modal-footer {
    padding: 0.48rem 0.64rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }

  .settings-modal-footer .btn {
    min-height: 2.22rem;
    padding: 0.38rem 0.82rem;
    font-size: 0.84rem;
  }

  .settings-panel-desc,
  .settings-field-desc {
    font-size: 0.76rem;
    line-height: 1.22;
  }

  #settingsPanelSharing .settings-panel-desc {
    display: none;
  }

  #settingsPanelSharing .settings-field-desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .settings-field-group {
    gap: 0.18rem;
  }

  .settings-field-label {
    font-size: 0.88rem;
  }

  #promptForm,
  #promptForm.open,
  .prompt-modal #promptForm {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.65rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding-bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px));
  }

  #promptForm>* {
    grid-column: 1 !important;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #promptForm input,
  #promptForm textarea,
  #promptForm select,
  #promptForm .tag-multiselect,
  #promptForm .tag-multiselect-input,
  #promptForm .tag-dropdown,
  #promptForm .tag-multiselect-selected {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #promptForm .interpolator-panel {
    gap: 0.55rem;
    padding: 0.6rem;
    border-radius: 12px;
  }

  #promptForm .interpolator-panel[hidden],
  #promptForm .interpolator-fields-card[hidden],
  #promptForm .interpolator-preview-wrap[hidden] {
    display: none !important;
  }

  #promptForm .interpolator-card {
    gap: 0.45rem;
    padding: 0.6rem;
    border-radius: 10px;
  }

  #promptForm .interpolator-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  #promptForm .interpolator-header-row h4 {
    font-size: 0.95rem;
  }

  #promptForm .interpolator-header-meta {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }

  #promptForm .interpolator-help summary {
    min-height: 44px;
    font-size: 0.86rem;
    padding: 0.55rem 0.65rem;
  }

  #promptForm .interpolator-help-content {
    gap: 0.35rem;
    padding: 0 0.65rem 0.65rem;
  }

  #promptForm .interpolator-help-content p {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  #promptForm .interpolator-note {
    font-size: 0.78rem;
    line-height: 1.35;
  }

  #promptForm .interpolator-card-label {
    font-size: 0.72rem;
  }

  #promptForm .interpolator-fields {
    grid-template-columns: 1fr;
    max-height: none;
    padding-right: 0;
  }

  #promptForm .interpolator-input {
    min-height: 44px;
    font-size: 0.92rem;
  }

  #promptForm .interpolator-textarea {
    min-height: 96px;
  }

  #promptForm .interpolator-preview-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }

  #promptForm .interpolator-preview-header h4 {
    font-size: 0.95rem;
  }

  #promptForm .interpolator-preview-meta {
    font-size: 0.74rem;
  }

  #promptForm #interpolatorPreview {
    padding: 0.6rem;
    min-height: 100px;
    max-height: 220px;
    font-size: 0.82rem;
  }

  #promptForm>.prompt-modal-actions {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: stretch !important;
    gap: 0.5rem !important;
    padding-top: 0.45rem !important;
    position: sticky;
    bottom: 0;
    margin-bottom: -0.5rem;
    /* Offset modal padding */
    margin-inline: -0.5rem;
    /* Expand to edges if needed */
    padding-inline: 0.5rem;
    padding-bottom: 0.5rem;
    background: var(--surface-elevated);
    border-top: 1px solid var(--border-primary);
    border-radius: 0 0 12px 12px;
    z-index: 60;
  }

  #promptForm>.prompt-modal-actions>button {
    flex: 1 1 0;
    min-height: 44px;
  }

  #promptForm>.prompt-modal-actions #saveBtn {
    font-weight: 700;
  }

  #settingsModal .modal-content {
    background: var(--surface-elevated);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
  }

  #settingsModal .modal-content h3 {
    margin: 0;
    font-size: 1.12rem;
  }

  #settingsModal .settings-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    margin: 0.55rem 0 0.5rem;
    padding: 0.3rem;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    background: var(--surface-secondary);
  }

  #settingsModal .settings-tab {
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
  }

  #settingsModal .settings-tab-panel[hidden] {
    display: none;
  }

  #settingsModal .settings-section {
    margin: 0;
    padding: 0.45rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 78%, transparent 22%);
  }

  #settingsModal .settings-section:last-of-type {
    border-bottom: 0;
    padding-bottom: 0.25rem;
  }

  #settingsModal .settings-section h4 {
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    margin: 0 0 0.35rem;
  }

  #settingsModal .settings-theme-toggle {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
  }

  #settingsModal .settings-theme-toggle .settings-theme-option {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    gap: 0.22rem;
    padding-inline: 0.35rem;
    font-size: 0.8rem;
  }

  #settingsModal .settings-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.45rem;
    width: 100%;
  }

  #settingsModal .settings-actions .btn,
  #settingsModal .settings-actions .file-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    font-size: 0.9rem;
  }

  #settingsModal .settings-section-data-safety {
    gap: 0.36rem;
  }

  #settingsModal .data-safety-intro {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.32;
  }

  #settingsModal .data-safety-help summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 0.88rem;
    padding: 0.55rem 0.65rem;
  }

  #settingsModal .data-safety-help-content {
    gap: 0.35rem;
    padding: 0 0.65rem 0.65rem;
  }

  #settingsModal .data-safety-help-content p {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  #settingsModal .data-safety-config-panel {
    gap: 0.34rem;
    padding: 0.52rem 0.58rem;
    border-radius: 10px;
  }

  #settingsModal .data-safety-mode-label {
    display: inline-block;
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
  }

  #settingsModal .data-safety-mode-select {
    width: 100%;
    min-height: 44px;
    max-width: none;
    font-size: 0.9rem;
  }

  #settingsModal .data-safety-mode-hint {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.32;
  }

  #settingsModal .data-safety-status {
    margin-top: 0;
    padding: 0.45rem 0.58rem;
    border-radius: 9px;
  }

  #settingsModal .data-safety-status p {
    margin: 0;
    font-size: 0.79rem;
    line-height: 1.28;
  }

  #settingsModal .data-safety-actions-structured {
    gap: 0.45rem;
  }

  #settingsModal .data-safety-action-group {
    gap: 0.4rem;
    padding: 0.56rem;
  }

  #settingsModal .data-safety-action-group-heading {
    display: grid;
    gap: 0.45rem;
  }

  #settingsModal .data-safety-action-group-title {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }

  #settingsModal .data-safety-action-group-copy {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.28;
  }

  #settingsModal .data-safety-action-group-badge {
    justify-self: start;
    min-height: 1.55rem;
    padding-inline: 0.42rem;
    font-size: 0.63rem;
  }

  #settingsModal .data-safety-actions {
    margin-top: 0;
  }

  #settingsModal .action-grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #settingsModal .action-grid--trio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.36rem;
  }

  #settingsModal .action-grid--trio > :last-child {
    grid-column: 1 / -1;
  }

  #settingsModal .data-safety-actions.action-grid .btn {
    min-height: 44px;
    padding: 0.7rem 0.55rem;
    white-space: normal;
    line-height: 1.2;
  }

  .btn-sm {
    min-height: 44px;
  }

  #settingsModal .modal-content .btn {
    min-height: 44px;
  }

  #settingsModal .settings-modal-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.6rem 0 0.25rem;
    border-top: 1px solid var(--border-primary);
    background: color-mix(in srgb, var(--surface-primary) 96%, transparent 4%);
  }

  #settingsModal #settingsCloseBtn {
    font-weight: 700;
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    padding-inline: 1rem;
  }

  #settingsModal .settings-danger-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #settingsModal .settings-danger-actions #resetBtn {
    border-style: dashed;
    opacity: 0.88;
    width: 100%;
    min-width: 0;
  }

  #settingsModal .settings-data-action-row {
    display: grid;
    gap: 0.46rem;
    padding: 0.62rem;
    align-items: stretch;
  }

  #settingsModal .settings-data-action-row .btn,
  #settingsModal .settings-data-action-row .file-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  #settingsModal .settings-data-action-row label.file-btn {
    padding-inline: 0.7rem;
  }

  #settingsModal .settings-data-action-desc {
    line-height: 1.32;
  }

  #settingsModal .settings-checkbox-row {
    min-height: 44px;
    padding: 0.5rem 0.62rem;
    border-radius: 10px;
    gap: 0.46rem;
  }

  #settingsModal .settings-checkbox-row span {
    font-size: 0.79rem;
    line-height: 1.18;
  }

  @media (max-width: 580px) {
    .settings-modal .modal-content[data-active-settings-panel="settingsPanelGeneral"],
    .settings-modal .modal-content[data-active-settings-panel="settingsPanelAppearance"],
    .settings-modal .modal-content[data-active-settings-panel="settingsPanelData"],
    .settings-modal .modal-content[data-active-settings-panel="settingsPanelDanger"] {
      height: auto;
      max-height: calc(100vh - 0.6rem);
    }

    .settings-modal .modal-content[data-active-settings-panel="settingsPanelGeneral"] .settings-layout,
    .settings-modal .modal-content[data-active-settings-panel="settingsPanelAppearance"] .settings-layout,
    .settings-modal .modal-content[data-active-settings-panel="settingsPanelData"] .settings-layout,
    .settings-modal .modal-content[data-active-settings-panel="settingsPanelDanger"] .settings-layout {
      display: block;
      flex: 0 0 auto;
    }

    .settings-modal .modal-content[data-active-settings-panel="settingsPanelGeneral"] .settings-panels,
    .settings-modal .modal-content[data-active-settings-panel="settingsPanelAppearance"] .settings-panels,
    .settings-modal .modal-content[data-active-settings-panel="settingsPanelData"] .settings-panels,
    .settings-modal .modal-content[data-active-settings-panel="settingsPanelDanger"] .settings-panels {
      overflow: visible;
    }
  }

  .data-safety-restore-overlay {
    padding: 0.9rem;
  }

  .data-safety-restore-panel {
    width: min(96vw, 560px);
    padding: 0.95rem;
    gap: 0.7rem;
  }

  .data-safety-restore-panel h3 {
    font-size: 1.02rem;
  }

  .data-safety-restore-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .data-safety-restore-actions .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .data-safety-history-panel {
    width: min(96vw, 560px);
    padding: 0.95rem;
    gap: 0.7rem;
  }

  .data-safety-history-panel h3 {
    font-size: 1.02rem;
  }

  .vault-history-list {
    max-height: 260px;
  }

  .vault-history-item {
    padding: 0.65rem;
  }

  .vault-history-item-header {
    flex-wrap: wrap;
  }

  .data-safety-history-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .data-safety-history-actions .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  #exportModal.export-modal-with-selection .modal-content,
  #importConflictModal .modal-content,
  #importReportModal .modal-content {
    width: min(96vw, 680px);
    padding: 1rem;
    max-height: 82vh;
  }

  #importConflictModal .import-conflict-scroll-area {
    max-height: 52vh;
  }

  #importConflictModal .import-conflict-title-row {
    align-items: flex-start;
    gap: 0.55rem;
  }

  #importConflictModal .import-conflict-nav {
    gap: 0.3rem;
  }

  #importConflictModal .import-conflict-nav-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0.35rem 0.55rem;
  }

  #importConflictModal .import-conflict-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    position: sticky;
    top: 0;
    z-index: 4;
  }

  #importConflictModal .import-conflict-quick-actions .btn {
    width: 100%;
    min-width: 0;
  }

  #importConflictModal .import-conflict-prompt-meta {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  #importConflictModal .import-conflict-prompt-meta::before {
    display: none;
  }

  #importConflictModal .import-conflict-preview-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  #importConflictModal .import-conflict-choice-grid {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  #importConflictModal .import-conflict-option {
    width: 100%;
    min-width: 0;
  }

  #importConflictModal .import-conflict-preview-value-long {
    max-height: 110px;
    font-size: 0.78rem;
  }

  #importConflictModal .modal-buttons {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  #importConflictModal .modal-buttons .btn {
    flex: 1 1 calc(50% - 0.45rem);
    min-height: 44px;
    min-width: 0;
  }

  #importReportModal .import-report-summary {
    font-size: 0.8rem;
  }

  #importReportModal .import-report-invalid-list {
    max-height: 180px;
  }

  #importModal .prompt-selection-panel,
  #exportModal .prompt-selection-panel,
  #starterSeedModal .prompt-selection-panel {
    padding: 0.65rem;
    margin: 0.75rem 0 0.9rem;
  }

  #importModal .prompt-selection-toolbar,
  #exportModal .prompt-selection-toolbar,
  #starterSeedModal .prompt-selection-toolbar {
    gap: 0.55rem;
  }

  #importModal .prompt-selection-actions,
  #exportModal .prompt-selection-actions,
  #starterSeedModal .prompt-selection-actions {
    width: 100%;
  }

  #importModal .prompt-selection-actions .btn,
  #exportModal .prompt-selection-actions .btn,
  #starterSeedModal .prompt-selection-actions .btn {
    flex: 1 1 calc(50% - 0.35rem);
    min-height: 44px;
    min-width: 0;
  }

  #importModal .prompt-selection-list,
  #exportModal .prompt-selection-list,
  #starterSeedModal .prompt-selection-list {
    max-height: 240px;
  }

  #starterSeedModal .modal-buttons {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  #starterSeedModal #starterSeedCancelBtn {
    order: -1;
    margin-right: auto;
    font-size: 0.86rem;
    padding-inline: 0.65rem;
  }

  #starterSeedModal #starterSeedAddBtn {
    width: 100%;
  }

  #importModal .prompt-selection-label,
  #exportModal .prompt-selection-label,
  #starterSeedModal .prompt-selection-label {
    padding: 0.62rem 0.65rem;
  }

  #markdownSection,
  #tokenSection,
  #fileConcatSection {
    padding: 0.72rem 0.7rem 1rem;
    margin-bottom: 1.1rem;
  }

  #markdownSection .markdown-intro {
    padding: 0.72rem 0.78rem;
    margin-bottom: 0.62rem;
  }

  #markdownSection .markdown-intro-header {
    margin-bottom: 0.35rem;
    gap: 0.45rem;
  }

  #markdownSection .markdown-intro-title {
    font-size: 1.34rem;
  }

  #markdownSection .markdown-intro-badge {
    min-height: 24px;
    font-size: 0.66rem;
    padding: 0.16rem 0.45rem;
  }

  #markdownSection .markdown-intro-summary {
    margin: 0 0 0.45rem;
    font-size: 0.82rem;
    line-height: 1.38;
  }

  #markdownSection .markdown-intro-actions {
    width: 100%;
    gap: 0.35rem;
    align-items: stretch;
    margin-bottom: 0.45rem;
  }

  #markdownSection .markdown-action-group {
    justify-content: flex-start;
    gap: 0.4rem;
  }

  #markdownSection .markdown-action-group .btn {
    min-height: 44px;
  }

  #markdownSection .markdown-import-help {
    display: none;
  }

  #markdownSection .markdown-guide {
    margin-top: 0.1rem;
    padding-top: 0.42rem;
  }

  #markdownSection .markdown-guide>summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
  }

  #markdownSection .markdown-panel-header {
    padding: 0.8rem 0.85rem 0.6rem;
  }

  #markdownSection .markdown-panel-body {
    padding: 0.75rem 0.85rem 0.92rem;
    gap: 0.55rem;
  }

  #markdownSection .markdown-panel-actions {
    width: 100%;
    justify-content: flex-start;
  }

  #markdownSection .markdown-panel-actions .btn {
    min-height: 44px;
  }

  #markdownSection .markdown-textarea {
    min-height: 18rem;
  }

  #markdownSection .markdown-layout-preview-expanded {
    min-height: var(--markdown-expanded-height, 34rem);
    height: var(--markdown-expanded-height, 34rem);
  }

  #markdownSection .markdown-panel-preview .markdown-panel-header {
    padding-right: 3.8rem;
  }

  #markdownSection .markdown-panel-preview-expanded .markdown-panel-body {
    min-height: calc(var(--markdown-expanded-height, 34rem) - 4.7rem);
  }

  #markdownSection .markdown-preview-toggle-btn {
    top: 0.72rem;
    right: 0.75rem;
    width: 2.6rem;
    height: 2.6rem;
  }

  #markdownSection .markdown-preview-tooltip {
    top: 3.95rem;
    right: 0.75rem;
    max-width: min(12rem, calc(100% - 1.5rem));
    transform: translate3d(0, -0.2rem, 0);
    transform-origin: top right;
  }

  #markdownSection .markdown-preview-tooltip::after {
    top: -0.34rem;
    right: 0.95rem;
    border-top: inherit;
    border-right: inherit;
    transform: rotate(-45deg);
  }

  #markdownSection .markdown-preview-toggle-btn:hover + .markdown-preview-tooltip,
  #markdownSection .markdown-preview-toggle-btn:focus + .markdown-preview-tooltip,
  #markdownSection .markdown-preview-toggle-btn:focus-visible + .markdown-preview-tooltip {
    transform: translate3d(0, 0, 0);
  }

  #tokenSection .token-intro {
    padding: 0.72rem 0.78rem;
    margin-bottom: 0.62rem;
  }

  #tokenSection .token-intro-header {
    margin-bottom: 0.35rem;
    gap: 0.45rem;
  }

  #tokenSection .token-intro-title {
    font-size: 1.34rem;
  }

  #tokenSection .token-intro-badge {
    min-height: 24px;
    font-size: 0.66rem;
    padding: 0.16rem 0.45rem;
  }

  #tokenSection .token-intro-summary {
    font-size: 0.82rem;
    line-height: 1.38;
  }

  #tokenSection .token-panel+.token-panel {
    margin-top: 0.62rem;
  }

  #tokenSection .token-panel-header {
    padding: 0.8rem 0.85rem 0.6rem;
  }

  #tokenSection .token-panel-body {
    padding: 0.75rem 0.85rem 0.92rem;
    gap: 0.55rem;
  }

  #tokenSection .token-metrics {
    gap: 0.42rem;
  }

  #tokenSection .token-metric-card {
    min-height: 0;
    padding: 0.55rem 0.6rem;
  }

  #tokenSection .token-metric-value {
    font-size: 1.45rem;
  }

  #tokenSection .token-textarea {
    min-height: 16rem;
  }

  #tokenSection .token-input-footer {
    align-items: stretch;
  }

  #tokenSection .token-input-footer .btn {
    min-height: 44px;
  }

  #tokenSection .token-settings {
    margin-top: 0.1rem;
    padding-top: 0.42rem;
  }

  #tokenSection .token-settings>summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
  }

  #tokenSection .token-settings-content {
    margin-top: 0.2rem;
  }

  #tokenSection .token-settings-row {
    gap: 0.5rem;
  }

  #tokenSection .token-setting-group,
  #tokenSection .token-setting-input {
    max-width: 100%;
    min-width: 0;
  }

  #tokenSection .token-settings-help {
    margin-top: 0.45rem;
    font-size: 0.8rem;
  }

  #fileConcatSection .file-concat-intro {
    padding: 0.72rem 0.78rem;
    margin-bottom: 0.62rem;
  }

  #fileConcatSection .file-concat-intro-header {
    margin-bottom: 0.35rem;
    gap: 0.45rem;
  }

  #fileConcatSection .file-concat-intro-title {
    font-size: 1.34rem;
  }

  #fileConcatSection .file-concat-intro-badge {
    min-height: 24px;
    font-size: 0.66rem;
    padding: 0.16rem 0.45rem;
  }

  #fileConcatSection .file-concat-intro-summary {
    margin: 0 0 0.45rem;
    font-size: 0.82rem;
    line-height: 1.38;
  }

  #fileConcatSection .file-concat-intro-highlights {
    gap: 0.4rem;
    margin-bottom: 0.45rem;
  }

  #fileConcatSection .file-concat-intro-chip {
    min-width: 0;
    flex: 1 1 100%;
    padding: 0.42rem 0.5rem;
  }

  #fileConcatSection .file-concat-intro-chip strong {
    font-size: 0.86rem;
  }

  #fileConcatSection .file-concat-intro-details {
    padding-top: 0.42rem;
  }

  #fileConcatSection .file-concat-intro-details>summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
  }

  #fileConcatSection .file-concat-intro-details ul {
    margin: 0.35rem 0 0;
    padding-left: 1.05rem;
  }

  #fileConcatSection .file-concat-intro-details li {
    margin-bottom: 0.32rem;
    font-size: 0.8rem;
  }

  #fileConcatSection .action-buttons.csv-actions {
    margin-bottom: 0.58rem;
    gap: 0.42rem;
  }

  #fileConcatSection .csv-inline-help {
    margin: -0.15rem 0 0.58rem;
  }

  #fileConcatSection .file-list {
    margin: 0.55rem 0;
  }

  #textImageSection {
    padding: 0.65rem;
  }

  #textImageSection .text-image-intro {
    margin-bottom: 0.72rem;
    padding: 0.78rem 0.82rem;
  }

  #textImageSection .text-image-intro-title {
    font-size: 1.25rem;
  }

  #textImageSection .text-image-guide-details>summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 0.88rem;
  }

  #textImageSection .text-image-panel-header {
    padding: 0.78rem 0.82rem 0.58rem;
  }

  #textImageSection .text-image-panel-body {
    padding: 0.74rem 0.82rem 0.88rem;
  }

  #textImageSection .text-image-panel-header .btn {
    width: 100%;
    min-height: 44px;
  }

  #textImageSection .text-image-textarea {
    height: 10rem;
    min-height: 10rem;
  }

  #textImageSection .text-image-control-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  #textImageSection .text-image-format-field {
    grid-column: 1;
    grid-row: 1;
  }

  #textImageSection .text-image-width-field {
    grid-column: 1;
    grid-row: 2;
  }

  #textImageSection .text-image-background-stack {
    grid-column: 1;
    grid-row: 3;
  }

  #textImageSection .text-image-padding-field {
    grid-column: 1;
    grid-row: 4;
  }

  #textImageSection .text-image-color-field input[type="color"] {
    height: 58px;
    min-height: 58px;
  }

  #textImageSection .text-image-field .form-control,
  #textImageSection .text-image-field .form-select,
  #textImageSection .text-image-toggle,
  #textImageSection .text-image-actions .btn,
  #textImageSection .text-image-tag-disclosure .btn {
    min-height: 44px;
  }

  #textImageSection .text-image-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  #textImageSection .text-image-actions .btn {
    width: 100%;
  }

  #textImageSection .text-image-preview-wrap {
    min-height: 180px;
    padding: 0.6rem;
  }

  #textImageSection .text-image-preview {
    max-height: 260px;
  }

  #textImageSection .text-image-output-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #textImageSection .text-image-output-actions .btn {
    width: 100%;
  }

  #textImageSection .text-image-size-label {
    font-size: 0.8rem;
  }

  /* Fix F — .tag-chip-remove 44px tappable area (visual 24px + 10px padding each side) */
  .tag-chip .tag-chip-remove {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 10px;
    box-sizing: content-box;
    margin: -10px -6px -10px 0;
  }

  /* Fix I — table overflow on mobile */
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }

  pre {
    overflow-x: auto;
    max-width: 100%;
    word-break: break-word;
  }

  .data-safety-restore-summary {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }
}

@media (max-width: 640px) {
  header h1 .header-logo {
    width: min(52vw, 190px);
    max-height: 30px;
  }

  .mobile-mode-trigger {
    padding-inline: 0.65rem;
  }

  .mobile-mode-active-label {
    font-size: 0.86rem;
  }

  .mobile-disclosure-meta {
    max-width: 52vw;
  }

  .card .actions.card-actions-enhanced .actions-primary-row>.card-primary-mode-trigger,
  .card .actions.card-actions-enhanced .card-share-trigger,
  .card .actions.card-actions-enhanced .card-more-trigger {
    font-size: 0.78rem;
    padding: 0.4rem 0.5rem;
  }

  #fileConcatSection .file-concat-intro-details>summary {
    font-size: 0.88rem;
  }

  #textImageSection .text-image-actions {
    grid-template-columns: 1fr;
  }

  #tokenSection .token-settings>summary {
    font-size: 0.88rem;
  }
}

/* Landscape orientation: tighter vertical fit for modals, builder, header */
@media (max-width: 768px) and (orientation: landscape) {

  /* Modals: tighter vertical fit */
  #promptModal .modal-content,
  .prompt-modal .modal-content,
  #settingsModal .modal-content,
  .settings-modal .modal-content,
  #importModal .modal-content,
  #starterSeedModal .modal-content,
  #templateVariableModal .modal-content {
    max-height: calc(100vh - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
    padding-top: 0.5rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Prompt form: reduce fixed action bar padding, shrink bottom reserve */
  #promptForm,
  #promptForm.open,
  .prompt-modal #promptForm {
    padding-bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px));
  }

  #promptForm>.prompt-modal-actions {
    padding: 0.35rem;
  }

  #promptForm>.prompt-modal-actions>button {
    min-height: 40px;
  }

  /* Builder drawer: cap height lower */
  .organizer-layout #builderPanel {
    max-height: min(82vh, 82dvh);
  }

  .organizer-layout #builderPanel .builder-sections {
    max-height: calc(min(82vh, 82dvh) - 64px);
  }

  /* Header: single-row, tighter */
  header {
    padding-top: 0.1rem;
    padding-bottom: 0.25rem;
    row-gap: 0.2rem;
  }
}

/* Touch feedback: suppress sticky hover, add active press states */
@media (hover: none) and (pointer: coarse) {

  /* Suppress hover-lift transform on touch (sticky hover) */
  .hover-lift:hover {
    transform: none;
    box-shadow: none;
  }

  /* Active press feedback for all buttons */
  .btn:active:not(:disabled) {
    opacity: 0.82;
    transform: scale(0.97);
    transition: opacity 0.1s ease, transform 0.1s ease;
  }

  /* Fix A — Specificity-matched card/list-row hover suppression (beats modern-components.css) */
  .card:hover,
  .card-modern:hover,
  .list-row:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .card:hover::before,
  .card-modern:hover::before {
    opacity: 0 !important;
  }

  /* Fix B — Suppress bare button:hover transform (core.css:1004) */
  button:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Fix C — Suppress remaining hover transforms on specific controls */
  .remove-file:hover,
  .word-export-button:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Fix H — Suppress tap-triggered focus outlines, preserve keyboard focus-visible */
  *:focus:not(:focus-visible) {
    outline: none;
  }
}

/* Ultra-narrow screens (<360px) and split-screen modes */
@media (max-width: 359px) {
  header h1 .header-logo {
    width: min(46vw, 150px);
    max-height: 26px;
  }

  .card .actions.card-actions-enhanced .card-more-menu {
    min-width: min(13rem, 90vw);
  }

  .mobile-mode-active-label {
    font-size: 0.82rem;
  }

  #promptModal .modal-content,
  #settingsModal .modal-content {
    padding: 0.5rem;
  }
}

/* List Row Visual Hierarchy (768px and below) */
@media (max-width: 768px) {

  /* Prevent pull-to-refresh overscroll bouncing on mobile PWA */
  body {
    overscroll-behavior-y: none;
  }

  /* De-emphasize metadata */
  .list-row-date,
  .list-row-tags {
    opacity: 0.7;
    font-size: 0.8em;
  }
}

/* Enhanced Touch Targets for Mobile (PWA standards) */
@media (max-width: 768px) {

  .btn-sm,
  .btn,
  .icon-btn,
  .mobile-mode-switcher button,
  .card-more-menu button,
  .system-prompt-icon,
  .favorite-toggle {
    min-height: 44px;
    /* iOS Human Interface Guidelines minimum touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Ensure small buttons don't break layout with the new height */
  .btn-sm {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Organizer mobile polish intentionally uses denser controls above the fold. */
  .organizer-mobile-quick-actions .organizer-mobile-action-btn {
    min-height: 36px;
  }

  .organizer-mobile-quick-actions .folder-chip,
  .organizer-mobile-quick-actions .folder-chip-add {
    min-height: 34px;
  }

  .card .actions.card-actions-enhanced .actions-primary-row>.card-primary-mode-trigger,
  .card .actions.card-actions-enhanced .card-share-trigger,
  .card .actions.card-actions-enhanced .card-more-trigger {
    min-height: 38px;
  }

  .card-top-actions .favorite-toggle {
    min-height: 34px;
  }

  .sharing-destination-manager {
    grid-template-columns: 1fr;
    gap: 0.62rem;
    margin-top: 0.3rem;
  }

  .sharing-destination-column {
    gap: 0.62rem;
    padding: 0.74rem;
  }

  .sharing-destination-column:last-child {
    order: 1;
  }

  .sharing-destination-controls {
    order: 2;
  }

  .sharing-destination-column:first-child {
    order: 3;
  }

  .sharing-destination-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    background: transparent;
    box-shadow: none;
    width: 100%;
    gap: 0.45rem;
  }

  .sharing-destination-controls .btn {
    min-height: 2.2rem;
    padding-inline: 0.5rem;
    font-size: 0.82rem;
  }

  .sharing-destination-list {
    min-height: 8.5rem;
    max-height: 9rem;
    overflow-x: hidden;
  }

  .sharing-destination-item {
    min-height: 40px;
    gap: 0.42rem;
    padding: 0.32rem 0.48rem;
    align-items: center;
    grid-template-columns: 1.56rem minmax(0, 1fr);
  }

  .sharing-destination-item-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.24rem;
  }

  .sharing-destination-item-badge {
    min-height: 1.05rem;
    padding: 0 0.3rem;
    font-size: 0.63rem;
    line-height: 1;
    letter-spacing: 0.01em;
    justify-self: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sharing-destination-item.is-included {
    grid-template-columns: 1.35rem 1.56rem minmax(0, 1fr);
  }

  .sharing-destination-item-chrome {
    width: 1.35rem;
    gap: 0.02rem;
  }

  .sharing-destination-item-order {
    font-size: 0.58rem;
  }

  .sharing-destination-item-drag {
    font-size: 0.62rem;
  }

  .sharing-destination-item-icon {
    width: 1.56rem;
    height: 1.56rem;
    font-size: 0.72rem;
  }

  .sharing-destination-item-icon img {
    width: 1rem;
    height: 1rem;
  }

  .sharing-destination-item-icon.is-bare-asset-icon img {
    width: 1.08rem;
    height: 1.08rem;
  }

  .sharing-destination-item-content {
    width: 100%;
    gap: 0.04rem;
  }

  .sharing-destination-item-label {
    font-size: 0.82rem;
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sharing-destination-item-hint {
    font-size: 0.69rem;
    line-height: 1.14;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media (max-width: 480px) {
    .sharing-destination-column {
      gap: 0.45rem;
      padding: 0.62rem;
    }

    .sharing-destination-column-desc {
      display: none;
    }

    .sharing-destination-column-header {
      padding-bottom: 0.45rem;
    }

    .sharing-destination-list {
      min-height: 5.75rem;
      max-height: 6rem;
    }
  }

  .share-copy-menu {
    gap: 0.42rem !important;
    padding: 0.48rem !important;
  }

  .share-copy-menu-subtitle {
    display: none;
  }

  .share-copy-menu-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .share-copy-menu-tabs {
    gap: 0.28rem;
    padding: 0.2rem;
  }

  .share-copy-menu-tab {
    min-height: 1.96rem;
  }

  .share-copy-menu-panel {
    max-height: min(19rem, 52vh);
  }

  #promptForm .prompt-body-editor-shell {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #promptForm .prompt-body-line-gutter {
    min-width: calc(var(--prompt-body-line-number-width) + 1.15rem);
    padding-left: 0.38rem;
    padding-right: 0.38rem;
  }
}

@media (max-width: 768px) {
  .controls-card {
    padding: 0.58rem 0.64rem 0.22rem;
  }

  .controls-card::before {
    top: -0.14rem;
    left: 0.64rem;
    font-size: calc(0.58rem + 2px);
    letter-spacing: 0.18em;
  }

  .controls-card::after {
    left: 6.7rem;
    right: 0.64rem;
    top: 0.66rem;
  }

  .organizer-mobile-quick-actions .folder-chips-bar {
    padding-top: 0.2rem;
  }

  #list.cards {
    padding-top: 0.12rem;
  }

  #list::before,
  .folder-chips-bar::before {
    display: none;
  }

  .card {
    padding: 0.54rem 0.78rem 0.56rem;
  }

  .card .actions.card-actions-enhanced .actions-primary-row {
    gap: 0.28rem;
  }

  .card .actions.card-actions-enhanced .actions-primary-row > .card-primary-mode-trigger,
  .card .actions.card-actions-enhanced .card-share-trigger,
  .card .actions.card-actions-enhanced .card-more-trigger {
    padding-inline: 0.28rem;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }

  .card .prompt-body {
    max-height: 108px;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media (max-width: 768px) {
  .mobile-mode-switcher {
    margin-top: 0.08rem;
  }

  .mobile-mode-trigger {
    border-color: color-mix(in srgb, var(--app-shell-rule) 54%, transparent);
    background: color-mix(in srgb, var(--app-shell-button-bg) 88%, transparent);
    box-shadow: var(--app-shell-button-shadow);
  }

  .mobile-mode-menu {
    border-color: var(--app-shell-panel-border);
    background: var(--app-shell-panel-bg);
    box-shadow: var(--app-shell-panel-shadow);
  }

  .mobile-mode-option {
    border-radius: 10px;
    font-family: var(--font-editorial-sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
  }

  .mobile-mode-option.is-active {
    background: var(--app-shell-pill-active-bg);
    border-color: var(--app-shell-pill-active-border);
    color: var(--app-shell-pill-active-text);
  }

  .organizer-layout #builderPanel {
    border: 1px solid var(--app-shell-panel-border);
    background: var(--app-shell-panel-bg);
    box-shadow: var(--app-shell-panel-shadow);
  }

  .organizer-layout #builderPanel .builder-header {
    background: color-mix(in srgb, var(--app-shell-panel-bg) 96%, transparent);
    padding: 0.64rem 0.82rem 0.34rem;
    border-bottom-color: color-mix(in srgb, var(--app-shell-rule) 60%, transparent);
  }

  .organizer-layout #builderPanel .builder-header h2 {
    font-size: 1.18rem;
  }

  .organizer-layout #builderPanel .builder-header .text-muted {
    font-size: 0.75rem;
  }

  .organizer-layout #builderPanel .builder-toggle-btn {
    min-height: 38px;
    padding: 0.34rem 0.62rem;
  }

  .organizer-layout #builderPanel .builder-sections {
    max-height: calc(min(88vh, 88dvh) - 80px);
    padding: 0.28rem 0.82rem calc(0.82rem + env(safe-area-inset-bottom, 0px));
    gap: 0.58rem;
  }

  .organizer-layout #builderPanel .builder-section {
    padding: 0.66rem 0.72rem 0.72rem;
    border-radius: 14px;
  }

  .organizer-layout #builderPanel .builder-section-header {
    margin-bottom: 0.52rem;
    padding-bottom: 0.36rem;
  }

  .organizer-layout #builderPanel .builder-section-header h3 {
    font-size: 0.68rem;
  }

  .organizer-layout #builderPanel .builder-output-actions {
    gap: 0.38rem;
  }

  .organizer-layout #builderPanel .builder-output-actions .btn {
    min-height: 40px;
    font-size: 0.74rem;
    padding-inline: 0.52rem;
  }

  .organizer-layout #builderPanel .builder-toggle-row {
    gap: 0.48rem;
    padding: 0.38rem 0.52rem;
  }

  .organizer-layout #builderPanel .builder-radio-group {
    gap: 0.32rem;
  }

  #settingsModal .modal-content {
    border-color: var(--app-shell-panel-border);
    background: var(--app-shell-panel-bg);
    box-shadow: var(--app-shell-panel-shadow);
    border-radius: 18px;
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
  }

  .settings-modal-header {
    padding: 0.72rem 0.8rem 0.56rem;
    border-bottom-color: color-mix(in srgb, var(--app-shell-rule) 60%, transparent);
  }

  .settings-modal-header h3 {
    font-size: 1.08rem;
  }

  .settings-header-close-btn {
    width: 2rem;
    height: 2rem;
  }

  .settings-sidebar {
    background: color-mix(in srgb, var(--app-shell-button-bg) 64%, transparent);
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--app-shell-rule) 58%, transparent);
    padding: 0.28rem 0.42rem 0.22rem;
    gap: 0.2rem;
  }

  .settings-nav-group-label {
    font-size: 0.58rem;
  }

  .settings-nav-item {
    min-height: 2rem;
    padding: 0.34rem 0.54rem;
    font-size: 0.78rem;
  }

  .settings-panel-header {
    gap: 0.56rem;
    padding: 0.72rem 0.8rem 0.46rem;
  }

  .settings-panel-title {
    font-size: 1rem;
  }

  .settings-panel-body {
    padding: 0.5rem 0.76rem 0.76rem;
    gap: 0.46rem;
  }

  .settings-field-group,
  .settings-data-action-row,
  .data-safety-action-group,
  .data-safety-config-panel,
  .data-safety-status,
  .sharing-destination-column {
    border-radius: 12px;
  }

  .settings-field-group {
    padding: 0.6rem 0.64rem;
  }

  .settings-field-label {
    font-size: 0.68rem;
  }

  .settings-panel-desc,
  .settings-field-desc {
    font-size: 0.75rem;
    line-height: 1.25;
  }

  #settingsModal .settings-theme-toggle .settings-theme-option,
  #settingsModal .settings-actions .btn,
  #settingsModal .settings-actions .file-btn,
  #settingsModal .settings-data-action-row .btn,
  #settingsModal .settings-data-action-row .file-btn,
  #settingsModal .sharing-destination-controls .btn,
  #settingsModal .settings-modal-actions .btn {
    min-height: 40px;
    font-size: 0.76rem;
    padding-inline: 0.54rem;
  }

  #settingsModal .settings-checkbox-row {
    min-height: 40px;
    padding: 0.44rem 0.56rem;
  }

  #settingsModal .settings-modal-actions {
    padding: 0.58rem 0.76rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--app-shell-button-bg) 72%, transparent);
    border-top-color: color-mix(in srgb, var(--app-shell-rule) 60%, transparent);
  }
}