/* Orbitron — latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fonts/orbitron-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Oxanium — latin-ext */
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/oxanium-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Oxanium — latin */
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/oxanium-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --primary-color: #3366ff;
  --fancyfont: "Oxanium", sans-serif;
  --secondary-text-color: rgba(255,255,255,.7);

}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background-color: #151718; color-scheme: dark; }

body { font-family: sans-serif; background-color: #151718; background: radial-gradient(ellipse at top right, #303338 0%, #303338 20%, #151718 70%); background-attachment: fixed; color: #e8e8ea; min-height: 100vh; display: flex; flex-direction: column; }

h1, h2, h3, h4, h5, h6, .stencil { font-family: var(--fancyfont); font-weight: 400; }

/* ── Nav ── */
.nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: rgba(0,0,0,.35); color: #fff; border-bottom: 1px solid rgba(255,255,255,.07); }
.nav-brand { font-size: 1.4rem; font-weight: 700; font-family: var(--fancyfont); background: linear-gradient(to bottom, #ffffff, #b8b8b8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.navLink { margin-left: 20px; color: #ccc; text-decoration: none; display: inline-flex; align-items: center; border-radius: 8px; padding: 4px 16px; }
.navLink:hover { color: #fff; }
.navLink-active { background: linear-gradient(to bottom, #000, #222); }

.footerLink{ color: #6699ff; }
/* ── Layout ── */
.view { padding: 28px 20px; max-width: 560px; margin: 0 auto; }
.welcome { text-align: center; margin-top: 40px; display: flex; flex-direction: column; align-items: center; }
.welcome h1 { font-size: 2rem; margin-bottom: 28px; }
.welcome a { color: #6aabf0; text-decoration: none; }
.date-display { text-align: center; color: var(--secondary-text-color); margin-bottom: 22px; }
.empty-state { text-align: center; color: #555; margin-top: 60px; }
.section-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 16px; }

.unbold { font-weight: 400; color: var(--secondary-text-color); }

.settingsInput{width:60% !important;}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 20px; min-height: 56px; min-width: 120px;
  border: none; border-radius: 444px;
  background-color: #0a6bff; color: #fff;
  font-family: "Oxanium", sans-serif; font-size: 1.1rem; font-weight: 700; line-height: 1;
  cursor: pointer; user-select: none; touch-action: manipulation;
  box-shadow: rgba(1,60,136,.5) 0 -1px 3px 0 inset, rgba(0,44,97,.1) 0 3px 6px 0;
  transition: all .2s cubic-bezier(.22, .61, .36, 1);
}
.btn:hover { background-color: #065dd8; transform: translateY(-2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--primary-color); }
.btn-primary:hover:not(:disabled) { background: #2655e8; transform: translateY(-2px); }
.btn-success { background: #27ae60; }
.btn-success:hover { background: #1e8449; transform: translateY(-2px); }
.btn-gray { background: #3a3d42; color: #ccc; border: 1px solid rgba(255,255,255,.08); }
.btn-gray:hover { background: #44474d; transform: translateY(-2px); }
.btn-done { background-color: #2e3035; border: 1px solid #999; }
.btn-done:hover { background-color: #3a3d42; transform: translateY(-2px); }
.btn-sm { padding: 5px 12px; font-size: 0.9rem; }
.btn-stepper { width: 80px; height: 80px; border-radius: 200px; border: 1px solid #555; background: #2e3035; color: #e8e8ea; cursor: pointer; font-size: 1.8rem; display: inline-flex; align-items: center; justify-content: center; padding-bottom: 3px; }
.btn-stepper:hover { background: #3a3d42; transform: translateY(-2px); }

@media (min-width: 768px) {
  .btn { padding: 16px 44px; min-width: 150px; }
}

/* ── Lift cards ── */
.lift-card { background: #23262b; border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; box-shadow: 0 1px 6px rgba(0,0,0,.3); cursor: pointer; border: 1px solid rgba(255,255,255,.06); }
.lift-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.4); border-color: rgba(255,255,255,.1); }
.lift-card-header { display: flex; justify-content: space-between; align-items: center; }
.lift-name { font-weight: 600; color: #e8e8ea; text-transform: uppercase; }
.status-complete { color: #4cd87a; font-weight: 700; }
.status-awaiting { color:var(--secondary-text-color); }
.lift-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }

/* ── Weight inputs ── */
.weight-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.weight-row input { width: 76px; text-align: center; padding: 6px 8px; border: none; border-radius: 6px; background: #24262b; color: #e8e8ea; font-family: "Oxanium", sans-serif; }

.weight-label { color: var(--secondary-text-color); }
.plates-readout { color: var(--secondary-text-color); margin-bottom: 12px; }
.plate-row { margin: 4px 0; color: var(--secondary-text-color); }
.plates-error { color: #e74c3c; font-size: 0.9rem; }

/* ── Sets layout ── */
.sets-layout { display: flex; margin-bottom: 14px; }
.sets-list { flex: 0 0 40%; min-width: 140px; }
.set-row { padding: 6px 8px; border-radius: 6px; cursor: pointer; margin-bottom: 3px; color: #ccc; }
.set-row:hover { background: #2e3035; }
.set-row-active { background: #1a2a45; border: 1px solid #4a90d9; }
.set-label { display: block; font-weight: 600; color: #e8e8ea; }
.set-reps { display: block; color: var(--secondary-text-color); }
.sets-plates { flex: 1; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.08); color: var(--secondary-text-color); }
.sets-plates .set-weight { margin-bottom: 6px; color: #ccc; }

/* ── Modals ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: none; align-items: center; justify-content: center; z-index: 200; }
.modal-overlay.open { display: flex; }
.modal { background: #23262b; color: #e8e8ea; border-radius: 12px; padding: 26px 24px; width: 92%; max-width: 480px; max-height: 88vh; overflow-y: auto; border: 1px solid rgba(255,255,255,.08); }
#modal-settings .modal { width: 92%; max-width: 800px; }
.modal h2 { margin-bottom: 20px; font-size: 1.25rem; color: #fff; }
.modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.lift-option { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 8px; background: #23262b; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 1px 6px rgba(0,0,0,.3); color: #e8e8ea; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.lift-option:hover { border-color: rgba(255,255,255,.12); box-shadow: 0 2px 12px rgba(0,0,0,.4); }
.lift-option label { flex: 1; cursor: pointer; font-weight: 600; text-transform: uppercase; font-size: 0.95rem; }
.lift-option input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; accent-color: var(--primary-color); border-radius: 5px; }
.modal-weight-row { display: flex; align-items: center; gap: 8px; }
.modal-weight-row input { width: 64px; text-align: center; padding: 4px 6px; border: 1px solid #444; border-radius: 5px; background: #1a1c1f; color: #e8e8ea; }

/* ── Settings ── */
.settings-field { margin-bottom: 18px; }
.settings-field label { display: block; font-weight: 600; color: var(--secondary-text-color); margin-bottom: 5px; }
.settings-field input, .settings-field select, .settings-field textarea { width: 100%; padding: 9px 11px; border: 1px solid #444; border-radius: 6px; background: #1a1c1f; color: #e8e8ea; }
.settings-field select option { background: #23262b; }
.settings-field small { display: block; margin-top: 4px; color: var(--secondary-text-color); font-size: 0.8em; }
.segmented-control { display: inline-flex; border: 1px solid #444; border-radius: 6px; overflow: hidden; background: #1a1c1f; }
.segmented-control button { flex: 1; padding: 9px 22px; border: none; background: transparent; color: #e8e8ea; cursor: pointer; font-size: 1rem; transition: background 0.15s; }
.segmented-control button.active { background: var(--primary-color); color: #fff; }
.segmented-control button:not(.active):hover { background: #2e3035; }

/* ── History / Stats ── */
.session-card { background: #23262b; border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); }
.session-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.session-date { font-weight: 600; color: #e8e8ea; font-family: var(--fancyfont); }
.badge { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.badge-complete { background: #1a3d2a; color: #4cd87a; }
.badge-partial { background: #2e3035; color: #777; }
.history-lift { display: flex; justify-content: space-between; padding: 5px 7px; border-radius: 5px; margin-bottom: 3px; color: #ccc; }
.history-lift.improved { background: #1a3d2a; color: #e8e8ea; }
.high-score-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.high-score-row:last-child { border-bottom: none; }
.high-score-name { font-weight: 600; color: #e8e8ea; font-family: var(--fancyfont); }
.high-score-weight { font-size: 1.8rem; font-weight: 700; font-family: "Oxanium", sans-serif; align-self: flex-end; }
.high-score-date { font-size: 0.78rem; color: var(--secondary-text-color); margin-top: 2px; }

/* ── 1,000-Pound Club ── */
.club-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 215, 0, .18), rgba(255, 140, 0, .12));
  color: #ffd54a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 215, 0, .4);
  margin-bottom: 22px;
  text-decoration: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 215, 0, .08);
}
.club-badge:hover { color: #ffe27a; border-color: rgba(255, 215, 0, .65); }
.club-badge-icon { color: #ffd54a; font-size: 0.9rem; line-height: 1; }

.club-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(255, 215, 0, .12), rgba(255, 140, 0, .06));
  border: 1px solid rgba(255, 215, 0, .35);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.club-banner-emoji { font-size: 2rem; line-height: 1; }
.club-banner-title {
  font-family: var(--fancyfont);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffd54a;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.club-banner-sub {
  color: var(--secondary-text-color);
  font-size: 0.92rem;
  margin-top: 2px;
  line-height: 1.45;
}

.celebration-club {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
  margin-bottom: 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 215, 0, .18), rgba(255, 140, 0, .08));
  border: 1px solid rgba(255, 215, 0, .45);
}
.celebration-club-icon { color: #ffd54a; font-size: 1.6rem; line-height: 1; }
.celebration-club-headline {
  font-family: var(--fancyfont);
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffd54a;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.celebration-club-sub {
  color: var(--secondary-text-color);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* ── Celebration ── */
.celebration-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: none; align-items: center; justify-content: center; z-index: 300; }
.celebration-overlay.open { display: flex; }
.celebration-box { background: #23262b; border-radius: 16px; padding: 36px 28px; width: 92%; max-width: 480px; text-align: center; border: 1px solid rgba(255,255,255,.1); }
.celebration-emoji { font-size: 4rem; margin-bottom: 12px; }
.celebration-title { font-size: 1.8rem; margin-bottom: 10px; color: #e8e8ea; }
.celebration-gif { width: 100%; border-radius: 10px; margin-bottom: 20px; max-height: 220px; object-fit: cover; display: none; }
.celebration-gif.loaded { display: block; }

.weightValue { font-size: clamp(2rem, 7.5vw, 8rem);  width: 100% !important; border: none; border:1px solid rgba(0,0,0,.2) !important; background: rgba(0,0,0,.1) !important; color: #e8e8ea; font-family: "Oxanium", sans-serif; padding: 0 !important; text-align: center; border-radius: 8px; }

/* ── Stats page layout ── */
#view-stats {  max-width: 1000px; margin: 0 auto; }
/* #view-stats > * { margin-left: auto; margin-right: auto; }
 #view-stats > #timeline { max-width: 100%; }  */

/* ── Timeline chart ── */
#timeline { margin-bottom: 48px; width: 100%}
#timeline-chart-wrap { position: relative; height: 320px; background: #1c1f23; border-radius: 10px; border: 1px solid rgba(255,255,255,.07); padding: 16px 8px 8px; width: calc(100vw - 32px); margin-left: calc(50% - 50vw + 16px); margin-right: calc(50% - 50vw + 16px); }