@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import './index.css';

/* 响应式样式 */
@media (max-width: 640px) {
  .web-app {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .editor-container {
    max-width: 100%;
    margin: 0;
  }

  .color-picker-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 12px 12px 0 0;
    z-index: 1000;
  }

  .template-selector {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .template-preview {
    min-width: 160px;
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  body {
    @apply bg-gray-900;
  }

  .web-app header,
  .web-app footer {
    @apply bg-gray-800 border-gray-700;
  }

  .web-app h1 {
    @apply text-white;
  }

  .bg-white {
    @apply bg-gray-800;
  }

  .text-gray-900 {
    @apply text-gray-100;
  }

  .text-gray-500 {
    @apply text-gray-400;
  }
}