/* ═══════ STATUS FOOTER — fixed bottom on ALL pages ═══════ */
.status-foot {
  position: fixed;
  bottom: 0;
  left: var(--nav-w);
  right: 0;
  min-height: var(--status-foot-min-h);
  background: var(--void);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  padding: 4px 16px;
  gap: 4px 10px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-ghost);
  flex-shrink: 0;
  letter-spacing: .3px;
  z-index: 50;
  isolation: isolate;
  box-shadow: 0 -10px 24px rgba(0,0,0,.28);
}
#btn-logout, #simulate-badge, #tct-clock { white-space: nowrap; }
@keyframes pulse { 50% { opacity: .3; } }
.sf-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse 2s ease-in-out infinite; box-shadow: 0 0 6px var(--success); }
.sf-sep { color: rgba(255,255,255,.06); }

/* ═══════ ANIMATIONS ═══════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fin { animation: fadeUp .4s cubic-bezier(.4,0,.2,1) both; }

/* Page slide-in — fast, subtle */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#page-training.visible, #page-bloodbags.visible,
#page-nerve.visible, #page-bleeding.visible {
  animation: pageIn .18s cubic-bezier(.25,.1,.25,1) both;
}

/* Dashboard fade-in when returning to chain tool */
#dashboard-el.visible {
  animation: pageIn .15s cubic-bezier(.25,.1,.25,1) both;
}

/* Table body content swap — quick fade+slide */
@keyframes tableSwap {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.table-anim {
  animation: tableSwap .15s cubic-bezier(.25,.1,.25,1) both;
}

/* Table row stagger — very fast cascade */
@keyframes rowSlide {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.row-anim { animation: rowSlide .12s cubic-bezier(.25,.1,.25,1) both; }
.fd1 { animation-delay: .03s; }
.fd2 { animation-delay: .06s; }
.fd3 { animation-delay: .09s; }
.fd4 { animation-delay: .12s; }
.fd5 { animation-delay: .15s; }
.fd6 { animation-delay: .18s; }
.fd7 { animation-delay: .21s; }
.fd8 { animation-delay: .24s; }
.fd9 { animation-delay: .27s; }
.fd10 { animation-delay: .30s; }

/* Timer blink */
@keyframes blink { 50% { opacity: .3; } }
.blink-danger { animation: blink .5s infinite alternate; }

/* Theme animations: candy, unicorn, rainbow */
@keyframes candy-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
#candy-bg.active { opacity: 0.25; }
#candy-rain.active { opacity: 1; }
.cdy {
  position: absolute;
  top: -55px;
  left: var(--x);
  font-size: 28px;
  animation: cdy-fall var(--t) linear var(--d) infinite;
}
@keyframes cdy-fall {
  0%   { top: -55px;  transform: rotate(0deg);   opacity: 1; }
  90%  {              transform: rotate(300deg);  opacity: 0.9; }
  100% { top: 108%;   transform: rotate(360deg);  opacity: 0; }
}
#unicorn-wrap.active { display: block; }
#unicorn-emoji { animation: unicorn-bounce 0.55s ease-in-out infinite; }
@keyframes unicorn-run {
  0%    { left: -80px;              transform: scaleX(-1); }
  44%   { left: calc(100% + 80px);  transform: scaleX(-1); }
  44.1% { left: calc(100% + 80px);  transform: scaleX(1);  }
  94%   { left: -80px;              transform: scaleX(1);  }
  94.1% { left: -80px;              transform: scaleX(-1); }
  100%  { left: -80px;              transform: scaleX(-1); }
}
@keyframes unicorn-bounce {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-22px); }
}
#rainbow-arc .rb-band { animation: rb-pulse 4s ease-in-out infinite; }
#rainbow-arc .rb-band:nth-child(1) { animation-delay: 0s; }
#rainbow-arc .rb-band:nth-child(2) { animation-delay: .15s; }
#rainbow-arc .rb-band:nth-child(3) { animation-delay: .30s; }
#rainbow-arc .rb-band:nth-child(4) { animation-delay: .45s; }
#rainbow-arc .rb-band:nth-child(5) { animation-delay: .60s; }
#rainbow-arc .rb-band:nth-child(6) { animation-delay: .75s; }
#rainbow-arc .rb-band:nth-child(7) { animation-delay: .90s; }
@keyframes rb-pulse { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
#matrix-canvas.active { opacity: 1; }

/* ═══════ ADDITIONAL FUNCTIONAL STYLES ═══════ */

/* Loading overlay */
#overlay {
  position: fixed; inset: 0;
  background: var(--void);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity .4s ease;
}
#overlay.hidden { opacity: 0; pointer-events: none; }
.spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(99,102,241,.15);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#overlay-text {
  margin-top: 18px;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
}

