/* ============================================================
   idée littéraire — pixel-perfect CSS port of the React/Tailwind app
   ============================================================ */

:root {
  /* Tailwind palette (subset used by the React app) */
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --blue-50: #eff6ff;
  --blue-400: #60a5fa;
  --blue-600: #2563eb;

  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;

  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;

  --red-50: #fef2f2;
  --red-200: #fecaca;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;

  --green-50: #f0fdf4;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;

  --amber-50: #fffbeb;
  --amber-200: #fde68a;
  --amber-600: #d97706;

  --yellow-400: #facc15;
  --yellow-600: #ca8a04;

  /* Tailwind shadow tokens */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Tailwind radii */
  --rounded: 0.25rem;
  --rounded-md: 0.375rem;
  --rounded-lg: 0.5rem;
  --rounded-xl: 0.75rem;
  --rounded-2xl: 1rem;
  --rounded-full: 9999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-800);
  background: linear-gradient(to bottom right, var(--blue-50), var(--indigo-50));
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ---------- Icons ---------- */
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon svg { width: 1.25rem; height: 1.25rem; }
.icon-indigo svg { color: var(--indigo-600); }
.icon-gray svg { color: var(--gray-500); }
.icon-green svg { color: var(--green-500); }
.icon-chev svg { transition: transform 0.2s; }
.icon-chev.rotate svg { transform: rotate(180deg); }
.spin svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1);} 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1);} }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }
.animate-spin { animation: spin 1s linear infinite; }

/* ---------- Header ---------- */
.app-header { margin-bottom: 1rem; }
@media (min-width: 640px) { .app-header { margin-bottom: 1.5rem; } }
@media (min-width: 1024px) { .app-header { margin-bottom: 2rem; } }

.header-mobile {
  display: flex; align-items: center; justify-content: space-between; height: 3rem;
}
.header-mobile .header-logo-mobile { height: 2rem; }
.header-desktop { display: none; align-items: center; justify-content: space-between; gap: 1rem; }
.header-desktop .header-logo-desktop { height: 2.5rem; }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }

@media (min-width: 640px) {
  .header-mobile { display: none; }
  .header-desktop { display: flex; }
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0.5rem;
  border-radius: var(--rounded-lg); color: var(--gray-600);
  transition: background-color 0.15s;
}
.icon-btn:hover { background: var(--gray-100); }
.icon-btn svg { width: 1.5rem; height: 1.5rem; }

/* ---------- Avatar gradient ---------- */
.avatar-gradient {
  width: 2.5rem; height: 2.5rem; border-radius: var(--rounded-full);
  background: linear-gradient(to right, var(--indigo-500), var(--purple-500));
  display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0;
}
.avatar-gradient svg { width: 1.25rem; height: 1.25rem; color: white; }
.avatar-sm { width: 2rem; height: 2rem; }
.avatar-sm svg { width: 1rem; height: 1rem; }

/* ---------- User menu (desktop dropdown) ---------- */
.user-menu { position: relative; }
.user-menu-btn {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem;
  border-radius: var(--rounded-lg); background: transparent; border: 0; transition: background-color 0.15s;
}
.user-menu-btn:hover { background: var(--gray-100); }
.user-menu-info { text-align: left; min-width: 0; }
.user-menu-email { font-size: 0.95rem; color: var(--gray-700); margin: 0; font-weight: 500; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-access { font-size: 0.875rem; color: var(--indigo-600); margin: 0; font-weight: 500; }
@media (max-width: 767px) { .user-menu-info { display: none; } }

.user-menu-dropdown {
  position: absolute; right: 0; top: 100%; margin-top: 0.5rem;
  background: white; border-radius: var(--rounded-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200); padding: 0.5rem 0; min-width: 12rem; max-width: 17.5rem; z-index: 50;
}
.user-menu-dropdown-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-100); }
.user-menu-action {
  width: 100%; text-align: left; padding: 0.75rem 1rem;
  background: transparent; border: 0; display: flex; align-items: center; gap: 0.75rem;
  color: var(--gray-700); transition: background-color 0.15s;
}
.user-menu-action:hover { background: var(--gray-50); }
.user-menu-action svg { width: 1rem; height: 1rem; }

/* ---------- Language menu ---------- */
.lang-menu { position: relative; }
.lang-menu-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; border-radius: var(--rounded-lg); background: transparent; border: 0; transition: background-color 0.15s; }
.lang-menu-btn:hover { background: var(--gray-100); }
.lang-menu-btn svg { width: 1.25rem; height: 1.25rem; color: var(--gray-600); }
.lang-menu-flag { font-size: 1.125rem; }
.lang-menu-dropdown {
  position: absolute; right: 0; top: 100%; margin-top: 0.5rem;
  background: white; border-radius: var(--rounded-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-200); padding: 0.5rem 0; min-width: 10rem; z-index: 50;
}
.lang-menu-item {
  width: 100%; text-align: left; padding: 0.5rem 1rem;
  background: transparent; border: 0; display: flex; align-items: center; gap: 0.75rem;
  color: var(--gray-700); transition: background-color 0.15s;
}
.lang-menu-item:hover { background: var(--gray-50); }
.lang-menu-item.active { background: var(--indigo-50); color: var(--indigo-600); }
.lang-flag { font-size: 1.125rem; }
.lang-name { font-weight: 500; }

