/* ===== FONTS ===== */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/dmsans-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;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/dmsans-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jbmono-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;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jbmono-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;
}

/* ===== HybridOS ===== */

html, body {
  --bg:#08090a;--bg2:#111214;--card:#151618;--deep:#0d0e10;
  --brd:#1f2123;--brdH:#2a2c2e;--brdS:#191b1d;
  --tx:#f5f5f7;--txB:#e5e5e7;--txS:#a1a1a6;--txD:#6e6e73;
  --txM:#48484a;--txG:#3a3a3c;--txDP:#2c2c2e;
  --overlay:rgba(0,0,0,.5);--inBg:rgba(8,9,10,.7);
  --glassBg:rgba(13,14,16,.55);--glassBrd:rgba(255,255,255,.07);
  --g1:rgba(21,22,24,.58);--g2:rgba(10,11,13,.52);--gm:rgba(14,15,18,.72);
}
html.light, html.light body {
  --bg:#f5f5f7;--bg2:#ffffff;--card:#ffffff;--deep:#f0f0f2;
  --brd:#e5e5e7;--brdH:#d1d1d6;--brdS:#ebebed;
  --tx:#1d1d1f;--txB:#2c2c2e;--txS:#636366;--txD:#86868b;
  --txM:#aeaeb2;--txG:#c7c7cc;--txDP:#d1d1d6;
  --overlay:rgba(0,0,0,.25);--inBg:rgba(240,240,242,.72);
  --glassBg:rgba(255,255,255,.62);--glassBrd:rgba(0,0,0,.08);
  --g1:rgba(255,255,255,.70);--g2:rgba(240,240,242,.60);--gm:rgba(248,248,252,.78);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);color-scheme:dark;transition:background .3s}
html.light{color-scheme:light}
body{font-family:'DM Sans',-apple-system,sans-serif;background:var(--bg);color:var(--txB);transition:background .3s,color .3s;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
.mono{font-family:'JetBrains Mono',monospace}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:0}

.app-shell{max-width:500px;margin:0 auto;position:relative;min-height:100dvh;display:flex;flex-direction:column}

/* HEADER */
.header{padding:calc(12px + env(safe-area-inset-top)) 20px 16px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20;background:transparent}
.header::after{content:'';position:absolute;inset:0;bottom:-32px;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 100%);mask-image:linear-gradient(to bottom,black 60%,transparent 100%);pointer-events:none;z-index:-1}
.header-brand{display:flex;align-items:baseline;gap:0}
.header-brand-h{font-size:18px;font-weight:300;color:var(--txS);letter-spacing:1px;text-transform:lowercase}
.header-brand-os{font-size:18px;font-weight:800;background:linear-gradient(90deg,#00c9e4,#00e5b0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px}
.header-brand-tag{font-size:9px;font-weight:600;color:var(--txD);letter-spacing:1px;text-transform:uppercase;margin-left:6px;padding:2px 6px;border:1px solid var(--brd);border-radius:4px}
.header-sub{font-size:10px;color:var(--txD);font-weight:500;letter-spacing:.5px;margin-top:1px}
.header-gear{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--txD);transition:color .2s,transform .15s}
.header-gear:active{transform:scale(.85);color:var(--txS)}

.content{flex:1;padding:12px 20px calc(92px + env(safe-area-inset-bottom));padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right))}

