:root {
  color-scheme: light dark;
}

html, body {
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  min-height: 100vh;
}
@media (prefers-color-scheme: dark) {
  html, body {
    background: linear-gradient(180deg, #082f49 0%, #0c4a6e 100%);
  }
}

/* ───── Composants ───── */

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
@media (prefers-color-scheme: dark) {
  .glass {
    background: rgba(8, 47, 73, 0.7);
    border-color: rgba(56, 189, 248, 0.15);
  }
}

.card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 1.5rem;
  box-shadow: 0 4px 24px -8px rgba(2, 132, 199, 0.15);
}
@media (prefers-color-scheme: dark) {
  .card {
    background: rgba(8, 47, 73, 0.6);
    border-color: rgba(56, 189, 248, 0.12);
    box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.4);
  }
}

.input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1.5px solid rgb(186 230 253);
  background: white;
  font-size: 1rem;
  transition: all 0.2s;
  color: #0c4a6e;
}
.input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
}
@media (prefers-color-scheme: dark) {
  .input {
    background: rgba(8, 47, 73, 0.6);
    border-color: rgba(56, 189, 248, 0.25);
    color: #e0f2fe;
  }
  .input::placeholder { color: #64748b; }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #3b82f6 100%);
  color: white;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px -8px rgba(14, 165, 233, 0.6);
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(14, 165, 233, 0.7); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 1rem;
  background: rgba(186, 230, 253, 0.4);
  color: #0369a1;
  font-weight: 600;
  border: 1px solid rgba(56, 189, 248, 0.3);
  transition: all 0.2s;
  cursor: pointer;
}
.btn-secondary:hover { background: rgba(186, 230, 253, 0.7); }
@media (prefers-color-scheme: dark) {
  .btn-secondary {
    background: rgba(8, 47, 73, 0.6);
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.3);
  }
  .btn-secondary:hover { background: rgba(8, 47, 73, 0.9); }
}

.tab {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.6);
  color: #0369a1;
  border: 1px solid rgba(186, 230, 253, 0.6);
  transition: all 0.2s;
  white-space: nowrap;
  cursor: pointer;
}
.tab:hover { background: white; }
.tab-active {
  background: linear-gradient(135deg, #0ea5e9, #06b6d4) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px -4px rgba(14, 165, 233, 0.6);
}
@media (prefers-color-scheme: dark) {
  .tab {
    background: rgba(8, 47, 73, 0.6);
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.2);
  }
  .tab:hover { background: rgba(8, 47, 73, 0.9); }
}

.action-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.875rem;
  background: rgba(241, 245, 249, 0.8);
  border: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.action-pill:hover { background: white; transform: translateY(-1px); }
.action-pill.selected {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(6, 182, 212, 0.1));
  border-color: #0ea5e9;
  color: #0369a1;
  box-shadow: 0 4px 12px -4px rgba(14, 165, 233, 0.3);
}
@media (prefers-color-scheme: dark) {
  .action-pill { background: rgba(8, 47, 73, 0.6); color: #cbd5e1; }
  .action-pill:hover { background: rgba(8, 47, 73, 0.9); }
  .action-pill.selected {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(6, 182, 212, 0.2));
    color: #7dd3fc;
  }
}

#toast.toast-success { background: #10b981; color: white; }
#toast.toast-error { background: #ef4444; color: white; }
#toast.toast-info { background: #0ea5e9; color: white; }

.reading-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 1rem;
  transition: background 0.2s;
}
.reading-row:hover { background: rgba(186, 230, 253, 0.3); }
@media (prefers-color-scheme: dark) {
  .reading-row:hover { background: rgba(8, 47, 73, 0.4); }
}

.season-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 1.5rem;
  padding: 1rem 1.25rem;
  transition: all 0.2s;
}
.season-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(2, 132, 199, 0.2); }
@media (prefers-color-scheme: dark) {
  .season-card { background: rgba(8, 47, 73, 0.6); border-color: rgba(56, 189, 248, 0.15); }
}

@keyframes drop {
  0% { transform: translateY(-30px) scale(0); opacity: 0; }
  60% { transform: translateY(0) scale(1.2); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.drop-anim { animation: drop 0.6s cubic-bezier(.4,1.6,.5,1); }

@supports(padding: env(safe-area-inset-bottom)) {
  #btn-new-reading { bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(14, 165, 233, 0.4); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }