:root {
  --bg: #0f172a;
  --card: #1e293b;
  --card-2: #172033;
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #334155;
  --danger: #f87171;
  --ok: #4ade80;
  --input-bg: #0f172a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  /* Respect iPhone safe areas (notch / home indicator) for fixed elements. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-text-size-adjust: 100%;
}

/* Kill the grey flash iOS draws over tapped buttons/links. */
button, a, .icon-btn, .ghost-btn, .rest-preset {
  -webkit-tap-highlight-color: transparent;
}

header {
  text-align: center;
  padding: 2rem 1rem 0.5rem;
}

header h1 { margin: 0; font-size: 2rem; }
.subtitle { color: var(--muted); margin: 0.25rem 0 0; }

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem;
  display: grid;
  gap: 1.25rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.card h2 { margin-top: 0; }

form { display: contents; }

label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.controls .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem;
}

.focus {
  margin: 0.85rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
}

input, select, textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font-size: 16px; /* >=16px so iOS Safari doesn't auto-zoom on focus */
  font-family: inherit;
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  background: var(--accent-strong);
  color: #04121f;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: var(--accent); }

button:disabled,
button:disabled:hover {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.7;
}

.actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.msg { font-size: 0.9rem; margin: 0; min-height: 1.2em; }
.msg.error { color: var(--danger); }
.msg.success { color: var(--ok); }

/* Exercise blocks */
.exercise {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
  background: var(--card-2);
}
.exercise:last-child { margin-bottom: 0; }

.exercise h3 {
  margin: 0 0 0.65rem;
  font-size: 1.1rem;
}

.set-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr 5rem 5rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-top: 1px dashed var(--border);
}
.set-row:first-of-type { border-top: none; }

.set-num {
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}

.set-target { color: var(--muted); font-size: 0.9rem; }

.set-row input {
  padding: 0.4rem 0.5rem;
  font-size: 16px; /* keep >=16px so iOS Safari doesn't zoom on focus */
}

.set-head {
  display: grid;
  grid-template-columns: 1.6rem 1fr 5rem 5rem;
  gap: 0.6rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-bottom: 0.15rem;
}
.set-head span:nth-child(3),
.set-head span:nth-child(4) { text-align: center; }

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.filter { flex-direction: row; align-items: center; gap: 0.5rem; }
.filter select { width: auto; }

/* History */
.session {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-top: 0.75rem;
}
.session-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.session .who { color: var(--accent); font-weight: 600; }
.session .meta { color: var(--muted); font-size: 0.85rem; }
.session .delete {
  background: none; color: var(--danger);
  padding: 0.4rem 0.5rem; min-height: 40px;
  font-size: 0.85rem; font-weight: 500;
}
.session .delete:hover { text-decoration: underline; background: none; }
.session-actions { display: flex; gap: 0.25rem; align-items: center; }
.session .repeat, .session .edit {
  background: none; color: var(--accent);
  padding: 0.4rem 0.5rem; min-height: 40px;
  font-size: 0.85rem; font-weight: 500;
}
.session .repeat:hover, .session .edit:hover { text-decoration: underline; background: none; }

/* Inline session editor */
.session-edit {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}
.edit-set-head, .edit-set-row {
  display: grid;
  grid-template-columns: 1fr 5rem 5rem;
  gap: 0.5rem;
  align-items: center;
}
.edit-set-head {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.edit-set-row { margin-bottom: 0.35rem; }
.edit-set-row .edit-ex { font-size: 0.9rem; color: var(--text); }
.edit-set-row input { padding: 0.35rem 0.45rem; font-size: 16px; /* avoid iOS zoom */ }
.edit-notes-label { margin-top: 0.5rem; display: block; }
.edit-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.session ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.session li { color: var(--text); font-size: 0.92rem; }
.session .ex-name { color: var(--text); font-weight: 600; }
.session .set-detail { color: var(--muted); }
.session .sess-notes { color: var(--muted); font-style: italic; margin: 0.4rem 0 0; }

.empty { color: var(--muted); text-align: center; padding: 1.25rem 0; }

@media (max-width: 480px) {
  .set-row, .set-head { grid-template-columns: 1.4rem 1fr 3.8rem 3.8rem; gap: 0.4rem; }
  main { padding: 0.75rem; }
  .card { padding: 1rem; }
  header { padding: 1.25rem 1rem 0.5rem; }
  header h1 { font-size: 1.6rem; }
  /* Keep toasts from covering the whole width on small phones */
  #toast-stack { left: 0.75rem; right: 0.75rem; }
  .toast { min-width: 0; max-width: 100%; }
}

/* Exercise complete button + done state */
.ex-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.ex-header h3 { margin: 0; }

.complete-ex {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  white-space: nowrap;
}
.complete-ex:hover { background: var(--accent); color: #04121f; }

/* Exercise leaving the list */
.exercise.removing {
  animation: slideOut 0.35s ease forwards;
}
@keyframes slideOut {
  to { opacity: 0; transform: translateX(40px); height: 0; padding: 0; margin: 0; }
}

.progress-line {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
}

.all-done {
  text-align: center;
  padding: 1.5rem 0.5rem;
}
.all-done .big { font-size: 1.5rem; font-weight: 700; color: var(--ok); }
.all-done .sub { color: var(--muted); margin-top: 0.25rem; }

/* Toast notifications */
#toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 1000;
  pointer-events: none;
}
.toast {
  background: var(--card);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 0.8rem 1.1rem;
  min-width: 220px;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  animation: toastIn 0.3s ease forwards, toastOut 0.4s ease forwards 3.4s;
}
.toast.celebrate {
  border-color: var(--ok);
  border-left-color: var(--ok);
}
.toast .toast-title { font-weight: 700; margin: 0 0 0.15rem; }
.toast .toast-title.ok { color: var(--ok); }
.toast .toast-title.accent { color: var(--accent); }
.toast .toast-body { color: var(--muted); font-size: 0.88rem; margin: 0; }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(120%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(120%); }
}

/* Confetti */
#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -12px;
  width: 9px;
  height: 14px;
  opacity: 0.9;
  will-change: transform;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform: translateY(105vh) rotate(720deg); opacity: 1; }
}

/* Error toast + rejected-action shake */
.toast.error {
  border-color: var(--danger);
  border-left-color: var(--danger);
}
.toast .toast-title.err { color: var(--danger); }

