* { margin:0; padding:0; box-sizing:border-box; }
html,body { min-height:100vh; font-family:system-ui,-apple-system,sans-serif; color:#fff; }
html { -webkit-text-size-adjust:100%; }
body {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  background-attachment: fixed;
  position: relative;
  overflow-x:hidden;
}
body::before {
  content:''; position:fixed; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(99,102,241,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(14,165,233,0.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(168,85,247,0.08) 0%, transparent 50%);
  pointer-events:none; z-index:0;
}

.container { position:relative; z-index:10; max-width:1920px; margin:0 auto; padding:0.75rem; }
.grid {
  display:grid;
  grid-template-columns: 1fr;
  gap:0.75rem;
}
@media(min-width:640px){
  .grid{ grid-template-columns: repeat(2, 1fr); gap:1rem; }
  .container{ padding:1rem; }
}
@media(min-width:1024px){
  .grid{ grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  border-radius: 1rem;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.25);
  padding: 1rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
@media(min-width:640px){
  .card{ padding:1.25rem; border-radius:1.5rem; }
}
.card:hover {
  transform: scale(1.01);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.3);
}
.card::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.1), transparent, rgba(255,255,255,0.05));
  pointer-events:none;
}
.card-inner { position:relative; z-index:1; flex: 1 1 auto; display: flex; flex-direction: column; }

/* Mobile-first column spans */
.col-2, .col-3, .col-4, .col-1 { grid-column: span 1; }
@media(min-width:640px){
  .col-2{ grid-column: span 2; }
  .col-3{ grid-column: span 2; }
  .col-4{ grid-column: span 2; }
  .col-1{ grid-column: span 1; }
}
@media(min-width:1024px){
  .col-2{ grid-column: span 2; }
  .col-3{ grid-column: span 3; }
  .col-4{ grid-column: span 4; }
  .col-1{ grid-column: span 1; }
}

/* Ephemeris + Calendar/Quote/UV layout */
.ephemeris-left { grid-column: span 1; }
.calendar-right { grid-column: span 1; }
.quote-right { grid-column: span 1; }
.uv-right { grid-column: span 1; }

@media(min-width:640px){
  .ephemeris-left { grid-column: span 2; }
  .calendar-right { grid-column: span 2; }
  .quote-right { grid-column: span 2; }
  .uv-right { grid-column: span 2; }
}

@media(min-width:1024px){
  /* Ephemeris spans rows 2-5, columns 1-2 */
  .ephemeris-left {
    grid-column: 1 / span 2;
    grid-row: 2 / span 4;
  }
  /* Calendar/Quote/UV/Dette stack in columns 3-4 */
  .calendar-right {
    grid-column: 3 / span 2;
    grid-row: 2;
  }
  .quote-right {
    grid-column: 3 / span 2;
    grid-row: 3;
  }
  .uv-right {
    grid-column: 3 / span 2;
    grid-row: 4;
  }
  .dette-right {
    grid-column: 3 / span 2;
    grid-row: 5;
  }
}

.flex-col { display:flex; flex-direction:column; gap:1rem; }
.h-full { height:100%; }

.card-title {
  display:flex; align-items:center; gap:0.5rem;
  color: rgba(255,255,255,0.6);
  font-size:0.875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.05em;
  margin-bottom:1rem;
}
.card-title-right { margin-left:auto; font-size:0.75rem; color:rgba(255,255,255,0.5); text-transform:none; }

