:root {
  --bg:#f5f4f1; --surface:#fff; --surface2:#f0ede8; --surface3:#e8e4dd;
  --text:#181816; --text2:#5a5652; --text3:#9a9690;
  --border:#dedad4; --border2:#c8c4bc;
  --accent:#2563eb; --accent-bg:#eff6ff; --accent2:#1d4ed8;
  --mono:'Space Mono',monospace; --sans:'Space Grotesk',sans-serif;
  --r:10px; --sh:0 1px 2px rgba(0,0,0,.06),0 3px 10px rgba(0,0,0,.05);
  --c1:#d97706; --c1b:#fef3c7; --c1d:#92400e;
  --c2:#2563eb; --c2b:#dbeafe; --c2d:#1e3a8a;
  --c3:#7c3aed; --c3b:#ede9fe; --c3d:#4c1d95;
  --c4:#059669; --c4b:#d1fae5; --c4d:#064e3b;
  --ev:#6366f1; --evb:#e0e7ff;
  --warn:#dc2626; --warnb:#fee2e2; --ok:#059669; --okb:#d1fae5;
}
html.dark {
  /* Superfícies mais contrastantes entre si */
  --bg:#0d0d0c;
  --surface:#181816;
  --surface2:#212120;
  --surface3:#2d2d2b;
  /* Texto com hierarquia clara */
  --text:#f2efe9;
  --text2:#b0aa9f;
  --text3:#6a6560;
  /* Bordas visíveis mas sutis */
  --border:#2e2e2b;
  --border2:#404040;
  /* Accent mais brilhante para dark */
  --accent:#4f8ef7;
  --accent-bg:#1a2d50;
  --accent2:#7ab0ff;
  /* Cores das disciplinas: mais saturadas no dark */
  --c1:#f59e0b; --c1b:#2d1f05;
  --c2:#3b82f6; --c2b:#0f1f3d;
  --c3:#a78bfa; --c3b:#1e1040;
  --c4:#34d399; --c4b:#062818;
  --ev:#818cf8; --evb:#1e1f40;
  --warn:#f87171; --warnb:#2d0f0f;
  --ok:#34d399; --okb:#062818;
}

/* Ping pulsante para o dia atual */
@keyframes ping {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes ping-inner {
  0%, 100% { opacity: 1; }
  50%       { opacity: .7; }
}
.today-ping {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
}
.today-ping::before {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--warn);
  top: -3px; right: -3px;
  animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
.today-ping::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--warn);
  top: -3px; right: -3px;
  animation: ping-inner 1.8s ease-in-out infinite;
}
/* Coluna do dia atual tem fundo levemente destacado */
.cal-dcol.is-today-col { background: color-mix(in srgb, var(--accent) 4%, transparent); }
html.dark .cal-dcol.is-today-col { background: color-mix(in srgb, var(--accent) 6%, transparent); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans); background: var(--bg); color: var(--text);
  font-size: 14px; line-height: 1.5; min-height: 100vh;
  display: flex; flex-direction: column; transition: background .2s, color .2s;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ─ HEADER ─ */
header {
  position: sticky; top: 0; z-index: 200;
  min-height: 50px; padding: 0;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.header-top {
  display: flex; align-items: center; justify-content: space-between;
  height: 50px; padding: 0 1.25rem;
  position: relative;
}
.header-chips {
  display: none;
  gap: .4rem; flex-wrap: wrap; justify-content: center;
  padding: .3rem 1.25rem .45rem;
  border-top: 1px solid var(--border);
}
header.has-chips .header-chips { display: flex; }
.logo { font-family: var(--mono); font-size: 12px; color: var(--text2); letter-spacing: .02em; }
.logo b { color: var(--accent); font-weight: 500; }
.clock { font-family: var(--mono); font-size: 11px; color: var(--text3);
  padding: 2px 9px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; margin-left: .6rem; letter-spacing: .04em; }
.hright { display: flex; gap: .35rem; align-items: center; }
.hbtn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; font-size: 11px; color: var(--text2); cursor: pointer;
  font-family: var(--sans); transition: all .15s; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.hbtn:hover { background: var(--surface2); color: var(--text); border-color: var(--border2); }
html.dark .hbtn { border-color: var(--border2); color: var(--text2); }
html.dark .hbtn:hover { background: var(--surface3); color: var(--text); }

/* ─ GREETING ─ */
.greeting {
  font-family: var(--sans); font-size: 12px; color: var(--text2);
  padding: 2px 10px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; white-space: nowrap; max-width: min(360px, calc(100% - 280px));
  overflow: hidden; text-overflow: ellipsis;
  position: absolute; left: 50%; transform: translateX(-50%);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.greeting:hover { background: var(--surface3); border-color: var(--accent); color: var(--accent); }
.greeting:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .greeting { font-size: 10px; max-width: min(210px, calc(100% - 180px)); } }

/* ─ AGENDA ACCORDION ─ */
.st-toggle {
  background: none; border: none; cursor: pointer; color: var(--text3);
  font-size: 12px; padding: 0 2px; line-height: 1; transition: color .15s, transform .2s;
  flex-shrink: 0;
}
.st-toggle:hover { color: var(--accent); }
.st-toggle.collapsed { transform: rotate(-90deg); }
.agenda-body { overflow: hidden; transition: max-height .35s ease, opacity .25s; max-height: 9999px; opacity: 1; }
.agenda-body.collapsed { max-height: 0; opacity: 0; pointer-events: none; }

/* ─ STAGGER FADE-IN ─ */
@keyframes staggerFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger-item {
  animation: staggerFadeUp .35s ease both;
  animation-delay: var(--si-delay, 0ms);
}

/* ─ SWIPE DISCIPLINE ─ */
.att-swipe-wrap {
  position: relative; overflow: hidden;
  border-radius: var(--r); box-shadow: var(--sh);
}
.att-swipe-action {
  position: absolute; top: 0; bottom: 0; width: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; gap: 4px; pointer-events: none;
  user-select: none; transition: opacity .15s;
}
.att-swipe-del  { left: 0; background: color-mix(in srgb, var(--warn) 85%, transparent); color: #fff; }
.att-swipe-arch { right: 0; background: color-mix(in srgb, var(--accent) 75%, transparent); color: #fff; }
.att-swipe-del  span { font-size: 18px; }
.att-swipe-arch span { font-size: 18px; }
.att-swipe-wrap .att-card {
  transition: transform .18s ease; will-change: transform;
  box-shadow: none; border-radius: var(--r);
}
.att-swipe-wrap .att-card.is-swiping { transition: none; }

/* ─ MAIN ─ */
main { flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; display: flex; flex-direction: column; gap: 2rem; }

/* ─ SECTION TITLE ─ */
.st { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--text3); display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.st::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ─ WEEK NAV ─ */
.wknav { display: flex; align-items: center; gap: .4rem; margin-bottom: .75rem; flex-wrap: wrap; }
.wklabel { font-family: var(--mono); font-size: 11px; color: var(--text2); background: var(--surface2); border: 1px solid var(--border); padding: 3px 10px; border-radius: 20px; }
.warr { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text2); transition: all .15s; }
.warr:hover { background: var(--surface2); }
.btn-today { background: var(--accent-bg); border: 1px solid var(--accent); color: var(--accent); padding: 3px 10px; border-radius: 6px; font-size: 11px; cursor: pointer; font-family: var(--sans); transition: all .15s; }
.btn-today:hover { background: var(--accent); color: #fff; }
.semprog { margin-left: auto; display: flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: 10px; color: var(--text3); }
.sembar { width: 60px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.semfill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .5s; }

/* ─ CALENDAR ─ */
.cal-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.cal-scroll { overflow-x: auto; overflow-y: auto; max-height: 520px; }
.cal-inner { min-width: 700px; }

/* Grid: col 0 = time gutter (52px), cols 1-7 = days */
.cal-head, .cal-body { display: grid; grid-template-columns: 52px repeat(7, 1fr); }
.cal-head { border-bottom: 2px solid var(--border); }

.cal-gutter { border-right: 1px solid var(--border); }
.cal-dh { padding: 7px 4px 6px; text-align: center; border-right: 1px solid var(--border); cursor: default; }
.cal-dh:last-child { border-right: none; }
.dname { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); font-weight: 500; }
.dnum { font-size: 15px; font-weight: 300; color: var(--text); font-family: var(--mono); line-height: 1; margin-top: 2px; }
.cal-dh.is-today .dnum { background: var(--accent); color: #fff; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 2px auto 0; font-size: 12px; font-weight: 600; }
.cal-dh.is-today .dname { color: var(--accent); }
.cal-dh.is-past { opacity: .4; }

/* Body */
.cal-tcol { /* time column */ }
.cal-ts { height: 48px; border-right: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: flex-end; padding: 2px 6px 0 0; }
.cal-tl { font-family: var(--mono); font-size: 9px; color: var(--text3); transform: translateY(-50%); }
.cal-dcol { border-right: 1px solid var(--border); position: relative; overflow: visible; }
.cal-dcol:last-child { border-right: none; }
.cal-hl { height: 48px; border-bottom: 1px solid var(--border); position: relative; transition: background .1s; }
.cal-hl:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); cursor: cell; }
.cal-hl:hover::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--accent); opacity: .5; pointer-events: none; font-weight: 300; }
.cal-hl.half { border-bottom: 1px dashed var(--border); height: 24px; }
.cal-hl:last-child { border-bottom: none; }