/* ---------- Mobile menu overlay ---------- */
.mobile-menu-overlay { position: fixed; inset: 0; z-index: 50; }
@media (min-width: 640px) { .mobile-menu-overlay { display: none; } }
.mobile-menu-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); backdrop-filter: blur(4px); }
.mobile-menu-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: 20rem; max-width: 85vw;
  background: white; box-shadow: var(--shadow-2xl); overflow-y: auto;
}
.mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem; border-bottom: 1px solid var(--gray-200);
}
.mobile-menu-user { display: flex; align-items: center; gap: 0.75rem; }
.mobile-menu-email { font-size: 0.875rem; font-weight: 500; color: var(--gray-800); margin: 0; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-menu-access { font-size: 0.75rem; color: var(--indigo-600); margin: 0; font-weight: 500; }
.mobile-menu-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu-section { display: flex; flex-direction: column; gap: 0.75rem; }
.mobile-menu-section-title { font-size: 0.875rem; font-weight: 600; color: var(--gray-800); display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.25rem 0; }
.mobile-menu-section-title svg { width: 1rem; height: 1rem; }
.mobile-menu-langs { display: flex; flex-direction: column; gap: 0.5rem; }
.mobile-menu-item {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; padding: 0.75rem; text-align: left;
  background: transparent; border: 0; border-radius: var(--rounded-lg);
  color: var(--gray-700); transition: background-color 0.15s;
}
.mobile-menu-item:hover { background: var(--gray-50); }
.mobile-menu-item.active { background: var(--indigo-50); color: var(--indigo-600); border: 1px solid var(--indigo-200); }
.mobile-menu-item.danger { color: var(--red-600); }
.mobile-menu-item.danger:hover { background: var(--red-50); }
.mobile-menu-item svg { width: 1rem; height: 1rem; }

/* ---------- App shell ---------- */
.app-shell { min-height: 100vh; }
.app-shell-inner { max-width: 80rem; margin: 0 auto; }
.app-card { background: white; box-shadow: var(--shadow-xl); padding: 1rem; }
@media (min-width: 640px) { .app-card { padding: 1.5rem; } }
@media (min-width: 1024px) { .app-card { padding: 2rem; } }
.app-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .app-grid { gap: 2rem; } }
@media (min-width: 1024px) { .app-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.app-col-right { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) { .app-col-right { padding-left: 1.5rem; gap: 3rem; } }
.history-spacer { padding-top: 2rem; }
@media (min-width: 1024px) { .history-spacer { padding-top: 2rem; } }

/* ---------- Common cards ---------- */
.toast-root { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; }
.toast {
  padding: 0.75rem 1rem; border-radius: var(--rounded-lg); background: white;
  box-shadow: var(--shadow-lg); font-size: 0.95rem; color: var(--gray-800);
  border-left: 4px solid var(--indigo-500);
  opacity: 0; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { border-left-color: var(--red-500); color: var(--red-700); }
.toast-success { border-left-color: var(--green-500); }

.alert { padding: 0.75rem 1rem; border-radius: var(--rounded-lg); margin-bottom: 1rem; font-size: 0.95rem; }
.alert-error { background: var(--red-50); color: var(--red-600); border: 1px solid var(--red-200); }
.alert-success { background: var(--green-50); color: var(--green-600); border: 1px solid #bbf7d0; }

.form-label { font-size: 0.875rem; line-height: 1.5; font-weight: 500; color: var(--gray-700); display: block; margin-bottom: 0.5rem; }
.muted { color: var(--gray-500); font-size: 0.875rem; }

.content-text { font-size: 1rem; line-height: 1.7; color: var(--gray-700); white-space: pre-wrap; word-break: break-word; }
.content-title { font-size: 1.1875rem; line-height: 1.4; font-weight: 600; color: var(--gray-900); }
@media (max-width: 640px) {
  .content-text { font-size: 0.9375rem; line-height: 1.6; }
  .content-title { font-size: 1.0625rem; }
}

/* ============================================================
   Genre Selector (gs-)
   ============================================================ */
.gs { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .gs { gap: 1rem; } }
@media (min-width: 1024px) { .gs { gap: 1.5rem; } }

.gs-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.gs-title-wrap { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; }
.gs-title { font-size: 1.125rem; font-weight: 600; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) { .gs-title { font-size: 1.5rem; } }
.gs-count { font-size: 0.875rem; font-weight: 500; color: var(--gray-600); white-space: nowrap; }
@media (min-width: 640px) { .gs-count { font-size: 1.125rem; } }

.gs-reset-btn {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem;
  background: transparent; border: 0; color: var(--gray-600); border-radius: var(--rounded-lg);
  transition: background-color 0.15s, color 0.15s; flex-shrink: 0;
}
.gs-reset-btn:hover { color: var(--red-600); background: var(--red-50); }
.gs-reset-label { display: none; }
@media (min-width: 1024px) { .gs-reset-label { display: inline; } }

.gs-search-card { background: white; border-radius: var(--rounded-lg); border: 1px solid var(--gray-200); padding: 0.75rem; }
@media (min-width: 640px) { .gs-search-card { padding: 1rem; } }
@media (min-width: 1024px) { .gs-search-card { padding: 1.5rem; } }
.gs-search-wrap { position: relative; margin-bottom: 1rem; }
.gs-search-input {
  width: 100%; padding: 0.75rem 3rem 0.75rem 2.5rem;
  border: 1px solid var(--gray-200); border-radius: var(--rounded-lg);
  font-size: 0.9375rem; line-height: 1.5; outline: none;
  transition: box-shadow 0.15s, border-color 0.15s;
}
@media (min-width: 640px) { .gs-search-input { padding: 1rem 3rem 1rem 3rem; font-size: 1rem; } }
.gs-search-input:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 2px rgb(99 102 241 / 0.25); }
.gs-search-icon { position: absolute; left: 0.75rem; top: 0.75rem; }
.gs-search-icon svg { width: 1rem; height: 1rem; color: var(--gray-400); }
@media (min-width: 640px) { .gs-search-icon { left: 1rem; top: 1rem; } .gs-search-icon svg { width: 1.25rem; height: 1.25rem; } }
.gs-search-clear { position: absolute; right: 0.75rem; top: 0.75rem; background: transparent; border: 0; color: var(--gray-400); transition: color 0.15s; }
.gs-search-clear:hover { color: var(--gray-600); }
@media (min-width: 640px) { .gs-search-clear { right: 1rem; top: 1rem; } }
.gs-search-clear svg { width: 1rem; height: 1rem; }

.gs-search-info { margin-bottom: 1rem; }
.gs-search-info-row { display: flex; align-items: center; justify-content: space-between; }
.gs-search-info-left { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--gray-700); }
.gs-search-link { font-size: 0.875rem; color: var(--indigo-600); background: transparent; border: 0; transition: color 0.15s; }
.gs-search-link:hover { color: var(--indigo-700); }
.gs-search-hint { font-size: 0.75rem; color: var(--gray-500); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.gs-search-hint svg { width: 0.75rem; height: 0.75rem; }

.gs-selected-card { background: linear-gradient(to right, var(--indigo-50), var(--purple-50)); border: 1px solid var(--indigo-200); border-radius: var(--rounded-lg); padding: 0.75rem; }
@media (min-width: 640px) { .gs-selected-card { padding: 1rem; } }
@media (min-width: 1024px) { .gs-selected-card { padding: 1.5rem; } }
.gs-selected-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
@media (min-width: 640px) { .gs-selected-title { margin-bottom: 1rem; } }
.gs-selected-title h3 { font-size: 1rem; font-weight: 600; color: var(--gray-800); }
@media (min-width: 640px) { .gs-selected-title h3 { font-size: 1.125rem; } }
.gs-selected-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (min-width: 640px) { .gs-selected-chips { gap: 0.75rem; } }
.gs-selected-chip {
  display: flex; align-items: center; gap: 0.5rem; background: white; border: 1px solid var(--indigo-200);
  border-radius: var(--rounded-lg); padding: 0.5rem 0.75rem; box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s; font-weight: 500; color: var(--gray-700); font-size: 0.875rem;
}
@media (min-width: 640px) { .gs-selected-chip { padding: 0.625rem 1rem; font-size: 1rem; } }
.gs-selected-chip:hover { box-shadow: var(--shadow-md); }
.gs-selected-x { background: transparent; border: 0; color: var(--gray-400); padding: 0.125rem; border-radius: var(--rounded-full); transition: color 0.15s, background-color 0.15s; display: inline-flex; }
.gs-selected-x:hover { color: var(--red-500); background: var(--red-50); }
.gs-selected-x svg { width: 0.75rem; height: 0.75rem; }
@media (min-width: 640px) { .gs-selected-x svg { width: 1rem; height: 1rem; } }
.gs-max-reached { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; color: var(--amber-600); background: var(--amber-50); border: 1px solid var(--amber-200); border-radius: var(--rounded-lg); padding: 0.75rem; }
.gs-max-reached span { font-size: 0.875rem; font-weight: 500; }
@media (min-width: 640px) { .gs-max-reached span { font-size: 1rem; } }

.gs-results-card { background: white; border-radius: var(--rounded-lg); border: 1px solid var(--gray-200); overflow: hidden; }
.gs-no-results { padding: 1.5rem; text-align: center; }
.gs-no-results svg { width: 2.5rem; height: 2.5rem; color: var(--gray-300); margin: 0 auto 0.75rem; }
.gs-no-results-title { color: var(--gray-500); font-size: 0.875rem; margin: 0 0 0.5rem 0; }
.gs-no-results-sub { color: var(--gray-400); font-size: 0.75rem; margin: 0; }
.gs-results-list { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; }
@media (min-width: 640px) { .gs-results-list { gap: 1rem; padding: 1.5rem; } }
.gs-result-row, .gs-item-row {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.75rem; border-radius: var(--rounded-lg);
  border: 1px solid var(--gray-100); transition: background-color 0.15s;
  cursor: pointer;
}
@media (min-width: 640px) { .gs-result-row, .gs-item-row { gap: 1rem; padding: 1rem; } }
.gs-result-row:hover, .gs-item-row:hover { background: var(--gray-50); }
.gs-checkbox-wrap { position: relative; flex-shrink: 0; margin-top: 0.25rem; }
.gs-checkbox {
  width: 1.25rem; height: 1.25rem; border-radius: var(--rounded);
  border: 2px solid var(--gray-300); background: white;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.2s, border-color 0.2s;
}
@media (min-width: 640px) { .gs-checkbox { width: 1.5rem; height: 1.5rem; } }
.gs-result-row:hover .gs-checkbox, .gs-item-row:hover .gs-checkbox { border-color: var(--indigo-400); }
.gs-checkbox.checked { background: var(--indigo-600); border-color: var(--indigo-600); }
.gs-checkbox svg { width: 0.75rem; height: 0.75rem; color: white; }
@media (min-width: 640px) { .gs-checkbox svg { width: 1rem; height: 1rem; } }
.gs-result-body, .gs-item-body { flex: 1; min-width: 0; }
.gs-result-name, .gs-item-name { font-weight: 500; color: var(--gray-700); font-size: 0.875rem; }
@media (min-width: 640px) { .gs-result-name, .gs-item-name { font-size: 1rem; } }
.gs-result-row:hover .gs-result-name, .gs-item-row:hover .gs-item-name { color: var(--indigo-600); }
.gs-result-desc, .gs-item-desc { color: var(--gray-500); font-size: 0.875rem; margin: 0.25rem 0 0; }
@media (min-width: 640px) { .gs-result-desc, .gs-item-desc { font-size: 1rem; } }
.gs-result-cat { font-size: 0.75rem; color: var(--gray-400); margin-top: 0.25rem; }

/* Category tree */
.gs-cat-card { background: white; border-radius: var(--rounded-lg); border: 1px solid var(--gray-200); overflow: hidden; margin-bottom: 0.75rem; }
.gs-main-btn { width: 100%; padding: 0.75rem; background: var(--gray-50); border: 0; display: flex; align-items: center; justify-content: space-between; text-align: left; transition: background-color 0.15s; }
@media (min-width: 640px) { .gs-main-btn { padding: 1.25rem; } }
.gs-main-btn:hover { background: var(--gray-100); }
.gs-main-title { font-size: 1rem; font-weight: 600; color: var(--gray-800); }
@media (min-width: 640px) { .gs-main-title { font-size: 1.25rem; } }
.gs-main-desc { color: var(--gray-600); font-size: 0.875rem; margin: 0.125rem 0 0 0; }
@media (min-width: 640px) { .gs-main-desc { font-size: 1rem; } }
.gs-sub-list > .gs-sub + .gs-sub { border-top: 1px solid var(--gray-200); }
.gs-sub-btn { width: 100%; padding: 0.75rem; background: white; border: 0; display: flex; align-items: center; justify-content: space-between; text-align: left; transition: background-color 0.15s; }
@media (min-width: 640px) { .gs-sub-btn { padding: 1.25rem; } }
.gs-sub-btn:hover { background: var(--gray-50); }
.gs-sub-name { font-weight: 500; color: var(--gray-700); font-size: 0.875rem; }
@media (min-width: 640px) { .gs-sub-name { font-size: 1rem; } }
.gs-sub-desc { color: var(--gray-600); font-size: 0.875rem; margin: 0.125rem 0 0 0; }
@media (min-width: 640px) { .gs-sub-desc { font-size: 1rem; } }
.gs-items { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1rem 1rem 1rem; background: var(--gray-50); }
@media (min-width: 640px) { .gs-items { gap: 1rem; padding: 1.25rem 1.25rem 1.25rem 2rem; } }
.gs-items .gs-item-row { padding: 0; border: 0; }
.gs-items .gs-item-row:hover { background: transparent; }

/* ============================================================
   Generation Options (go-)
   ============================================================ */
.go { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .go { gap: 1.5rem; } }
@media (min-width: 1024px) { .go { gap: 2rem; } }

.go-title { font-size: 1.125rem; font-weight: 600; color: var(--gray-800); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .go-title { font-size: 1.5rem; margin-bottom: 1.5rem; } }

.go-section-card { background: white; border-radius: var(--rounded-lg); border: 1px solid var(--gray-200); padding: 1rem; margin-bottom: 0.75rem; }
@media (min-width: 640px) { .go-section-card { padding: 1.5rem; margin-bottom: 1rem; } }
.go-section-title { font-size: 1rem; font-weight: 500; color: var(--gray-800); margin-bottom: 0.75rem; }
@media (min-width: 640px) { .go-section-title { font-size: 1.25rem; margin-bottom: 1.25rem; } }

.go-options-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .go-options-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } }
.go-option-row {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem;
  border-radius: var(--rounded-lg); border: 1px solid var(--gray-100);
  cursor: pointer; transition: background-color 0.15s;
}
@media (min-width: 640px) { .go-option-row { gap: 1rem; padding: 1rem; } }
.go-option-row:hover { background: var(--gray-50); }
.go-radio { width: 1rem; height: 1rem; margin-top: 0.125rem; accent-color: var(--indigo-600); }
@media (min-width: 640px) { .go-radio { width: 1.25rem; height: 1.25rem; } }
.go-radio-purple { accent-color: var(--purple-600); }
.go-option-body { flex: 1; }
.go-option-label { font-weight: 500; color: var(--gray-700); font-size: 0.875rem; display: block; }
@media (min-width: 640px) { .go-option-label { font-size: 1rem; } }
.go-option-desc { color: var(--gray-500); font-size: 0.75rem; margin: 0.25rem 0 0 0; }
@media (min-width: 640px) { .go-option-desc { font-size: 0.875rem; } }

