:root {
  --color-primary:       #E1F267;
  --color-primary-base:  #ECFE6A;
  --color-primary-24:    rgba(236,254,106,0.24);
  --color-primary-12:    rgba(236,254,106,0.12);
  --color-primary-8:     rgba(236,254,106,0.08);
  --color-primary-4:     rgba(236,254,106,0.04);
  --color-white:         #FFFFFF;
  --color-white-50:      rgba(255,255,255,0.50);
  --color-white-16:      rgba(255,255,255,0.16);
  --color-white-30:      rgba(255,255,255,0.30);
  --color-black:         #000000;
  --color-card-bg:       #0B0B0B;
  --font-display:        'Bebas Neue', sans-serif;
  --font-body:           'Inter', sans-serif;
  --radius-sm:    4px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-full:  9999px;
  --tab-h:        108px;
  --header-h:     100px;
  --filter-h:     52px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html, body{
  height:100%;
  overflow:hidden;
}
html{
  background:#000;
  background-image:
    radial-gradient(ellipse 80% 40% at 50% 10%, rgba(236,254,106,0.16) 0%, rgba(236,254,106,0) 100%),
    linear-gradient(#000, #000);
}
body{
  font-family:var(--font-body);
  color:var(--color-white);
  max-width:440px;
  margin:0 auto;
  height:100%;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  background:transparent;
}

/* ── PAGES ── */
.page{display:none;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--tab-h) + 80px);overscroll-behavior:none;}
.page.active{display:block;}



/* ── HEADER ── */
.top-bar{
  position:sticky;top:-2px;z-index:50;
  margin-top:-2px;
  padding:62px 16px 16px;
  background:linear-gradient(rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0) 100%);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,0), 0 4px 12px rgba(0,0,0,0);
  transition:box-shadow 0.25s ease;
}
.top-bar.scrolled{
  box-shadow:0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.3);
}
.top-bar-logo-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
/* keep .header and .filter-wrap defs harmless */
.header{}
.filter-wrap{}
.logo{
  font-family:var(--font-display);
  font-size:40px;line-height:40px;letter-spacing:0;
  color:var(--color-primary);
}
.add-btn{
  width:40px;height:40px;
  background:transparent;border:none;padding:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:opacity 0.15s;
}
.add-btn:active{opacity:0.7;}
.add-btn svg{width:40px;height:40px;}

/* ── FILTER BAR ── */

.filter-bar{
  display:flex;gap:0;
  overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}
.filter-bar::-webkit-scrollbar{display:none;}
.filter-chip{
  flex-shrink:0;
  height:32px;padding:4px 18px;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:16px;font-weight:600;line-height:24px;
  background:transparent;border:none;
  color:var(--color-white);cursor:pointer;
  transition:all 0.15s;white-space:nowrap;
  text-shadow:0px 1px 2px rgba(0,0,0,0.16);
}
.filter-chip.active{
  background:var(--color-primary-12);
  color:var(--color-primary);
}

/* ── EXERCISE GRID ── */
.ex-grid-wrap{padding:12px 16px 24px;}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

.ex-tile{
  background:var(--color-primary-8);
  border:1px solid var(--color-primary-4);
  border-radius:var(--radius-md);
  padding:14px;
  cursor:pointer;
  position:relative;
  transition:background 0.15s ease, box-shadow 0.2s ease;
  user-select:none;-webkit-user-select:none;
  height:70px;
  display:flex;flex-direction:row;align-items:center;gap:8px;
  overflow:hidden;
  box-shadow:0 4px 8px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.12);
}
.ex-tile:active{background:var(--color-primary-24);}
.ex-tile.added{
  background:rgba(236,254,106,0.16);
  border-color:var(--color-primary-4);
}
.ex-tile-name{
  font-family:var(--font-body);font-size:14px;font-weight:500;
  line-height:20px;color:var(--color-white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ex-tile-zone{
  font-family:var(--font-body);font-size:11px;font-weight:400;
  line-height:16px;color:var(--color-white);opacity:0.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ex-tile-zone2{
  font-size:10px;color:var(--color-primary);opacity:0.5;
  font-weight:400;line-height:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ex-check{
  width:32px;height:32px;border-radius:var(--radius-full);
  background:var(--color-primary);
  display:none;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ex-tile.added .ex-check{display:flex;}
.ex-check svg{width:14px;height:14px;stroke:#000;stroke-width:3;fill:none;}

/* ── FLOATING SESSION BAR ── */
.session-bar{
  position:fixed;
  bottom:calc(var(--tab-h) + 8px);
  left:50%;
  width:calc(100% - 32px);max-width:408px;
  height:60px;
  background:rgba(225,242,103,0.75);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border-radius:var(--radius-lg);
  padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;z-index:80;
  box-shadow:0 4px 16px rgba(0,0,0,0.24), inset 0 2px 0 rgba(255,255,255,0.25), inset 0 0 0 1px rgba(255,255,255,0.14);
  transform:translateX(-50%) translateY(40px);
  opacity:0;
  pointer-events:none;
  transition:transform 0.3s cubic-bezier(0.32,0.72,0,1), opacity 0.3s ease;
}
.session-bar.visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  pointer-events:auto;
}
.session-bar:active{transform:translateX(-50%) translateY(0) scale(0.98);}
.session-bar-text{font-family:var(--font-body);font-size:14px;font-weight:600;color:rgba(0,0,0,0.85);}
.session-bar-count{
  font-family:var(--font-body);font-size:14px;font-weight:700;color:#000;
  background:rgba(0,0,0,0.2);border-radius:20px;padding:4px 14px;
}

/* ── OVERLAY ── */
.overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0);
  backdrop-filter:blur(0px) saturate(100%);-webkit-backdrop-filter:blur(0px) saturate(100%);
  z-index:90;display:none;flex-direction:column;justify-content:flex-end;
  transition:background 0.3s ease, backdrop-filter 0.3s ease;
}
.overlay.visible{
  display:flex;
  background:rgba(0,0,0,0.48);
  backdrop-filter:blur(4px) saturate(160%);-webkit-backdrop-filter:blur(4px) saturate(160%);
}
.overlay-sheet{
  background:rgba(25,24,25,0.88);
  border-radius:16px 16px 0 0;
  box-shadow:0 -10px 24px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
  max-height:calc(100vh - 72px);
  max-height:calc(100dvh - 72px);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
}
.overlay.visible .overlay-sheet{
  transform:translateY(0);
}
.overlay-drag{
  display:flex;align-items:center;justify-content:center;
  padding:12px 18px 6px;
  cursor:grab;
  touch-action:none;            /* the strip owns its touches — no page scroll */
  user-select:none;-webkit-user-select:none;
}
.grab-bar{
  width:44px;height:5px;border-radius:999px;
  background:rgba(217,217,217,0.24);
}
.overlay-title-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 18px 16px;
}
.overlay-title-group{display:flex;flex-direction:column;}
.overlay-timer{
  font-family:var(--font-body);
  font-size:13px;font-weight:600;
  color:rgba(255,255,255,0.55);
  font-variant-numeric:tabular-nums;
  letter-spacing:0.02em;
  margin-top:3px;
}
.overlay-title{
  font-family:var(--font-display);font-size:32px;
  color:var(--color-primary);letter-spacing:0.04em;
}
.overlay-count{
  font-family:var(--font-body);font-size:12px;font-weight:600;
  color:var(--color-primary);
  background:var(--color-primary-8);
  border:1px solid var(--color-primary-24);
  border-radius:20px;padding:4px 12px;
  white-space:nowrap;
}

/* ── SESSION LIST ── */
.overlay-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 14px;}
.session-row-wrap{margin-bottom:8px;}
.session-row{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.03);
  border-radius:8px;
  padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  box-shadow:0 2px 2px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.12);
}
.session-row-info{flex:1;}
.session-row-name{
  font-size:14px;font-weight:600;line-height:16px;
  letter-spacing:-0.01em;color:var(--color-white);
  text-shadow:0 1px 1px rgba(0,0,0,0.31);
}
.session-row-zone{font-size:11px;letter-spacing:-0.01em;color:#777779;margin-top:3px;}
.session-row-inputs{display:flex;gap:5px;align-items:center;}
.session-input-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;}
.session-input-label{font-size:9px;line-height:9px;color:#777779;text-transform:uppercase;letter-spacing:0.04em;}
.session-num-input{
  width:52px;height:34px;
  background:rgba(0,0,0,0.16);
  border:1px solid rgba(0,0,0,0.24);
  border-radius:var(--radius-sm);
  box-shadow:0 1px 0 rgba(255,255,255,0.08);
  color:var(--color-white);
  font-family:var(--font-body);font-size:14px;font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,0.25);
  text-align:center;outline:none;
  -webkit-appearance:none;appearance:none;padding:0 4px;
}
.session-num-input:focus{border-color:var(--color-primary-24);}
.session-num-input::placeholder{color:rgba(255,255,255,0.25);}
.session-x{
  width:32px;height:32px;border-radius:var(--radius-full);
  background:none;border:1px solid rgba(255,255,255,0.16);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:background 0.12s,border-color 0.12s;
  align-self:flex-end;margin-bottom:1px;
}
.session-x:active{background:#ff4f4f;border-color:#ff4f4f;}
.session-x svg{width:13px;height:13px;stroke:rgba(255,255,255,0.5);stroke-width:2.5;fill:none;}
.session-x:active svg{stroke:white;}


.drag-handle{
  width:32px;height:32px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;cursor:grab;flex-shrink:0;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.drag-handle span{
  display:block;width:16px;height:2px;
  background:rgba(0,0,0,0.32);
  border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,0.24);
}
.session-row.dragging{
  opacity:0.5;
  background:rgba(255,255,255,0.04);
  border-color:var(--color-primary);
}
.drag-ghost{
  position:fixed;pointer-events:none;z-index:999;
  background:#2a2a2a;border:1px solid var(--color-primary);
  border-radius:var(--radius-md);padding:12px 14px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
  left:0;top:0;width:calc(100% - 28px);max-width:382px;
  transform:scale(1.02);
  transition:transform 0.1s;
}

/* ── OVERLAY FOOTER ── */
.overlay-footer{
  padding:16px 20px calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 16px);
  border-top:1px solid rgba(255,255,255,0.08);
  box-shadow:0 -10px 24px rgba(0,0,0,0.32);
}
.cal-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.cal-label{font-size:13px;color:rgba(255,255,255,0.5);flex-shrink:0;}
.cal-input{
  flex:1;background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-sm);color:var(--color-white);
  font-family:var(--font-body);font-size:16px;
  padding:8px 12px;outline:none;-webkit-appearance:none;
}
.cal-input:focus{border-color:var(--color-primary-24);}
.cal-input::placeholder{color:rgba(255,255,255,0.25);}
.log-btn{
  width:100%;padding:16px 24px;
  background:var(--color-primary);
  border:1px solid rgba(0,0,0,0.16);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:16px;font-weight:600;
  letter-spacing:-0.01em;color:#000;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.24), inset 0 2px 0 rgba(255,255,255,0.25);
  transition:background-color 0.4s cubic-bezier(0.65,0,0.35,1), border-radius 0.4s cubic-bezier(0.65,0,0.35,1), transform 0.1s ease;
}
.log-btn:active{transform:scale(0.99);}
.log-btn.confirm{
  background-color:#dd802d;
  border-radius:999px;
}

