/* ============================================================
   Tréninkový deník — Responsive UI
   Desktop = wide, readable web app
   Mobile (≤768px) = phone-mockup PWA (preserves original design)
   ============================================================ */

:root {
  --bg:         #0a0a0a;
  --surface:    #141414;
  --surface-2:  #1a1a1a;
  --surface-3:  #1e1e1e;
  --border:     #222;
  --border-2:   #2a2a2a;
  --text:       #e8e4dc;
  --text-dim:   #8a8a8a;
  --text-mute:  #555;
  --text-faint: #3a3a3a;
  --accent:     #e8e4dc;
  --green:      #2ecc71;
  --blue:       #3498db;
  --purple:     #9b59b6;
  --orange:     #e67e22;
  --sky:        #5dade2;
  --red:        #e74c3c;
  --amber:      #f0a500;
  --radius:     14px;
  --radius-lg:  18px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;color-scheme:dark;}

/* ---- Form controls — force dark theme ---- */
input,textarea,select,button{
  color:var(--text);
  caret-color:var(--text);
  font-family:inherit;
}
select{
  background:var(--surface);color:var(--text);
}
select option,
select optgroup{
  background:#1a1a1a;color:#e8e4dc;
}
[contenteditable]{caret-color:var(--text);}

/* Autofill — keep dark background, light text */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--surface) inset;
  caret-color:var(--text);
  transition:background-color 9999s ease-in-out 0s;
}