/* Drop zone highlight */
.cal-dcol.drag-over .cal-hl { background: var(--accent-bg); }

@keyframes now-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: .7; }
}
/* Now line */
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--warn); z-index: 15; pointer-events: none; }
.now-line::before { content: ''; position: absolute; left: -5px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--warn); animation: now-pulse 2s ease-in-out infinite; }

/* Events */
.cal-ev {
  position: absolute; left: 2px; right: 2px; border-radius: 6px;
  padding: 3px 6px; font-size: 11px; line-height: 1.3; overflow: hidden;
  cursor: pointer; z-index: 10; border-left: 3px solid;
  transition: filter .15s, box-shadow .15s, transform .1s;
  user-select: none;
}
.cal-ev:hover { filter: brightness(.93); box-shadow: 0 2px 8px rgba(0,0,0,.12); transform: scale(1.01); }
.cal-ev[data-custom] { cursor: grab; }
.cal-ev[data-custom]:active { cursor: grabbing; }
.cal-ev.ev-past { opacity: .45; }
.cal-ev.ev-cancelled { opacity: .4; }
.cal-ev.ev-cancelled .ev-name { text-decoration: line-through; }
.ev-cancelled-label { font-size: 10px; color: var(--text3); }
.ev-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.ev-time { font-family: var(--mono); font-size: 10px; opacity: .65; }
.ev-check { font-size: 10px; color: var(--ok); }
/* Course colors */
.cal-ev.c1 { background: var(--c1b); border-color: var(--c1); color: var(--text); }
.cal-ev.c2 { background: var(--c2b); border-color: var(--c2); color: var(--text); }
.cal-ev.c3 { background: var(--c3b); border-color: var(--c3); color: var(--text); }
.cal-ev.c4 { background: var(--c4b); border-color: var(--c4); color: var(--text); }
html.dark .cal-ev.c1 .ev-name { color: var(--c1); }
html.dark .cal-ev.c2 .ev-name { color: var(--c2); }
html.dark .cal-ev.c3 .ev-name { color: var(--c3); }
html.dark .cal-ev.c4 .ev-name { color: var(--c4); }
/* Reminder/custom event */
.cal-ev.ev-custom { background: var(--evb); border-color: var(--ev); color: var(--text); }
.cal-ev.ev-custom .ev-name { color: var(--ev); }
.ev-check { font-size: 10px; color: var(--ok); font-weight: 600; }

/* "New event" slot when hovering empty cell */
.cal-new-hint {
  position: absolute; left: 2px; right: 2px; border-radius: 5px;
  background: var(--accent-bg); border: 1px dashed var(--accent);
  opacity: 0; pointer-events: none; z-index: 8; transition: opacity .1s;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--accent);
}

/* ─ EVENT TOOLTIP / POPUP ─ */
.ev-popup {
  position: fixed; z-index: 500;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: 0 8px 30px rgba(0,0,0,.15);
  padding: 1rem 1.1rem 1rem; min-width: 230px; max-width: 280px;
  display: none;
}
.ev-popup.open { display: block; }
.ev-popup-title { font-weight: 600; font-size: 14px; margin-bottom: .25rem; }
.ev-popup-meta { font-size: 12px; color: var(--text2); margin-bottom: .75rem; display: flex; flex-direction: column; gap: .2rem; }
.ev-popup-meta span { display: flex; align-items: center; gap: .4rem; }
.ev-popup-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.ep-btn { border: 1px solid var(--border); background: var(--surface2); padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; font-family: var(--sans); color: var(--text2); transition: all .15s; }
.ep-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.ep-btn.danger:hover { background: var(--warnb); color: var(--warn); border-color: var(--warn); }
.ep-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ep-btn.primary:hover { background: var(--accent2); }
.ep-close { position: absolute; top: .6rem; right: .7rem; background: none; border: none; font-size: 16px; cursor: pointer; color: var(--text3); line-height: 1; }
.ep-divider { height: 1px; background: var(--border); margin: .75rem 0; }

/* ─ NEW EVENT MODAL ─ */
.modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); backdrop-filter: blur(4px); z-index: 400; align-items: center; justify-content: center; padding: 1rem; }
.modal-bg.open { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; max-width: 400px; width: 100%; padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.modal h3 { font-size: 15px; font-weight: 500; margin-bottom: 1rem; }
.modal-close { float: right; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text3); }
.form-group { margin-bottom: .9rem; }
.form-group label, .form-label { display: block; font-size: 11px; font-weight: 500; color: var(--text2); margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .06em; }
.form-input, .form-select, .form-textarea {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px; font-size: 13px; color: var(--text);
  font-family: var(--sans); outline: none; transition: border-color .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); background: var(--surface); }
.form-textarea { resize: vertical; min-height: 60px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.form-color-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.color-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .1s; }
.color-swatch:hover, .color-swatch.sel { border-color: var(--text); transform: scale(1.15); }
.modal-footer { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem; }
.btn-cancel { background: none; border: 1px solid var(--border); padding: 6px 14px; border-radius: 7px; font-size: 13px; cursor: pointer; color: var(--text2); font-family: var(--sans); }
.btn-save { background: var(--accent); color: #fff; border: none; padding: 6px 16px; border-radius: 7px; font-size: 13px; cursor: pointer; font-family: var(--sans); font-weight: 500; transition: opacity .15s; }
.btn-save:hover { opacity: .88; }

/* ─ ATTENDANCE ─ */
.att-grid { display: flex; flex-direction: column; gap: .55rem; }
.att-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.att-head { display: flex; align-items: center; gap: .6rem; padding: .65rem 1rem; cursor: pointer; user-select: none; transition: background .1s; }
.att-head:hover { background: var(--surface2); }
.att-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.att-name { font-weight: 500; font-size: 13px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-code { font-family: var(--mono); font-size: 10px; color: var(--text3); flex-shrink: 0; }

/* Horas badge */
.att-hbadge { font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 20px; background: var(--surface2); border: 1px solid var(--border); color: var(--text2); white-space: nowrap; }
.att-pill { font-family: var(--mono); font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 20px; background: var(--surface2); color: var(--text2); border: 1px solid var(--border); white-space: nowrap; }
.att-pill.safe { background: var(--okb); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.att-pill.warn { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #f59e0b; border-color: color-mix(in srgb, #f59e0b 50%, transparent); }
.att-pill.danger { background: var(--warnb); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.att-chev { color: var(--text3); font-size: 11px; transition: transform .2s; flex-shrink: 0; }
.att-card.open .att-chev { transform: rotate(180deg); }
.att-prog { height: 3px; background: var(--border); }
.att-prog-fill { height: 100%; transition: width .4s; border-radius: 0 2px 2px 0; }

.att-body { overflow: hidden; max-height: 0; transition: max-height .35s ease-out; border-top: 0px solid var(--border); }
.att-card.open .att-body { max-height: 4000px; border-top: 1px solid var(--border); transition: max-height .45s ease-in; }

/* Resumo de horas dentro do card */
.att-summary-bar {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .75rem 1rem; background: var(--surface2); border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.att-stat { display: flex; flex-direction: column; gap: 1px; }
.att-stat-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.att-stat-val { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--text); }
.att-stat-val.danger { color: var(--warn); }
.att-stat-val.ok { color: var(--ok); }

.att-list { padding: .5rem .75rem; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; }
.att-row { display: flex; align-items: center; gap: .6rem; padding: .3rem .35rem; border-radius: 6px; transition: background .1s; }
.att-row:hover { background: var(--surface2); }
.att-cb { width: 14px; height: 14px; border-radius: 3px; cursor: pointer; flex-shrink: 0; accent-color: var(--accent); }
.att-row-date { font-family: var(--mono); font-size: 11px; color: var(--text3); width: 80px; flex-shrink: 0; }
.att-row-day { font-size: 12px; color: var(--text2); width: 28px; flex-shrink: 0; }
.att-row-h { font-family: var(--mono); font-size: 11px; color: var(--text3); flex: 1; }
.att-row-hval { font-family: var(--mono); font-size: 11px; color: var(--text2); width: 28px; text-align: right; flex-shrink: 0; }
.abadge { font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 20px; flex-shrink: 0; }
.abadge.today { background: var(--accent); color: #fff; }
.abadge.future { background: var(--surface3); color: var(--text3); border: 1px solid var(--border); }
.abadge.falta { background: var(--warnb); color: var(--warn); }
.abadge.cancelled { background: var(--surface3); color: var(--text3); border: 1px solid var(--border); }

.att-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .6rem 1rem; border-top: 1px solid var(--border); background: var(--surface2); }
.att-warn-txt { font-size: 11px; color: var(--warn); font-weight: 500; }
.att-mark-btn { background: none; border: 1px solid var(--border); padding: 4px 10px; border-radius: 6px; font-size: 11px; color: var(--text2); cursor: pointer; font-family: var(--sans); transition: all .15s; }
.att-mark-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.att-row-cancelled { opacity: .5; }
.att-cancel-btn { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 12px; color: var(--text3); padding: 0 2px; opacity: .45; flex-shrink: 0; }
.att-cancel-btn:hover { opacity: 1; color: var(--warn); }
.ep-cancel-btn { display: block; margin-top: .4rem; background: none; border: none; font-size: 11px; color: var(--text3); cursor: pointer; padding: 0; opacity: .65; font-family: var(--sans); }
.ep-cancel-btn:hover { opacity: 1; }

/* ─ LISTS ─ */
.lists-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .lists-grid { grid-template-columns: 1fr; } }
.lcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.lcard-head { padding: .6rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 500; color: var(--text2); }
.lcnt { font-family: var(--mono); font-size: 10px; background: var(--surface2); padding: 2px 7px; border-radius: 20px; border: 1px solid var(--border); color: var(--text3); }
.litems { padding: .2rem 0; max-height: 280px; overflow-y: auto; }
.litem { display: flex; align-items: center; gap: .5rem; padding: .38rem .75rem; transition: background .1s, opacity .3s; }
.litem:hover { background: var(--surface2); }
.litem.done { opacity: .4; }
.lcb { width: 13px; height: 13px; border-radius: 3px; cursor: pointer; flex-shrink: 0; accent-color: var(--accent); }
.ltxt { flex: 1; font-size: 13px; cursor: pointer; padding: 1px 3px; border-radius: 4px; transition: background .1s; word-break: break-word; }
.ltxt:hover { background: var(--border); }
.litem.done .ltxt { text-decoration: line-through; color: var(--text3); }
.ldel { background: none; border: none; color: var(--text3); cursor: pointer; padding: 2px 4px; border-radius: 4px; font-size: 12px; opacity: 0; transition: opacity .15s; flex-shrink: 0; }
.litem:hover .ldel { opacity: 1; }
.ldel:hover { color: var(--warn); background: var(--warnb); }
.ladd { display: flex; gap: .4rem; padding: .5rem .75rem; border-top: 1px solid var(--border); }
.linput { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; font-size: 12px; color: var(--text); font-family: var(--sans); outline: none; transition: border-color .15s; }
.linput:focus { border-color: var(--accent); background: var(--surface); }
.laddbtn { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 5px 12px; font-size: 15px; cursor: pointer; line-height: 1; transition: opacity .15s; }
.laddbtn:hover { opacity: .85; }

/* ─ TOAST ─ */
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: .45rem .9rem; border-radius: 7px; font-size: 12px; z-index: 9999; opacity: 0; transition: opacity .2s; pointer-events: none; display: flex; align-items: center; gap: .6rem; box-shadow: 0 4px 20px rgba(0,0,0,.25); white-space: nowrap; }
.toast.show { opacity: 1; pointer-events: auto; }
.tundo { background: none; border: 1px solid rgba(255,255,255,.3); color: inherit; padding: 2px 7px; border-radius: 4px; cursor: pointer; font-size: 11px; font-family: var(--sans); }
.tundo:hover { background: rgba(255,255,255,.15); }

/* ─ FOOTER ─ */
footer { border-top: 1px solid var(--border); padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.finfo { font-family: var(--mono); font-size: 11px; color: var(--text3); }
.fcopy { width: 100%; font-family: var(--mono); font-size: 10px; color: var(--text3); text-align: center; padding-top: .2rem; border-top: 1px solid var(--border); margin-top: .25rem; }
.factions { display: flex; gap: .35rem; }
.fnav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.fnav a { font-family: var(--mono); font-size: 12px; color: var(--text3); text-decoration: none; transition: color .15s; }
.fnav a:hover { color: var(--accent); }
.fnav a[aria-current="page"] { color: var(--accent); }
/* Login card news link */
.login-news-link { text-align: center; margin-top: .65rem; }
.login-news-link a { font-family: var(--mono); font-size: 12px; color: rgba(200,190,230,.65); text-decoration: none; transition: color .15s; }
.login-news-link a:hover { color: rgba(200,190,230,.95); }

/* ─ PÁGINAS INTERNAS ─ */
.page-wrap { flex: 1; max-width: 800px; width: 100%; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
.page-hero { margin-bottom: 2.5rem; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
.page-hero h1 { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: .5rem; }
.page-hero p { font-size: 14px; color: var(--text3); line-height: 1.6; }
.page-section { margin-bottom: 2.5rem; }
.page-section h2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--text3); display: flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; }
.page-section h2::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.page-section p { font-size: 15px; color: var(--text2); line-height: 1.8; text-align: justify; }
.page-section li { font-size: 15px; color: var(--text2); line-height: 1.8; text-align: justify; }
.page-section ul, .page-section ol { padding-left: 1.5rem; display: flex; flex-direction: column; gap: .55rem; }
.page-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.5rem 1.75rem; box-shadow: var(--sh); }
.page-card + .page-card { margin-top: 1rem; }
.status-item { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--border); gap: .75rem; }
.status-item:last-child { border-bottom: none; }
.status-name { font-size: 14px; color: var(--text); }
.status-badge { font-family: var(--mono); font-size: 11px; padding: 3px 12px; border-radius: 20px; font-weight: 700; }
.status-badge.ok { background: var(--okb); color: var(--ok); }
.status-badge.warn { background: var(--warnb); color: var(--warn); }
.status-badge.info { background: var(--accent-bg); color: var(--accent); }
.contact-form { display: flex; flex-direction: column; gap: .85rem; }
.contact-form textarea { min-height: 140px; }
.btt { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 32px; height: 32px; border-radius: 7px; background: var(--surface); border: 1px solid var(--border); color: var(--text2); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh); opacity: 0; pointer-events: none; transition: opacity .2s, transform .1s; z-index: 50; }
.btt.show { opacity: 1; pointer-events: auto; }
.btt:hover { transform: translateY(-2px); }

@media (max-width: 640px) { .semprog { display: none; } .clock { display: none; } main { padding: 1rem 1rem 5rem; } #btnDark .hbtn-label { display: none; } }
@media (max-width: 420px) {
  .login-card { padding: 1.25rem 1.1rem; }
  body.login-page { padding: 1rem .75rem 6rem; }
  .page-wrap { padding: 1.5rem 1rem 4rem; }
  .page-card { padding: 1.1rem 1.25rem; }
  .login-sub { font-size: 13px; }
  .login-hint { font-size: 12px; }
  .form-group label, .form-label { font-size: 12px; }
  main { padding-bottom: 6.5rem; }
}

/* ─ FALTAS BADGE (abaixo do calendário) ─ */
#hdrBadge {
  display: none;
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text3);
  transition: background .2s, color .2s, border-color .2s;
}