/* TABS */
.tab-bar{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:460px;z-index:50;background:var(--glassBg);border:1px solid var(--glassBrd);border-radius:22px;padding:5px;display:flex;justify-content:center;backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:0 4px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)}
.tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px 6px;font-size:9px;font-weight:600;color:var(--txM);transition:color .2s,transform .12s,background .2s;max-width:90px;border-radius:16px}
.tab-btn:active{transform:scale(.88)}
.tab-btn.act{color:var(--accent,#34c759);background:color-mix(in srgb,var(--accent,#34c759) 10%,transparent)}
.tab-btn span.ti{display:flex;align-items:center;justify-content:center;width:20px;height:20px}
.tab-dot{width:3px;height:3px;border-radius:50%;background:var(--accent,#34c759);opacity:0;transition:opacity .2s}
.tab-btn.act .tab-dot{opacity:.7}

/* CARDS */
.card{background:var(--g1);border:1px solid var(--glassBrd);border-radius:14px;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);transition:border-color .15s,transform .15s}
.card:active{transform:scale(.98)}
.card.today-sess{background:color-mix(in srgb,var(--g1) 91%,var(--sess-color,var(--txD)) 9%);border-left-width:3px;border-left-color:var(--sess-color,var(--txD));border-left-style:solid}
.progress-track{height:6px;background:var(--brdS);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width .6s cubic-bezier(.25,.1,.25,1)}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes expandDown{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInFromRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInFromLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
.fade-up{animation:fadeUp .32s cubic-bezier(.25,.1,.25,1) forwards;opacity:0}
.fade-in{animation:expandDown .22s cubic-bezier(.25,.1,.25,1) forwards;opacity:0}
.slide-left{animation:slideInFromRight .28s cubic-bezier(.25,.1,.25,1) forwards;opacity:0}
.slide-right{animation:slideInFromLeft .28s cubic-bezier(.25,.1,.25,1) forwards;opacity:0}

.sess-card{padding:14px 16px;border-radius:12px;background:var(--g2);margin-bottom:8px;border-left:3px solid var(--sess-color,var(--txD));backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.sess-label{font-size:14px;font-weight:700;letter-spacing:-.2px}
.sess-detail{font-size:12px;color:var(--txS);line-height:1.45;margin-top:4px}
.sess-meta{font-size:10px;color:var(--txD);margin-top:3px}
.tag{display:inline-block;font-size:10px;font-weight:600;padding:3px 10px;border-radius:6px;letter-spacing:.2px}

.expand-btn{width:100%;text-align:left;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.expand-arrow{font-size:16px;color:var(--txD);transition:transform .25s;display:inline-block}
.expand-arrow.open{transform:rotate(90deg)}

.tip-row{display:flex;align-items:flex-start;gap:8px;padding:5px 0}
.tip-icon{font-size:13px;flex-shrink:0;margin-top:1px}
.tip-text{font-size:12px;color:var(--txS);line-height:1.4}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:var(--overlay);z-index:100;animation:fadeIn .2s ease-out}
.modal-sheet{position:fixed;bottom:0;left:0;right:0;z-index:101;background:var(--gm);border-radius:24px 24px 0 0;padding:16px 20px calc(32px + env(safe-area-inset-bottom));max-width:500px;margin:0 auto;border:1px solid var(--glassBrd);border-bottom:none;max-height:85dvh;overflow-y:auto;backdrop-filter:blur(48px) saturate(220%);-webkit-backdrop-filter:blur(48px) saturate(220%);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 -8px 48px rgba(0,0,0,.28);animation:slideUp .3s cubic-bezier(.25,.1,.25,1)}
.glass-island{background:var(--g2);border:1px solid var(--glassBrd);border-radius:14px;backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);padding:14px 16px;margin-bottom:10px;overflow:hidden}
.picker-island{background:var(--g2);border:1px solid var(--glassBrd);border-radius:16px;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);overflow:hidden;margin-bottom:16px}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes slideDown{from{transform:translateY(0)}to{transform:translateY(110%)}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.modal-sheet.closing{animation:slideDown .26s cubic-bezier(.4,0,1,1) forwards}
.modal-overlay.closing{animation:fadeOut .22s ease-out forwards}
.modal-handle{width:36px;height:4px;background:var(--txG);border-radius:2px;margin:0 auto 16px}
.modal-title{font-size:18px;font-weight:700;color:var(--tx);margin-bottom:20px}

.setting-label{font-size:11px;color:var(--txD);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;display:block}
.setting-input{width:100%;min-width:0;padding:12px 14px;background:var(--inBg);border:1px solid var(--glassBrd);border-radius:10px;color:var(--tx);font-size:15px;outline:none;transition:border-color .2s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
input[type="date"].setting-input{-webkit-appearance:none;appearance:none;}
.setting-input:focus{border-color:var(--accent,#34c759)}
.setting-row{margin-bottom:16px}

.btn-primary{padding:14px 20px;border-radius:12px;font-size:14px;font-weight:700;border:none;cursor:pointer;transition:opacity .15s}
.btn-primary:active{opacity:.8}
.btn-secondary{padding:14px 20px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;background:var(--g2);border:1px solid var(--glassBrd);color:var(--txS);transition:opacity .15s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.ex-row{padding:10px 14px;background:var(--g2);border-radius:10px;margin-bottom:6px;border-left:3px solid var(--ex-color,var(--txG));backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.ex-name{font-size:13px;font-weight:500;color:var(--txB)}
.ex-sets{font-size:12px;font-weight:700}
.ex-rest{font-size:10px;color:var(--txD)}
.ex-note{font-size:10px;color:var(--txD);font-style:italic;margin-top:3px}

/* WEEKLY SHAPE */
.week-section{margin-top:16px;padding:14px 0 0;overflow:hidden;cursor:pointer;border-top:1px solid var(--brdS)}
.week-bar{display:flex;gap:4px;align-items:flex-end;height:70px}
.week-col{flex:1;text-align:center;position:relative;cursor:pointer}
.week-col-bar{border-radius:4px 4px 0 0;transition:all .3s}
.week-col-label{font-size:8px;font-weight:700;margin-top:3px;transition:color .3s}
.week-col.today .week-col-bar{box-shadow:0 0 10px var(--today-col)}
.week-col.today .week-col-label{color:var(--tx) !important}
.week-col.today::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--accent,#34c759)}
.week-detail{margin-top:10px;padding-top:10px;border-top:1px solid var(--brdS)}

/* BENCH TRACKER */
.bench-table{width:100%;border-collapse:collapse;margin-top:8px}
.bench-table th{font-size:10px;color:var(--txD);text-transform:uppercase;letter-spacing:.5px;padding:6px 4px;text-align:left;border-bottom:1px solid var(--brdS)}
.bench-table td{padding:8px 4px;font-size:13px;border-bottom:1px solid var(--brdS)}
.bench-table tr:last-child td{border-bottom:none}
.bench-amrap{color:#ff9f0a;font-weight:700}

/* HR ZONES */
.zone-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--brdS)}
.zone-row:last-child{border-bottom:none}
.zone-badge{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff}
.zone-info{flex:1}
.zone-name{font-size:12px;font-weight:600;color:var(--txB)}
.zone-range{font-size:11px;color:var(--txD)}


@media(min-width:640px){.content{padding-left:24px;padding-right:24px}.header{padding-left:24px;padding-right:24px}}

/* SYNC DOT */
.sync-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;transition:background .3s,opacity .3s}
.sync-dot.syncing{animation:syncPulse 1.2s ease-in-out infinite}
@keyframes syncPulse{0%,100%{opacity:.3}50%{opacity:1}}

/* AURORA */
#aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ab{position:absolute;border-radius:50%;filter:blur(90px)}
.ab1{width:600px;height:600px;top:-200px;left:-140px;background:#00c9e4;opacity:.08;animation:abDrift1 22s ease-in-out infinite alternate}
.ab2{width:500px;height:500px;top:160px;right:-160px;background:#af52de;opacity:.07;animation:abDrift2 26s ease-in-out infinite alternate}
.ab3{width:440px;height:440px;bottom:-80px;left:28%;background:#34c759;opacity:.07;animation:abDrift3 20s ease-in-out infinite alternate}
html.light .ab1{opacity:.16}
html.light .ab2{opacity:.13}
html.light .ab3{opacity:.14}
@keyframes abDrift1{0%{transform:translate(0,0)}100%{transform:translate(40px,50px)}}
@keyframes abDrift2{0%{transform:translate(0,0)}100%{transform:translate(-35px,40px)}}
@keyframes abDrift3{0%{transform:translate(0,0)}100%{transform:translate(25px,-40px)}}