@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --bg: #0a0a0f;
  --s: #13131a;
  --s2: #1c1c27;
  --b: #2a2a3a;
  --ac: #e8ff6e;
  --ac2: #6eaaff;
  --ac3: #ff6e8c;
  --t: #f0f0f5;
  --tm: #8888aa;
  --ok: #6effa0;
  --wa: #ffcc6e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--t); font-size: 14px; }
body { display: flex; flex-direction: column; overflow: hidden; }

/* HEADER */
.hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--b); background: var(--s); flex-shrink: 0; }
.logo { font-family: 'DM Serif Display', serif; font-size: 1.2rem; color: var(--ac); }
.logo span { color: var(--tm); font-style: italic; }
.cd { background: var(--s2); border: 1px solid var(--b); border-radius: 6px; padding: 4px 10px; font-size: .68rem; color: var(--tm); text-align: center; }
.cd strong { color: var(--ac); font-size: .85rem; display: block; }

/* NAV */
.nav { display: flex; gap: 2px; padding: 5px 14px; background: var(--s); border-bottom: 1px solid var(--b); overflow-x: auto; flex-shrink: 0; }
.nb { padding: 5px 10px; border-radius: 5px; border: none; background: transparent; color: var(--tm); font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all .15s; }
.nb:hover { background: var(--s2); color: var(--t); }
.nb.a { background: var(--ac); color: var(--bg); }

/* MAIN */
.main { flex: 1; overflow-y: auto; padding: 12px 14px; }
.pg { display: none; }
.pg.a { display: block; }
.st { font-family: 'DM Serif Display', serif; font-size: 1.2rem; margin-bottom: 3px; }
.ss { font-size: .7rem; color: var(--tm); margin-bottom: 12px; }

/* STATS GRID */
.sg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 11px; }
@media(max-width: 480px) { .sg { grid-template-columns: repeat(2, 1fr); } }
.sc { background: var(--s); border: 1px solid var(--b); border-radius: 7px; padding: 10px; }
.sl { font-size: .6rem; color: var(--tm); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 2px; }
.sv { font-family: 'DM Serif Display', serif; font-size: 1.4rem; color: var(--ac); }
.sb { font-size: .6rem; color: var(--tm); }

/* CARDS */
.dg { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
@media(max-width: 500px) { .dg { grid-template-columns: 1fr; } }
.card { background: var(--s); border: 1px solid var(--b); border-radius: 7px; padding: 11px; }
.ct { font-size: .66rem; text-transform: uppercase; letter-spacing: .8px; color: var(--tm); margin-bottom: 9px; display: flex; align-items: center; gap: 5px; }
.ct::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--ac); }

/* INJURY BANNER */
.ib { background: rgba(255,110,140,.08); border: 1px solid rgba(255,110,140,.25); border-radius: 7px; padding: 9px 11px; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 7px; font-size: .73rem; line-height: 1.5; }
.ib strong { color: var(--ac3); }

/* NEXT SESSION */
.ns { background: linear-gradient(135deg, rgba(232,255,110,.07), rgba(110,170,255,.04)); border: 1px solid rgba(232,255,110,.16); border-radius: 7px; padding: 11px; margin-bottom: 10px; }
.nst { font-size: .62rem; text-transform: uppercase; letter-spacing: .8px; color: var(--ac); margin-bottom: 3px; }
.nstit { font-family: 'DM Serif Display', serif; font-size: 1.05rem; margin-bottom: 7px; }
.nsd { display: flex; gap: 10px; flex-wrap: wrap; }
.nsdi { font-size: .68rem; color: var(--tm); }
.nsdi strong { color: var(--t); }

/* WEEK DAYS */
.wd { display: flex; gap: 3px; }
.dp { flex: 1; text-align: center; padding: 6px 2px; border-radius: 4px; border: 1px solid var(--b); background: var(--s2); font-size: .58rem; }
.dp .dn { color: var(--tm); margin-bottom: 1px; }
.dp .dt { font-weight: 700; font-size: .56rem; }
.dp.run { border-color: rgba(110,170,255,.35); }
.dp.run .dt { color: var(--ac2); }
.dp.str { border-color: rgba(232,255,110,.35); }
.dp.str .dt { color: var(--ac); }
.dp.rest .dt { color: var(--tm); }
.dp.bike { border-color: rgba(110,255,160,.35); }
.dp.bike .dt { color: var(--ok); }