/* ─ SYNC BADGE ─ */
.sync-badge {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text3);
  transition: background .2s, color .2s, border-color .2s;
}
.sync-badge.saving {
  background: var(--surface2);
  color: var(--text2);
  border-color: var(--border2);
  animation: pulse-opacity .8s ease-in-out infinite alternate;
}
.sync-badge.saved {
  background: var(--surface2);
  color: var(--ok);
  border-color: var(--ok);
}
.sync-badge.error {
  background: var(--surface2);
  color: var(--warn);
  border-color: var(--warn);
}
@keyframes pulse-opacity { from { opacity: .5; } to { opacity: 1; } }

/* ─ JELLYFISH ─ */
.jellyfish-wrap {
  display: flex; justify-content: center;
  width: 100%; max-width: 380px;
  margin-bottom: -28px;
  position: relative; z-index: 2;
  pointer-events: none;
}
.jellyfish-svg {
  width: 96px; height: auto; overflow: visible;
  filter: drop-shadow(0 8px 26px rgba(59,130,246,.30));
  animation: jelly-float 4.8s ease-in-out infinite;
}
.jbell {
  fill: url(#jg-body);
  stroke: rgba(147,197,253,.50); stroke-width: .6;
}
.jbell-glow { fill: url(#jg-glow); }
.jbell-spot { fill: #fff; opacity: .18; }
.jbell-spot2 { opacity: .12; }
.jbell-gonads ellipse {
  fill: rgba(147,197,253,.09);
  stroke: rgba(147,197,253,.24); stroke-width: .6;
}
.jbell-rim {
  fill: none;
  stroke: url(#jg-rim); stroke-width: 1.4; stroke-linecap: round;
  opacity: .55;
}
.jbell-group {
  /* origin = horizontal center (60) and top (8) of the bell dome in SVG coordinates */
  transform-origin: 60px 8px;
  animation: jelly-bell 3.6s ease-in-out infinite;
}
.jt {
  fill: none;
  stroke: rgba(147,197,253,.52); stroke-width: 1.3; stroke-linecap: round;
}
.jt-thin {
  stroke: rgba(186,230,253,.38); stroke-width: 0.75;
}
@keyframes jelly-float {
  /* Deriva orgânica: correntes suaves + propulsão assimétrica por jato.
     Inclinação para a direita (ângulos positivos). Movimentos irregulares
     em X e Y imitam o comportamento real em fluido de baixo Reynolds. */
  0%   { transform: rotate(10deg)  translateX(0px)   translateY(0px);  }
  7%   { transform: rotate(11deg)  translateX(1.5px) translateY(-4px); }
  16%  { transform: rotate(9deg)   translateX(3px)   translateY(-13px);}
  27%  { transform: rotate(11.5deg)translateX(2px)   translateY(-7px); }
  38%  { transform: rotate(10.5deg)translateX(-1px)  translateY(-2px); }
  50%  { transform: rotate(9.5deg) translateX(0px)   translateY(-6px); }
  63%  { transform: rotate(11deg)  translateX(2px)   translateY(-10px);}
  76%  { transform: rotate(10deg)  translateX(1px)   translateY(-4px); }
  88%  { transform: rotate(9deg)   translateX(-1px)  translateY(-1px); }
  100% { transform: rotate(10deg)  translateX(0px)   translateY(0px);  }
}
@keyframes jelly-bell {
  /* Modelo Navier-Stokes + elasticidade: membrana elástica (mesogléia) em fluido viscoso.
     A drag viscoso suaviza o impulso muscular → contração quasi-sinusoidal amortecida.
     Micro-rotações assimétricas imitam irregularidades reais do músculo coronal. */
  0%   { transform: scaleY(1.000) scaleX(1.000) rotate(0deg);   } /* repouso */
  5%   { transform: scaleY(0.970) scaleX(1.018) rotate(0.4deg); } /* início suave da contração */
  10%  { transform: scaleY(0.900) scaleX(1.060) rotate(0.8deg); } /* contração acelerando */
  18%  { transform: scaleY(0.750) scaleX(1.145) rotate(0.5deg); } /* pico de contração */
  26%  { transform: scaleY(0.870) scaleX(1.075) rotate(-0.3deg);} /* recuo elástico */
  36%  { transform: scaleY(0.980) scaleX(1.011) rotate(0.2deg); } /* retorno ao repouso */
  44%  { transform: scaleY(1.020) scaleX(0.990) rotate(-0.2deg);} /* leve overshoot elástico */
  52%  { transform: scaleY(1.005) scaleX(0.997) rotate(0.1deg); } /* amortecendo */
  60%  { transform: scaleY(1.000) scaleX(1.000) rotate(0deg);   } /* repouso */
  100% { transform: scaleY(1.000) scaleX(1.000) rotate(0deg);   } /* deslize passivo */
}
.login-card {
  position: relative;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 20px; padding: 1.5rem 2rem;
  width: 100%; max-width: 380px;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow:
    0 8px 40px rgba(0,0,0,0.28),
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.08);
  display: flex; flex-direction: column; gap: .75rem;
  transition: box-shadow .35s, transform .35s;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Specular highlight — static top-left streak */
.login-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.20) 0%,
    rgba(255,255,255,0.04) 38%,
    transparent 65%);
  pointer-events: none; z-index: 0;
}
/* Children must sit above pseudo-elements */
.login-card > * { position: relative; z-index: 1; }
/* Dark mode overrides */
html.dark .login-card {
  background: rgba(15,10,30,0.38);
  border-color: rgba(167,139,250,0.28);
  box-shadow:
    0 8px 48px rgba(0,0,0,0.65),
    inset 0 1.5px 0 rgba(200,180,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.30);
}
html.dark .login-card::before {
  background: linear-gradient(135deg,
    rgba(167,139,250,0.15) 0%,
    rgba(139,92,246,0.04) 38%,
    transparent 65%);
}
/* Login page: bg is always dark — ensure legible text in light mode */
body.login-page:not(.dark) .login-logo { color: #e8e0ff; }
body.login-page:not(.dark) .login-logo b { color: #a78bfa; }
body.login-page:not(.dark) .login-sub { color: rgba(220,210,255,0.80); }
body.login-page:not(.dark) .login-hint,
body.login-page:not(.dark) .login-optional { color: rgba(200,190,240,0.65); }
body.login-page:not(.dark) .form-group label, body.login-page:not(.dark) .form-label { color: rgba(220,210,255,0.75); }
body.login-page:not(.dark) .magic-toggle {
  color: rgba(220,210,255,0.75);
  border-color: rgba(220,210,255,0.22);
}
body.login-page:not(.dark) .magic-toggle:hover {
  color: #a78bfa;
  border-color: #a78bfa;
  background: rgba(167,139,250,0.15);
}
body.login-page:not(.dark) .magic-divider { color: rgba(200,190,240,0.55); }
body.login-page:not(.dark) .magic-divider::before,
body.login-page:not(.dark) .magic-divider::after { background: rgba(255,255,255,0.15); }
body.login-page:not(.dark) .login-card .form-input,
body.login-page:not(.dark) .login-card .form-select {
  background: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.30);
  color: #181816;
}
body.login-page:not(.dark) .login-card .form-input:focus,
body.login-page:not(.dark) .login-card .form-select:focus {
  border-color: rgba(167,139,250,0.75);
  background: rgba(255,255,255,0.95);
}
body.login-page:not(.dark) .login-card .form-input::placeholder { color: #9a9690; }
/* Adaptive Glass — high contrast mode: fall back to solid surface */
@media (prefers-contrast: more) {
  .login-card {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--border2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  }
  .login-card::before { display: none; }
}
.login-logo {
  font-family: var(--mono); font-size: 18px;
  color: var(--text2); letter-spacing: .02em; margin-bottom: .1rem;
}
.login-logo b { color: var(--accent); font-weight: 500; }
.login-sub {
  font-size: 12px; color: var(--text2); margin-bottom: .75rem;
}
.login-err {
  font-size: 12px; color: var(--warn);
  border-radius: 6px; padding: 0;
  transition: padding .15s, background .15s;
}
.login-err:not(:empty) { padding: 6px 10px; background: var(--warnb); }
.login-submit {
  width: 100%; margin-top: .4rem; padding: 9px;
  font-size: 14px; border-radius: 8px; letter-spacing: .02em;
}
.login-submit:disabled { opacity: .6; cursor: not-allowed; }
.login-hint {
  font-size: 11px; color: var(--text2); text-align: center; margin-top: .25rem;
}
.login-optional {
  font-size: 10px; color: var(--text3); font-weight: 400;
}
.magic-toggle {
  align-self: center; background: none; border: 1px solid var(--border); cursor: pointer;
  font-size: 12px; color: var(--text2); padding: 5px 14px; border-radius: 20px;
  font-family: var(--sans); margin-top: .2rem;
  transition: color .15s, border-color .15s, background .15s;
}
.magic-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.magic-section { display: flex; flex-direction: column; gap: .6rem; }
.magic-divider {
  display: flex; align-items: center; gap: .5rem;
  font-size: 12px; color: var(--text3); margin: .25rem 0;
}
.magic-divider::before,
.magic-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.magic-ok {
  font-size: 12px; color: var(--ok, #22c55e); text-align: center; margin-top: .1rem;
}

/* ─ LOGIN PAGE (login.html) ─ */
body.login-page {
  min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-y: auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1rem 7rem;
  position: relative;
  /* deep purple-blue gradient — provides rich backdrop for glass card effect */
  background: linear-gradient(135deg, #0d0921 0%, #1a1040 40%, #0a1628 70%, #0d0f1e 100%);
}
html.dark body.login-page {
  background: linear-gradient(135deg, #07040f 0%, #120a2a 40%, #060e1a 70%, #080a12 100%);
}
body.login-page #loginCanvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
body.login-page .jellyfish-wrap,
body.login-page .login-card { position: relative; z-index: 1; }
body.login-page footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2;
  /* login page always renders on a dark gradient — footer matches that dark context */
  background: rgba(10, 7, 25, 0.82);
  backdrop-filter: blur(8px);
  border-top-color: rgba(255,255,255,0.08);
}
body.login-page footer .finfo,
body.login-page footer .fnav a { color: rgba(200,190,230,0.55); }
body.login-page footer .fnav a:hover { color: rgba(200,190,230,0.90); }

/* ─ LOADING OVERLAY ─ */
.load-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 8500;
  background: rgba(0,0,0,.25); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.load-overlay.show { display: flex; }
@keyframes spin { to { transform: rotate(360deg); } }
.load-spin {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--border2);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}

/* ─ ALERT 1H ─ */
.att-warn-1h {
  font-size: 11px; color: var(--warn); font-weight: 600;
  background: var(--warnb);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: 6px; padding: 4px 10px;
}

/* ─ OFFLINE & PENDING BADGES ─ */
.offline-badge {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid var(--warn);
  background: var(--warnb);
  color: var(--warn);
  font-weight: 600;
  letter-spacing: .03em;
}
.pending-badge {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, #f59e0b 50%, transparent);
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: #f59e0b;
}

/* ─ GEO BUTTON ACTIVE STATE ─ */
.hbtn.geo-active {
  border-color: var(--ok);
  color: var(--ok);
  background: var(--okb);
}
.hbtn.geo-active:hover {
  background: color-mix(in srgb, var(--ok) 20%, transparent);
  border-color: var(--ok);
  color: var(--ok);
}
html.dark .hbtn.geo-active {
  border-color: var(--ok);
  color: var(--ok);
  background: var(--okb);
}

/* ─ ARCHIVE BUTTON IN ATT-CARD ─ */
.att-arch-btn, .att-del-btn {
  background: none; border: none; cursor: pointer;
  font-size: 13px; padding: 2px 4px; border-radius: 5px;
  color: var(--text3); opacity: 0; transition: opacity .15s, background .15s;
  flex-shrink: 0; line-height: 1;
}
.att-head:hover .att-arch-btn,
.att-head:hover .att-del-btn { opacity: 1; }
.att-arch-btn:hover { background: var(--surface3); color: var(--text2); }
.att-del-btn:hover { background: var(--warnb); color: var(--warn); }

/* ─ COURSE MODAL ─ */
.modal-course { max-width: 500px; }
.horarios-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .45rem; }
.horario-row {
  display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap;
}
.horario-row .form-select { flex: 2; min-width: 0; }
.horario-row .form-input { flex: 1; min-width: 0; text-align: center; }
.horario-sep { font-size: 12px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }
.btn-rem-horario {
  background: none; border: 1px solid var(--border); border-radius: 5px;
  color: var(--text3); cursor: pointer; padding: 3px 7px; font-size: 12px;
  transition: all .15s; flex-shrink: 0;
}
.btn-rem-horario:hover { background: var(--warnb); color: var(--warn); border-color: var(--warn); }
.btn-add-horario {
  background: none; border: 1px dashed var(--border2); border-radius: 6px;
  color: var(--accent); cursor: pointer; padding: 4px 12px; font-size: 12px;
  font-family: var(--sans); transition: all .15s; width: 100%;
}
.btn-add-horario:hover { background: var(--accent-bg); border-color: var(--accent); }

/* ─ ARCHIVED SECTION ─ */
.archived-grid { display: flex; flex-direction: column; gap: .45rem; }
.archived-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: .65rem 1rem; display: flex; align-items: center; gap: .7rem;
  cursor: pointer; transition: background .1s, box-shadow .15s; box-shadow: var(--sh);
}
.archived-card:hover { background: var(--surface2); box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.archived-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.archived-info { flex: 1; min-width: 0; }
.archived-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archived-meta { font-size: 11px; color: var(--text3); font-family: var(--mono); margin-top: 1px; }
.archived-pct { font-family: var(--mono); font-size: 13px; font-weight: 600; flex-shrink: 0; padding: 2px 8px; border-radius: 20px; }
.archived-pct.ok     { background: var(--okb);   color: var(--ok); }
.archived-pct.danger { background: var(--warnb);  color: var(--warn); }

/* ─ ARCHIVED MODAL ─ */
.modal-lg { max-width: 520px; }
.archived-modal-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn-save.danger { background: var(--warn); }
.btn-save.danger:hover { opacity: .88; }

/* ─ DARK MODE — relógio mais visível ─ */
html.dark .clock { color: var(--text2); border-color: var(--border2); background: var(--surface3); }

/* ─ TOOLTIPS (Shadcn/UI style) ─ */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(.95);
  background: var(--text);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  z-index: 9000;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  letter-spacing: 0;
  text-transform: none;
  font-weight: normal;
}
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--text);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 9001;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ─ TREND ARROWS ─ */
.trend-up   { font-size: 10px; color: var(--ok);  margin-left: 2px; flex-shrink:0; }
.trend-down { font-size: 10px; color: #f97316;    margin-left: 2px; flex-shrink:0; }
.trend-bad  { font-size: 10px; color: var(--warn); margin-left: 2px; flex-shrink:0; }
.ev-trend { position:absolute; top:2px; right:3px; font-size:9px; line-height:1; pointer-events:none; }

/* ─ CALENDAR SLOT CHOICE POPUP ─ */
.slot-choice {
  position: fixed; z-index: 7000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.14);
  padding: .4rem .3rem;
  min-width: 170px;
}
.slot-choice-btn {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .45rem .7rem;
  background: none; border: none; border-radius: 6px;
  font-family: var(--sans); font-size: 12px; color: var(--text);
  cursor: pointer; text-align: left;
  transition: background .1s;
}
.slot-choice-btn:hover { background: var(--surface2); }

/* ─ LOADING OVERLAY — jellyfish ─ */
.load-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 8500;
  background: var(--bg);
  align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity .3s;
  opacity: 1;
}
.load-overlay.show { display: flex; }
.load-overlay.hide { opacity: 0; pointer-events: none; }
.load-jelly { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.load-jelly-svg { filter: drop-shadow(0 0 16px #8b5cf680); }
.load-label { font-family: var(--mono); font-size: 11px; color: var(--text3); letter-spacing: .08em; }
@keyframes jelly-load-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes jelly-tentacle {
  0%, 100% { transform: scaleX(1); }
  50%       { transform: scaleX(1.05); }
}
.load-overlay.show .jelly-float { animation: jelly-load-float 1.6s ease-in-out infinite; }

/* ─ PAGE FADE-IN ─ */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.page-ready { animation: pageFadeIn .4s ease-out both; }

/* ─ SEMPROG CONFIG BUTTON ─ */
#btnSemConfig { width: 20px !important; height: 20px !important; font-size: 10px; padding: 0; border-radius: 5px; opacity: .55; transition: opacity .15s; }
#btnSemConfig:hover { opacity: 1; }

/* ─ SYNC BADGE ─ */
.sync-badge { font-family: var(--mono); font-size: 10px; padding: 2px 9px; border-radius: 20px; }
.sync-badge.saving { background: color-mix(in srgb, #f59e0b 12%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 50%, transparent); color: #f59e0b; }
.sync-badge.saved  { background: var(--okb); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.sync-badge.error  { background: var(--warnb); border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent); color: var(--warn); }

/* ─ TOUR DE BOAS-VINDAS ─ */
.tour-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
  padding: 1rem;
}
.tour-overlay.open { display: flex; }
@keyframes tourSlideIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tour-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  padding: 2rem 2rem 1.5rem;
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 1rem;
  position: relative;
  animation: tourSlideIn .3s ease-out both;
}
.tour-skip {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: var(--text3); font-family: var(--sans);
  padding: 3px 8px; border-radius: 20px;
  transition: color .15s, background .15s;
}
.tour-skip:hover { color: var(--text2); background: var(--surface2); }
.tour-slides { min-height: 180px; }
.tour-slide { display: none; text-align: center; padding: .5rem 0; }
.tour-slide.active { display: block; }
.tour-icon { font-size: 3rem; line-height: 1; margin-bottom: .75rem; }
.tour-title { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: .5rem; }
.tour-text  { font-size: 13px; color: var(--text2); line-height: 1.6; max-width: 320px; margin: 0 auto; }
.tour-dots { display: flex; justify-content: center; gap: .4rem; }
.tour-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border2); border: none; cursor: pointer;
  padding: 0; transition: background .2s, transform .2s;
}
.tour-dot.active { background: var(--accent); transform: scale(1.25); }
.tour-nav { display: flex; justify-content: space-between; gap: .5rem; }
.tour-btn {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 18px; font-size: 13px; font-family: var(--sans); cursor: pointer;
  color: var(--text2); transition: all .15s;
}
.tour-btn:hover { background: var(--surface3); color: var(--text); }
.tour-next {
  background: var(--accent); border-color: var(--accent); color: #fff; margin-left: auto;
}
.tour-next:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }

/* ─ GEO SETUP BANNER (aba frequência) ─ */
.geo-setup-banner {
  display: none; align-items: center; gap: .75rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r); padding: .75rem 1rem; margin-bottom: .75rem;
}
.geo-setup-banner.show { display: flex; }
.geo-setup-icon { font-size: 1.4rem; flex-shrink: 0; }
.geo-setup-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.geo-setup-text strong { font-size: 13px; font-weight: 600; color: var(--text); }
.geo-setup-text span   { font-size: 12px; color: var(--text2); }
.geo-setup-btn {
  background: var(--accent); border: none; border-radius: 7px;
  padding: 5px 14px; font-size: 12px; color: #fff;
  cursor: pointer; font-family: var(--sans); white-space: nowrap;
  transition: background .15s; flex-shrink: 0;
}
.geo-setup-btn:hover { background: var(--accent2); }