.go-number-label { display: block; }
.go-number-input {
  margin-top: 0.5rem; display: block; width: 6rem; padding: 0.5rem;
  border: 1px solid var(--gray-300); border-radius: var(--rounded-md); box-shadow: var(--shadow-sm);
  font-size: 0.875rem; outline: none;
}
.go-number-input:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 2px rgb(99 102 241 / 0.2); }
@media (min-width: 640px) { .go-number-input { width: 8rem; padding: 0.75rem; font-size: 1rem; } }

.go-actions { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .go-actions { gap: 1rem; } }
@media (min-width: 1024px) { .go-actions { gap: 1.5rem; } }

.go-generate-btn {
  width: 100%; padding: 1rem; border: 0; border-radius: var(--rounded-lg);
  background: linear-gradient(to right, var(--indigo-600), var(--purple-600)); color: white;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 500; font-size: 1rem; transition: opacity 0.15s, box-shadow 0.15s;
}
@media (min-width: 640px) { .go-generate-btn { padding: 1.25rem; gap: 0.75rem; font-size: 1.125rem; } }
.go-generate-btn:hover:not(:disabled) { opacity: 0.9; }
.go-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.go-regen-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.go-regen-toggle {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem; background: transparent; border: 0; color: var(--gray-700); font-size: 0.875rem;
  transition: color 0.15s; border-radius: var(--rounded-lg);
}
@media (min-width: 640px) { .go-regen-toggle { padding: 1rem; font-size: 1rem; } }
.go-regen-toggle:hover { color: var(--purple-600); }
.go-regen-toggle > div { display: flex; align-items: center; gap: 0.5rem; }
.go-regen-panel { background: white; border-radius: var(--rounded-lg); border: 1px solid var(--gray-200); padding: 1rem; }
@media (min-width: 640px) { .go-regen-panel { padding: 1.5rem; } }
.go-regen-btn {
  width: 100%; padding: 1rem; border: 0; border-radius: var(--rounded-lg);
  background: #7700DE; color: white;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 500; font-size: 1rem; transition: opacity 0.15s; margin-top: 1rem;
}
@media (min-width: 640px) { .go-regen-btn { padding: 1.25rem; font-size: 1.125rem; } }
.go-regen-btn:hover:not(:disabled) { opacity: 0.9; }
.go-regen-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.go-output-card { background: white; border-radius: var(--rounded-lg); border: 1px solid var(--gray-200); padding: 1rem; }
@media (min-width: 640px) { .go-output-card { padding: 1.5rem; } }
.go-output-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
@media (min-width: 640px) { .go-output-header { margin-bottom: 1.25rem; } }
.go-output-title { font-size: 1rem; font-weight: 600; color: var(--gray-800); display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .go-output-title { font-size: 1.25rem; } }
.go-style-badge { font-size: 0.875rem; font-weight: 500; color: var(--purple-600); background: var(--purple-50); padding: 0.25rem 0.5rem; border-radius: var(--rounded-full); }
.go-copy-btn { background: transparent; border: 0; padding: 0.5rem; color: var(--gray-500); border-radius: var(--rounded-lg); transition: color 0.15s, background-color 0.15s; }
@media (min-width: 640px) { .go-copy-btn { padding: 0.75rem; } }
.go-copy-btn:hover { color: var(--indigo-600); background: var(--indigo-50); }
.go-output-stack { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .go-output-stack { gap: 1rem; } }