/* ── MODAL ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.56);
  backdrop-filter:blur(8px) saturate(160%);-webkit-backdrop-filter:blur(8px) saturate(160%);
  z-index:100;display:none;align-items:center;justify-content:center;padding:24px;
}
.modal-overlay.visible{display:flex;}
.modal{
  background:#2b2b2b;border-radius:var(--radius-lg);
  padding:24px;width:100%;display:flex;flex-direction:column;gap:16px;position:relative;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.08);
}
.modal-header{display:flex;align-items:center;justify-content:space-between;}
.modal-title{font-family:var(--font-body);font-weight:600;font-size:16px;line-height:24px;color:var(--color-primary);}
.modal-close{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.6);padding:4px;}
.modal-close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;}
.field{display:flex;flex-direction:column;gap:8px;}
.field-label{font-family:var(--font-body);font-weight:500;font-size:14px;line-height:20px;color:var(--color-white);}
.field input{
  width:100%;height:36px;
  background:rgba(0,0,0,0.2);
  border:1px solid rgba(0,0,0,1);
  border-radius:var(--radius-sm);
  padding:0 12px;
  font-family:var(--font-body);font-size:14px;color:var(--color-white);
  outline:none;-webkit-appearance:none;transition:border-color 0.15s;
  box-shadow:0 1px 0 rgba(255,255,255,0.08);
}
.field input:focus{border-color:rgba(236,254,106,0.3);}
.field input::placeholder{color:rgba(255,255,255,0.40);}
.modal-toggle-row{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  font-family:var(--font-body);font-size:14px;color:var(--color-white);
}
.toggle{
  width:48px;height:24px;border-radius:var(--radius-full);
  background:var(--color-primary);
  position:relative;cursor:pointer;transition:background 0.2s;flex-shrink:0;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(255,255,255,0.15);
}
.toggle::after{
  content:'';position:absolute;
  width:20px;height:20px;border-radius:var(--radius-full);
  background:#000;top:2px;right:2px;transition:right 0.2s,left 0.2s;
}
.toggle.off{
  background:rgba(255,255,255,0.15);
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(255,255,255,0.15);
}
.toggle.off::after{right:auto;left:2px;}
.toggle-knob{display:none;}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;padding-top:16px;border-top:none;}
.modal-cancel{
  height:40px;padding:0 12px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.5);
  background:transparent;
  font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--color-white);
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.24);
}
.modal-save{
  height:40px;padding:0 12px;
  border-radius:var(--radius-sm);border:none;
  background:var(--color-primary);
  font-family:var(--font-body);font-weight:600;font-size:14px;color:#000;
  cursor:pointer;transition:opacity 0.15s;
  box-shadow:0 4px 8px rgba(0,0,0,0.24);
}
.modal-save:active{opacity:0.85;}

/* ── TAB BAR ── */
.tab-bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:440px;
  height:var(--tab-h);
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border-top:1px solid rgba(255,255,255,0.12);
  display:flex;align-items:flex-start;justify-content:space-around;
  padding:16px 24px 40px;
  z-index:90;
}
.tab-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;
  color:var(--color-white);opacity:0.5;
  font-family:var(--font-body);font-size:10px;font-weight:500;
  letter-spacing:0.06em;text-transform:uppercase;
  transition:opacity 0.15s,color 0.15s;
  position:relative;padding:6px 16px;border-radius:8px;
}
.tab-btn svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.8;fill:none;}
.tab-btn.active{opacity:1;color:var(--color-primary);}
.tab-btn.active::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--color-primary-12);
  border-radius:8px;
  z-index:-1;
}