/* Loader */
.loader { display:flex; align-items:center; justify-content:center; height:100%; min-height:160px; }
.spinner {
  width:2rem; height:2rem; border:2px solid rgba(255,255,255,0.1);
  border-top-color: rgba(255,255,255,0.6);
  border-radius:50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Mobile-first fixes */
.col-1, .col-2, .col-4 { min-width:0; }
.card { min-width:0; }
.flex-col { min-height:0; }
.flex-col > .h-full { flex:1 1 auto; height:auto; min-height:0; }

/* Utilities: icon-box & colors */
.icon-box {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.75rem; height:1.75rem; border-radius:0.5rem;
  background:rgba(255,255,255,0.08); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15); font-size:0.875rem;
}
.c-amber { color:#fcd34d; }
.c-sky { color:#7dd3fc; }
.c-rose { color:#fda4af; }
.c-teal { color:#5eead4; }
.c-orange { color:#fdba74; }
.c-violet { color:#c4b5fd; }
.c-slate { color:#cbd5e1; }
.c-emerald { color:#6ee7b7; }
.text-emerald-300 { color:#10b981; }
.text-amber-300 { color:#f59e0b; }
.text-orange-300 { color:#f97316; }
.text-rose-300 { color:#f43f5e; }
.text-purple-300 { color:#a855f7; }
.text-teal-300 { color:#06b6d4; }
.text-sky-300 { color:#38bdf8; }
.bg-emerald { background:#10b981; }
.bg-amber { background:#f59e0b; }
.bg-orange { background:#f97316; }
.bg-rose { background:#f43f5e; }
.bg-purple { background:#a855f7; }

/* Garde-fou : empêcher toute font-family externe de polluer le texte */
.card {
  font-family: system-ui, -apple-system, sans-serif;
}

/* ── Theme Light ── */
body.theme-light {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%);
  color: #0f172a;
}
body.theme-light::before {
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(99,102,241,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(14,165,233,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(168,85,247,0.04) 0%, transparent 50%);
}
body.theme-light .card {
  background: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
}
body.theme-light .card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}
body.theme-light .card::before {
  background: linear-gradient(to bottom right, rgba(255,255,255,0.4), transparent, rgba(255,255,255,0.2));
}
body.theme-light .card-title { color: #0f172a; }
body.theme-light .card-title-right { color: rgba(0,0,0,0.65); }
body.theme-light .loader { border-color: rgba(0,0,0,0.1); border-top-color: rgba(0,0,0,0.6); }
body.theme-light .icon-box {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.1);
}
body.theme-light [style*="color:rgba(255,255,255"] { color: rgba(0,0,0,0.6) !important; }
body.theme-light [style*="color:#fff"] { color: #0f172a !important; }

/* Utility color overrides for RGAA contrast in light mode */
body.theme-light .text-emerald-300 { color: #047857; }
body.theme-light .text-amber-300 { color: #92400e; }
body.theme-light .text-orange-300 { color: #9a3412; }
body.theme-light .text-rose-300 { color: #9f1239; }
body.theme-light .text-purple-300 { color: #6b21a8; }
body.theme-light .text-teal-300 { color: #0f766e; }
body.theme-light .text-sky-300 { color: #0369a1; }
body.theme-light .c-amber { color: #92400e; }
body.theme-light .c-sky { color: #0369a1; }
body.theme-light .c-rose { color: #9f1239; }
body.theme-light .c-teal { color: #0f766e; }
body.theme-light .c-orange { color: #9a3412; }
body.theme-light .c-violet { color: #6b21a8; }
body.theme-light .c-slate { color: #475569; }
body.theme-light .c-emerald { color: #047857; }

/* API status */
.api-ok { color: #6ee7b7; }
.api-ko { color: #fda4af; }
body.theme-light .api-ok { color: #047857; }
body.theme-light .api-ko { color: #9f1239; }

/* Pull-to-refresh */
#ptrIndicator {
  position: fixed; top: 0; left: 0; right: 0; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,0.85); backdrop-filter: blur(12px);
  transform: translateY(-100%); transition: transform 0.25s ease;
  z-index: 9999; pointer-events: none;
}
body.theme-light #ptrIndicator { background: rgba(255,255,255,0.9); }
.ptr-spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #22d3ee; border-radius: 50%;
  animation: ptr-spin 0.8s linear infinite;
}
body.theme-light .ptr-spinner { border-color: rgba(0,0,0,0.15); border-top-color: #0369a1; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
#ptrIndicator.ptr-ready .ptr-spinner { border-top-color: #6ee7b7; }
body.theme-light #ptrIndicator.ptr-ready .ptr-spinner { border-top-color: #047857; }

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  transition: all 0.2s;
}

/* AQI Colors */
.status-badge.aqi-good { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.status-badge.aqi-moderate { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.status-badge.aqi-unhealthy-sensitive { background: rgba(249, 115, 22, 0.2); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.3); }
.status-badge.aqi-unhealthy { background: rgba(244, 63, 94, 0.2); color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.3); }
.status-badge.aqi-very-unhealthy { background: rgba(168, 85, 247, 0.2); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); }
.status-badge.aqi-hazardous { background: rgba(127, 29, 29, 0.3); color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.4); }

/* UV Colors */
.status-badge.uv-low { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.status-badge.uv-moderate { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.status-badge.uv-high { background: rgba(249, 115, 22, 0.2); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.3); }
.status-badge.uv-very-high { background: rgba(244, 63, 94, 0.2); color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.3); }
.status-badge.uv-extreme { background: rgba(168, 85, 247, 0.2); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); }

/* Sentiment Colors */
.status-badge.sentiment-extreme-fear { background: rgba(244, 63, 94, 0.2); color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.3); }
.status-badge.sentiment-fear { background: rgba(249, 115, 22, 0.2); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.3); }
.status-badge.sentiment-neutral { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.status-badge.sentiment-greed { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.status-badge.sentiment-extreme-greed { background: rgba(6, 182, 212, 0.2); color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.3); }

/* Light mode */
body.theme-light .status-badge.aqi-good { background: rgba(16, 185, 129, 0.15); color: #047857; }
body.theme-light .status-badge.aqi-moderate { background: rgba(245, 158, 11, 0.15); color: #b45309; }
body.theme-light .status-badge.aqi-unhealthy-sensitive { background: rgba(249, 115, 22, 0.15); color: #c2410c; }
body.theme-light .status-badge.aqi-unhealthy { background: rgba(244, 63, 94, 0.15); color: #be123c; }
body.theme-light .status-badge.aqi-very-unhealthy { background: rgba(168, 85, 247, 0.15); color: #7e22ce; }
body.theme-light .status-badge.aqi-hazardous { background: rgba(220, 38, 38, 0.15); color: #991b1b; }

body.theme-light .status-badge.uv-low { background: rgba(16, 185, 129, 0.15); color: #047857; }
body.theme-light .status-badge.uv-moderate { background: rgba(245, 158, 11, 0.15); color: #b45309; }
body.theme-light .status-badge.uv-high { background: rgba(249, 115, 22, 0.15); color: #c2410c; }
body.theme-light .status-badge.uv-very-high { background: rgba(244, 63, 94, 0.15); color: #be123c; }
body.theme-light .status-badge.uv-extreme { background: rgba(168, 85, 247, 0.15); color: #7e22ce; }

body.theme-light .status-badge.sentiment-extreme-fear { background: rgba(244, 63, 94, 0.15); color: #be123c; }
body.theme-light .status-badge.sentiment-fear { background: rgba(249, 115, 22, 0.15); color: #c2410c; }
body.theme-light .status-badge.sentiment-neutral { background: rgba(245, 158, 11, 0.15); color: #b45309; }
body.theme-light .status-badge.sentiment-greed { background: rgba(16, 185, 129, 0.15); color: #047857; }
body.theme-light .status-badge.sentiment-extreme-greed { background: rgba(6, 182, 212, 0.15); color: #0e7490; }

/* ── Footer ── */
.dayboard-footer {
  position: relative;
  z-index: 10;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  text-align: center;
}
.footer-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  backdrop-filter: blur(8px);
}
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: #fff;
}
.footer-vanilla { color: #22d3ee; }
.footer-sep { color: rgba(255,255,255,0.25); }
.footer-item { font-variant-numeric: tabular-nums; }

body.theme-light .dayboard-footer { color: rgba(0,0,0,0.5); }
body.theme-light .footer-inner {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
body.theme-light .footer-badge { color: #0f172a; }
body.theme-light .footer-vanilla { color: #0369a1; }
body.theme-light .footer-sep { color: rgba(0,0,0,0.25); }