/* ============================================================
   Generation History (hi-)
   ============================================================ */
.hi { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
@media (min-width: 640px) { .hi { gap: 1rem; } }
@media (min-width: 1024px) { .hi { gap: 1.5rem; } }
.hi-title-wrap { display: flex; align-items: center; gap: 0.5rem; }
.hi-title { font-size: 1.125rem; font-weight: 600; color: var(--gray-800); }
@media (min-width: 640px) { .hi-title { font-size: 1.5rem; } }

.hi-card { background: white; border-radius: var(--rounded-lg); border: 1px solid var(--gray-200); padding: 1rem; width: 100%; }
@media (min-width: 640px) { .hi-card { padding: 1.5rem; } }
.hi-search-wrap { position: relative; margin-bottom: 1rem; }
.hi-search-input {
  width: 100%; padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 1px solid var(--gray-200); border-radius: var(--rounded-lg);
  font-size: 0.9375rem; outline: none; transition: box-shadow 0.15s, border-color 0.15s;
}
@media (min-width: 640px) { .hi-search-input { padding: 1rem 1rem 1rem 3rem; font-size: 1rem; } }
.hi-search-input:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 2px rgb(99 102 241 / 0.25); }
.hi-search-icon { position: absolute; left: 0.75rem; top: 0.75rem; }
.hi-search-icon svg { width: 1rem; height: 1rem; color: var(--gray-400); }
@media (min-width: 640px) { .hi-search-icon { left: 1rem; top: 1rem; } .hi-search-icon svg { width: 1.25rem; height: 1.25rem; } }
.hi-search-count { position: absolute; right: 0.75rem; top: 0.75rem; font-size: 0.75rem; color: var(--gray-500); background: var(--gray-100); padding: 0.25rem 0.5rem; border-radius: var(--rounded); }

