*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #222; min-height: 100vh; }
  .container { max-width: 1100px; margin: 0 auto; padding: 24px; }

  h1 { font-size: 1.5rem; margin-bottom: 20px; }

  .auth-card { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; padding: 32px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
  .auth-card h2 { font-size: 1.2rem; margin-bottom: 20px; text-align: center; }
  .auth-card .tabs { display: flex; margin-bottom: 20px; border-bottom: 2px solid #eee; }
  .auth-card .tabs button { flex: 1; padding: 10px; border: none; background: none; font-size: .95rem; cursor: pointer; color: #999; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; }
  .auth-card .tabs button.active { color: #2563eb; border-bottom-color: #2563eb; }
  .auth-card input { width: 100%; padding: 10px; margin-bottom: 12px; font-size: .95rem; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; }
  .auth-card button[type="submit"] { width: 100%; padding: 10px; font-size: .95rem; border: none; border-radius: 6px; cursor: pointer; background: #2563eb; color: #fff; font-weight: 600; }
  .auth-card button[type="submit"]:hover { background: #1d4ed8; }
  .auth-card .error { color: #dc2626; font-size: .85rem; text-align: center; margin-bottom: 10px; }

  .app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
  .app-header h1 { margin-bottom: 0; }
  .app-header .user-info { display: flex; align-items: center; gap: 12px; font-size: .85rem; color: #666; }
  .app-header .user-info button { padding: 6px 14px; font-size: .85rem; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; background: #fff; color: #444; }
  .app-header .user-info button:hover { background: #f0f0f0; }

  .upload-zone { border: 2px dashed #aaa; border-radius: 12px; padding: 48px; text-align: center; cursor: pointer; background: #fff; transition: border-color .2s, background .2s; }
  .upload-zone:hover, .upload-zone.dragover { border-color: #2563eb; background: #eff6ff; }
  .upload-zone.has-image { padding: 16px; }
  .upload-zone input { display: none; }

  .previews { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
  .preview-card { flex: 1; min-width: 200px; background: #fff; border-radius: 8px; padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
  .preview-card h3 { font-size: .85rem; color: #666; margin-bottom: 8px; }
  .preview-card img { width: 100%; height: auto; display: block; border-radius: 4px; }

  .controls { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
  .controls textarea { width: 100%; min-height: 60px; padding: 10px; font-size: .95rem; border: 1px solid #ccc; border-radius: 6px; resize: vertical; font-family: inherit; }
  .controls button { padding: 10px 24px; font-size: .95rem; border: none; border-radius: 6px; cursor: pointer; background: #2563eb; color: #fff; font-weight: 600; transition: background .15s; }
  .controls button:hover { background: #1d4ed8; }
  .controls button:disabled { background: #93c5fd; cursor: not-allowed; }
  .controls .row { display: flex; gap: 8px; align-items: flex-start; }

  .model-select { display: flex; gap: 16px; padding: 4px 0; }
  .model-select label { display: flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; color: #444; }
  .model-select input[type="radio"] { accent-color: #2563eb; }
  .model-select label.selected { color: #2563eb; font-weight: 600; }

  .prompt-history { margin-top: 8px; }
  .prompt-history summary { cursor: pointer; font-size: .85rem; color: #666; }
  .prompt-history ul { list-style: none; margin-top: 6px; max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 6px; }
  .prompt-history li { padding: 8px 10px; cursor: pointer; font-size: .85rem; border-bottom: 1px solid #eee; }
  .prompt-history li:hover { background: #f0f4ff; }
  .prompt-history li:last-child { border-bottom: none; }
  .prompt-history .badge { font-size: .7rem; color: #999; margin-left: 6px; }

  .result-area { margin-top: 20px; }
  .result-area img { max-width: 100%; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }

  .spinner { display: none; align-items: center; gap: 10px; padding: 12px 0; color: #666; }
  .spinner.active { display: flex; }
  .spinner::before { content: ''; width: 20px; height: 20px; border: 2px solid #ddd; border-top-color: #2563eb; border-radius: 50%; animation: spin .6s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

  .error { color: #dc2626; font-size: .9rem; padding: 8px 0; }
  .hidden { display: none !important; }

  .suggested-prompts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .suggestion-card { padding: 8px 14px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; font-size: .85rem; background: #fff; transition: all .15s; color: #444; user-select: none; }
  .suggestion-card:hover { border-color: #2563eb; background: #eff6ff; color: #222; }
  .suggestion-card.selected { border-color: #2563eb; background: #2563eb; color: #fff; }

  .star-rating { display: flex; align-items: center; gap: 4px; margin-top: 12px; padding: 8px 0; }
  .star-rating .label { font-size: .85rem; color: #666; margin-right: 4px; }
  .star { cursor: pointer; font-size: 1.4rem; color: #ccc; transition: color .15s; user-select: none; }
  .star.active { color: #f59e0b; }
  .star-rating .rating-text { font-size: .85rem; color: #999; margin-left: 6px; }

  nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: #fff; border-bottom: 1px solid #eee; }
  nav a { text-decoration: none; color: #2563eb; font-weight: 600; font-size: .9rem; margin-right: 16px; }
  nav a:hover { color: #1d4ed8; }
  nav span { font-size: .85rem; color: #666; margin-right: 12px; }
  nav button { padding: 6px 14px; font-size: .85rem; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; background: #fff; color: #444; }
  nav button:hover { background: #f0f0f0; }
  nav > div { display: flex; align-items: center; }

  main { max-width: 1100px; margin: 0 auto; padding: 24px; }

  .hero { text-align: center; padding: 60px 24px; }
  .hero h1 { font-size: 2.5rem; margin-bottom: 16px; }
  .hero p { font-size: 1.1rem; color: #666; margin-bottom: 24px; max-width: 600px; margin-left: auto; margin-right: auto; }
  .btn { display: inline-block; padding: 12px 28px; font-size: 1rem; border: none; border-radius: 8px; cursor: pointer; background: #2563eb; color: #fff; font-weight: 600; text-decoration: none; margin: 4px; }
  .btn:hover { background: #1d4ed8; }
  .btn-secondary { background: #fff; color: #2563eb; border: 1px solid #2563eb; }
  .btn-secondary:hover { background: #eff6ff; }

  .features { display: flex; gap: 24px; margin-top: 40px; flex-wrap: wrap; }
  .feature { flex: 1; min-width: 200px; background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  .feature h3 { font-size: 1.1rem; margin-bottom: 8px; }
  .feature p { font-size: .9rem; color: #666; }

  .profile-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 24px; }
  .profile-card p { margin-bottom: 8px; font-size: .95rem; }

  form input[type="password"], form input[type="email"] { width: 100%; padding: 10px; margin-bottom: 12px; font-size: .95rem; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; }

  .history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
  .history-card { background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  .history-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 6px; cursor: zoom-in; transition: transform .2s ease; }
  .history-card img:hover { object-fit: contain; transform: scale(2); position: relative; z-index: 5; box-shadow: 0 4px 12px rgba(0,0,0,.15); background: #fff; border-radius: 0; }
  .history-card .prompt { font-size: .85rem; margin-top: 8px; color: #333; }
  .history-card .history-stars { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
  .history-card .history-stars .star { font-size: 1.1rem; cursor: pointer; }
  .history-card .history-stars .star-text { font-size: .8rem; color: #999; margin-left: 4px; }
  .history-card .date { font-size: .75rem; color: #999; margin-top: 4px; }
  .history-card .download-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; width: 32px; height: 32px; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; background: #fff; color: #666; text-decoration: none; }
  .history-card .download-btn:hover { background: #f0f0f0; color: #333; }

  footer { text-align: center; padding: 24px; color: #999; font-size: .8rem; }

  table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin-bottom: 24px; }
  th, td { padding: 10px 14px; text-align: left; font-size: .85rem; border-bottom: 1px solid #eee; }
  th { background: #f9fafb; font-weight: 600; color: #444; }
  td button { padding: 4px 12px; font-size: .8rem; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; background: #fff; color: #444; }
  td button:hover { background: #f0f0f0; }

  .profile-card p { margin-bottom: 8px; font-size: .95rem; }
  form input[type="text"], form input[type="email"], form input[type="password"], form textarea { width: 100%; padding: 10px; margin-bottom: 12px; font-size: .95rem; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; }
  form button[type="submit"] { padding: 10px 24px; font-size: .95rem; border: none; border-radius: 6px; cursor: pointer; background: #2563eb; color: #fff; font-weight: 600; }
  form button[type="submit"]:hover { background: #1d4ed8; }

  .flash { padding: 12px 24px; border-radius: 8px; font-size: .95rem; font-weight: 500; text-align: center; margin-bottom: 20px; }
  .flash.success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
  .flash.error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }