.uai-card-toggle { display: none; }
@media (max-width: 767px) {
  html { scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
  #app, main, main > *, .table-page-layout { min-width: 0; max-width: 100%; }
  main { padding: 12px !important; }
  main input:not([type=checkbox]):not([type=radio]), main select, main textarea,
  [role=dialog] input:not([type=checkbox]):not([type=radio]), [role=dialog] select,
  #email, #password { font-size: 16px !important; }
  main input:not([type=checkbox]):not([type=radio]), main select,
  main .btn, header button, [role=dialog] button { min-height: 44px; }
  header button { min-width: 44px; }
  main input[type=checkbox] { min-width: 18px; min-height: 18px; }
  main input, main textarea, main select { max-width: 100%; }
  [role=dialog], [aria-modal=true] {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .table-page-layout.mobile-mode .layout-section-fixed { min-width: 0; }
  .uai-mobile-card { position: relative; padding: 12px !important; border-radius: 14px !important; }
  .uai-mobile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .uai-mobile-fields > * { min-width: 0; margin-top: 0 !important; }
  .uai-mobile-fields > [data-field] { gap: 4px; flex-direction: column; align-items: flex-start; }
  .uai-mobile-fields > [data-field] > :first-child { font-size: 10px; letter-spacing: .035em; }
  .uai-mobile-fields > [data-field] > :last-child { max-width: 100%; text-align: left; overflow-wrap: anywhere; }
  .uai-mobile-fields > [data-field=name], .uai-mobile-fields > [data-field=key],
  .uai-mobile-fields > [data-field=api_key], .uai-mobile-fields > [data-field=usage],
  .uai-mobile-fields > :not([data-field]) { grid-column: 1 / -1; }
  .uai-mobile-fields > [data-field=name] > :first-child { display: none; }
  .uai-mobile-fields > [data-field=name] > :last-child { padding-right: 24px; font-size: 14px; }
  .uai-mobile-fields > [data-field=select] { position: absolute; top: 6px; right: 4px; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; cursor: pointer; }
  .uai-mobile-fields > [data-field=select] > :first-child { display: none; }
  .uai-mobile-card:not(.uai-expanded) [data-uai-detail],
  .uai-mobile-card:not(.uai-expanded) .uai-duplicate-label { display: none !important; }
  .uai-mobile-card.uai-expanded .uai-mobile-fields { display: flex; flex-direction: column; gap: 12px; }
  .uai-mobile-card.uai-expanded .uai-mobile-fields > [data-field] { flex-direction: row; align-items: flex-start; gap: 10px; }
  .uai-mobile-card.uai-expanded .uai-mobile-fields > [data-field] > :last-child { text-align: right; min-width: 0; }
  .uai-mobile-card.uai-expanded .uai-mobile-fields > [data-field=name] { flex-direction: column; }
  .uai-mobile-card.uai-expanded .uai-mobile-fields > [data-field=name] > :last-child { text-align: left; }
  .uai-mobile-card.uai-expanded button { min-height: 44px; min-width: 44px; }
  .uai-mobile-card.uai-expanded [data-field] > :last-child > .flex { flex-wrap: wrap; }
  .uai-mobile-card .uai-card-toggle {
    display: flex; width: 100%; min-height: 44px; margin-top: 8px; align-items: center; justify-content: center;
    border-top: 1px solid rgb(148 163 184 / 22%); color: #0d9488; font-size: 13px; font-weight: 600;
    border-radius: 0 0 8px 8px; touch-action: manipulation;
  }
  .uai-card-toggle::after { content: '⌄'; margin-left: 8px; font-size: 18px; }
  .uai-expanded > .uai-card-toggle::after { transform: rotate(180deg); }
  .uai-card-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  .dark .uai-card-toggle { color: #5eead4; }
}