.hi-filter-row { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .hi-filter-row { flex-direction: row; gap: 1rem; } }
.hi-select { flex: 1; padding: 0.625rem 0.75rem; border: 1px solid var(--gray-200); border-radius: var(--rounded-lg); font-size: 0.875rem; outline: none; background: white; }
@media (min-width: 640px) { .hi-select { padding: 0.75rem 1rem; font-size: 1rem; } }
.hi-select:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 2px rgb(99 102 241 / 0.2); }

.hi-genre-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.hi-genre-chip { padding: 0.25rem 0.5rem; background: var(--gray-50); color: var(--gray-700); border: 1px solid var(--gray-200); border-radius: var(--rounded-full); font-size: 0.75rem; transition: background-color 0.15s; }
@media (min-width: 640px) { .hi-genre-chip { padding: 0.5rem 0.75rem; font-size: 0.875rem; } }
.hi-genre-chip:hover { background: var(--gray-100); }
.hi-genre-chip.active { background: var(--indigo-50); color: var(--indigo-700); border-color: var(--indigo-200); }
.hi-more-btn { padding: 0.25rem 0.5rem; background: white; color: var(--indigo-600); border: 1px solid var(--gray-200); border-radius: var(--rounded-full); font-size: 0.75rem; transition: background-color 0.15s; }
@media (min-width: 640px) { .hi-more-btn { padding: 0.5rem 0.75rem; font-size: 0.875rem; } }
.hi-more-btn:hover { background: var(--indigo-50); }