.exercise.shake {
  animation: shake 0.4s ease;
  border-color: var(--danger);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(7px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

/* ============================================================
   Renee's botanical / landscape-architect theme
   Activated by body.theme-botanical (set per selected person).
   Overrides the color variables and adds floral decorations.
   ============================================================ */
body.theme-botanical {
  --bg: #f4f9f0;
  --card: #ffffff;
  --card-2: #f0f6ea;
  --accent: #7bb661;        /* leafy green */
  --accent-strong: #5a9146;
  --text: #33402c;
  --muted: #7c8a72;
  --border: #d7e4cc;
  --danger: #d97b8f;        /* soft rose */
  --ok: #6bbf72;
  --input-bg: #ffffff;      /* light inputs so reps/wt are readable */
  background:
    radial-gradient(circle at 12% 18%, rgba(246, 197, 214, 0.35), transparent 40%),
    radial-gradient(circle at 88% 12%, rgba(196, 224, 178, 0.4), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(214, 232, 196, 0.45), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* Solid (primary) buttons: white text on the green accent. Transparent/text
   buttons (ghost, icon, rest presets, and the session Edit/Repeat/Delete
   actions) are excluded so they stay readable on the light background. */
body.theme-botanical button:not(.ghost-btn):not(.icon-btn):not(.rest-preset):not(.edit):not(.repeat):not(.delete) {
  color: #ffffff;
}
/* Transparent rest-timer preset chips: dark text, green when active. */
body.theme-botanical .rest-preset { color: var(--text); }
body.theme-botanical .rest-preset.active { color: var(--accent-strong); }

body.theme-botanical header h1 {
  font-family: "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.01em;
}
/* A little flourish framing the title */
body.theme-botanical header h1::before { content: "🌿 "; }
body.theme-botanical header h1::after { content: " 🌷"; }

body.theme-botanical .card {
  box-shadow: 0 6px 18px rgba(123, 182, 97, 0.12);
}

body.theme-botanical .focus { color: var(--accent-strong); }

/* Exercise cards get a soft petal-pink left edge */
body.theme-botanical .exercise {
  border-left: 4px solid #f3b8cd;
}

/* Solid, readable "Mark done" button on the light botanical background */
body.theme-botanical .complete-ex {
  background: var(--accent-strong);
  color: #ffffff;
  border: 1px solid var(--accent-strong);
}
body.theme-botanical .complete-ex:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* Ghost buttons on the light botanical background: readable green text on a
   soft tinted fill with a green border. This is a general rule so every ghost
   button (Manage templates, Edit profile, Export CSV, + Add cardio/set/day,
   template Edit/Duplicate, teams, admin, etc.) stays legible automatically. */
body.theme-botanical .ghost-btn {
  background: var(--card-2);
  color: var(--accent-strong);
  border: 1px solid var(--accent);
}
body.theme-botanical .ghost-btn:hover {
  background: #e6f0dc;
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
/* Danger ghost buttons (Delete, Leave, Clear data) keep the rose accent. */
body.theme-botanical .ghost-btn.danger {
  color: var(--danger);
  border-color: var(--danger);
}
body.theme-botanical .ghost-btn.danger:hover {
  background: #f7e6ec;
  color: var(--danger);
  border-color: var(--danger);
}

/* Icon buttons (✕ close, set/cardio remove, day reorder) need dark-enough
   glyphs on the light background rather than the default muted/white. */
body.theme-botanical .icon-btn {
  color: var(--accent-strong);
}
body.theme-botanical .icon-btn:hover { color: var(--danger); }

body.theme-botanical .exercise h3::before { content: "🌸 "; font-size: 0.95em; }

body.theme-botanical .all-done .big { color: var(--accent-strong); }

/* --- Floating decor layer (butterflies, drifting flowers) --- */
#theme-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;          /* behind content (main is above via its own stacking) */
  overflow: hidden;
}
#theme-decor .flyer {
  position: absolute;
  top: -40px;
  opacity: 0.75;
  animation-name: flyerDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}
@keyframes flyerDrift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(30px, 25vh) rotate(15deg); }
  50%  { transform: translate(-20px, 50vh) rotate(-10deg); }
  75%  { transform: translate(25px, 75vh) rotate(12deg); }
  100% { transform: translate(0, 105vh) rotate(0deg); }
}
/* Keep the decor from covering interactive content */
body.theme-botanical main { position: relative; z-index: 2; }

/* --- Botanical completion: growing flower + petals --- */
/* Full-screen celebration overlay */
.bloom-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: opacity 0.6s ease;
  /* Soft frosted backdrop so the flower + affirmation pop. Fades in. */
  background: rgba(244, 249, 240, 0.35);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: bloomBackdropIn 0.6s ease forwards;
}
@keyframes bloomBackdropIn {
  from { background: rgba(244, 249, 240, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to   { background: rgba(244, 249, 240, 0.35); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
}
.bloom-overlay.fade-out { opacity: 0; }

/* The flower + stem grow from the lower-center of the screen */
.bloom-scene {
  position: relative;
  width: 240px;
  height: 46vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.bloom-stem {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 0;
  background: linear-gradient(to top, #4e8038, #7bb661);
  border-radius: 4px;
  transform-origin: bottom center;
  animation: stemGrow 1.2s ease-out forwards;
}
@keyframes stemGrow {
  to { height: calc(46vh - 90px); }
}

.bloom-leaf {
  position: absolute;
  width: 46px;
  height: 26px;
  background: #7bb661;
  border-radius: 0 100% 0 100%;
  opacity: 0;
  animation: leafPop 0.5s ease-out 0.9s forwards;
}
.bloom-leaf.leaf-l {
  bottom: 22%;
  left: calc(50% - 46px);
  transform: rotate(15deg) scale(0.4);
  transform-origin: right center;
}
.bloom-leaf.leaf-r {
  bottom: 32%;
  left: 50%;
  transform: rotate(-15deg) scale(0.4) scaleX(-1);
  transform-origin: left center;
}
@keyframes leafPop {
  to { opacity: 0.95; }
}

/* The flower head: 6 petals around a center, blooms after the stem grows */
.flower {
  position: relative;
  width: 120px;
  height: 120px;
  margin-top: 30px;
  transform: scale(0) rotate(-30deg);
  transform-origin: center bottom;
  animation: flowerBloom 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards;
}
.petal-shape {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 64px;
  margin: -32px 0 0 -23px;
  background: radial-gradient(circle at 50% 70%, #ffd6e7, #f48fb6 70%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: center 100%;
}
.petal-shape.p1 { transform: rotate(0deg)   translateY(-30px); }
.petal-shape.p2 { transform: rotate(60deg)  translateY(-30px); }
.petal-shape.p3 { transform: rotate(120deg) translateY(-30px); }
.petal-shape.p4 { transform: rotate(180deg) translateY(-30px); }
.petal-shape.p5 { transform: rotate(240deg) translateY(-30px); }
.petal-shape.p6 { transform: rotate(300deg) translateY(-30px); }
.flower-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  background: radial-gradient(circle at 50% 40%, #ffe082, #f4a93b);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
}
@keyframes flowerBloom {
  0%   { transform: scale(0) rotate(-30deg); }
  70%  { transform: scale(1.15) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Big affirmation text that appears once the flower is open */
.bloom-affirmation {
  position: absolute;
  top: 22%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(2rem, 7vw, 3.5rem);
  font-weight: 800;
  color: #c8477a;
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.8);
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  animation: affirmIn 0.6s ease-out 1.9s forwards;
}
@keyframes affirmIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.petal {
  position: absolute;
  top: -20px;
  opacity: 0.9;
  animation-name: petalFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes petalFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(360deg); opacity: 0.9; }
}

/* Bloom toast styling (botanical celebration message) */
.toast.bloom {
  border-color: #e79ab5;
  border-left-color: #e79ab5;
}
.toast .toast-title.bloom-title { color: #c76b8a; }

/* ============================================================
   Template manager modal + editor
   ============================================================ */
.template-row { align-items: end; margin-top: 0.85rem; }
.template-actions { display: flex; align-items: flex-end; }

.ghost-btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.ghost-btn:hover { background: var(--card-2); border-color: var(--accent); }
.ghost-btn.danger { color: var(--danger); }
.ghost-btn.danger:hover { border-color: var(--danger); }

.icon-btn {
  background: transparent;
  color: var(--muted);
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.4rem;
  line-height: 1;
  min-width: 40px;
  min-height: 40px;
}
.icon-btn:hover { color: var(--danger); background: transparent; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 1rem;
  z-index: 1100;
  overflow-y: auto;
}
.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  padding: 1.25rem 1.5rem 1.75rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.modal-header h2 { margin: 0; }
.modal-header .icon-btn { font-size: 1.2rem; }

.card-2 {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}

/* Template list */
.tm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.6rem;
  background: var(--card-2);
  flex-wrap: wrap;
}
.tm-item-name { font-weight: 700; display: block; }
.tm-item-meta { color: var(--muted); font-size: 0.82rem; }
.tm-item-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.tm-create { margin-top: 1rem; }
.tm-create h3 { margin-top: 0; }
.tm-create button { margin-top: 0.5rem; }

/* Danger zone (clear logged data) */
.danger-zone {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--danger);
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.06);
}
.danger-zone h3 { margin: 0 0 0.35rem; color: var(--danger); }
.danger-note { color: var(--muted); font-size: 0.82rem; margin: 0 0 0.75rem; }
.danger-zone .row { margin-bottom: 0.6rem; }
.danger-zone button.danger {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}
.danger-zone button.danger:hover:not(:disabled) { filter: brightness(1.1); background: var(--danger); }
.danger-zone button.danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* Editor */
.tm-editor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.tm-day { margin: 0.85rem 0; }
.tm-day-head {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.tm-day-move { display: flex; gap: 0.15rem; }
.tm-day-move .icon-btn {
  color: var(--accent);
  font-size: 1.1rem;
  padding: 0.4rem;
  min-width: 40px;
  min-height: 40px;
}
.tm-day-move .icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.tm-day-label { font-weight: 700; }
.tm-day-focus { margin-bottom: 0.75rem; }

.tm-exercise {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.6rem;
  background: var(--card);
}
.tm-ex-head { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.5rem; }
.tm-ex-name { font-weight: 600; }

.tm-set-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr 2rem;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.tm-set-num { color: var(--accent); font-weight: 700; text-align: center; }

.tm-editor-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 520px) {
  .tm-item { flex-direction: column; align-items: stretch; }
  .modal { padding: 1rem; }
}

/* CSV export bar in the Past sessions card */
.export-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.export-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  align-self: center;
  margin-right: 0.25rem;
}
.export-bar label { font-size: 0.8rem; }
.export-bar select { width: auto; }
.export-bar #export-btn { white-space: nowrap; }

/* ============================================================
   Michael's One Piece theme
   Activated by body.theme-onepiece. Pirate/ocean palette,
   wanted-poster cards, ambient sea decor. Original CSS only.
   ============================================================ */
body.theme-onepiece {
  --bg: #0a2540;            /* deep ocean */
  --card: #f3e2c0;          /* aged parchment / wanted poster */
  --card-2: #e8d3a8;        /* darker parchment */
  --accent: #d4a017;        /* treasure gold */
  --accent-strong: #b8860b; /* darker gold */
  --text: #2a1c0e;          /* dark ink on parchment */
  --muted: #6b5638;         /* faded ink */
  --border: #8a5a2b;        /* rope / wood brown */
  --danger: #c0392b;        /* Luffy-vest red */
  --ok: #1e824c;            /* sea green */
  --input-bg: #fff8e7;      /* light parchment inputs */
  color: var(--text);
  background:
    radial-gradient(circle at 15% 12%, rgba(46, 116, 181, 0.35), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(20, 78, 122, 0.4), transparent 45%),
    linear-gradient(180deg, #0a2540 0%, #0d3358 55%, #124b7a 100%);
  background-attachment: fixed;
}

/* Header: bold adventurous title with pirate flourishes */
body.theme-onepiece header h1 {
  color: #ffe08a;
  text-shadow: 0 2px 0 #7a4a1a, 0 4px 10px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
}
body.theme-onepiece .subtitle { color: #cfe0ff; }

/* CSS-art header emblem (straw hat) sits above the title */
body.theme-onepiece #header-emblem {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* Cards styled like weathered wanted posters */
body.theme-onepiece .card {
  border: 2px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(138, 90, 43, 0.12);
  position: relative;
}
body.theme-onepiece .card h2,
body.theme-onepiece .card h3 { color: #5a2f0e; }

body.theme-onepiece .focus { color: var(--accent-strong); font-weight: 700; }

/* Exercise blocks: rope-bordered log entries */
body.theme-onepiece .exercise {
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  background: var(--card-2);
}
body.theme-onepiece .exercise h3::before { content: "⚓ "; font-size: 0.9em; }

/* Buttons: solid gold, readable on parchment */
body.theme-onepiece button {
  background: var(--accent-strong);
  color: #1a1206;
  border: 1px solid #7a4a1a;
  font-weight: 700;
}
body.theme-onepiece button:hover { background: var(--accent); }

body.theme-onepiece .complete-ex,
body.theme-onepiece #manage-templates,
body.theme-onepiece .tm-edit,
body.theme-onepiece .tm-dup,
body.theme-onepiece #export-btn {
  background: var(--accent-strong);
  color: #1a1206;
  border: 1px solid #7a4a1a;
}
body.theme-onepiece .complete-ex:hover,
body.theme-onepiece #manage-templates:hover,
body.theme-onepiece .tm-edit:hover,
body.theme-onepiece .tm-dup:hover,
body.theme-onepiece #export-btn:hover {
  background: var(--accent);
  color: #1a1206;
}

body.theme-onepiece .all-done .big { color: var(--accent-strong); }
body.theme-onepiece .session .who { color: var(--accent-strong); }

/* Ambient decor drift (shared .flyer animation from botanical theme) */
body.theme-onepiece main { position: relative; z-index: 2; }

/* --- One Piece completion: treasure chest opens + gold rains + hype --- */
.treasure-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
  background: rgba(10, 37, 64, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: treasureBackdropIn 0.6s ease forwards;
}
@keyframes treasureBackdropIn {
  from { background: rgba(10, 37, 64, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  to   { background: rgba(10, 37, 64, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
.treasure-overlay.fade-out { opacity: 0; }

.treasure-scene {
  position: relative;
  width: 200px;
  height: 160px;
  transform: scale(0.4);
  opacity: 0;
  animation: chestPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}
@keyframes chestPop {
  to { transform: scale(1); opacity: 1; }
}

.chest {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 120px;
}
.chest-body {
  position: absolute;
  bottom: 0;
  width: 180px;
  height: 80px;
  background: linear-gradient(#8a5a2b, #6b4423);
  border: 3px solid #4e2f14;
  border-radius: 6px 6px 8px 8px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.25);
}
/* Wood plank seams across the chest body */
.chest-plank {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(60, 34, 12, 0.5);
}
.chest-plank.p1 { top: 26px; }
.chest-plank.p2 { top: 52px; }
/* Vertical gold band down the chest body */
.chest-body .chest-band {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 20px;
  height: 100%;
  background: linear-gradient(#f4d47a, #c99a2e);
  border-left: 1px solid #8a6a1e;
  border-right: 1px solid #8a6a1e;
}
/* Gold band across the lid */
.chest-lid .chest-band {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 100%;
  background: linear-gradient(#f4d47a, #c99a2e);
}
/* Metal lock plate */
.chest-lock {
  position: absolute;
  left: 50%;
  top: 34px;
  transform: translateX(-50%);
  width: 26px;
  height: 24px;
  background: radial-gradient(circle at 50% 35%, #ffe08a, #c99a2e);
  border: 2px solid #8a6a1e;
  border-radius: 4px;
  z-index: 2;
}
.chest-lock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 11px;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: #5a3a10;
  border-radius: 2px;
}
.chest-lid {
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) rotateX(0deg);
  width: 180px;
  height: 52px;
  background: linear-gradient(#a06a34, #7a4a1a);
  border: 3px solid #4e2f14;
  border-radius: 12px 12px 4px 4px;
  z-index: 3;
  animation: lidOpen 0.7s ease-out 0.9s forwards;
}
@keyframes lidOpen {
  to { transform: translateX(-50%) rotateX(-135deg); }
}
/* Golden glow bursting from inside once the lid opens */
.chest-glow {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, 0) scale(0);
  background: radial-gradient(circle, rgba(255, 224, 130, 0.95), rgba(255, 200, 60, 0.5) 45%, transparent 70%);
  border-radius: 50%;
  z-index: 2;
  animation: glowBurst 1.4s ease-out 1.1s forwards;
}
@keyframes glowBurst {
  0%   { transform: translate(-50%, 0) scale(0); opacity: 0; }
  40%  { transform: translate(-50%, -20px) scale(1.6); opacity: 1; }
  100% { transform: translate(-50%, -30px) scale(1.9); opacity: 0.7; }
}

.coin {
  position: absolute;
  top: -30px;
  z-index: 1;
  animation-name: coinFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes coinFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0.9; }
}

.treasure-hype {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(1.8rem, 6.5vw, 3.4rem);
  font-weight: 800;
  color: #ffe08a;
  text-shadow: 0 2px 0 #7a4a1a, 0 4px 14px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  animation: hypeIn 0.6s ease-out 1.7s forwards;
}
@keyframes hypeIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   One Piece CSS art: straw hat, Jolly Roger, ocean waves
   ============================================================ */
.cssart { display: inline-block; position: relative; }

/* --- Straw hat (Luffy-style: tan dome, red band, wide brim) --- */
.straw-hat {
  width: 90px;
  height: 60px;
}
.straw-hat .hat-brim {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  background: radial-gradient(ellipse at center, #e3c07a 0%, #d4a94f 70%, #b8863a 100%);
  border-radius: 50%;
  box-shadow: inset 0 -3px 4px rgba(120, 80, 20, 0.4);
}
.straw-hat .hat-dome {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 40px;
  background: linear-gradient(#e9c987, #cf9f45);
  border-radius: 50% 50% 42% 42% / 65% 65% 35% 35%;
  box-shadow: inset 0 3px 4px rgba(255, 240, 200, 0.5);
}
.straw-hat .hat-band {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 12px;
  background: #c0392b;
  border-radius: 4px;
}
.header-hat { transform: scale(1.15); }

/* --- Jolly Roger (skull + crossbones) --- */
.jolly-roger { width: 70px; height: 70px; }
.jolly-roger .jr-bone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 12px;
  background: #f5f0e6;
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}
.jolly-roger .jr-bone::before,
.jolly-roger .jr-bone::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 14px;
  height: 24px;
  background: #f5f0e6;
  border-radius: 50%;
}
.jolly-roger .jr-bone::before { left: -8px; }
.jolly-roger .jr-bone::after { right: -8px; }
.jolly-roger .jr-bone-a { transform: translate(-50%, -50%) rotate(45deg); }
.jolly-roger .jr-bone-b { transform: translate(-50%, -50%) rotate(-45deg); }
.jolly-roger .jr-skull {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 42px;
  background: #f5f0e6;
  border-radius: 50% 50% 45% 45%;
  z-index: 2;
}
.jolly-roger .jr-eye {
  position: absolute;
  top: 14px;
  width: 12px;
  height: 12px;
  background: #12314f;
  border-radius: 50%;
}
.jolly-roger .jr-eye-l { left: 8px; }
.jolly-roger .jr-eye-r { right: 8px; }
.jolly-roger .jr-jaw {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 14px;
  background: #f5f0e6;
  border-radius: 0 0 6px 6px;
}

/* Drifting decor pieces reuse the flyerDrift animation */
#theme-decor .drift {
  position: absolute;
  top: -80px;
  opacity: 0.85;
  animation-name: flyerDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}
#theme-decor .drift .cssart.scaled {
  transform: scale(var(--art-scale, 1));
}

/* --- Ocean strip along the bottom (SVG wave silhouettes, no image files) --- */
.ocean {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  z-index: 0;
  pointer-events: none;
  /* Solid sea fill beneath the wave crests */
  background: linear-gradient(180deg, transparent 0, transparent 40px, #124b7a 40px, #0d3358 100%);
}
.ocean .wave-layer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 90px;
  background-repeat: repeat-x;
  background-position: 0 bottom;
  background-size: 400px 90px;
}
/* Back wave: lighter, taller, drifts slowly right */
.ocean .wave-back {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='90' viewBox='0 0 400 90'><path d='M0 40 C 60 10 140 10 200 40 C 260 70 340 70 400 40 L400 90 L0 90 Z' fill='%232e74b5' fill-opacity='0.6'/></svg>");
  animation: waveDrift 18s linear infinite;
  opacity: 0.8;
}
/* Front wave: darker, sits lower, drifts left */
.ocean .wave-front {
  height: 70px;
  background-size: 320px 70px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='70' viewBox='0 0 320 70'><path d='M0 30 C 50 5 110 5 160 30 C 210 55 270 55 320 30 L320 70 L0 70 Z' fill='%23124b7a' fill-opacity='0.85'/></svg>");
  animation: waveDriftRev 12s linear infinite;
}
@keyframes waveDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-400px); } /* one tile width -> seamless loop */
}
@keyframes waveDriftRev {
  from { transform: translateX(-320px); }
  to   { transform: translateX(0); }
}

/* ============================================================
   Dashboard page
   ============================================================ */
.topnav {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
}
.topnav a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-block;
  padding: 0.4rem 0.25rem;
}
.topnav a:hover { text-decoration: underline; }

/* Link to the dashboard from the tracker header */
.header-links {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
}
.header-links a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-block;
  padding: 0.4rem 0.25rem;
}
.header-links a:hover { text-decoration: underline; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.stat-card.highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.stat-name {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.stat-primary {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
}
.stat-primary .unit {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}
.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text);
  margin-top: 0.4rem;
}

.chart-note {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0 0 0.75rem;
}
.chart-wrap {
  position: relative;
  height: 300px;
}
@media (max-width: 480px) {
  .chart-wrap { height: 240px; }
}

/* ============================================================
   Dashboard "Command Center" HUD theme (scoped to .dashboard-page)
   ============================================================ */
body.dashboard-page {
  --bg: #05070f;
  --card: rgba(16, 24, 46, 0.72);
  --border: rgba(80, 220, 255, 0.22);
  --text: #dbe9ff;
  --muted: #7d93bd;
  --accent: #22d3ee;          /* neon cyan */
  --accent-strong: #06b6d4;
  --neon-magenta: #ff3df0;
  --ok: #34d399;
  --danger: #fb7185;
  color: var(--text);
  background: #05070f;
  position: relative;
  min-height: 100vh;
}

/* Animated HUD background: grid + moving radial glows + scanline */
.dashboard-page .hud-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(34, 211, 238, 0.14), transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(255, 61, 240, 0.12), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(34, 211, 238, 0.1), transparent 55%),
    #05070f;
}
/* The grid lines */
.dashboard-page .hud-bg::before {
  content: "";
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(rgba(80, 220, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 220, 255, 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(500px) rotateX(0deg);
  animation: hudGridPan 22s linear infinite;
}
@keyframes hudGridPan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 44px, 44px 0; }
}
/* Sweeping scanline */
.dashboard-page .hud-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.08), transparent);
  animation: hudScan 7s linear infinite;
}
@keyframes hudScan {
  0%   { top: -180px; }
  100% { top: 100%; }
}