/* PLAN */
.ph { padding: 6px 10px; border-radius: 5px; margin-bottom: 5px; font-size: .7rem; font-weight: 600; }
.p-sp { background: rgba(255,110,140,.1); border: 1px solid rgba(255,110,140,.2); color: var(--ac3); }
.p-ba { background: rgba(110,170,255,.1); border: 1px solid rgba(110,170,255,.2); color: var(--ac2); }
.p-pe { background: rgba(255,200,110,.1); border: 1px solid rgba(255,200,110,.2); color: var(--wa); }
.p-ta { background: rgba(110,255,160,.1); border: 1px solid rgba(110,255,160,.2); color: var(--ok); }
.wc { margin-bottom: 10px; }
.wr { display: flex; align-items: center; padding: 6px 10px; border: 1px solid var(--b); border-radius: 5px; margin-bottom: 3px; background: var(--s); font-size: .68rem; cursor: pointer; gap: 7px; flex-wrap: wrap; transition: all .15s; }
.wr:hover { border-color: var(--ac2); background: var(--s2); }
.wr.cur { border-color: var(--ac); background: rgba(232,255,110,.04); }
.wr.con { border-color: rgba(255,110,140,.25); background: rgba(255,110,140,.04); }
.wn { font-weight: 700; color: var(--tm); min-width: 20px; }
.wda { color: var(--tm); font-size: .63rem; min-width: 88px; }
.wf { flex: 1; font-weight: 500; min-width: 88px; }
.wk { color: var(--ac2); font-weight: 700; }
.wbg { font-size: .58rem; padding: 2px 5px; border-radius: 14px; white-space: nowrap; }
.bg-e { background: rgba(255,110,140,.12); color: var(--ac3); border: 1px solid rgba(255,110,140,.25); }
.bg-v { background: rgba(255,200,110,.12); color: var(--wa); border: 1px solid rgba(255,200,110,.25); }
.bg-c { background: rgba(232,255,110,.12); color: var(--ac); border: 1px solid rgba(232,255,110,.25); }
.bg-r { background: rgba(110,255,160,.12); color: var(--ok); border: 1px solid rgba(110,255,160,.25); }
.wdet { display: none; padding: 6px 10px 10px; background: var(--s2); border: 1px solid var(--b); border-top: none; border-radius: 0 0 5px 5px; margin-top: -3px; margin-bottom: 3px; }
.scard { margin-bottom: 7px; padding: 8px 10px; background: var(--s); border: 1px solid var(--b); border-radius: 5px; }
.sct { font-weight: 700; color: var(--ac2); font-size: .7rem; margin-bottom: 4px; }
.scb { color: var(--tm); line-height: 1.6; font-size: .68rem; white-space: pre-wrap; }