.hi-body { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .hi-body { gap: 1.5rem; } }

.hi-empty { background: white; border-radius: var(--rounded-lg); border: 1px solid var(--gray-200); padding: 1.5rem; text-align: center; }
.hi-empty svg { width: 2.5rem; height: 2.5rem; color: var(--gray-300); margin: 0 auto 0.75rem; }
.hi-empty p { color: var(--gray-500); margin: 0 0 0.5rem; font-size: 0.875rem; }
.hi-empty-sub { color: var(--gray-400); font-size: 0.75rem; margin-top: 0.5rem; }

.hi-item { background: white; border-radius: var(--rounded-lg); border: 1px solid var(--gray-200); padding: 0.75rem; transition: box-shadow 0.15s; }
@media (min-width: 640px) { .hi-item { padding: 1rem; } }
@media (min-width: 1024px) { .hi-item { padding: 1.5rem; } }
.hi-item:hover { box-shadow: var(--shadow-md); }
.hi-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.hi-item-meta { font-size: 0.8125rem; color: var(--gray-500); display: flex; flex-direction: column; }
.hi-item-date { color: var(--gray-600); }
.hi-item-meta-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.hi-item-mode { font-weight: 500; color: var(--indigo-600); font-size: 0.75rem; }
@media (min-width: 640px) { .hi-item-mode { font-size: 0.875rem; } }
.hi-item-style { font-weight: 500; color: var(--purple-600); font-size: 0.75rem; }
@media (min-width: 640px) { .hi-item-style { font-size: 0.875rem; } }
.hi-meta-dot { color: var(--gray-400); }
.hi-item-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
@media (min-width: 640px) { .hi-item-actions { gap: 0.5rem; } }
.hi-action {
  background: transparent; border: 0; padding: 0.375rem; color: var(--gray-400);
  border-radius: var(--rounded-full); transition: color 0.15s, background-color 0.15s;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width: 640px) { .hi-action { padding: 0.5rem; } }
.hi-action svg { width: 1rem; height: 1rem; }
@media (min-width: 640px) { .hi-action svg { width: 1.25rem; height: 1.25rem; } }
.hi-action-purple:hover { color: var(--purple-500); background: var(--purple-50); }
.hi-action-indigo:hover { color: var(--indigo-500); background: var(--indigo-50); }
.hi-action-red:hover { color: var(--red-500); background: var(--red-50); }

.hi-item-genres { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }
@media (min-width: 640px) { .hi-item-genres { gap: 0.5rem; } }
.hi-item-genre-chip { padding: 0.25rem 0.5rem; background: var(--gray-50); color: var(--gray-700); border: 1px solid var(--gray-200); border-radius: var(--rounded-full); font-size: 0.75rem; }
@media (min-width: 640px) { .hi-item-genre-chip { padding: 0.375rem 0.75rem; font-size: 0.875rem; } }
.hi-item-title { font-size: 1.0625rem; font-weight: 600; color: var(--gray-900); margin-bottom: 0.75rem; word-break: break-word; }
@media (min-width: 640px) { .hi-item-title { font-size: 1.1875rem; } }

.hi-toggle-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: 0; color: var(--indigo-600); transition: color 0.15s; padding: 0; font-size: 0.875rem; margin-bottom: 0.75rem; }
@media (min-width: 640px) { .hi-toggle-btn { font-size: 1rem; } }
.hi-toggle-btn:hover { color: var(--indigo-700); }
.hi-toggle-btn svg { width: 1rem; height: 1rem; }
@media (min-width: 640px) { .hi-toggle-btn svg { width: 1.25rem; height: 1.25rem; } }
.hi-item-content { padding-top: 0.75rem; border-top: 1px solid var(--gray-200); }

.hi-pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .hi-pagination { gap: 0.75rem; margin-top: 2rem; } }
.hi-page-btn { padding: 0.5rem 0.75rem; background: white; color: var(--gray-700); border: 0; border-radius: var(--rounded-lg); font-size: 0.875rem; transition: background-color 0.15s; }
@media (min-width: 640px) { .hi-page-btn { padding: 0.5rem 1rem; font-size: 1rem; } }
.hi-page-btn:hover:not(:disabled) { background: var(--gray-50); }
.hi-page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hi-page-first, .hi-page-last { display: none; }
@media (min-width: 1280px) { .hi-page-first, .hi-page-last { display: block; } }
.hi-page-indicator { padding: 0.5rem 0.75rem; background: var(--indigo-600); color: white; border-radius: var(--rounded-lg); font-size: 0.875rem; font-weight: 500; }
@media (min-width: 640px) { .hi-page-indicator { padding: 0.5rem 1.25rem; font-size: 1rem; } }
.hi-page-mobile { display: inline; }
.hi-page-tablet, .hi-page-desktop { display: none; }
@media (min-width: 640px) { .hi-page-mobile { display: none; } .hi-page-tablet { display: inline; } }
@media (min-width: 1280px) { .hi-page-tablet { display: none; } .hi-page-desktop { display: inline; } }