/* Content sits above the HUD background */
.dashboard-page header,
.dashboard-page main { position: relative; z-index: 1; }

/* Header: glowing techy title */
.dashboard-page header h1 {
  color: #eaffff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.9rem;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.7), 0 0 30px rgba(34, 211, 238, 0.35);
}
.dashboard-page .subtitle { color: var(--muted); letter-spacing: 0.02em; }
.dashboard-page .topnav a {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.5);
}

/* Glassy glowing panels */
.dashboard-page .card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.06), 0 10px 30px rgba(0, 0, 0, 0.5),
              inset 0 0 30px rgba(34, 211, 238, 0.04);
  position: relative;
}
.dashboard-page .card h2 {
  color: #d6f6ff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 1rem;
  border-left: 3px solid var(--accent);
  padding-left: 0.6rem;
}
/* Corner tick accents on panels */
.dashboard-page .card::before,
.dashboard-page .card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  opacity: 0.6;
}
.dashboard-page .card::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.dashboard-page .card::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.dashboard-page select {
  background: rgba(5, 12, 26, 0.85);
  border-color: var(--border);
  color: var(--text);
}
.dashboard-page select:focus { border-color: var(--accent); }
.dashboard-page label { color: var(--muted); }

/* HUD stat cards: glowing glass tiles with neon numbers */
.dashboard-page .stat-card {
  background: linear-gradient(160deg, rgba(20, 32, 60, 0.85), rgba(10, 16, 34, 0.85));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 0 24px rgba(34, 211, 238, 0.05);
  position: relative;
  overflow: hidden;
}
/* Top neon accent bar that sweeps a shine */
.dashboard-page .stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: cardShine 3.5s ease-in-out infinite;
}
@keyframes cardShine {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.dashboard-page .stat-name {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dashboard-page .stat-primary {
  color: #eafcff;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
}
.dashboard-page .stat-primary .unit { color: var(--muted); text-shadow: none; }
.dashboard-page .stat-row span { color: var(--text); }

/* The "most volume" leader card glows magenta to stand out */
.dashboard-page .stat-card.highlight {
  border-color: var(--neon-magenta);
  box-shadow: 0 0 0 1px var(--neon-magenta), 0 0 24px rgba(255, 61, 240, 0.3),
              inset 0 0 24px rgba(255, 61, 240, 0.08);
}
.dashboard-page .stat-card.highlight::before {
  background: linear-gradient(90deg, transparent, var(--neon-magenta), transparent);
}
.dashboard-page .stat-card.highlight .stat-primary {
  color: #ffe4fb;
  text-shadow: 0 0 12px rgba(255, 61, 240, 0.7);
}

/* Chart panels: subtle insetframe + note styling */
.dashboard-page .chart-note { color: var(--muted); }
.dashboard-page .chart-wrap {
  border: 1px solid rgba(80, 220, 255, 0.1);
  border-radius: 10px;
  padding: 0.5rem;
  background: rgba(5, 10, 22, 0.4);
}

/* "Last time" reference line under an exercise heading */
.last-time {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

/* PR toast: gold accent to feel like an achievement */
.toast.pr {
  border-color: #fbbf24;
  border-left-color: #fbbf24;
}
.toast .toast-title.pr-title { color: #f59e0b; }

/* ============================================================
   Rest timer widget (floating, bottom-right)
   ============================================================ */
.rest-timer {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* When a field is focused (mobile keyboard likely open), fade + move the timer
   out of the way so it can't cover the input being edited. */
body.input-focused .rest-timer {
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
}
.rest-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 1.4rem;
  padding: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  border: none;
}
.rest-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem;
  width: 180px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.rest-timer.collapsed .rest-panel { display: none; }

.rest-display {
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rest-timer.running .rest-display {
  animation: restPulse 1s ease-in-out infinite;
}
@keyframes restPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.rest-presets {
  display: flex;
  gap: 0.35rem;
}
.rest-preset {
  flex: 1;
  padding: 0.4rem 0;
  font-size: 0.8rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.rest-preset.active {
  border-color: var(--accent);
  color: var(--accent);
}
.rest-controls {
  display: flex;
  gap: 0.4rem;
}
.rest-controls button { flex: 1; padding: 0.45rem 0; font-size: 0.85rem; }

/* ============================================================
   Dashboard consistency card: streak, weekly goal, heatmap
   ============================================================ */
.activity-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.activity-stat {
  flex: 1;
  min-width: 90px;
  text-align: center;
}
.activity-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent);
}
.activity-num .of { font-size: 1rem; color: var(--muted); margin-left: 0.15rem; }
.activity-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.goal-bar {
  height: 10px;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}
.goal-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  transition: width 0.5s ease;
}
.goal-fill.met { background: var(--ok); }
.goal-caption {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.4rem 0 1rem;
}

.heatmap-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.heatmap {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
}
.heat-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.15);
}
.heat-cell.on {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

/* Install instructions page */
.install-steps, .install-notes {
  margin: 0.5rem 0 0;
  padding-left: 1.3rem;
  line-height: 1.7;
}
.install-steps li, .install-notes li { color: var(--text); }
.install-steps strong { color: var(--accent); }
.install-notes code {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-size: 0.9em;
}

/* ============================================================
   Dashboard: level/XP + achievements + bodyweight log
   ============================================================ */
.prog-controls { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.level-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.level-badge {
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: #04121f;
  background: var(--accent);
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  box-shadow: 0 0 12px var(--accent);
}
.level-bar-wrap { flex: 1; }
.level-bar {
  height: 12px;
  border-radius: 7px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}
.level-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--neon-magenta, var(--accent-strong)));
  border-radius: 7px;
  transition: width 0.5s ease;
}
.level-caption { font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; }