/* Login screen */
#login-screen {
  position: fixed; inset: 0;
  background: var(--void);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}
#login-screen.hidden { display: none; }
.login-box {
  width: 400px;
  background: rgba(17,23,35,.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(99,102,241,.15);
  border-radius: var(--r-lg);
  padding: 44px 40px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.4), 0 0 0 1px rgba(99,102,241,.05);
}
.login-box h1 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  background: linear-gradient(135deg, #818cf8, #6366f1, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.login-box .sub {
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.login-access-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(99,102,241,.04);
  border: 1px solid rgba(99,102,241,.12);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 24px;
  text-align: left;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.field { text-align: left; margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 13px 16px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 2px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus { border-color: var(--flame); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.remember-row a {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-ghost);
  text-decoration: underline;
}
#btn-enter {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  border: none;
  border-radius: var(--r);
  color: #fff;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 4px 16px rgba(99,102,241,.25);
}
#btn-enter:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(99,102,241,.35); }
#btn-enter:active { transform: translateY(0); }
#btn-enter:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
#login-err {
  margin-top: 14px;
  font-size: 11px;
  color: var(--danger);
  min-height: 16px;
}

/* Options panel */
#options-panel {
  position: fixed;
  top: 0; right: -360px; bottom: 0;
  width: 360px;
  background: rgba(17,23,35,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid rgba(99,102,241,.08);
  z-index: 5000;
  display: flex;
  flex-direction: column;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,.3);
}
#options-panel.open { right: 0; }
.opt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.opt-header button {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
  color: var(--text-secondary);
  transition: background .15s;
}
.opt-header button:hover { background: var(--raised); }
.opt-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.opt-section { margin-bottom: 20px; }
.opt-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-ghost);
  margin-bottom: 8px;
}
.opt-select {
  width: 100%;
  padding: 9px 14px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.opt-select:focus { border-color: var(--flame); }
.opt-slider-row { display: flex; align-items: center; gap: 10px; }
.opt-slider { flex: 1; accent-color: #6366f1; }
.opt-val { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); min-width: 40px; text-align: right; }
.opt-data-btn {
  display: block;
  width: 100%;
  padding: 8px 14px;
  margin-bottom: 6px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .15s;
}
.opt-data-red { background: rgba(251,113,133,.06); border: 1px solid rgba(251,113,133,.2); color: var(--danger); }
.opt-data-gold { background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.15); color: var(--gold); }
.opt-data-purple { background: rgba(167,139,250,.06); border: 1px solid rgba(167,139,250,.15); color: var(--violet); }
.opt-data-green { background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.16); color: var(--success); }
.opt-vis-btn {
  display: block;
  width: 100%;
  padding: 8px 14px;
  margin-bottom: 6px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--raised);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
}
.opt-key-row { display: flex; gap: 6px; margin-top: 8px; }
.opt-key-input {
  flex: 1;
  padding: 8px 10px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
}
.opt-key-save {
  padding: 8px 14px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.opt-key-status { font-size: 11px; margin-top: 6px; min-height: 16px; }
.opt-help-text {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 6px;
}
.opt-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chain-mode-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  overflow: auto;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(17,23,35,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  z-index: 6200;
  display: none;
}
.chain-mode-panel.open {
  display: block;
}
.chain-mode-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.chain-mode-title {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.chain-mode-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
}
.chain-mode-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr auto auto auto;
  gap: 10px;
  align-items: center;
}
.chain-mode-status {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-secondary);
}
.chain-mode-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 6190;
  display: none;
}
.chain-mode-overlay.open {
  display: block;
}
.mode-card {
  position: relative;
}
.stat-cell.mode-card.planner-enabled { cursor: pointer; }
.stat-cell.mode-card.active {
  background: linear-gradient(180deg, rgba(138,180,255,.1), rgba(138,180,255,.03));
  box-shadow: inset 0 0 0 1px rgba(138,180,255,.22);
}
.mode-card-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.mode-card-btn:hover {
  color: var(--text-primary);
  border-color: var(--flame);
}
.mode-card-btn.active {
  color: #fff;
  background: rgba(249,115,22,.18);
  border-color: var(--flame);
}
@media (max-width: 1100px) {
  .chain-mode-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .chain-mode-grid {
    grid-template-columns: 1fr;
  }
  .chain-mode-panel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 24px);
    padding: 16px;
  }
}