/* ============================================================
   Auth pages (signin/signup/forgot/reset/change)
   ============================================================ */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0.75rem; }
@media (min-width: 640px) { .auth-shell { padding: 1rem; } }
.auth-card-wide { width: 100%; max-width: 32rem; margin-left: auto; margin-right: auto; }
.auth-lang-row { display: flex; justify-content: flex-end; margin-bottom: 1rem; }

.auth-card-modern {
  background: white; border-radius: var(--rounded-2xl);
  box-shadow: var(--shadow-2xl); border: 1px solid var(--gray-100);
  overflow: hidden;
}
.auth-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(to bottom right, var(--purple-600), var(--indigo-600), var(--blue-600));
  padding: 3rem 1.5rem; text-align: center; color: white;
}
@media (min-width: 640px) { .auth-hero { padding: 4rem 2rem; } }
.auth-hero-decorations { position: absolute; inset: 0; pointer-events: none; }
.auth-deco { position: absolute; }
.auth-deco-1 { top: 1rem; left: 1rem; width: 2rem; height: 2rem; border: 2px solid rgb(255 255 255 / 0.2); border-radius: var(--rounded-full); animation: pulse 2s infinite; }
.auth-deco-2 { top: 2rem; right: 2rem; width: 1rem; height: 1rem; background: rgb(255 255 255 / 0.2); border-radius: var(--rounded-full); animation: bounce 1s infinite; animation-delay: 0.5s; }
.auth-deco-3 { bottom: 1.5rem; left: 2rem; width: 1.5rem; height: 1.5rem; border: 2px solid rgb(255 255 255 / 0.2); transform: rotate(45deg); animation: pulse 2s infinite; animation-delay: 1s; }
.auth-deco-4 { bottom: 1rem; right: 1rem; width: 0.75rem; height: 0.75rem; background: rgb(255 255 255 / 0.3); border-radius: var(--rounded-full); animation: bounce 1s infinite; animation-delay: 1.5s; }
.auth-deco-5 { top: 50%; left: 25%; width: 0.5rem; height: 0.5rem; background: rgb(255 255 255 / 0.2); border-radius: var(--rounded-full); animation: ping 1s infinite; animation-delay: 2s; }
.auth-deco-6 { top: 33%; right: 25%; width: 0.5rem; height: 0.5rem; background: rgb(255 255 255 / 0.2); border-radius: var(--rounded-full); animation: ping 1s infinite; animation-delay: 2.5s; }
.auth-hero-inner { position: relative; z-index: 10; }
.auth-hero-logo { height: 2rem; margin: 0 auto 1.5rem auto; filter: brightness(0) invert(1); display: block; }
@media (min-width: 640px) { .auth-hero-logo { height: 2.5rem; margin-bottom: 2rem; } }
.auth-hero-title { font-size: 1.625rem; font-weight: 700; margin: 0 0 1rem 0; }
@media (min-width: 640px) { .auth-hero-title { font-size: 1.875rem; margin-bottom: 1.25rem; } }
.auth-hero-sub { color: rgb(255 255 255 / 0.9); font-size: 1rem; line-height: 1.6; max-width: 28rem; margin: 0 auto; }
@media (min-width: 640px) { .auth-hero-sub { font-size: 1.125rem; } }
.auth-tabs { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
@media (min-width: 640px) { .auth-tabs { gap: 0.75rem; } }
.auth-tab {
  padding: 0.5rem 1rem; border-radius: var(--rounded-lg); font-weight: 500; font-size: 0.875rem;
  background: rgb(255 255 255 / 0.2); color: white; border: 0; transition: background-color 0.2s, color 0.2s;
}
@media (min-width: 640px) { .auth-tab { padding: 0.75rem 1.5rem; font-size: 1rem; } }
.auth-tab:hover { background: rgb(255 255 255 / 0.3); }
.auth-tab.active { background: white; color: var(--gray-900); box-shadow: var(--shadow-lg); }

.auth-body { padding: 1.5rem; }
@media (min-width: 640px) { .auth-body { padding: 2rem; } }
.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 640px) { .auth-form { gap: 1.5rem; } }
.auth-field { display: flex; flex-direction: column; gap: 0.5rem; }
.auth-label { font-size: 1rem; font-weight: 600; color: var(--gray-700); }
.auth-input-wrap { position: relative; }
.auth-input {
  display: block; width: 100%; padding: 1rem 1rem 1rem 1rem;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--rounded-xl);
  font-size: 1rem; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; outline: none;
  color: var(--gray-900);
}
@media (min-width: 640px) { .auth-input { padding: 1.25rem 1.25rem 1.25rem 1.25rem; font-size: 1.125rem; } }
.auth-input:focus { background: white; border-color: var(--purple-500); box-shadow: 0 0 0 2px rgb(168 85 247 / 0.25); }
.auth-input::placeholder { color: var(--gray-400); }
.auth-input.has-icon { padding-right: 3rem; }
.auth-icon-right { position: absolute; right: 1rem; top: 1rem; color: var(--gray-400); background: transparent; border: 0; padding: 0; }
@media (min-width: 640px) { .auth-icon-right { right: 1.25rem; top: 1.25rem; } }
.auth-icon-right:hover { color: var(--gray-600); }
.auth-icon-right svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 640px) { .auth-icon-right svg { width: 1.5rem; height: 1.5rem; } }