.badges-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.6rem;
}
.badge {
  text-align: center;
  padding: 0.7rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-2);
}
.badge.earned { border-color: var(--accent); box-shadow: 0 0 10px rgba(34, 211, 238, 0.15); }
.badge.locked { opacity: 0.4; filter: grayscale(1); }
.badge-icon { font-size: 1.6rem; display: block; }
.badge-title { font-size: 0.72rem; color: var(--text); display: block; margin-top: 0.25rem; }

.bw-log.row { align-items: end; }
.bw-actions { display: flex; align-items: flex-end; }

/* ============================================================
   Gamification strip (tracker) + achievements page
   ============================================================ */
/* Compact strip on the tracker */
.gami-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.gami-strip:hover { border-color: var(--accent); }
.gs-rank { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.gs-rank-icon { font-size: 1.5rem; }
.gs-rank-name { font-weight: 700; }
.gs-level { flex: 1; }
.gs-level-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}
.gs-lv { font-weight: 700; color: var(--accent); }
.gs-badges { color: var(--muted); }
.gs-bar {
  height: 8px;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.2);
  overflow: hidden;
}
.gs-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 5px;
  transition: width 0.5s ease;
}
.gs-arrow { font-size: 1.5rem; color: var(--muted); flex-shrink: 0; }