/* ─ LOCATION MODAL ─ */
.loc-tab-row { display: flex; gap: .3rem; margin-bottom: 1rem; }
.loc-tab {
  flex: 1; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer;
  font-family: var(--sans); color: var(--text2); transition: all .15s;
}
.loc-tab:hover { background: var(--surface3); color: var(--text); }
.loc-tab.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 500; }
.loc-panel { display: none; }
.loc-panel.active { display: block; }
.loc-status { font-size: 12px; margin-top: .5rem; min-height: 1rem; }
.loc-results { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; max-height: 220px; overflow-y: auto; }
.loc-result-btn {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 7px;
  padding: .5rem .75rem; font-size: 12px; text-align: left; cursor: pointer;
  font-family: var(--sans); color: var(--text); transition: background .1s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loc-result-btn:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.loc-search-hint { font-size: 12px; color: var(--text3); padding: .3rem 0; }

/* ─ GUEST UPGRADE BANNER ─ */
.guest-upgrade-banner {
  display: none;
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 800;
  max-width: 560px; width: calc(100% - 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  padding: .9rem 1.1rem;
  align-items: center; gap: .75rem;
}
.guest-upgrade-banner.show { display: flex; }
.guest-upgrade-icon { font-size: 1.5rem; flex-shrink: 0; }
.guest-upgrade-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.guest-upgrade-text strong { font-size: 13px; font-weight: 600; color: var(--text); }
.guest-upgrade-text span   { font-size: 12px; color: var(--text2); }
.guest-upgrade-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.guest-upgrade-create {
  background: var(--accent); border: none; border-radius: 7px;
  padding: 6px 14px; font-size: 12px; color: #fff;
  cursor: pointer; font-family: var(--sans); white-space: nowrap;
  transition: background .15s;
}
.guest-upgrade-create:hover { background: var(--accent2); }
.guest-upgrade-dismiss {
  background: none; border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 12px; font-size: 12px; color: var(--text2);
  cursor: pointer; font-family: var(--sans); white-space: nowrap;
  transition: all .15s;
}
.guest-upgrade-dismiss:hover { background: var(--surface2); color: var(--text); }
@media (max-width: 480px) {
  .guest-upgrade-banner { flex-direction: column; align-items: flex-start; }
  .guest-upgrade-actions { width: 100%; }
  .guest-upgrade-create, .guest-upgrade-dismiss { flex: 1; text-align: center; }
  /* Login page footer — compact on small phones */
  body.login-page footer { padding: .45rem 1rem; flex-wrap: wrap; gap: .4rem; }
  body.login-page footer .finfo { font-size: 10px; }
  body.login-page footer .fnav { gap: .6rem; }
  body.login-page footer .fnav a { font-size: 11px; }
  body.login-page { padding-bottom: 3.5rem; }
  /* Index footer — hide secondary nav links to reduce height */
  footer .fnav-secondary { display: none; }
  /* General footer — stack on very small screens */
  footer { padding: .6rem 1rem; gap: .35rem; }
  .fnav { gap: .65rem; }
  .fnav a { font-size: 11px; }
}

/* ─ GLASSMORPHISM BUTTONS (login.html) ─ */
.btn-glass {
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  width: 100%; padding: .875rem 1.2rem; border-radius: 14px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .02em;
  cursor: pointer; position: relative; overflow: hidden;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  border: 1px solid rgba(255,255,255,0.18);
}
.btn-glass:active { transform: scale(.98) !important; }

.btn-glass-email {
  background: rgba(109,40,217,0.25);
  color: #e0d4ff;
  box-shadow: 0 4px 24px rgba(109,40,217,0.30), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-glass-email:hover {
  background: rgba(124,58,237,0.38);
  border-color: rgba(167,139,250,0.40);
  box-shadow: 0 8px 32px rgba(109,40,217,0.42), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-2px);
}

.btn-glass-google {
  background: rgba(255,255,255,0.09);
  color: #e8e0ff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-glass-google:hover {
  background: rgba(255,255,255,0.17);
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateY(-2px);
}

/* Dark mode overrides */
html.dark .btn-glass-email {
  background: rgba(109,40,217,0.32);
  border-color: rgba(167,139,250,0.25);
}
html.dark .btn-glass-google {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
}

.btn-glass-anon {
  background: rgba(100,100,130,0.12);
  color: rgba(200,190,240,0.65);
  font-size: 13px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,.07);
  border-color: rgba(200,190,240,0.12);
}
.btn-glass-anon:hover {
  background: rgba(120,120,160,0.20);
  border-color: rgba(200,190,240,0.22);
  box-shadow: 0 5px 20px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,.10);
  transform: translateY(-1px);
}
html.dark .btn-glass-anon {
  background: rgba(80,80,110,0.18);
  border-color: rgba(160,150,200,0.15);
}