/* ── HISTORY ── */
.history-wrap{padding:16px 24px;}
.totals-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;}
.total-card{
  background:var(--color-primary-8);border:1px solid var(--color-primary-4);
  border-radius:var(--radius-md);padding:16px;
}
.total-val{font-family:var(--font-display);font-size:34px;color:var(--color-primary);line-height:1;}
.total-lbl{font-size:10px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.08em;margin-top:4px;}
.sec-label{font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:10px;font-weight:500;}
.compare-card{
  background:var(--color-primary-8);
  border:1px solid var(--color-primary-4);border-left:2px solid var(--color-primary);
  border-radius:var(--radius-md);padding:14px;margin-bottom:24px;
}
.compare-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:3px 0;}
.compare-lbl{color:rgba(255,255,255,0.5);}
.up{color:#7ddf96;font-weight:500;}
.dn{color:#ff5252;font-weight:500;}
.eq{color:rgba(255,255,255,0.4);}
.hist-card{
  background:var(--color-primary-8);border:1px solid var(--color-primary-4);
  border-radius:var(--radius-md);padding:16px;margin-bottom:12px;
}
.hist-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.hist-date{font-family:var(--font-display);font-size:22px;letter-spacing:0.03em;}
.hist-date-sub{display:none;}
.hist-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.hist-pill{font-size:11px;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.5);}
.hist-pill.hi{background:var(--color-primary-12);color:var(--color-primary);}
.hist-exlist{font-size:12px;color:rgba(255,255,255,0.4);line-height:1.7;border-top:1px solid rgba(255,255,255,0.08);padding-top:8px;}
.hist-exlist b{color:var(--color-white);font-weight:500;}
.hist-copy-btn{
  display:flex;align-items:center;gap:6px;
  background:none;border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius-sm);padding:6px 12px;
  color:rgba(255,255,255,0.5);font-family:var(--font-body);
  font-size:12px;font-weight:500;cursor:pointer;
  transition:border-color 0.15s,color 0.15s;
}
.hist-copy-btn:hover{border-color:var(--color-primary);color:var(--color-primary);}
.hist-copy-btn.copied{border-color:var(--color-primary);color:var(--color-primary);}
.hist-copy-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;}


