*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

:root {
  --bg:       #0d0f14;
  --surface:  #161820;
  --surface2: #1e2028;
  --border:   #252830;
  --border2:  #2e3140;
  --text:     #e8eaf0;
  --muted:    #6b7080;
  --indigo:   #818cf8;
  --emerald:  #34d399;
  --amber:    #fbbf24;
  --rose:     #f87171;
  --blue:     #60a5fa;
  --pink:     #f472b6;
  --violet:   #a78bfa;
  --teal:     #2dd4bf;
}

/* LIGHT THEME */
:root.light {
  --bg:       #f0f2f7;
  --surface:  #ffffff;
  --surface2: #f5f6fa;
  --border:   #e0e3ed;
  --border2:  #cdd0de;
  --text:     #1a1d2e;
  --muted:    #7b82a0;
  --indigo:   #6366f1;
  --emerald:  #10b981;
  --amber:    #f59e0b;
  --rose:     #ef4444;
  --blue:     #3b82f6;
  --pink:     #ec4899;
  --violet:   #8b5cf6;
  --teal:     #14b8a6;
}

html, body {
  height: 100%;
  overflow: hidden;
}

/* Smooth theme transition */
body, .card, .card2, #topbar {
  transition: background-color 0.8s ease, border-color 0.8s ease, color 0.8s ease;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#live-dot { width:11px; height:11px; border-radius:50%; background:var(--emerald); animation:blink 2s infinite; }

/* Scrollbar completamente oculta mas funcional */
::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.card:hover { border-color: var(--border2); box-shadow: 0 8px 16px rgba(0,0,0,.2); }
:root.light .card:hover { box-shadow: 0 8px 16px rgba(0,0,0,.08); }

.card2 {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.card2:hover { border-color: var(--border); transform: translateY(-2px); }

#topbar {
  height: 52px;
  background: rgba(13,15,20,.95);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  flex-shrink: 0;
  position: relative;
}
#logo {
  height:40px;
  width:auto;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  object-fit:contain;
}
:root.light #topbar {
  background: rgba(255,255,255,.95);
}

#clock {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
  color: var(--text);
}

.vdiv { width: 1px; background: var(--border); align-self: stretch; margin: 10px 0; }
.hdiv { height: 1px; background: var(--border); width: 100%; }

.live { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@media(prefers-reduced-motion:reduce){.live{animation:none}}

.scroller { overflow-y: auto; overflow-x: hidden; }

.fade { animation: fadeUp .4s ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@media(prefers-reduced-motion:reduce){.fade{animation:none;opacity:1}}
.d1{animation-delay:.04s}.d2{animation-delay:.10s}.d3{animation-delay:.16s}.d4{animation-delay:.22s}

.dot { height: 5px; border-radius: 3px; background: #252830; transition: all .35s cubic-bezier(.4,0,.2,1); cursor: pointer; }
:root.light .dot { background: #d0d3e0; }
.dot.on { width: 20px; }
.dot.off { width: 5px; }
.dot:hover { background: #3a3d4a; transform: scale(1.1); }
:root.light .dot:hover { background: #b0b5c8; }

.stripe { width: 3px; border-radius: 2px; flex-shrink: 0; align-self: stretch; }

.btrack { height: 8px; border-radius: 4px; background: var(--border2); overflow: hidden; flex: 1; }
.bfill { height: 100%; border-radius: 4px; transition: width .8s cubic-bezier(.4,0,.2,1); }

.hour-badge { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.sbadge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; letter-spacing: .01em; white-space: nowrap; }

.uhead { border-radius: 12px; padding: 14px 16px; position: relative; overflow: hidden; }
.uhead::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 70%); pointer-events:none; }

.av { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-family: 'Outfit', sans-serif; transition: transform .3s ease; }
.av:hover { transform: scale(1.05); }

#donut-wrap { position: relative; flex-shrink: 0; }
#donut-wrap .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }

.sec-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

#grid {
  display: grid;
  grid-template-columns: 1.0fr 1.1fr 1.0fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.cell { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cell-tall { grid-row: span 2; }

*:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

#date-lbl {
  color: white;
}
:root.light #date-lbl {
  color: #1a1d2e !important;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}