#opts-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
  z-index: 4999;
  display: none;
}
#options-panel.open ~ #opts-overlay { display: block; }
#opts-overlay.visible { display: block; }

/* Stats panel */
#stats-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 3999;
  display: none;
}
#stats-panel {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw; max-width: 720px;
  max-height: 85vh;
  background: rgba(17,23,35,.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(99,102,241,.1);
  border-radius: var(--r-lg);
  z-index: 4000;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
#stats-panel.open { display: flex; }
#stats-panel.open ~ #stats-overlay { display: block; }
#stats-panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
#stats-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.stats-legend { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.stats-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.stats-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
#stats-chart-wrap { margin-bottom: 16px; }
#stats-chart-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#stats-chart-controls button {
  padding: 4px 12px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.chart-hint { font-size: 10px; color: var(--text-ghost); margin-left: auto; }
#stats-chart { width: 100%; height: 220px; }

/* Confirm overlay (training) */
#confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}
#confirm-overlay.open { display: flex; }
#confirm-box {
  background: rgba(17,23,35,.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(251,113,133,.2);
  border-radius: var(--r-lg);
  padding: 32px 36px;
  width: 400px;
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
}
#confirm-box h3 {
  color: var(--danger);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
#confirm-box p {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 24px;
}
.confirm-btns { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-btns button {
  padding: 9px 22px;
  border-radius: var(--r-sm);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
#confirm-cancel {
  background: var(--raised);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--r-sm);
  transition: all .15s;
}
#confirm-cancel:hover { background: var(--elevated); }
#confirm-ok {
  background: rgba(251,113,133,.1);
  border: 1px solid rgba(251,113,133,.3);
  color: var(--danger);
  border-radius: var(--r-sm);
  transition: all .15s;
}
#confirm-ok:hover { background: rgba(251,113,133,.2); }

/* Full-page reports (your info, training, BB, nerve, bleeding) */
#page-your-info, #page-training, #page-bloodbags, #page-nerve, #page-bleeding {
  position: fixed;
  top: 0;
  left: var(--nav-w);
  right: 0;
  bottom: var(--footer-safe-boundary);
  background: var(--void);
  z-index: 40;
  display: none;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
#page-your-info.visible, #page-training.visible, #page-bloodbags.visible, #page-nerve.visible, #page-bleeding.visible {
  display: flex;
}
#dashboard-el.visible { display: grid !important; }
#nav-rail-el.visible { display: flex !important; }

#your-info-header, #training-header, #bb-header, #nerve-header, #bleeding-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  min-width: 0;
  flex: 1 1 auto;
}