.unit-selector{
  display:flex;flex-direction:column;gap:6px;
}
.unit-opt{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius-sm);
  cursor:pointer;text-align:left;width:100%;
  transition:background 0.12s,border-color 0.12s;
}
.unit-opt.active{
  background:var(--color-primary-12);
  border-color:var(--color-primary-24);
}
.unit-opt-icon{font-size:16px;line-height:1;}
.unit-opt-label{
  font-family:var(--font-body);font-size:13px;font-weight:500;
  color:var(--color-white);
}
.unit-opt.active .unit-opt-label{color:var(--color-primary);}

/* ── SETTINGS ── */
.settings-wrap{padding:16px 24px;}
.settings-card{
  background:var(--color-primary-8);border:1px solid var(--color-primary-4);
  border-radius:var(--radius-md);padding:0 16px;margin-bottom:24px;
}
.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.08);
}
.settings-row:last-child{border-bottom:none;}
.settings-lbl{font-size:14px;font-weight:500;color:var(--color-white);}
.settings-sub{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;}
.num-stepper{display:flex;align-items:center;gap:8px;}
.stepper-btn{
  width:28px;height:28px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);
  color:var(--color-primary);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:var(--font-body);
}
.stepper-val{font-size:16px;font-weight:500;min-width:24px;text-align:center;}


.hist-edit-btn{
  display:flex;align-items:center;gap:6px;
  background:none;border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius-sm);padding:6px 12px;
  color:rgba(255,255,255,0.5);font-family:var(--font-body);
  font-size:12px;font-weight:500;cursor:pointer;
  transition:border-color 0.15s,color 0.15s;
  height:100%;
}
.hist-edit-btn:hover{border-color:var(--color-primary);color:var(--color-primary);}
.hist-edit-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;}
.hist-card-actions{display:flex;gap:8px;margin-top:10px;align-items:stretch;}


.zone-chart{margin-bottom:24px;}
.zone-chart-title{font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:16px;font-weight:500;}
.zone-chart-cols{display:flex;align-items:flex-end;gap:6px;height:120px;}
.zone-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;height:100%;}
.zone-col-bar-wrap{width:100%;display:flex;align-items:flex-end;justify-content:center;flex:1;}
.zone-col-bar{
  width:100%;border-radius:4px 4px 0 0;
  background:var(--color-primary-24);
  border:1px solid var(--color-primary-12);
  transition:height 0.5s cubic-bezier(0.4,0,0.2,1);
  position:relative;
}
.zone-col-bar.top{background:var(--color-primary);border-color:var(--color-primary);}
.zone-col-count{font-size:10px;font-weight:600;color:rgba(255,255,255,0.5);margin-bottom:4px;text-align:center;}
.zone-col-count.top{color:var(--color-primary);}
.zone-col-label{font-size:9px;color:rgba(255,255,255,0.35);text-align:center;margin-top:6px;text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}
.zone-col-label.top{color:rgba(255,255,255,0.7);}


.hist-date-badge{
  font-size:11px;font-weight:500;
  color:rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  padding:3px 10px;
  white-space:nowrap;
  flex-shrink:0;
}


.data-textarea{
  width:100%;min-height:120px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-sm);
  padding:12px;
  font-family:var(--font-body);font-size:12px;
  color:var(--color-white);line-height:1.6;
  resize:vertical;outline:none;
  -webkit-appearance:none;
}
.data-textarea:focus{border-color:var(--color-primary-24);}
.export-actions{display:flex;gap:8px;margin-top:8px;}
.export-btn{
  flex:1;padding:11px;
  background:var(--color-primary-12);
  border:1px solid var(--color-primary-24);
  border-radius:var(--radius-sm);
  color:var(--color-primary);
  font-family:var(--font-body);font-size:13px;font-weight:500;
  cursor:pointer;transition:background 0.15s;
}
.export-btn:active{background:var(--color-primary-24);}