/* ─ GLASS DIVIDER ─ */
.glass-divider {
  display: flex; align-items: center; text-align: center;
  color: rgba(200,190,240,0.45); font-size: 12px; margin: .5rem 0;
}
.glass-divider::before,
.glass-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.13); margin: 0 .65rem; }

/* ─ GOOGLE OAUTH BUTTON (login.html) - kept for reference ─ */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: 9px 14px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border2);
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--text); cursor: pointer;
  transition: background .15s, box-shadow .15s, border-color .15s;
  letter-spacing: .01em;
}
.btn-google:hover {
  background: var(--surface2);
  border-color: var(--border2);
  box-shadow: 0 1px 6px rgba(0,0,0,.10);
}
body.login-page:not(.dark) .btn-google {
  background: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.30);
  color: #181816;
}
body.login-page:not(.dark) .btn-google:hover {
  background: rgba(255,255,255,0.96);
  border-color: rgba(255,255,255,0.55);
}
.google-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ─ LOGIN PAGE GEO SECTION ─ */
.login-geo-section {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; padding: .75rem 1rem;
}
.login-geo-inner { display: flex; align-items: center; gap: .6rem; }
.login-geo-icon  { font-size: 1.2rem; flex-shrink: 0; }
.login-geo-text  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.login-geo-text strong { font-size: 13px; font-weight: 600; color: rgba(230,220,255,0.95); }
.login-geo-text span   { font-size: 11px; color: rgba(200,190,240,0.70); }
.login-geo-btn {
  background: rgba(139,92,246,0.30); border: 1px solid rgba(139,92,246,0.50);
  border-radius: 7px; padding: 5px 13px; font-size: 12px; color: rgba(220,210,255,0.95);
  cursor: pointer; font-family: var(--sans); white-space: nowrap;
  transition: background .15s, border-color .15s; flex-shrink: 0;
}
.login-geo-btn:hover { background: rgba(139,92,246,0.50); border-color: rgba(167,139,250,0.80); }
.login-geo-status { font-size: 11px; margin-top: .4rem; line-height: 1.4; }
.login-geo-section.configured .login-geo-btn { background: rgba(16,185,129,0.20); border-color: rgba(16,185,129,0.40); color: rgba(167,243,208,0.95); }
.login-geo-section.configured .login-geo-btn:hover { background: rgba(16,185,129,0.35); }