/* Rank hero on the achievements page */
.rank-hero { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.rank-emblem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 16px;
  background: var(--card-2);
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.rank-emblem-icon { font-size: 2.6rem; }
.rank-emblem-name { font-weight: 800; letter-spacing: 0.03em; margin-top: 0.25rem; }
/* Tier accent colors */
.rank-emblem.tier-novice   { border-color: #7c8a72; }
.rank-emblem.tier-bronze   { border-color: #cd7f32; box-shadow: 0 0 16px rgba(205,127,50,0.3); }
.rank-emblem.tier-silver   { border-color: #c0c0c0; box-shadow: 0 0 16px rgba(192,192,192,0.3); }
.rank-emblem.tier-gold     { border-color: #ffd700; box-shadow: 0 0 18px rgba(255,215,0,0.35); }
.rank-emblem.tier-elite    { border-color: #22d3ee; box-shadow: 0 0 18px rgba(34,211,238,0.4); }
.rank-emblem.tier-champion { border-color: #ff3df0; box-shadow: 0 0 22px rgba(255,61,240,0.45); }

.rank-level { flex: 1; min-width: 220px; }
.rank-level-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.rank-lv { font-size: 1.3rem; font-weight: 800; color: var(--accent); }
.rank-xp { color: var(--muted); }
.rank-next { margin-top: 0.5rem; font-size: 0.85rem; color: var(--muted); }

/* Next-badge hints */
.next-badge { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; }
.next-icon { font-size: 1.8rem; }
.next-info { flex: 1; }
.next-title { font-weight: 700; }
.next-pct { color: var(--accent); font-size: 0.85rem; margin-left: 0.35rem; }
.next-desc { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }

/* Big badge gallery */
.muted-count { color: var(--muted); font-size: 0.85rem; }
.badge-lg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.badge-lg {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-2);
  padding: 0.9rem 0.7rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.badge-lg.earned { border-color: var(--accent); box-shadow: 0 0 10px rgba(34,211,238,0.12); }
.badge-lg.locked { opacity: 0.55; }
.badge-lg-icon { font-size: 2rem; }
.badge-lg-title { font-weight: 700; font-size: 0.9rem; }
.badge-lg-desc { font-size: 0.72rem; color: var(--muted); min-height: 2.2em; }
.badge-done { color: var(--ok); font-size: 0.8rem; font-weight: 700; margin-top: 0.25rem; }
.badge-prog {
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: rgba(148,163,184,0.2);
  overflow: hidden;
  margin-top: 0.35rem;
}
.badge-prog-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.badge-prog-text { font-size: 0.72rem; color: var(--muted); margin-top: 0.2rem; }

/* Leaderboard */
.lb-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto auto auto auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.lb-row:last-child { border-bottom: none; }
.lb-row.me { background: var(--card-2); border-radius: 8px; }
.lb-place { font-size: 1.1rem; text-align: center; }
.lb-name { font-weight: 700; }
.lb-rank { color: var(--muted); }
.lb-stat { color: var(--text); font-size: 0.82rem; white-space: nowrap; }

@media (max-width: 520px) {
  .lb-row { grid-template-columns: 2rem 1fr auto; }
  .lb-row .lb-rank, .lb-row .lb-stat:nth-child(5) { display: none; }
}

/* ============================================================
   Selectable themes (variable overrides). Decor/celebrations are
   only wired for botanical + onepiece; these are pure palettes.
   ============================================================ */

/* Sunset — warm dusk gradient, coral/amber accents */
body.theme-sunset {
  --bg: #1a1024;
  --card: #2a1730;
  --card-2: #351b3a;
  --accent: #ff7e5f;
  --accent-strong: #feb47b;
  --text: #ffe8de;
  --muted: #c39aa8;
  --border: #4a2a45;
  --danger: #ff5d73;
  --ok: #ffd166;
  --input-bg: #241030;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 126, 95, 0.2), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(254, 180, 123, 0.18), transparent 45%),
    linear-gradient(180deg, #1a1024, #2a1226);
  background-attachment: fixed;
}

/* Forest — deep greens, mossy accents */
body.theme-forest {
  --bg: #0f1a12;
  --card: #16241a;
  --card-2: #1c2e20;
  --accent: #6ee7a0;
  --accent-strong: #34d399;
  --text: #dff5e6;
  --muted: #8fae98;
  --border: #2b4432;
  --danger: #f0806a;
  --ok: #6ee7a0;
  --input-bg: #0f1a12;
  background:
    radial-gradient(circle at 15% 20%, rgba(52, 211, 153, 0.12), transparent 45%),
    linear-gradient(180deg, #0f1a12, #12211a);
  background-attachment: fixed;
}

/* Mono — grayscale, minimal, high-contrast */
body.theme-mono {
  --bg: #0c0c0e;
  --card: #17181b;
  --card-2: #1e1f23;
  --accent: #d4d4d8;
  --accent-strong: #a1a1aa;
  --text: #f4f4f5;
  --muted: #8a8a92;
  --border: #34343a;
  --danger: #e5a3a3;
  --ok: #b8d4b8;
  --input-bg: #101013;
}
body.theme-mono button { color: #0c0c0e; }

/* Lightweight — flat light palette, no gradients/blur/animation. Fast. */
body.theme-light {
  --bg: #f4f6fa;
  --card: #ffffff;
  --card-2: #eef1f6;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --text: #1e2530;
  --muted: #667085;
  --border: #d5dbe5;
  --danger: #dc2626;
  --ok: #16a34a;
  --input-bg: #ffffff;
  background: #f4f6fa;
}
/* Kill all ambient decor + heavy effects for performance. */
body.theme-light #theme-decor { display: none !important; }
body.theme-light #header-emblem { display: none !important; }
body.theme-light .card { box-shadow: none; }
/* Disable animations/transitions app-wide in the lightweight theme. */
body.theme-light *,
body.theme-light *::before,
body.theme-light *::after {
  animation: none !important;
  transition: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   Sunset / Forest / Mono: decor tweaks, flourishes, celebrations
   ============================================================ */

/* Mono decor shapes are drawn glyphs, dim them a touch */
#theme-decor.mono-decor .flyer { opacity: 0.28; }
#theme-decor.forest-decor .flyer { opacity: 0.6; }
#theme-decor.sunset-decor .flyer { opacity: 0.55; }

/* Header flourishes */
body.theme-sunset header h1::before { content: "🌅 "; }
body.theme-forest header h1::before { content: "🌲 "; }
body.theme-forest header h1::after { content: " 🌲"; }
body.theme-mono header h1 { letter-spacing: 0.14em; text-transform: uppercase; }

/* Card accents */
body.theme-sunset .exercise { border-left: 4px solid #ff9e7a; }
body.theme-forest .exercise { border-left: 4px solid #6ee7a0; }
body.theme-mono .exercise { border-left: 4px solid var(--accent); }

/* Shared overlay base for the new celebrations */
.sun-overlay, .tree-overlay, .mono-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}
.sun-overlay.fade-out, .tree-overlay.fade-out, .mono-overlay.fade-out { opacity: 0; }

/* --- Sunrise (sunset theme) --- */
.sun-overlay { background: radial-gradient(circle at 50% 80%, rgba(255,126,95,0.25), transparent 60%); }
.sun-scene {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sun {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #ffe08a, #ff7e5f 70%);
  box-shadow: 0 0 60px rgba(255, 158, 90, 0.8);
  transform: translateY(120px) scale(0.6);
  opacity: 0;
  animation: sunRise 1.6s ease-out 0.2s forwards;
}
/* Rotating rays behind the sun */
.sun-core {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,224,138,0.5) 0 8deg, transparent 8deg 30deg,
              rgba(255,224,138,0.5) 30deg 38deg, transparent 38deg 60deg,
              rgba(255,224,138,0.5) 60deg 68deg, transparent 68deg 90deg,
              rgba(255,224,138,0.5) 90deg 98deg, transparent 98deg 120deg,
              rgba(255,224,138,0.5) 120deg 128deg, transparent 128deg 150deg,
              rgba(255,224,138,0.5) 150deg 158deg, transparent 158deg 180deg,
              rgba(255,224,138,0.5) 180deg 188deg, transparent 188deg 360deg);
  animation: spin 12s linear infinite;
  z-index: -1;
}
@keyframes sunRise {
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.sun-affirmation {
  position: absolute;
  top: 24%;
  left: 0; right: 0;
  text-align: center;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  font-weight: 800;
  color: #ffd39b;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
  opacity: 0;
  animation: affirmIn 0.6s ease-out 1.6s forwards;
}

/* --- Growing tree (forest theme) --- */
.tree-scene {
  position: relative;
  width: 220px;
  height: 44vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tree-trunk {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 0;
  background: linear-gradient(to top, #5a3a1a, #7a4f28);
  border-radius: 4px;
  animation: trunkGrow 1.2s ease-out forwards;
}
@keyframes trunkGrow { to { height: 22vh; } }
.tree-canopy {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #6ee7a0, #2f9e63 75%);
  transform: scale(0);
  transform-origin: center bottom;
}
.tree-canopy.c1 { width: 130px; height: 130px; bottom: 20vh; left: calc(50% - 65px); animation: canopyPop 0.6s ease-out 1.0s forwards; }
.tree-canopy.c2 { width: 90px; height: 90px; bottom: 26vh; left: calc(50% - 80px); animation: canopyPop 0.6s ease-out 1.25s forwards; }
.tree-canopy.c3 { width: 90px; height: 90px; bottom: 26vh; left: calc(50% - 10px); animation: canopyPop 0.6s ease-out 1.4s forwards; }
@keyframes canopyPop {
  0% { transform: scale(0); }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.tree-affirmation {
  position: absolute;
  top: 18%;
  left: 0; right: 0;
  text-align: center;
  font-size: clamp(1.7rem, 5.5vw, 3rem);
  font-weight: 800;
  color: #a7f3c8;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  opacity: 0;
  animation: affirmIn 0.6s ease-out 1.7s forwards;
}

/* --- Minimalist ring/checkmark (mono theme) --- */
.mono-overlay { background: rgba(12, 12, 14, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.mono-scene {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mono-ring {
  position: absolute;
  border: 3px solid #f4f4f5;
  border-radius: 50%;
  width: 60px; height: 60px;
  opacity: 0;
  animation: ringExpand 1.4s ease-out forwards;
}
.mono-ring.r2 { animation-delay: 0.25s; border-color: #a1a1aa; }
@keyframes ringExpand {
  0% { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(3.2); opacity: 0; }
}
.mono-check {
  font-size: 4rem;
  color: #f4f4f5;
  transform: scale(0);
  animation: checkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}
@keyframes checkPop { to { transform: scale(1); } }
.mono-affirmation {
  position: absolute;
  bottom: 30%;
  left: 0; right: 0;
  text-align: center;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f4f4f5;
  opacity: 0;
  animation: affirmIn 0.5s ease-out 0.7s forwards;
}

/* ============================================================
   Accounts + Teams UI
   ============================================================ */

/* Small helper hint under signup/login inputs. */
.hint {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.25rem;
  text-transform: none;
  letter-spacing: normal;
}

/* Header greeting ("Hi, Michael"). */
.user-greeting {
  color: var(--muted);
  font-size: 0.9rem;
  margin-right: 0.5rem;
  align-self: center;
}

/* Teams page */
.team-card { margin-bottom: 1rem; }
.team-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.team-card-head h3 { margin: 0; font-size: 1.15rem; }
.team-owner-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.team-members {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.team-member {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.team-member-name { font-weight: 600; }
.team-member-handle { color: var(--muted); font-size: 0.82rem; }

.team-invite-form {
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px dashed var(--border);
  padding-top: 0.75rem;
}
.team-invite-form .team-invite-msg { flex-basis: 100%; margin: 0.25rem 0 0; }

/* Pending invites */
.team-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.5rem;
  background: var(--card-2);
}
.team-invite-name { font-weight: 700; display: block; }
.team-invite-by { color: var(--muted); font-size: 0.82rem; }
.team-invite-actions { display: flex; gap: 0.4rem; }

/* ============================================================
   Admin page
   ============================================================ */

.admin-user { margin-bottom: 1rem; }
.admin-user .au-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.au-title { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.au-name { font-weight: 700; font-size: 1.1rem; }
.au-handle { color: var(--muted); font-size: 0.9rem; }
.au-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}
.au-tag.admin { color: var(--accent); border-color: var(--accent); }
.au-meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.8rem;
  align-items: baseline;
}

.au-edit, .au-pw { align-items: flex-end; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.au-edit .au-msg, .au-pw .au-pw-msg { flex-basis: 100%; margin: 0.25rem 0 0; }
.au-pw { border-top: 1px dashed var(--border); padding-top: 0.6rem; }

.au-danger { margin-top: 0.4rem; }
.au-note { color: var(--muted); font-size: 0.82rem; font-style: italic; margin: 0.4rem 0 0; }

/* ============================================================
   Mobile-friendly refinements
   ============================================================ */

/* Comfortable tap targets on touch devices (Apple's 44px guideline). */
@media (pointer: coarse) {
  button,
  .ghost-btn {
    min-height: 44px;
  }
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* Nav links become tappable pills. */
  .topnav a,
  .header-links a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* Phone layout: tighten the header and make the nav a row of pill buttons
   that are easy to thumb, instead of small wrapping text links. */
@media (max-width: 600px) {
  header {
    padding: 1.1rem 0.9rem 0.4rem;
  }
  header h1 { font-size: 1.6rem; }
  .subtitle { font-size: 0.9rem; }

  .topnav,
  .header-links {
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  .topnav a,
  .header-links a {
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
  }
  .topnav a:hover,
  .header-links a:hover {
    text-decoration: none;
    border-color: var(--accent);
  }

  /* The greeting reads as a line above the buttons, not a pill. */
  .header-links .user-greeting {
    flex-basis: 100%;
    text-align: center;
    margin: 0 0 0.15rem;
  }

  /* Log out stands out as a subtle danger pill. */
  #logout-link {
    color: var(--danger);
  }

  main {
    padding: 0.85rem;
    gap: 1rem;
  }
  .card { padding: 1rem 1.1rem; }

  /* Actions stack full-width so the primary button is a big, easy target. */
  .actions {
    flex-wrap: wrap;
  }
  .actions button[type="submit"],
  .actions > button:first-child {
    flex: 1 1 100%;
  }
}

/* Very small phones: stack control/filter rows into a single column so
   inputs and their buttons each get the full width. */
@media (max-width: 400px) {
  /* Grid-based control rows collapse to one column. */
  .controls .row {
    grid-template-columns: 1fr;
  }
  /* Flex-based rows (bodyweight log, team invite, admin edit/password) wrap
     with each child taking the full width. */
  .bw-log.row,
  .team-invite-form.row,
  .au-edit.row,
  .au-pw.row {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .bw-log.row > label,
  .team-invite-form.row > label,
  .au-edit.row > label,
  .au-pw.row > label,
  .bw-log.row .bw-actions,
  .team-invite-form.row .bw-actions,
  .au-edit.row .bw-actions,
  .au-pw.row .bw-actions {
    flex: 1 1 100%;
  }
  /* Buttons in those rows go full-width for an easy tap. */
  .bw-actions button,
  .team-invite-form .bw-actions button,
  .au-edit .bw-actions button,
  .au-pw .bw-actions button {
    width: 100%;
  }
}

/* Level title + bodyweight-handicap note on the achievements hero */
.rank-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.rank-handicap {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--ok);
  font-weight: 600;
}

/* ============================================================
   Cardio section (log screen + history + editor)
   ============================================================ */
.cardio-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-top: 0.9rem;
  background: var(--card-2);
}
.cardio-section h3 { margin: 0; font-size: 1.1rem; }
.cardio-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.cardio-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 2rem 2rem;
  align-items: center;
  gap: 0.5rem;
}
.cardio-row input,
.cardio-row select { font-size: 16px; }
/* Weather label sits on its own line spanning the row. */
.cardio-weather-label {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--muted);
  min-height: 1em;
}

/* Cardio summary in a past-session card */
.cardio-summary {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.4rem;
}
.cardio-summary li { color: var(--text); font-size: 0.92rem; }

/* Cardio toggle in the template editor */
.tm-cardio-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text);
  margin: 0.5rem 0;
  cursor: pointer;
}
.tm-cardio-toggle input { width: auto; }

@media (max-width: 480px) {
  .cardio-row { grid-template-columns: 1.2fr 1fr 1fr 1.8rem 1.8rem; gap: 0.4rem; }
}

/* ============================================================
   Plate calculator
   ============================================================ */
.pc-result { margin-top: 1rem; }
.pc-perside {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.pc-plates { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pc-plate {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: var(--accent);
  color: #04121f;
  font-weight: 700;
  font-size: 0.95rem;
}
.pc-note { color: var(--muted); font-size: 0.82rem; margin: 0.6rem 0 0; }

/* ============================================================
   Team challenges
   ============================================================ */
.team-challenges {
  margin-top: 0.9rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.75rem;
}
.team-challenges-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.team-challenges-head h4 { margin: 0; font-size: 1rem; }
.ch-form { margin: 0.6rem 0; }
.ch-form .ch-msg { flex-basis: 100%; margin: 0.25rem 0 0; }

.ch-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.6rem; }
.ch-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  background: var(--card);
}
.ch-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.ch-item-name { font-weight: 700; }
.ch-meta { color: var(--muted); font-size: 0.8rem; margin: 0.15rem 0 0.5rem; }

.ch-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.ch-tag.live { color: var(--accent); border-color: var(--accent); }
.ch-tag.done { color: var(--ok); border-color: var(--ok); }

.ch-bar {
  height: 10px;
  border-radius: 6px;
  background: var(--card-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ch-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  transition: width 0.5s ease;
}
.ch-fill.done { background: var(--ok); }
.ch-progress { font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }
.ch-leader { font-size: 0.85rem; font-weight: 600; margin-top: 0.35rem; }

.ch-contribs { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.15rem; }
.ch-contrib {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
}
.ch-contrib-name { color: var(--text); }
.ch-contrib-val { color: var(--muted); white-space: nowrap; }

/* Backup & restore block in the template manager */
.backup-zone { margin-top: 1rem; }
.backup-zone h3 { margin: 0 0 0.35rem; }