.ex-list-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.ex-list-item:last-child{border-bottom:none;}
.ex-list-info{flex:1;}
.ex-list-name{font-size:14px;font-weight:500;color:var(--color-white);}
.ex-list-zone{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;}
.ex-list-handle{
  width:36px;height:36px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;cursor:grab;opacity:0.3;touch-action:none;
  user-select:none;-webkit-user-select:none;
}
.ex-list-handle span{
  display:block;width:14px;height:1.5px;
  background:var(--color-white);border-radius:2px;
}
.ex-list-item.dragging{opacity:0.4;}


#confetti-canvas{
  position:fixed;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:999;
  opacity:1;
}



/* ── TOP GAINS ── */
.gains-wrap{margin-bottom:24px;}
.gain-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 2px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  animation:statCardIn 0.3s ease backwards;
}
.gain-row:last-child{border-bottom:none;}
.gain-info{flex:1;min-width:0;}
.gain-name{
  font-size:13px;font-weight:500;color:var(--color-white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gain-detail{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;font-variant-numeric:tabular-nums;}
.gain-spark{flex-shrink:0;}
.gain-badge{
  font-size:11px;font-weight:700;
  color:var(--color-primary);
  background:var(--color-primary-12);
  border:1px solid var(--color-primary-24);
  border-radius:20px;padding:3px 8px;
  flex-shrink:0;min-width:50px;text-align:center;
  font-variant-numeric:tabular-nums;
}
#stats-content .total-card:nth-child(9){animation-delay:280ms;}
#stats-content .total-card:nth-child(10){animation-delay:315ms;}

/* ── STATS ENTRANCE ── */
@keyframes statCardIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}
#stats-content .total-card{animation:statCardIn 0.3s ease backwards;}
#stats-content .total-card:nth-child(1){animation-delay:0ms;}
#stats-content .total-card:nth-child(2){animation-delay:35ms;}
#stats-content .total-card:nth-child(3){animation-delay:70ms;}
#stats-content .total-card:nth-child(4){animation-delay:105ms;}
#stats-content .total-card:nth-child(5){animation-delay:140ms;}
#stats-content .total-card:nth-child(6){animation-delay:175ms;}
#stats-content .total-card:nth-child(7){animation-delay:210ms;}
#stats-content .total-card:nth-child(8){animation-delay:245ms;}
#stats-content .compare-card{animation:statCardIn 0.3s ease 0.25s backwards;}
@keyframes zoneBarGrow{
  from{transform:scaleY(0);}
  to{transform:scaleY(1);}
}
.zone-col-bar{transform-origin:bottom;animation:zoneBarGrow 0.45s cubic-bezier(0.22,1,0.36,1) backwards;}
.total-val,.zone-col-count{font-variant-numeric:tabular-nums;}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:60px 20px;color:rgba(255,255,255,0.3);}
.empty-state svg{width:44px;height:44px;stroke:currentColor;stroke-width:1.2;fill:none;opacity:0.5;margin-bottom:12px;}
.empty-state p{font-size:14px;line-height:1.6;}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:calc(var(--tab-h) + 76px);
  left:50%;transform:translateX(-50%) translateY(8px);
  background:#1a1a1a;color:var(--color-white);
  border:1px solid rgba(255,255,255,0.16);
  font-size:13px;font-weight:500;
  padding:10px 20px;border-radius:20px;
  opacity:0;transition:opacity 0.2s,transform 0.2s;
  pointer-events:none;z-index:200;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── ORDER SUBVIEW (iOS push transition) ── */
/* Not a .page: it overlays Settings instead of replacing it, so both can
   animate together. Settings keeps its .active class while this is open. */
#page-order{
  position:fixed;inset:0;z-index:60;
  width:100%;max-width:440px;margin:0 auto;
  background:#000;
  background-image:radial-gradient(ellipse 80% 40% at 50% 10%, rgba(236,254,106,0.16) 0%, rgba(236,254,106,0) 100%);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--tab-h) + 80px);
  overscroll-behavior:none;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform 0.35s cubic-bezier(0.32,0.72,0,1), visibility 0s linear 0.35s;
}
#page-order.active{
  transform:translateX(0);
  visibility:visible;
  transition:transform 0.35s cubic-bezier(0.32,0.72,0,1), visibility 0s;
}
/* The screen underneath slides back at partial speed and dims — the iOS push */
#page-settings{
  transition:transform 0.35s cubic-bezier(0.32,0.72,0,1), opacity 0.35s ease;
}
body.order-open #page-settings{
  transform:translateX(-24%);
  opacity:0.5;
}