::selection{background:rgba(46,204,113,.35);color:#fff;}
::placeholder{color:var(--text-faint);}
body{
  background: radial-gradient(1200px 600px at 50% -10%, #15171c 0%, var(--bg) 60%) fixed;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  font-feature-settings:'cv11','ss01','ss03';      /* Inter stylistic alternates: better 1, slashed 0 */
  font-variant-ligatures: contextual;
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}

/* Display headings get Space Grotesk for a bit of character */
.sh-t,
.cnm,
.kbex-nm,
.otnm,
.psi-title,
.login-title,
.app-brand,
.tbox-n,
.rsbn,
.md,
.conf-t,
.bk-t,
.kb-month-hdr,
.prog-active-nm,
.prog-day-nm{
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  letter-spacing:-.015em;
}

/* Mono micro-text reads better with slightly looser tracking */
.utxt,.kbn,.otn,.kb-rx,.cmt,.sh-s,.slbl,.rsbl,.psi-k,.psi-v,
.hp,.hsc,.rdk,.rdpct,.stab,.cytm,.cytc,.fyd,.mpc,.yr-chip,.mchip,
.kb-sess-date,.kb-sess-nm,.kb-sess-row,.kb-sess-tot-row,.kb-month-sum-row,
.kb-month-sum-k,.kb-month-sum-v,.kb-month-tot,.kb-cmp-bar-lbl,.kb-cmp-bar-val,
.kb-cmp-section-title,.kbn,.nv,.app-user-name,.app-logout,.edbtn,
.rsm-editbtn,.comp-edbtn,.prog-stat-edbtn,.rsm-srch-item,.rsm-srch-empty,
.comp-srch-item,.comp-srch-empty,.sri,.sel-act-chip,.kb-cmp-btn,.clr-btn,
.add-metric-btn,.act-btn,.ubtn,.hbtn,.kwb,.login-foot{
  font-feature-settings:'tnum','zero','ss02';      /* tabular numerals + slashed zero */
  letter-spacing:.01em;
}

/* ============================================================
   TOPBAR  (desktop primary nav)
   ============================================================ */
.app-topbar{
  position:sticky;top:0;left:0;right:0;
  background:rgba(10,10,10,.85);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid #161616;
  z-index:50;
}
.app-topbar-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;gap:24px;
  padding:14px 28px;
}
.app-brand{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  font-weight:800;
  font-size:16px;
  letter-spacing:-.01em;
  color:var(--text);
  white-space:nowrap;
}
.app-brand::before{
  content:'';
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  margin-right:10px;
  vertical-align:middle;
  box-shadow:0 0 12px rgba(46,204,113,.55);
}

.desktop-tabs{
  display:flex;gap:4px;
  flex:1;justify-content:center;
}
.dt-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:10px;
  background:transparent;border:1px solid transparent;
  color:var(--text-mute);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:13px;
  cursor:pointer;transition:all .15s ease;
}
.dt-btn:hover{color:var(--text);background:#16181c;}
.dt-btn.active{
  color:var(--text);
  background:var(--surface);
  border-color:var(--border-2);
  box-shadow:0 1px 0 #2c2c2c inset;
}
.dt-btn .dt-ico{font-size:14px;}

.app-user{display:flex;align-items:center;gap:10px;}
.app-user-pic{width:30px;height:30px;border-radius:50%;border:1px solid var(--border-2);object-fit:cover;}
.app-user-name{font-size:13px;color:var(--text-dim);font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-weight:500;}
.app-logout-form{margin:0;}
.app-logout{
  background:var(--surface-2);border:1px solid var(--border-2);
  color:var(--text-dim);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  padding:7px 12px;border-radius:7px;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;
  transition:all .15s;
}
.app-logout:hover{color:var(--red);border-color:var(--red);}

.install-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:9px;
  background:linear-gradient(180deg,#1a3020 0%,#15281a 100%);
  border:1px solid var(--green);color:var(--green);
  font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:12px;
  cursor:pointer;transition:all .15s;
  box-shadow:0 0 0 0 rgba(46,204,113,.0);
}
.install-btn:hover{background:#1e3a26;box-shadow:0 4px 18px rgba(46,204,113,.25);}
.install-btn[hidden]{display:none;}

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell{
  flex:1;
  max-width:1280px;width:100%;
  margin:0 auto;
  padding:28px 28px 60px;
}

/* On desktop the "phone" frame is just a content card */
.phone{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  overflow:hidden;
  position:relative;
  min-height:calc(100vh - 160px);
}
.sbar{display:none;}                         /* phone status bar hidden on desktop */

/* Slide-container becomes a regular block on desktop */
.screens{display:block;width:100%;height:auto;transform:none!important;transition:none;}
.scr{width:100%;padding:28px 32px 60px;overflow:visible;}

/* Show only the active screen — DESKTOP ONLY (mobile uses the slide layout) */
@media (min-width: 769px) {
  .screens.t0 .scr:not(#s0),
  .screens.t1 .scr:not(#s1),
  .screens.t2 .scr:not(#s2),
  .screens.t3 .scr:not(#s3){display:none;}
}

/* ============================================================
   SCREEN HEADER
   ============================================================ */
.sh{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 0 20px;margin-bottom:24px;
  border-bottom:1px solid var(--border);
}
.sh-t{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1;}
.sh-s{font-size:11px;color:var(--text-mute);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;margin-top:6px;text-transform:uppercase;}
.sh-actions{display:flex;gap:8px;align-items:center;}

/* ============================================================
   SCORE
   ============================================================ */
.score-sec{
  background:var(--surface-2);
  border-radius:var(--radius);border:1px solid var(--border);
  padding:20px 22px;margin-bottom:16px;
}
.slbl{
  font-size:11px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-faint);
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;
}
.score-row{display:flex;gap:6px;margin-bottom:14px;}
.sb{
  flex:1;height:44px;border-radius:9px;
  border:1.5px solid var(--border);background:var(--surface);
  color:#444;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .12s;user-select:none;
}
.sb:hover{border-color:#333;color:#777;}
.s1.a{background:#3d0f0f;border-color:#c0392b;color:#ff7675;}
.s2.a{background:#3d1e0a;border-color:#d35400;color:#fdba74;}
.s3.a,.s4.a{background:#302700;border-color:#c9a227;color:#fde68a;}
.s5.a,.s6.a{background:#1a3000;border-color:#27ae60;color:#6ee7a0;}
.s7.a{background:#003030;border-color:#16a085;color:#34d4bb;}
.s8.a{background:#002040;border-color:#2980b9;color:#74b9f8;}
.s9.a{background:#1a0840;border-color:#8e44ad;color:#c39bd3;}
.s10.a{background:#400a28;border-color:#e91e63;color:#f9a8cf;}

.auto-ta{
  width:100%;
  background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:11px 14px;
  color:var(--text);font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;
  resize:none;outline:none;line-height:1.55;min-height:48px;overflow:hidden;
  transition:border-color .15s;
}
.auto-ta:focus{border-color:#3a3a3a;}
.auto-ta::placeholder{color:var(--text-faint);}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--surface-2);
  border-radius:var(--radius);border:1px solid var(--border);
  margin-bottom:12px;overflow:hidden;
  transition:border-color .15s;
}
.card.open{border-color:var(--border-2);}
.chdr-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;cursor:pointer;user-select:none;
  transition:background .15s;
}
.chdr-row:hover{background:#1c1c1c;}
.clbl{display:flex;align-items:center;gap:14px;}
.ico{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.ico-rr{background:#1e2d1a;}
.ico-dr{background:#1c2535;}
.ico-vr{background:#2c1a34;}
.ico-kb{background:#2c2010;}
.ico-ot{background:#1a2030;}
.cnm{font-size:16px;font-weight:700;letter-spacing:-.01em;}
.cmt{font-size:11px;color:var(--text-mute);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:3px;}
.chr{display:flex;align-items:center;gap:10px;}

.edbtn{
  display:none;
  font-size:11px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-mute);
  padding:6px 11px;border-radius:7px;
  border:1px solid var(--border-2);background:var(--surface);
  cursor:pointer;user-select:none;transition:all .15s;white-space:nowrap;align-items:center;
}
.card.open .edbtn{display:inline-flex;}
.edbtn:hover{color:#bbb;border-color:#444;}
.edbtn.on{color:var(--green);border-color:var(--green);background:#0e1e0e;}

.chev{color:var(--text-faint);font-size:18px;transition:transform .2s;}
.card.open>.chdr-row .chev{transform:rotate(90deg);}
.cbody{display:none;padding:8px 22px 20px;border-top:1px solid var(--border);}
.card.open>.cbody{display:block;}

/* ============================================================
   ACTIVITY ROWS
   ============================================================ */
.act-row{
  display:grid;
  grid-template-columns:22px minmax(0,1fr) 110px 60px;
  align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--border);
}
.act-row:last-of-type{border-bottom:none;}
.cbody.editing .act-row{grid-template-columns:54px minmax(0,1fr) 110px 60px 22px;}

.ach{
  width:20px;height:20px;border-radius:5px;
  border:1.5px solid #333;cursor:pointer;
  transition:all .15s;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:transparent;flex-shrink:0;
}
.ach:hover{border-color:#555;}
.ach.d-rr{background:#1a3020;border-color:var(--green);color:var(--green);}
.ach.d-dr{background:#1a2540;border-color:var(--blue);color:var(--blue);}
.ach.d-vr{background:#2c1a34;border-color:var(--purple);color:var(--purple);}

.anm{
  font-size:14px;color:#ccc;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  outline:none;min-width:0;
}
.cbody.editing .anm{
  border-bottom:1px solid #383838;
  cursor:text;color:var(--text);padding-bottom:2px;
}

.nc{display:flex;align-items:center;gap:4px;}
.nb{
  width:26px;height:26px;border-radius:6px;
  background:var(--surface);border:1px solid var(--border-2);
  color:#888;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;flex-shrink:0;line-height:1;
  transition:all .12s;
}
.nb:hover{background:#252525;color:#ddd;border-color:#3a3a3a;}
.nv{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--text);min-width:28px;text-align:center;}

.utxt{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text-mute);white-space:nowrap;text-align:right;}
.ubtn{
  display:none;padding:4px 6px;border-radius:6px;
  background:var(--surface-3);border:1px solid var(--border-2);
  color:#888;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  cursor:pointer;text-align:center;width:100%;
}
.cbody.editing .utxt{display:none;}
.cbody.editing .ubtn{display:block;}

.arc{display:none;align-items:center;gap:4px;}
.adl{
  display:none;width:22px;height:22px;border-radius:5px;
  background:#2a1212;border:1px solid #3a1414;color:#7a3535;
  font-size:14px;align-items:center;justify-content:center;cursor:pointer;
}
.adl:hover{background:#3a1414;color:var(--red);}
.reb{
  width:22px;height:22px;border-radius:5px;
  background:var(--surface);border:1px solid var(--border-2);
  color:#666;font-size:12px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;
}
.reb:hover{background:#252525;color:#aaa;}
.cbody.editing .arc{display:flex;}
.cbody.editing .adl{display:flex;}

.add-act-btn{
  display:none;width:100%;padding:11px;margin-top:12px;
  border-radius:10px;background:transparent;
  border:1px dashed #303030;color:#555;
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  cursor:pointer;text-align:center;transition:all .15s;
}
.add-act-btn:hover{border-color:#555;color:#888;}
.cbody.editing .add-act-btn{display:block;}

/* ============================================================
   KETTLEBELL
   ============================================================ */
.kbex{margin-bottom:10px;}
.kbex-hdr{display:flex;align-items:center;gap:12px;padding:11px 0 9px;border-bottom:1px solid var(--border);}
.kbchk{
  width:20px;height:20px;border-radius:5px;
  border:1.5px solid #333;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:transparent;flex-shrink:0;
}
.kbchk:hover{border-color:#555;}
.kbchk.don{background:#2c2010;border-color:var(--orange);color:var(--orange);}
.kbex-nm{font-size:16px;font-weight:700;color:#ddd;flex:1;outline:none;}
.kb-body.kbedit .kbex-nm{border-bottom:1px solid #383838;cursor:text;}
.kb-ser{
  display:flex;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--border);
}
.kb-ser:last-of-type{border-bottom:none;}
.kbn{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text-faint);width:20px;flex-shrink:0;}
.kwgrp{display:flex;gap:5px;flex-shrink:0;}
.kwb{
  padding:6px 11px;border-radius:7px;
  border:1px solid var(--border-2);background:var(--surface);
  color:#777;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  cursor:pointer;user-select:none;transition:all .12s;
}
.kwb:hover{color:#aaa;border-color:#3a3a3a;}
.kwb.ks{background:#2c2010;border-color:var(--orange);color:var(--orange);}
.kwb.kt{background:#1a2030;border-color:#2980b9;color:var(--sky);}
.hand-grp{display:flex;gap:4px;flex-shrink:0;}
.hbtn{
  padding:5px 9px;border-radius:6px;
  border:1px solid var(--border-2);background:var(--surface);
  color:#666;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  cursor:pointer;user-select:none;transition:all .12s;
}
.hbtn:hover{color:#aaa;}
.hbtn.hsel{background:#1e2d1a;border-color:#27ae60;color:var(--green);}
.kb-rc{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.kb-rx{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text-faint);margin:0 2px;}
.serdel{
  display:none;width:22px;height:22px;border-radius:5px;
  background:#2a1212;border:1px solid #3a1414;color:#7a3535;
  font-size:14px;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.serdel:hover{background:#3a1414;color:var(--red);}
.kb-body.kbedit .serdel{display:flex;}
.add-ser{
  display:flex;align-items:center;gap:7px;
  padding:10px 0;color:var(--text-mute);
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  cursor:pointer;border-top:1px dashed #1e1e1e;margin-top:8px;
  user-select:none;transition:color .15s;
}
.add-ser:hover{color:#aaa;}
.kb-div{height:1px;background:var(--border);margin:14px 0;}
.kb-add-ex{display:none;}
.kb-body.kbedit .kb-add-ex{display:block;}

/* ============================================================
   OSTATNÍ
   ============================================================ */
.otex{margin-bottom:8px;}
.otex-hdr{display:flex;align-items:center;gap:12px;padding:11px 0 8px;border-bottom:1px solid var(--border);}
.otchk{
  width:20px;height:20px;border-radius:5px;
  border:1.5px solid #333;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:transparent;flex-shrink:0;
}
.otchk:hover{border-color:#555;}
.otchk.don{background:#1a2030;border-color:var(--sky);color:var(--sky);}
.otnm{font-size:16px;font-weight:700;color:#ddd;flex:1;outline:none;}
.cbody.editing .otnm{border-bottom:1px solid #383838;cursor:text;color:var(--text);padding-bottom:2px;}
.otexdel{
  display:none;width:22px;height:22px;border-radius:5px;
  background:#2a1212;border:1px solid #3a1414;color:#7a3535;
  font-size:14px;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.cbody.editing .otexdel{display:flex;}
.ot-row{display:flex;align-items:center;gap:14px;padding:8px 0 8px 18px;border-bottom:1px solid var(--border);}
.ot-row:last-of-type{border-bottom:none;}
.otn{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text-faint);width:20px;}
.otserdel{
  display:none;width:22px;height:22px;border-radius:5px;
  background:#2a1212;border:1px solid #3a1414;color:#7a3535;
  font-size:14px;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.cbody.editing .otserdel{display:flex;}
.ot-add-ex{display:none;}
.cbody.editing .ot-add-ex{display:block;}

/* ============================================================
   SAVE
   ============================================================ */
.save-btn{
  width:100%;padding:18px;border-radius:12px;
  background:var(--accent);color:#141414;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;font-weight:800;
  letter-spacing:.08em;border:none;cursor:pointer;
  text-transform:uppercase;margin-top:18px;
  transition:all .15s;
}
.save-btn:hover{background:#fff;transform:translateY(-1px);box-shadow:0 8px 24px rgba(232,228,220,.12);}

/* ============================================================
   HISTORY
   ============================================================ */
.msec{
  display:flex;align-items:center;gap:8px;
  background:var(--surface-2);border-radius:12px;
  padding:14px 18px;margin-bottom:18px;
  border:1px solid var(--border);
}
.ma{color:var(--text-mute);font-size:22px;cursor:pointer;user-select:none;padding:0 8px;transition:color .15s;}
.ma:hover{color:var(--text);}
.md{flex:1;text-align:center;font-size:18px;font-weight:700;letter-spacing:-.01em;}

.rsm-wrap{margin-bottom:20px;}
.rsm-hdr{display:flex;align-items:center;justify-content:flex-end;margin-bottom:8px;}
.rsm-editbtn{
  font-size:11px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-mute);
  padding:6px 11px;border-radius:7px;
  border:1px solid var(--border-2);background:var(--surface);
  cursor:pointer;user-select:none;transition:all .15s;
}
.rsm-editbtn:hover{color:#bbb;border-color:#444;}
.rsm-editbtn.on{color:var(--green);border-color:var(--green);background:#0e1e0e;}

.rsm{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.rsb{
  background:var(--surface-2);border-radius:12px;
  padding:16px 12px;text-align:center;
  border:1px solid var(--border);position:relative;
  transition:border-color .15s;
}
.rsb:hover{border-color:var(--border-2);}
.rsbn{font-size:28px;font-weight:800;margin-bottom:4px;line-height:1;letter-spacing:-.02em;}
.rsbl{font-size:10px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-faint);letter-spacing:.06em;text-transform:uppercase;}
.c-rr{color:var(--green);}.c-dr{color:var(--blue);}.c-vr{color:var(--purple);}.c-kb{color:var(--orange);}.c-ot{color:var(--sky);}
.rsb-del{
  display:none;position:absolute;top:6px;right:6px;
  width:18px;height:18px;background:#2a1212;border-radius:4px;
  color:#7a3535;font-size:12px;cursor:pointer;
  align-items:center;justify-content:center;border:none;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
.rsb-del:hover{color:var(--red);background:#3a1414;}
.rsm.editing .rsb-del{display:flex;}
.rsm.editing .rsb-add{display:flex;}
.rsb-add{
  display:none;background:transparent;border-radius:12px;padding:16px 12px;
  text-align:center;border:1px dashed #303030;color:var(--text-mute);
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  cursor:pointer;align-items:center;justify-content:center;
  transition:all .15s;
}
.rsb-add:hover{border-color:#555;color:#aaa;}
.rsb-add.hidden{display:none;}
.rsm-search{background:var(--surface-2);border-radius:10px;border:1px solid var(--border-2);margin-top:10px;overflow:hidden;}
.rsm-search-row{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border);}
.rsm-search-row input{flex:1;background:transparent;border:none;outline:none;color:#ccc;font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;}
.rsm-search-row input::placeholder{color:var(--text-faint);}
.rsm-srch-close{color:var(--text-mute);font-size:16px;cursor:pointer;flex-shrink:0;transition:color .15s;}
.rsm-srch-close:hover{color:var(--red);}
.rsm-srch-res{max-height:200px;overflow-y:auto;}
.rsm-srch-item{padding:9px 14px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#aaa;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s;}
.rsm-srch-item:last-child{border-bottom:none;}
.rsm-srch-item:hover{background:#222;color:var(--text);}
.rsm-srch-empty{padding:14px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text-mute);text-align:center;}

#day-list{display:grid;gap:8px;}
.hday{background:var(--surface-2);border-radius:10px;border:1px solid var(--border);overflow:hidden;transition:border-color .15s;}
.hday:hover{border-color:var(--border-2);}
.hdhdr{display:flex;align-items:center;padding:13px 16px;cursor:pointer;gap:14px;user-select:none;}
.hddt{font-size:13px;font-weight:700;width:80px;flex-shrink:0;}
.hpills{display:flex;gap:5px;flex:1;flex-wrap:wrap;}
.hp{font-size:9px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 7px;border-radius:4px;letter-spacing:.04em;}
.hp-rr{background:#1e3a26;color:var(--green);}
.hp-dr{background:#192440;color:var(--blue);}
.hp-vr{background:#2c1a34;color:var(--purple);}
.hp-kb{background:#2c2010;color:var(--orange);}
.hp-ot{background:#1a2030;color:var(--sky);}
.hp-x{background:var(--surface);color:#333;}
.hsc{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;padding:3px 11px;border-radius:18px;border:1px solid;flex-shrink:0;font-weight:700;}
.hsc-hi{color:var(--green);border-color:var(--green);background:#192e1e;}
.hsc-mi{color:var(--amber);border-color:var(--amber);background:#28200f;}
.hsc-lo{color:var(--red);border-color:#c0392b;background:#2a1212;}
.hdbody{display:none;padding:10px 18px 18px;border-top:1px solid var(--border);}
.hday.open>.hdbody{display:block;}
.rdrow{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #191919;}
.rdrow:last-child{border-bottom:none;}
.rdk{font-size:12px;color:var(--text-mute);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;}
.rdpct{font-size:10px;padding:2px 8px;border-radius:4px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;}

/* ============================================================
   STATISTICS
   ============================================================ */
.stabs{
  display:flex;gap:2px;
  border-bottom:1px solid var(--border);margin-bottom:22px;
  overflow-x:auto;scrollbar-width:none;
}
.stabs::-webkit-scrollbar{display:none;}
.stab{
  flex-shrink:0;padding:12px 18px;
  font-size:13px;font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;
  color:var(--text-mute);letter-spacing:0;
  cursor:pointer;border-bottom:2px solid transparent;
  transition:all .15s;user-select:none;
}
.stab:hover{color:#aaa;}
.stab.on{color:var(--text);border-bottom-color:var(--text);}
.spanel{display:none;}
.spanel.on{display:block;}

.comp-ctrl{background:var(--surface-2);border-radius:12px;padding:18px;border:1px solid var(--border);margin-bottom:14px;}
.comp-yr-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center;}
.yr-chip{
  padding:6px 12px;border-radius:18px;
  border:1px solid var(--border-2);background:var(--surface-3);
  color:#888;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px;
  transition:all .15s;
}
.yr-chip.on{border-color:var(--text);color:var(--text);}
.ycx{display:none;color:var(--text-mute);cursor:pointer;font-size:12px;margin-left:2px;}
.ycx:hover{color:var(--red);}
.yr-editing .ycx{display:inline;}
.yr-sel{display:none;}
.yr-editing .yr-sel{display:block;}
.yr-sel{background:var(--surface);border:1px solid var(--border-2);border-radius:8px;color:#aaa;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;padding:7px 12px;outline:none;cursor:pointer;}
.comp-metric-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.mchip{
  padding:6px 13px;border-radius:18px;
  border:1px solid var(--border-2);background:var(--surface);
  color:#888;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  cursor:pointer;user-select:none;transition:all .15s;
  display:flex;align-items:center;gap:5px;
}
.mchip:hover{color:#bbb;}
.mchip.on{border-color:var(--text);color:var(--text);background:var(--surface-2);}
.mchip .mx{color:var(--text-mute);font-size:12px;display:none;cursor:pointer;}
.comp-edit-mode .mchip.custom .mx{display:inline;}
.mx:hover{color:var(--red);}
.add-metric-btn{
  padding:6px 12px;border-radius:18px;
  border:1px dashed var(--border-2);background:transparent;color:var(--text-mute);
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;cursor:pointer;transition:all .15s;
}
.add-metric-btn:hover{border-color:#555;color:#aaa;}

.comp-srch-panel{background:var(--surface-2);border-radius:10px;border:1px solid var(--border-2);margin-top:10px;overflow:hidden;display:none;}
.comp-srch-row{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--border);}
.comp-srch-row input{flex:1;background:transparent;border:none;outline:none;color:#ccc;font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;}
.comp-srch-row input::placeholder{color:var(--text-faint);}
.comp-srch-close{color:var(--text-mute);font-size:16px;cursor:pointer;flex-shrink:0;transition:color .15s;}
.comp-srch-close:hover{color:var(--red);}
.comp-srch-res{max-height:200px;overflow-y:auto;}
.comp-srch-item{padding:9px 14px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#aaa;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s;}
.comp-srch-item:last-child{border-bottom:none;}
.comp-srch-item:hover{background:#222;color:var(--text);}
.comp-srch-empty{padding:14px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text-mute);text-align:center;}
.comp-edbtn{
  font-size:11px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-mute);
  padding:6px 11px;border-radius:7px;
  border:1px solid var(--border-2);background:var(--surface);
  cursor:pointer;user-select:none;transition:all .15s;margin-left:auto;
}
.comp-edbtn:hover{color:#bbb;border-color:#444;}
.comp-edbtn.on{color:var(--green);border-color:var(--green);background:#0e1e0e;}

.cyt{border-radius:12px;border:1px solid var(--border);overflow:hidden;margin-bottom:14px;}
.cyt-scroll{overflow-x:auto;}
.cytr{display:flex;border-bottom:1px solid #191919;}
.cytr:last-child{border-bottom:none;}
.cytr.cyth{background:var(--surface);}
.cytm{width:60px;flex-shrink:0;padding:11px 8px 11px 16px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#aaa;display:flex;align-items:center;}
.cytc{flex:1;padding:11px 6px;display:flex;align-items:center;justify-content:center;min-width:80px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;font-weight:700;}
.cytr.cyth .cytc{font-size:11px;font-weight:500;color:var(--text-mute);padding:13px 6px;}
.bg-hi{background:#162413;color:var(--green);}
.bg-mi{background:#221d08;color:var(--amber);}
.bg-lo{background:#211010;color:var(--red);}
.bg-em{background:transparent;color:#2a2a2a;}

.filt-card{background:var(--surface-2);border-radius:12px;padding:18px;border:1px solid var(--border);margin-bottom:14px;}
.filt-yr-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.fya{color:var(--text-mute);font-size:20px;cursor:pointer;user-select:none;transition:color .15s;}
.fya:hover{color:var(--text);}
.fyd{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:700;min-width:54px;text-align:center;}
.clr-btn{
  padding:6px 12px;border-radius:7px;
  border:1px solid var(--border-2);background:var(--surface);
  color:var(--text-mute);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  cursor:pointer;transition:all .15s;margin-left:auto;
}
.clr-btn:hover{color:var(--red);border-color:var(--red);}
.mcrow{display:flex;gap:5px;flex-wrap:wrap;}
.mpc{
  padding:5px 9px;border-radius:7px;
  border:1px solid var(--border-2);background:var(--surface);
  color:var(--text-mute);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  cursor:pointer;user-select:none;transition:all .15s;
}
.mpc:hover{color:#aaa;border-color:#3a3a3a;}
.mpc.on{border-color:var(--text);color:var(--text);background:var(--surface-2);}
.srch-row{
  display:flex;align-items:center;gap:9px;
  background:var(--surface);border-radius:10px;padding:10px 14px;
  border:1px solid var(--border);margin-top:14px;
}
.srch-row input{flex:1;background:transparent;border:none;outline:none;color:#ccc;font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;}
.srch-row input::placeholder{color:var(--text-faint);}
.srch-results{margin-top:8px;}
.sri{padding:7px 10px;border-radius:6px;cursor:pointer;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#888;transition:background .12s;display:flex;align-items:center;justify-content:space-between;}
.sri:hover{background:#222;}
.sri.sel{background:#1a2030;color:var(--sky);}
.sel-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.sel-act-chip{padding:5px 11px;border-radius:18px;border:1px solid var(--border-2);background:var(--surface-3);color:#aaa;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;display:flex;align-items:center;gap:6px;}
.sel-act-chip .sax{cursor:pointer;color:var(--text-mute);}
.sel-act-chip .sax:hover{color:var(--red);}

.tot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:14px;}
.tbox{background:var(--surface-2);border-radius:12px;padding:16px 18px;border:1px solid var(--border);}
.tbox-n{font-size:26px;font-weight:800;margin-bottom:4px;line-height:1;letter-spacing:-.02em;}
.tbox-l{font-size:10px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-mute);text-transform:uppercase;letter-spacing:.08em;}
.tbox-s{font-size:10px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-faint);margin-top:4px;}

.act-btn{
  padding:9px 14px;border-radius:9px;
  border:1px solid var(--border-2);background:var(--surface-2);
  color:#aaa;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  cursor:pointer;transition:all .15s;
  display:flex;align-items:center;gap:6px;
}
.act-btn:hover{border-color:#555;color:var(--text);}
.act-btn.g{background:#1e2d1a;border-color:var(--green);color:var(--green);}

.kb-filt{background:var(--surface-2);border-radius:12px;padding:18px;border:1px solid var(--border);margin-bottom:14px;}
#kb-mc .mpc{border-color:#2c2010;color:#9a6630;}
#kb-mc .mpc.on{border-color:var(--orange);color:var(--orange);background:#2c2010;}
.kb-cmp-btn{
  padding:7px 14px;border-radius:9px;
  border:1px solid #2c2010;background:var(--surface);
  color:#c87d3a;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  cursor:pointer;transition:all .15s;letter-spacing:.04em;
}
.kb-cmp-btn:hover{border-color:var(--orange);color:var(--orange);}
.kb-cmp-btn.on{border-color:var(--orange);color:var(--orange);background:#2c2010;}
.kb-cmp-wrap{margin-bottom:14px;}
.kb-cmp-section{margin-bottom:18px;}
.kb-cmp-section-title{font-size:11px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--orange);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #2c2010;}
.kb-cmp-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.kb-cmp-bar-lbl{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#999;width:50px;flex-shrink:0;text-align:right;}
.kb-cmp-bar-bg{flex:1;height:24px;background:var(--surface);border-radius:6px;overflow:hidden;position:relative;}
.kb-cmp-bar-fill{height:100%;border-radius:6px;background:var(--orange);opacity:.8;transition:width .3s;}
.kb-cmp-bar-val{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text);font-weight:700;}
.kb-session-month{margin-bottom:14px;}
.kb-month-hdr{font-size:14px;font-weight:800;color:var(--orange);padding:10px 0 8px;border-bottom:1px solid #2c2010;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.kb-month-tot{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--orange);}
.kb-month-sum{background:#2c2010;border-radius:10px;padding:12px 14px;margin-bottom:10px;border:1px solid #3d2a10;}
.kb-month-sum-row{display:flex;justify-content:space-between;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;padding:4px 0;border-bottom:1px solid #3d2a10;}
.kb-month-sum-row:last-child{border-bottom:none;}
.kb-month-sum-k{color:#c87d3a;}
.kb-month-sum-v{color:var(--orange);font-weight:700;}
.kb-sess{background:var(--surface);border-radius:10px;padding:14px;margin-bottom:8px;border:1px solid var(--border);}
.kb-sess-date{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#aaa;margin-bottom:10px;}
.kb-sess-ex{margin-bottom:8px;}
.kb-sess-nm{font-size:11px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-mute);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;}
.kb-sess-row{display:flex;justify-content:space-between;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#bbb;padding:3px 0;border-bottom:1px solid #191919;}
.kb-sess-row:last-child{border-bottom:none;}
.kb-sess-tot{border-top:1px solid var(--border);margin-top:8px;padding-top:8px;}
.kb-sess-tot-row{display:flex;justify-content:space-between;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--orange);padding:3px 0;}

/* ============================================================
   PROGRAM
   ============================================================ */
.prog-ex-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.pec{
  padding:9px 16px;border-radius:22px;
  border:1px solid var(--border-2);background:var(--surface-3);
  color:#888;font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px;
  cursor:pointer;user-select:none;transition:all .15s;
  display:flex;align-items:center;gap:7px;
}
.pec:hover{color:#bbb;border-color:#3a3a3a;}
.pec.on{border-color:var(--sky);color:var(--sky);background:#1a2030;}
.pec.add-p{border-style:dashed;color:var(--text-mute);}
.pec.add-p:hover{border-color:#555;color:#aaa;}
.pec .pecx{display:none;color:var(--text-mute);font-size:12px;}
.prog-editing .pec .pecx{display:inline;}
.pecx:hover{color:var(--red);}

.prog-dur-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin-bottom:14px;
}
.prog-start-btn{
  width:100%;padding:14px;border-radius:12px;
  background:#1a3020;border:1px solid var(--green);color:var(--green);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;font-weight:700;
  cursor:pointer;transition:all .15s;margin-bottom:10px;
}
.prog-start-btn:hover{background:#1e3a26;}
.prog-active-bar{
  background:#1a3020;border:1px solid var(--green);
  border-radius:12px;padding:14px 18px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;
}
.prog-active-nm{font-size:14px;font-weight:700;color:var(--green);}
.prog-active-info{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--green);opacity:.7;margin-top:3px;}
.prog-icon-btn{background:transparent;border:none;font-size:20px;cursor:pointer;opacity:.7;transition:opacity .15s;padding:4px;}
.prog-icon-btn:hover{opacity:1;}

.prog-day{background:var(--surface-2);border-radius:12px;margin-bottom:8px;border:1px solid var(--border);overflow:hidden;transition:border-color .15s;}
.prog-day:hover{border-color:var(--border-2);}
.prog-day-hdr{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;cursor:pointer;user-select:none;}
.prog-day-nm{font-size:14px;font-weight:700;}
.prog-day-chk{width:24px;height:24px;border-radius:6px;border:1.5px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-size:13px;color:transparent;cursor:pointer;transition:all .15s;}
.prog-day-chk.don{background:#1a3020;border-color:var(--green);color:var(--green);}
.prog-day-body{display:none;padding:8px 16px 14px;border-top:1px solid var(--border);}
.prog-day.open>.prog-day-body{display:block;}

.prog-stat-item{background:var(--surface-2);border-radius:12px;padding:18px;border:1px solid var(--border);margin-bottom:10px;position:relative;}
.psi-title{font-size:17px;font-weight:800;margin-bottom:5px;letter-spacing:-.01em;}
.psi-dates{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text-mute);margin-bottom:10px;}
.psi-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid #191919;}
.psi-row:last-child{border-bottom:none;}
.psi-k{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text-mute);}
.psi-v{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;}
.psi-bar{background:var(--surface-3);border-radius:4px;height:6px;margin-top:10px;}
.psi-bar-fill{height:100%;border-radius:4px;transition:width .3s;}
.psi-del{
  display:none;width:28px;height:28px;border-radius:7px;
  background:#2a1212;border:1px solid #3a1414;color:#7a3535;
  font-size:15px;align-items:center;justify-content:center;cursor:pointer;
  position:absolute;top:14px;right:14px;transition:all .15s;
}
.psi-del:hover{background:#3a1414;color:var(--red);}
.prog-stat-editing .psi-del{display:flex;}
.prog-stat-edbtn{
  font-size:11px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-mute);
  padding:6px 11px;border-radius:7px;
  border:1px solid var(--border-2);background:var(--surface);
  cursor:pointer;user-select:none;transition:all .15s;margin-left:auto;
}
.prog-stat-edbtn:hover{color:#bbb;border-color:#444;}
.prog-stat-edbtn.on{color:var(--red);border-color:var(--red);background:#1a0a0a;}

/* ============================================================
   OVERLAYS
   ============================================================ */
.conf-overlay,.bk-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:200;
}
.conf-box,.bk-box{background:var(--surface-2);border-radius:18px;padding:28px 26px;width:340px;max-width:92vw;border:1px solid var(--border-2);box-shadow:0 24px 60px rgba(0,0,0,.6);}
.conf-t,.bk-t{font-size:20px;font-weight:800;margin-bottom:8px;letter-spacing:-.01em;}
.conf-s{font-size:13px;color:#888;margin-bottom:22px;line-height:1.55;}
.conf-btns{display:flex;gap:10px;}
.conf-btn{flex:1;padding:13px;border-radius:11px;border:none;font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;}
.conf-cancel{background:#222;color:#aaa;border:1px solid var(--border-2);}
.conf-cancel:hover{background:#2a2a2a;color:var(--text);}
.conf-ok{background:#2a1212;color:var(--red);border:1px solid #c0392b;}
.conf-ok:hover{background:#3a1414;}
.bk-opt{display:flex;align-items:center;gap:13px;padding:14px;border-radius:11px;border:1px solid var(--border);background:var(--surface);cursor:pointer;margin-bottom:9px;transition:all .15s;}
.bk-opt:hover{border-color:#444;background:#181818;}
.bk-opt-ico{font-size:24px;}
.bk-opt-nm{font-size:13px;font-weight:700;}
.bk-opt-s{font-size:11px;color:var(--text-mute);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:2px;}
.bk-close{width:100%;padding:11px;border-radius:11px;border:1px solid var(--border-2);background:var(--surface-3);color:var(--text-mute);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;cursor:pointer;margin-top:10px;transition:all .15s;}
.bk-close:hover{color:var(--text);border-color:#444;}

/* ============================================================
   MOBILE NAV (bottom) — desktop hidden
   ============================================================ */
.nav{display:none;}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-body{justify-content:center;align-items:center;padding:40px 20px;}
.login-wrap{
  max-width:440px;width:100%;text-align:center;
  padding:48px 32px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:22px;
  box-shadow:0 32px 80px rgba(0,0,0,.6);
}
.login-title{
  font-size:30px;font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-weight:800;
  letter-spacing:-.02em;color:var(--text);margin-bottom:10px;
}
.login-sub{font-size:14px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-mute);margin-bottom:34px;line-height:1.55;}
.login-error{background:#2a1212;border:1px solid #c0392b;color:#ff7675;font-size:12px;padding:11px 14px;border-radius:9px;margin-bottom:20px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;text-align:left;}
.login-google{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 26px;
  background:var(--surface-2);border:1px solid var(--border-2);
  border-radius:12px;color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;font-weight:700;
  cursor:pointer;text-decoration:none;transition:all .15s;
}
.login-google:hover{border-color:#555;background:var(--surface-3);transform:translateY(-1px);}
.login-foot{margin-top:28px;font-size:10px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:#444;letter-spacing:.06em;text-transform:uppercase;}

/* ============================================================
   ===========================  MOBILE  ========================
   The phone-mockup PWA design from the original.
   ============================================================ */
@media (max-width: 768px) {
  body{
    background:#0a0a0a;
    padding:0;
    min-height:100vh;
  }

  /* Hide desktop topbar, show only minimal info */
  .app-topbar{
    background:#0a0a0a;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:1px solid #161616;padding:0;
  }
  .app-topbar-inner{
    padding:10px 14px;gap:10px;
    flex-wrap:wrap;
  }
  .app-brand{font-size:12px;letter-spacing:.06em;text-transform:uppercase;flex:1;}
  .app-brand::before{width:6px;height:6px;margin-right:7px;}
  .desktop-tabs{display:none;}
  .app-user-name{display:none;}
  .app-user-pic{width:24px;height:24px;}
  .app-logout{font-size:9px;padding:4px 8px;}
  .install-btn{font-size:11px;padding:5px 10px;border-radius:7px;gap:5px;}

  /* App shell: full screen */
  .app-shell{padding:0;max-width:none;}

  /* PHONE FRAME */
  .phone{
    width:100%;height:calc(100vh - 50px);
    border-radius:0;border:none;box-shadow:none;
    min-height:0;background:#141414;
  }
  .sbar{
    display:flex;height:44px;align-items:center;justify-content:space-between;
    padding:0 26px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#555;background:#141414;
  }

  /* Slide screens like the original phone mockup */
  .screens{
    display:flex;width:400%;
    height:calc(100vh - 50px - 44px - 60px);
    transition:transform .36s cubic-bezier(.65,0,.35,1);
  }
  .screens.t0{transform:translateX(0)!important;}
  .screens.t1{transform:translateX(-25%)!important;}
  .screens.t2{transform:translateX(-50%)!important;}
  .screens.t3{transform:translateX(-75%)!important;}
  .screens.t0 .scr,
  .screens.t1 .scr,
  .screens.t2 .scr,
  .screens.t3 .scr{display:block;}
  .scr{width:25%;height:100%;padding:0 14px 20px;overflow-y:auto;scrollbar-width:none;}
  .scr::-webkit-scrollbar{display:none;}

  /* Compact screen header */
  .sh{
    padding:11px 0 9px;margin-bottom:12px;
    position:sticky;top:0;background:#141414;z-index:10;
    align-items:center;
  }
  .sh-t{font-size:20px;}
  .sh-s{font-size:9px;margin-top:2px;}

  /* Tight components */
  .score-sec{padding:11px 12px 10px;margin-bottom:9px;}
  .slbl{font-size:9px;margin-bottom:7px;letter-spacing:.12em;}
  .score-row{gap:3px;margin-bottom:9px;}
  .sb{height:28px;font-size:11px;border-radius:6px;}
  .auto-ta{padding:8px 10px;font-size:12px;min-height:44px;}

  .card{border-radius:14px;margin-bottom:8px;}
  .chdr-row{padding:11px 12px;}
  .clbl{gap:8px;}
  .ico{width:26px;height:26px;font-size:13px;border-radius:7px;}
  .cnm{font-size:13px;}
  .cmt{font-size:9px;margin-top:1px;}
  .cbody{padding:3px 12px 12px;}

  .act-row{grid-template-columns:16px minmax(0,1fr) 56px 36px;gap:4px;padding:6px 0;}
  .cbody.editing .act-row{grid-template-columns:40px minmax(0,1fr) 56px 36px 16px;}
  .ach{width:15px;height:15px;font-size:9px;}
  .anm{font-size:12px;}
  .nb{width:18px;height:18px;font-size:13px;}
  .nv{font-size:11px;min-width:18px;}
  .utxt{font-size:9px;}
  .ubtn{font-size:9px;padding:2px 3px;}
  .adl,.reb{width:15px;height:15px;}
  .reb{width:18px;height:18px;font-size:11px;}
  .add-act-btn{font-size:10px;padding:7px;margin-top:7px;border-radius:8px;}

  .kbex{margin-bottom:6px;}
  .kbex-hdr{gap:7px;padding:7px 0 6px;}
  .kbchk{width:15px;height:15px;font-size:9px;}
  .kbex-nm{font-size:13px;}
  .kb-ser{gap:4px;padding:6px 0;}
  .kbn{font-size:10px;width:12px;}
  .kwb{padding:3px 6px;font-size:10px;border-radius:5px;}
  .hbtn{padding:2px 5px;font-size:9px;}
  .kb-rx{font-size:9px;}
  .serdel,.otexdel,.otserdel{width:15px;height:15px;font-size:12px;border-radius:3px;}
  .add-ser{font-size:10px;padding:6px 0;}

  .otex{margin-bottom:4px;}
  .otex-hdr{gap:7px;padding:7px 0 5px;}
  .otchk{width:15px;height:15px;font-size:9px;}
  .otnm{font-size:13px;}
  .ot-row{gap:7px;padding:5px 0 5px 10px;}
  .otn{font-size:10px;width:12px;}

  .save-btn{padding:13px;font-size:12px;border-radius:12px;margin-top:10px;}

  /* History — keep 4-col layout */
  .msec{padding:9px 12px;margin-bottom:10px;border-radius:11px;gap:5px;}
  .ma{font-size:16px;padding:0 4px;}
  .md{font-size:13px;}
  .rsm-wrap{margin-bottom:11px;}
  .rsm-hdr{margin-bottom:5px;}
  .rsm-editbtn{font-size:9px;padding:3px 7px;}
  .rsm{display:flex;flex-wrap:wrap;gap:5px;}
  .rsb{flex:0 0 calc(25% - 4px);min-width:70px;padding:8px 3px;border-radius:10px;}
  .rsbn{font-size:17px;}
  .rsbl{font-size:8px;}
  .rsb-del{width:12px;height:12px;font-size:10px;top:2px;right:3px;}
  .rsb-add{flex:0 0 calc(25% - 4px);min-width:70px;padding:8px 3px;font-size:10px;}
  .rsm-search-row{padding:8px 10px;}
  .rsm-search-row input{font-size:12px;}
  .rsm-srch-item{font-size:10px;padding:7px 10px;}
  .rsm-srch-empty{font-size:10px;padding:10px;}

  .hday{border-radius:8px;margin-bottom:4px;}
  .hdhdr{padding:6px 9px;gap:6px;}
  .hddt{font-size:10px;width:60px;}
  .hp{font-size:7px;padding:1px 4px;border-radius:3px;}
  .hsc{font-size:9px;padding:1px 6px;}
  .hdbody{padding:5px 11px 11px;}
  .rdrow{padding:4px 0;}
  .rdk{font-size:9px;}
  .rdpct{font-size:8px;padding:1px 5px;}

  .stabs{gap:0;margin-bottom:12px;}
  .stab{padding:8px 11px;font-size:9px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;}
  .comp-ctrl,.filt-card,.kb-filt{padding:11px;border-radius:12px;margin-bottom:10px;}
  .comp-yr-row,.comp-metric-row,.mcrow,.filt-yr-row{gap:3px;}
  .yr-chip,.mchip,.mpc{font-size:10px;padding:3px 8px;}
  .mpc{font-size:8px;padding:2px 5px;border-radius:5px;}
  .yr-sel{font-size:11px;padding:4px 8px;}
  .cytm{width:34px;font-size:9px;padding:5px 3px 5px 9px;}
  .cytc{font-size:11px;min-width:55px;padding:5px 2px;}
  .cytr.cyth .cytc{font-size:9px;padding:6px 2px;}
  .fyd{font-size:13px;min-width:36px;}
  .fya{font-size:15px;}
  .clr-btn{font-size:9px;padding:3px 9px;}
  .tot-grid{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;}
  .tbox{padding:10px;border-radius:11px;}
  .tbox-n{font-size:19px;}
  .tbox-l,.tbox-s{font-size:8px;}
  .kb-cmp-btn{font-size:9px;padding:4px 10px;}
  .kb-month-hdr{font-size:11px;}
  .kb-sess{padding:9px;border-radius:9px;}
  .kb-sess-date{font-size:10px;}
  .kb-sess-nm{font-size:9px;}
  .kb-sess-row,.kb-sess-tot-row{font-size:10px;}

  .prog-ex-chips{gap:5px;margin-bottom:10px;}
  .pec{padding:5px 11px;font-size:11px;border-radius:20px;}
  .prog-dur-row{padding:8px 0;gap:8px;margin-bottom:10px;}
  .prog-start-btn{padding:11px;font-size:12px;border-radius:11px;}
  .prog-active-bar{padding:9px 12px;border-radius:11px;}
  .prog-active-nm{font-size:12px;}
  .prog-active-info{font-size:9px;}
  .prog-icon-btn{font-size:16px;}
  .prog-day{margin-bottom:6px;border-radius:11px;}
  .prog-day-hdr{padding:9px 11px;}
  .prog-day-nm{font-size:12px;}
  .prog-day-chk{width:18px;height:18px;font-size:10px;border-radius:5px;}
  .prog-day-body{padding:4px 11px 11px;}
  .prog-stat-item{padding:12px;margin-bottom:8px;border-radius:12px;}
  .psi-title{font-size:14px;}
  .psi-dates,.psi-k{font-size:9px;}
  .psi-v{font-size:11px;}
  .psi-del{width:22px;height:22px;font-size:13px;top:10px;right:10px;}

  /* Overlays sit inside phone frame */
  .conf-overlay,.bk-overlay{position:absolute;inset:0;border-radius:0;}
  .conf-box,.bk-box{width:280px;padding:22px 20px;border-radius:16px;}
  .conf-t,.bk-t{font-size:16px;}
  .conf-s{font-size:11px;margin-bottom:18px;}
  .conf-btn{font-size:12px;padding:11px;}
  .bk-opt-ico{font-size:20px;}
  .bk-opt-nm{font-size:12px;}
  .bk-opt-s{font-size:10px;}
  .bk-close{font-size:10px;padding:9px;}

  /* Bottom nav visible */
  .nav{
    display:flex;
    position:absolute;bottom:0;left:0;right:0;
    height:60px;background:#141414;border-top:1px solid #1c1c1c;
    align-items:center;justify-content:space-around;padding:0 4px 8px;
  }
  .nbt{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:6px 10px;border-radius:10px;user-select:none;}
  .ni{font-size:16px;transition:transform .15s;}
  .nl{font-size:8px;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:#2e2e2e;text-transform:uppercase;}
  .nbt.active .nl{color:#e8e4dc;}
  .nbt.active .ni{transform:scale(1.1);}

  /* Login on mobile */
  .login-wrap{padding:36px 22px;border-radius:18px;}
  .login-title{font-size:22px;}
  .login-sub{font-size:12px;margin-bottom:26px;}
  .login-google{padding:12px 22px;font-size:13px;}
}