.auth-submit {
  width: 100%; padding: 1rem 1.5rem;
  background: linear-gradient(to right, var(--purple-600), var(--indigo-600));
  color: white; border: 0; border-radius: var(--rounded-xl);
  font-weight: 600; font-size: 1rem; transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) { .auth-submit { padding: 1.25rem 1.5rem; font-size: 1.125rem; } }
.auth-submit:hover:not(:disabled) { box-shadow: var(--shadow-xl); }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-secondary-link { width: 100%; padding: 0.5rem; color: var(--gray-600); background: transparent; border: 0; font-weight: 500; font-size: 1rem; transition: color 0.15s; }
.auth-secondary-link:hover { color: var(--purple-600); }
.auth-forgot-row { display: flex; justify-content: flex-end; }
.auth-forgot-link { font-size: 1rem; font-weight: 500; color: var(--gray-900); background: transparent; border: 0; transition: color 0.15s; }
.auth-forgot-link:hover { color: var(--purple-600); }

.auth-strength-card { padding: 1rem; background: var(--gray-50); border-radius: var(--rounded-lg); display: flex; flex-direction: column; gap: 0.75rem; }
.auth-strength-head { display: flex; align-items: center; justify-content: space-between; }
.auth-strength-label { font-size: 0.875rem; font-weight: 500; color: var(--gray-700); }
.auth-strength-value { font-size: 0.875rem; font-weight: 500; }
.auth-strength-value.score-1 { color: var(--red-600); }
.auth-strength-value.score-2 { color: var(--yellow-600); }
.auth-strength-value.score-3 { color: var(--blue-600); }
.auth-strength-value.score-4 { color: var(--green-600); }
.auth-strength-bars { display: flex; gap: 0.25rem; }
.auth-strength-bar { height: 0.5rem; flex: 1; border-radius: var(--rounded); background: var(--gray-200); transition: background-color 0.2s; }
.auth-strength-bar.s1 { background: var(--red-400); }
.auth-strength-bar.s2 { background: var(--yellow-400); }
.auth-strength-bar.s3 { background: var(--blue-400); }
.auth-strength-bar.s4 { background: var(--green-400); }

.auth-req-list { display: flex; flex-direction: column; gap: 0.5rem; }
.auth-req-row { display: flex; align-items: center; gap: 0.5rem; }
.auth-req-row svg { width: 1rem; height: 1rem; }
.auth-req-text { font-size: 0.75rem; color: var(--gray-500); }
.auth-req-row.met .auth-req-text { color: var(--green-600); }
.auth-req-bullet { width: 1rem; height: 1rem; border: 2px solid var(--gray-300); border-radius: var(--rounded-full); display: inline-flex; flex-shrink: 0; }
.auth-req-row.met .auth-req-bullet { display: none; }
.auth-req-row .auth-req-check { display: none; color: var(--green-500); }
.auth-req-row.met .auth-req-check { display: inline-flex; }

.auth-match-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.875rem; }
.auth-match-row.match { color: var(--green-600); }
.auth-match-row.mismatch { color: var(--red-600); }

/* Legacy auth-card kept for compat with existing PHP signin templates */
.auth-card { max-width: 26.25rem; margin: 2rem auto; background: white; border-radius: var(--rounded-xl); box-shadow: var(--shadow-lg); padding: 2rem; }
.auth-card h1 { margin: 0 0 1rem; font-size: 1.5rem; text-align: center; }
.auth-form-legacy { display: flex; flex-direction: column; gap: 1rem; }
.auth-form-legacy label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; color: var(--gray-700); }
.auth-form-legacy input { padding: 0.6rem 0.75rem; border: 1px solid var(--gray-300); border-radius: var(--rounded-lg); font-size: 0.95rem; outline: none; }
.auth-form-legacy input:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 2px rgb(99 102 241 / 0.25); }
.auth-links { display: flex; justify-content: space-between; margin-top: 1rem; font-size: 0.875rem; }
.auth-links a { color: var(--indigo-600); }

/* General buttons (legacy compat) */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: var(--rounded-lg); font-weight: 500; border: 0; cursor: pointer; font-size: 0.95rem; transition: opacity 0.15s, box-shadow 0.15s; }
.btn-primary { background: linear-gradient(to right, var(--indigo-600), var(--purple-600)); color: white; box-shadow: var(--shadow-md); }
.btn-primary:hover { opacity: 0.9; box-shadow: var(--shadow-lg); }
.btn-ghost { background: transparent; color: var(--gray-700); border: 1px solid var(--gray-300); }
.btn-ghost:hover { background: var(--gray-100); }
.btn-danger { background: var(--red-500); color: white; }
.btn-danger:hover { background: var(--red-600); }

/* Footer */
.site-footer { text-align: center; padding: 1.5rem 1rem; color: var(--gray-500); font-size: 0.875rem; }

/* Loading spinner (legacy) */
.loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid white; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }