:root { --safe-top:0px; --safe-bottom:0px; --safe-left:0px; --safe-right:0px; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,system-ui,Segoe UI,Roboto,sans-serif;
  background:var(--tg-theme-bg-color,#fff); color:var(--tg-theme-text-color,#000); }
.app { min-height:100vh; padding: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 16px)
  calc(var(--safe-bottom) + 72px) calc(var(--safe-left) + 16px); }
.tab { display:none; } .tab.active { display:block; }
h1 { font-size:1.4rem; margin:8px 0 16px; } h2 { font-size:1.1rem; margin:20px 0 8px; }
.hint, .status, .disclaimer { color:var(--tg-theme-hint-color,#888); font-size:0.85rem; }
.disclaimer { margin-top:20px; }

.btn { padding:12px 24px; border:none; border-radius:12px; font-size:1rem;
  background:var(--tg-theme-secondary-bg-color,#e0e0e0); color:var(--tg-theme-text-color,#000); }
.btn.primary { background:var(--tg-theme-button-color,#2481cc); color:var(--tg-theme-button-text-color,#fff); }
.btn:disabled { opacity:0.5; }

.screen-row { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 0; border-bottom:0.5px solid var(--tg-theme-secondary-bg-color,#eee); }
.screen-q { font-size:0.95rem; }
.btn.toggle { padding:8px 18px; } .btn.toggle.yes { background:var(--tg-theme-button-color,#2481cc); color:#fff; }
.track-card { display:flex; flex-direction:column; gap:4px; width:100%; text-align:left;
  padding:16px; margin-bottom:10px; border-radius:12px; border:1px solid var(--tg-theme-secondary-bg-color,#e0e0e0);
  background:var(--tg-theme-bg-color,#fff); color:var(--tg-theme-text-color,#000); }
.track-name { font-weight:600; } .track-desc { color:var(--tg-theme-hint-color,#888); font-size:0.85rem; }

.slot-toggle { display:flex; gap:8px; margin-bottom:14px; }
.slot-btn { flex:1; padding:10px; border-radius:10px; border:1px solid var(--tg-theme-secondary-bg-color,#e0e0e0);
  background:var(--tg-theme-bg-color,#fff); color:var(--tg-theme-text-color,#000); }
.slot-btn.selected { border:2px solid var(--tg-theme-button-color,#2481cc); font-weight:600; }

.timer-card { text-align:center; padding:28px 16px; border-radius:16px; background:var(--tg-theme-secondary-bg-color,#f1f1f1); }
.exercise { font-size:0.9rem; color:var(--tg-theme-hint-color,#888); }
.phase { font-size:1.5rem; font-weight:600; }
.phase[data-phase="squeeze"], .phase[data-phase="inhale"] { color:var(--tg-theme-button-color,#2481cc); }
.phase[data-phase="release"], .phase[data-phase="exhale"], .phase[data-phase="relax"], .phase[data-phase="rest"] { color:var(--tg-theme-hint-color,#888); }
.seconds { font-size:3.6rem; font-weight:700; line-height:1.1; min-height:4rem; }
.reps { color:var(--tg-theme-hint-color,#888); font-size:0.9rem; }
.cue { font-size:0.85rem; min-height:1.2rem; margin:4px 0 12px; }
.session-track { height:6px; border-radius:6px; margin:0 0 16px; background:var(--tg-theme-bg-color,#e0e0e0); overflow:hidden; }
.session-fill { height:100%; width:0%; background:var(--tg-theme-button-color,#2481cc); transition:width .3s ease; }
.timer-buttons { display:flex; gap:12px; justify-content:center; }

.meta-row { display:flex; justify-content:space-between; margin-bottom:12px; color:var(--tg-theme-hint-color,#888); }
.stat-row { display:flex; gap:12px; margin-bottom:12px; }
.stat { flex:1; text-align:center; padding:16px; border-radius:12px; background:var(--tg-theme-secondary-bg-color,#f1f1f1); }
.stat span { display:block; font-size:2rem; font-weight:700; } .stat label { color:var(--tg-theme-hint-color,#888); font-size:0.85rem; }
.goal { margin:16px 0; }
.goal-track { height:12px; border-radius:6px; background:var(--tg-theme-secondary-bg-color,#e0e0e0); overflow:hidden; }
.goal-fill { height:100%; width:0%; background:var(--tg-theme-button-color,#2481cc); transition:width .3s ease; }
#goal-text { margin-top:6px; color:var(--tg-theme-hint-color,#888); font-size:0.9rem; }
.slots-today { display:flex; gap:8px; margin-top:8px; }
.slot-dot { padding:4px 12px; border-radius:20px; font-size:0.8rem; background:var(--tg-theme-secondary-bg-color,#eee); color:var(--tg-theme-hint-color,#888); }
.slot-dot[data-done="1"] { background:var(--tg-theme-button-color,#2481cc); color:#fff; }

.advance .advance-btn { display:none; margin-top:8px; }
.advance[data-eligible="1"] .advance-btn { display:inline-block; }

.history { list-style:none; padding:0; margin:0; }
.history-item, .history-empty { padding:10px 12px; border-radius:8px; margin-bottom:6px;
  background:var(--tg-theme-secondary-bg-color,#f5f5f5); font-size:0.9rem; }

.field { display:block; margin-bottom:16px; }
.field input[type="text"], .field input[type="number"] { display:block; width:100%; margin-top:6px; padding:10px;
  border-radius:10px; border:1px solid var(--tg-theme-hint-color,#ccc); background:var(--tg-theme-bg-color,#fff); color:var(--tg-theme-text-color,#000); }

.tabbar { position:fixed; left:0; right:0; bottom:0; display:flex; padding-bottom:var(--safe-bottom);
  background:var(--tg-theme-bg-color,#fff); border-top:1px solid var(--tg-theme-secondary-bg-color,#e0e0e0); }
.tabbtn { flex:1; padding:14px; border:none; background:none; color:var(--tg-theme-hint-color,#888); font-size:0.95rem; }
.tabbtn.active { color:var(--tg-theme-button-color,#2481cc); font-weight:600; }