/* FORMS */
.fg { margin-bottom: 10px; }
.fl { display: block; font-size: .63rem; text-transform: uppercase; letter-spacing: .6px; color: var(--tm); margin-bottom: 4px; }
.fi, .fs, .fta { width: 100%; background: var(--s); border: 1px solid var(--b); border-radius: 5px; color: var(--t); font-family: 'DM Sans', sans-serif; font-size: .78rem; padding: 7px 9px; transition: border-color .2s; -webkit-appearance: none; }
.fi:focus, .fs:focus, .fta:focus { outline: none; border-color: var(--ac2); }
.fta { resize: vertical; min-height: 58px; }
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.rsel { display: flex; gap: 4px; flex-wrap: wrap; }
.rbtn { width: 29px; height: 29px; border-radius: 4px; border: 1px solid var(--b); background: var(--s2); color: var(--tm); font-size: .7rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.rbtn:hover, .rbtn.sel { border-color: var(--ac); background: rgba(232,255,110,.1); color: var(--ac); }
.fsel { display: flex; gap: 5px; flex-wrap: wrap; }
.fbtn { flex: 1; min-width: 58px; padding: 6px 2px; border-radius: 4px; border: 1px solid var(--b); background: var(--s2); color: var(--tm); font-size: .66rem; cursor: pointer; text-align: center; transition: all .15s; }
.fbtn:hover { border-color: var(--ac2); }
.fbtn.sel { border-color: var(--ac); background: rgba(232,255,110,.1); color: var(--t); }
.sbtn { background: var(--ac); color: var(--bg); border: none; border-radius: 5px; padding: 10px; font-family: 'DM Sans', sans-serif; font-size: .78rem; font-weight: 700; cursor: pointer; width: 100%; transition: background .2s; }
.sbtn:hover { background: #d4ff3a; }

/* GARMIN IMPORT */
.garmin-box { background: rgba(110,170,255,.06); border: 1px solid rgba(110,170,255,.18); border-radius: 6px; padding: 9px 11px; margin-bottom: 11px; font-size: .7rem; color: var(--tm); }
.garmin-box strong { color: var(--ac2); }
.garmin-box textarea { width: 100%; background: var(--s2); border: 1px solid var(--b); border-radius: 4px; color: var(--t); font-family: 'DM Sans', sans-serif; font-size: .7rem; padding: 6px 8px; resize: vertical; min-height: 42px; margin-top: 5px; }
.garmin-box textarea:focus { outline: none; border-color: var(--ac2); }
.parse-btn { background: var(--ac2); color: var(--bg); border: none; border-radius: 4px; padding: 5px 11px; font-family: 'DM Sans', sans-serif; font-size: .68rem; font-weight: 700; cursor: pointer; margin-top: 5px; }

/* COACH */
.cw { display: flex; flex-direction: column; height: calc(100vh - 140px); min-height: 350px; }
.chdr { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: var(--s); border: 1px solid var(--b); border-radius: 7px 7px 0 0; }
.cav { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--ac), var(--ac2)); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.cnm { font-weight: 600; font-size: .84rem; }
.cst { font-size: .66rem; color: var(--ok); }
.cms { flex: 1; overflow-y: auto; padding: 12px; background: var(--s); border-left: 1px solid var(--b); border-right: 1px solid var(--b); display: flex; flex-direction: column; gap: 9px; }
.msg { display: flex; gap: 7px; max-width: 86%; }
.msg.u { align-self: flex-end; flex-direction: row-reverse; }
.mav { width: 26px; height: 26px; border-radius: 50%; background: var(--s2); display: flex; align-items: center; justify-content: center; font-size: .72rem; flex-shrink: 0; }
.msg.c .mav { background: linear-gradient(135deg, var(--ac), var(--ac2)); }
.mb { padding: 7px 10px; border-radius: 8px; font-size: .76rem; line-height: 1.5; }
.msg.c .mb { background: var(--s2); border: 1px solid var(--b); border-radius: 3px 8px 8px 8px; }
.msg.u .mb { background: rgba(232,255,110,.11); border: 1px solid rgba(232,255,110,.18); border-radius: 8px 3px 8px 8px; }
.cia { display: flex; gap: 7px; padding: 8px; background: var(--s); border: 1px solid var(--b); border-radius: 0 0 7px 7px; }
.ci { flex: 1; background: var(--s2); border: 1px solid var(--b); border-radius: 5px; color: var(--t); font-family: 'DM Sans', sans-serif; font-size: .76rem; padding: 7px 10px; resize: none; }
.ci:focus { outline: none; border-color: var(--ac2); }
.sndbtn { background: var(--ac); color: var(--bg); border: none; border-radius: 5px; padding: 7px 12px; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .76rem; cursor: pointer; white-space: nowrap; align-self: flex-end; }
.sndbtn:hover { background: #d4ff3a; }
.sndbtn:disabled { opacity: .5; cursor: not-allowed; }
.dot { width: 4px; height: 4px; border-radius: 50%; background: var(--tm); animation: bo 1.2s infinite; }
.dot:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3) { animation-delay: .4s; }
@keyframes bo { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

/* NUTRITION */
.ntabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.ntb { padding: 5px 11px; border-radius: 14px; border: 1px solid var(--b); background: var(--s2); color: var(--tm); font-size: .7rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all .15s; }
.ntb:hover { border-color: var(--ac2); color: var(--t); }
.ntb.a { background: rgba(232,255,110,.11); border-color: var(--ac); color: var(--ac); }
.nsec { display: none; }
.nsec.a { display: block; }
.ng { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; margin-bottom: 12px; }
.nc { background: var(--s); border: 1px solid var(--b); border-radius: 7px; padding: 11px; }
.ni { font-size: 1.2rem; margin-bottom: 6px; }
.ntit { font-weight: 700; font-size: .8rem; margin-bottom: 3px; color: var(--t); }
.nb2 { font-size: .72rem; color: var(--tm); line-height: 1.55; }
.nb2 strong { color: var(--t); }
.nc.hl2 { border-color: rgba(232,255,110,.28); background: rgba(232,255,110,.03); }
.nc.hl2 .ntit { color: var(--ac); }
.tl { display: flex; flex-direction: column; }
.tli { display: flex; gap: 11px; padding-bottom: 14px; position: relative; }
.tli:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 31px; bottom: 0; width: 1px; background: var(--b); }
.td { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; border: 1px solid var(--b); background: var(--s2); }
.td.ac { border-color: rgba(232,255,110,.35); background: rgba(232,255,110,.07); }
.td.bl { border-color: rgba(110,170,255,.35); background: rgba(110,170,255,.07); }
.td.gr { border-color: rgba(110,255,160,.35); background: rgba(110,255,160,.07); }
.td.rd { border-color: rgba(255,110,140,.35); background: rgba(255,110,140,.07); }
.tc { flex: 1; padding-top: 3px; }
.ttime { font-size: .62rem; text-transform: uppercase; letter-spacing: .6px; color: var(--tm); margin-bottom: 1px; }
.ttit { font-weight: 700; font-size: .8rem; margin-bottom: 2px; }
.tbody { font-size: .72rem; color: var(--tm); line-height: 1.55; }
.tbody strong { color: var(--t); }
.tb { background: rgba(110,170,255,.05); border: 1px solid rgba(110,170,255,.18); border-radius: 6px; padding: 9px 11px; margin-bottom: 10px; font-size: .72rem; line-height: 1.55; }
.tb strong { color: var(--ac2); }
.tb.w { background: rgba(255,110,140,.05); border-color: rgba(255,110,140,.18); }
.tb.w strong { color: var(--ac3); }
.tb.g { background: rgba(110,255,160,.05); border-color: rgba(110,255,160,.18); }
.tb.g strong { color: var(--ok); }
.cb { background: var(--s); border: 1px solid var(--b); border-radius: 7px; padding: 13px; max-width: 440px; }
.crow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.clbl { font-size: .7rem; color: var(--tm); min-width: 130px; }
.cinp { background: var(--s2); border: 1px solid var(--b); border-radius: 4px; color: var(--t); font-family: 'DM Sans', sans-serif; font-size: .78rem; padding: 5px 8px; width: 82px; }
.cinp:focus { outline: none; border-color: var(--ac2); }
.cres { margin-top: 11px; padding: 10px; background: rgba(232,255,110,.05); border: 1px solid rgba(232,255,110,.18); border-radius: 5px; }
.crr { display: flex; justify-content: space-between; font-size: .74rem; padding: 2px 0; }
.crv { font-weight: 700; color: var(--ac); }
.pl { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.pi { padding: 3px 8px; border-radius: 14px; font-size: .65rem; font-weight: 500; border: 1px solid var(--b); background: var(--s2); color: var(--tm); }
.pi.g { border-color: rgba(110,255,160,.28); color: var(--ok); background: rgba(110,255,160,.05); }
.pi.y { border-color: rgba(232,255,110,.28); color: var(--ac); background: rgba(232,255,110,.05); }
.pi.b { border-color: rgba(110,170,255,.28); color: var(--ac2); background: rgba(110,170,255,.05); }
.pi.r { border-color: rgba(255,110,140,.28); color: var(--ac3); background: rgba(255,110,140,.05); }

/* HISTORY */
.hl { display: flex; flex-direction: column; gap: 6px; }
.hi { background: var(--s); border: 1px solid var(--b); border-radius: 6px; padding: 9px 11px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hic { width: 30px; height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.ir { background: rgba(110,170,255,.13); }
.is { background: rgba(232,255,110,.09); }
.hin { flex: 1; min-width: 85px; }
.hit { font-weight: 600; font-size: .72rem; }
.hid { font-size: .6rem; color: var(--tm); }
.hst { display: flex; gap: 8px; flex-wrap: wrap; }
.hv { font-size: .65rem; text-align: right; }
.hvv { font-weight: 700; color: var(--ac2); font-size: .7rem; }
.hvl { font-size: .58rem; color: var(--tm); }
.es { text-align: center; padding: 26px; color: var(--tm); font-size: .74rem; }
.ei { font-size: 1.7rem; margin-bottom: 7px; }

/* TOAST */
.toast { position: fixed; bottom: 11px; right: 11px; background: var(--ok); color: var(--bg); padding: 7px 13px; border-radius: 5px; font-size: .72rem; font-weight: 700; transform: translateY(70px); opacity: 0; transition: all .3s; z-index: 999; }
.toast.on { transform: translateY(0); opacity: 1; }

/* SCROLLBAR */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b); border-radius: 3px; }