/* ─ ACCOUNT AVATAR (header) ─ */
.account-btn { padding: 3px 6px; }
.account-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  pointer-events: none; user-select: none; flex-shrink: 0;
}

/* ─ ACCOUNT MODAL ─ */
.modal-account { max-width: 420px; overflow-y: auto; max-height: calc(100vh - 2rem); }

/* ─ DAY SUMMARY MODAL ─ */
.modal-day-summary { max-width: 500px; width: 100%; overflow-y: auto; max-height: calc(100vh - 2rem); padding: 1.25rem 1.5rem 1.5rem; }
.ds-header { text-align: center; padding: .5rem 0 1.1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.ds-greeting { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: .3rem; }
.ds-date { font-family: var(--mono); font-size: 11px; color: var(--text3); text-transform: capitalize; }
.ds-section { margin-bottom: 1rem; }
.ds-section-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem; }
.ds-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.ds-empty { font-size: 12px; color: var(--text3); padding: .25rem 0; }
.ds-row { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.ds-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ds-ev-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.ds-row-info { flex: 1; min-width: 0; }
.ds-row-title { font-size: 13px; font-weight: 500; color: var(--text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-row-meta { font-size: 11px; color: var(--text3); font-family: var(--mono); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-row-badges { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex-shrink: 0; }
.ds-att-badge { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 20px; white-space: nowrap; }
.ds-att-badge.ok   { background: var(--okb);      color: var(--ok); }
.ds-att-badge.miss { background: var(--warnb);    color: var(--warn); }
.ds-att-badge.warn { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #b45309; border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent); }
.ds-att-badge.now  { background: var(--accent-bg); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.ds-att-badge.soon { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }
.ds-trend { font-size: 10px; font-weight: 600; white-space: nowrap; }
.ds-trend.miss { color: var(--warn); }
.ds-trend.warn { color: #b45309; }
.ds-task-row { font-size: 12px; color: var(--text2); padding: .2rem 0 .2rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ds-metric { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.ds-metric-val { font-size: 18px; font-weight: 700; color: var(--text); font-family: var(--mono); }
.ds-metric-lbl { font-size: 10px; color: var(--text3); }
.ds-metric-val.ok-text   { color: var(--ok); }
.ds-metric-val.miss-text { color: var(--warn); }
.ds-metric-val.warn-text { color: #b45309; }

/* Avatar + user info row */
.acc-user-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem 0 1rem; border-bottom: 1px solid var(--border); margin-bottom: .25rem;
}
.acc-avatar-wrap {
  position: relative; flex-shrink: 0; cursor: pointer;
  border-radius: 50%; display: inline-block;
}
.acc-avatar-lg {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; letter-spacing: .02em;
}
.acc-avatar-cam {
  position: absolute; bottom: 0; right: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; border: 2px solid var(--bg);
  pointer-events: none;
}
.acc-user-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.acc-name-row  { display: flex; align-items: center; gap: .35rem; }
.acc-name  { font-size: 15px; font-weight: 600; color: var(--text); }
.acc-email { font-size: 12px; color: var(--text2); word-break: break-all; }
.acc-meta  { font-size: 11px; color: var(--text3); }
.acc-edit-btn {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  font-size: 11px; color: var(--text3); padding: 1px 4px;
  border-radius: 4px; line-height: 1; transition: color .15s, background .15s;
}
.acc-edit-btn:hover { color: var(--accent); background: var(--surface2); }

/* Sections */
.acc-section {
  padding: .85rem 0 .6rem;
  border-bottom: 1px solid var(--border);
}
.acc-section:last-of-type { border-bottom: none; }
.acc-section-title {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text3); margin-bottom: .55rem;
}
.acc-section-title.danger { color: var(--warn); }

/* Rows */
.acc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem 0; font-size: 13px; color: var(--text2);
}
.acc-row-split { gap: .5rem; }
.acc-row-btn {
  width: 100%; background: none; border: none; text-align: left;
  cursor: pointer; font-family: var(--sans); border-radius: 6px;
  padding: .4rem .5rem; transition: background .1s; display: flex;
  align-items: center; justify-content: space-between;
}
.acc-row-btn:hover { background: var(--surface2); }
.acc-arr { color: var(--text3); font-size: 14px; }

/* Form blocks inside sections */
.acc-form-block { padding-top: .25rem; }

/* Action buttons */
.acc-action-btn {
  display: block; width: 100%; text-align: left;
  background: none; border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 12px;
  font-family: var(--sans); font-size: 13px; color: var(--text2);
  cursor: pointer; margin-bottom: .4rem; transition: all .15s;
}
.acc-action-btn:last-child { margin-bottom: 0; }
.acc-action-btn:hover { background: var(--surface2); color: var(--text); border-color: var(--border2); }
.acc-action-btn.danger { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.acc-action-btn.danger:hover { background: var(--warnb); border-color: var(--warn); }
html.dark .acc-action-btn { border-color: var(--border2); }
html.dark .acc-action-btn:hover { background: var(--surface3); }
.acc-sync-meta { font-size: 11px; color: var(--text3); margin-top: -.2rem; margin-bottom: .4rem; padding-left: 2px; min-height: .8rem; }
.acc-sync-meta.warn { color: var(--warn); }
.acc-campus-sub { font-size: 10px; color: var(--text3); }
.acc-campus-layout { display: flex; flex-direction: column; gap: .1rem; }
.modal-export-prompt { font-size: 13px; color: var(--text2); margin-bottom: .85rem; }

/* Semester progress bar inside account modal */
.acc-sem-prog { padding: .2rem .5rem .5rem; margin-top: -.35rem; }
.acc-sem-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.acc-sem-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s; }

/* Danger zone */
.acc-danger-zone {
  background: color-mix(in srgb, var(--warn) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 18%, transparent);
  border-radius: 8px;
  padding: .85rem .75rem .6rem !important;
  margin-top: .5rem;
}
.acc-danger-zone .acc-section-title { color: var(--warn); }

/* ─ SPLASH SCREEN — PS5 style ─ */
.sp-screen {
  position: fixed; inset: 0; z-index: 9000;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, #0b1437 0%, #060b24 45%, #010409 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* starts invisible; sp-idle / sp-active trigger entry */
  opacity: 0;
  transform: scale(1);
}
/* Legacy sp-in kept for safety — no longer used */
.sp-screen.sp-in  { animation: sp-fade-in .5s ease-out forwards; }
.sp-screen.sp-out { animation: sp-zoom-out .7s cubic-bezier(.4,0,.6,1) forwards !important; }

/* ── Idle state: only the pulsing avatar, no nebula, no particles ── */
.sp-screen.sp-idle { animation: sp-fade-in .3s ease-out forwards; }

.sp-screen.sp-idle .sp-nebula  { opacity: 0; animation: none; }

.sp-screen.sp-idle .sp-avatar {
  opacity: 1;
  cursor: pointer;
  animation: sp-breathe 3s ease-in-out infinite;
  transition: transform .2s ease;
}
.sp-screen.sp-idle .sp-avatar:hover { transform: scale(1.06); }

/* ── Active state: full immersion after avatar click ── */
.sp-screen.sp-active { opacity: 1; } /* keep visible while particles/nebula appear */

.sp-screen.sp-active .sp-avatar {
  opacity: 1;
  cursor: default;
  animation: sp-avatar-click-pop .3s ease-out, sp-breathe 3s .3s ease-in-out infinite;
}

.sp-screen.sp-active .sp-nebula {
  animation: sp-nebula-in .4s ease-out forwards, sp-nebula-drift 10s .4s ease-in-out infinite;
}

/* particles inherit base .sp-particle animation when sp-idle override is gone */

/* Drifting nebula accent layer */
.sp-nebula {
  position: absolute; inset: -50%;
  background:
    radial-gradient(ellipse 45% 35% at 30% 40%, rgba(59,130,246,.13) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 72% 62%, rgba(124,58,237,.13) 0%, transparent 70%);
  animation: sp-nebula-drift 10s ease-in-out infinite;
  pointer-events: none;
}

/* Avatar circle */
.sp-avatar {
  position: relative; z-index: 2;
  width: 148px; height: 148px; border-radius: 50%;
  background: #7c3aed;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 54px; font-weight: 700; letter-spacing: .02em;
  overflow: hidden;
  opacity: 0;
}
.sp-screen.sp-in .sp-avatar {
  animation:
    sp-avatar-in   .8s .25s ease-out forwards,
    sp-breathe     3s  .25s ease-in-out infinite;
}

/* Floating particles — position & opacity driven by JS Brownian loop */
.sp-particle {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210,230,255,.95) 0%, rgba(160,190,255,.25) 100%);
  opacity: 0;
  pointer-events: none;
}

/* ── Keyframes ── */
@keyframes sp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sp-zoom-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.15); }
}

@keyframes sp-nebula-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(3%, 2%) rotate(1deg); }
  66%  { transform: translate(-2%, -3%) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes sp-nebula-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sp-avatar-in {
  from { opacity: 0; transform: scale(.75); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sp-avatar-click-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes sp-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 0       rgba(124,58,237,.0),
      0 0 28px  8px  rgba(124,58,237,.45),
      0 0 65px  22px rgba(59,130,246,.2);
  }
  50% {
    box-shadow:
      0 0 0 6px     rgba(124,58,237,.15),
      0 0 50px 16px rgba(124,58,237,.75),
      0 0 110px 45px rgba(59,130,246,.35);
  }
}

/* ─ SAFE AREA INSETS (iPhone notch / home indicator) ─ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body.login-page footer {
    padding-bottom: calc(.45rem + env(safe-area-inset-bottom));
  }
  main {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
}

/* ─ SAFE AREA TOP (iOS notch / Dynamic Island) ─ */
@supports (padding-top: env(safe-area-inset-top)) {
  header {
    padding-top: env(safe-area-inset-top);
  }
  header .header-top {
    /* height already 50px; top padding is above it */
    margin-top: 0;
  }
}

/* ─ FOOTER MOBILE EXTRA SMALL (≤360px) ─ */
@media (max-width: 360px) {
  footer { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .finfo { order: 2; }
  .fnav  { order: 1; gap: .5rem; }
  .fnav a { font-size: 11px; }
  body.login-page footer { flex-direction: row; align-items: center; }
}