:root{
  --bg:#0f1115;
  --panel:#171a21;
  --panel-2:#1e222b;
  --accent:#ff6a3d;
  --accent-ink:#1a0d05;
  --accent-2:#3ddc84;
  --danger:#e05252;
  --text:#f2f3f5;
  --text-dim:#8b8f99;
  --border:#2a2e38;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;}

html,body{height:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}

button{font-family:inherit;color:inherit;cursor:pointer;}

/* ---------- screen shell ---------- */
.screen{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  padding-top:var(--safe-top);
  padding-bottom:var(--safe-bottom);
}
.screen[hidden]{display:none;}

.topbar{
  padding:10px 14px 12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.topbar-main{flex:1;min-width:0;}
.topbar-main.center{text-align:center;}
.title{font-size:20px;font-weight:700;margin:0;}
.title.sm{font-size:17px;}
.sub{font-size:12px;color:var(--text-dim);margin-top:2px;}

.icon-btn{
  width:38px;height:38px;
  flex-shrink:0;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:19px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
}
.icon-btn:active{background:var(--panel-2);}
.icon-btn.ghosted{visibility:hidden;}

.content{
  flex:1;
  min-height:0;
  padding:0 16px 8px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.content.scroll{padding-bottom:16px;}

.empty{
  margin:auto;
  text-align:center;
  color:var(--text-dim);
  font-size:14px;
  line-height:1.6;
  padding:0 20px;
}
.empty .big{font-size:40px;display:block;margin-bottom:10px;}

/* ---------- cards ---------- */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.card-tap{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  background:none;
  border:none;
  padding:0;
  text-align:left;
  color:inherit;
}
.card-tap:active{opacity:.6;}
.thumb{
  width:52px;height:52px;
  border-radius:12px;
  background:linear-gradient(135deg,#2a2e38,#3a3f4b);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  flex-shrink:0;
  overflow:hidden;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.card-info{flex:1;min-width:0;}
.card-info .name{
  display:block;
  font-size:14.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-info .meta{display:block;font-size:12px;color:var(--text-dim);margin-top:2px;}

.reorder{display:flex;flex-direction:column;gap:2px;flex-shrink:0;}
.reorder button{
  width:32px;height:24px;
  border:none;border-radius:7px;
  background:var(--panel-2);
  color:var(--text-dim);
  font-size:11px;
  display:flex;align-items:center;justify-content:center;
}
.reorder button:disabled{opacity:.3;}
.reorder button:active:not(:disabled){background:var(--border);color:var(--text);}

/* ---------- buttons ---------- */
.fab-row{
  display:flex;
  gap:10px;
  padding:12px 16px calc(12px + var(--safe-bottom));
  flex-shrink:0;
}
.btn{
  border:none;
  border-radius:14px;
  padding:15px 16px;
  font-size:14px;
  font-weight:700;
  text-align:center;
  flex-shrink:0;
}
.btn:active{filter:brightness(.9);}
.btn:disabled{opacity:.4;}
.btn-ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--border);}
.btn-primary{background:var(--accent);color:var(--accent-ink);}
/* Genişleme yalnızca yatay buton satırında; dikey kapsayıcılarda boy uzamasın. */
.fab-row .btn-ghost{flex:1;}
.fab-row .btn-primary{flex:1.4;}
.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--border);}
#btn-delete-exercise{margin-top:14px;}
.btn.wide{width:100%;flex:none;}

/* ---------- exercise form ---------- */
.upload-box{
  position:relative;
  height:170px;
  flex-shrink:0;
  border:2px dashed var(--border);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  font-size:13px;
  overflow:hidden;
  margin-top:4px;
}
.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;}
.upload-placeholder .icon{font-size:30px;}
.upload-placeholder .hint{font-size:11px;opacity:.7;}
#image-preview{width:100%;height:100%;object-fit:cover;}
.image-clear{
  position:absolute;top:8px;right:8px;
  width:30px;height:30px;
  border:none;border-radius:50%;
  background:rgba(0,0,0,.6);
  color:#fff;font-size:14px;
}

.field-label{font-size:12px;color:var(--text-dim);margin:8px 0 -2px;}
.field-label .opt{opacity:.65;}
textarea.field{resize:none;line-height:1.45;font-size:14px;}
.field{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:13px 14px;
  font-family:inherit; /* textarea aksi halde monospace açılıyor */
  font-size:15px;
  color:var(--text);
  width:100%;
  flex-shrink:0;
}
.field:focus{outline:none;border-color:var(--accent);}

.stepper{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px 14px;
  flex-shrink:0;
}
.stepper .val{font-size:16px;font-weight:700;}
.stepper .step-btn{
  width:34px;height:34px;border-radius:9px;
  background:var(--panel-2);border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--text);
}
.stepper .step-btn:active{background:var(--border);}
.stepper .step-btn:disabled{opacity:.3;}

/* Süre barı — kaba ayar sürükleyerek, tam değer ± butonlarıyla. */
.slider{
  -webkit-appearance:none;appearance:none;
  width:100%;
  flex-shrink:0;
  height:34px;
  margin-top:2px;
  background:transparent;
}
.slider::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;
  background:var(--panel-2);
  border:1px solid var(--border);
}
.slider::-moz-range-track{
  height:8px;border-radius:999px;
  background:var(--panel-2);
  border:1px solid var(--border);
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--accent);
  border:3px solid var(--bg);
  margin-top:-11px;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.slider::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;
  background:var(--accent);
  border:3px solid var(--bg);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.slider:focus{outline:none;}

/* ---------- settings ---------- */
.setting-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  flex-shrink:0;
}
.setting-name{font-size:14.5px;font-weight:600;}
.setting-desc{font-size:12px;color:var(--text-dim);margin-top:3px;}
.toggle{
  width:50px;height:30px;flex-shrink:0;
  border:none;border-radius:999px;
  background:var(--border);
  padding:3px;
  display:flex;
  transition:background .15s;
}
.toggle span{
  width:24px;height:24px;border-radius:50%;
  background:#fff;
  transition:transform .15s;
}
.toggle[aria-checked="true"]{background:var(--accent-2);}
.toggle[aria-checked="true"] span{transform:translateX(20px);}

.section-label{
  font-size:12px;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.06em;
  margin-top:18px;
}
.note{font-size:12.5px;color:var(--text-dim);line-height:1.55;margin:0;}

/* ---------- workout ---------- */
.workout{text-align:center;}
.workout-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px 0 16px;
  flex-shrink:0;
}
.progress-pill{
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text-dim);
  font-size:11px;
  padding:5px 12px;
  border-radius:999px;
}
.workout-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:6px 16px 0;
  gap:6px;
}
.workout-image{
  position:relative;
  width:100%;
  flex:1;
  min-height:110px;
  max-height:260px;
  border-radius:20px;
  background:linear-gradient(135deg,#2a2e38,#3a3f4b);
  overflow:hidden;
  flex-shrink:1;
}
.img-slot{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:56px;
}
.img-slot img{width:100%;height:100%;object-fit:contain;}

/* Açıklama görselin üzerine biner — açılıp kapanırken sayfa kaymaz. */
.desc-overlay{
  position:absolute;inset:0;
  background:rgba(15,17,21,.94);
  padding:18px;
  display:flex;align-items:center;justify-content:center;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.desc-overlay[hidden]{display:none;}
.desc-overlay p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  color:var(--text);
  text-align:left;
  white-space:pre-wrap;
}

.title-row{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:8px;
}
.exercise-title{font-size:20px;font-weight:700;margin:0;}
.info-btn{
  width:30px;height:30px;flex-shrink:0;
  border:none;background:transparent;
  color:var(--text-dim);
  font-size:19px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.info-btn[hidden]{display:none;}
.info-btn[aria-expanded="true"]{color:var(--accent);background:var(--panel-2);}
.rep-indicator{
  display:flex;gap:6px;justify-content:center;align-items:center;
  min-height:10px;
  flex-wrap:wrap;
  font-size:12px;color:var(--text-dim);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--border);}
.dot.done{background:var(--accent-2);}
.dot.active{background:var(--accent);width:20px;border-radius:5px;}
.countdown{
  font-size:64px;
  font-weight:800;
  letter-spacing:1px;
  font-variant-numeric:tabular-nums;
  line-height:1.05;
  /* Görselden sonra kalan boşlukta sayaç + etiketi dikey ortalar. */
  margin-top:auto;
}
.countdown.elapsed{color:var(--accent-2);}
.countdown.paused{color:var(--text-dim);}
.phase-label{font-size:13px;color:var(--text-dim);min-height:18px;margin-bottom:auto;padding-top:4px;}

.workout-controls{
  display:flex;gap:8px;
  padding:0 16px;
  flex-shrink:0;
}
.ctl-btn{
  flex:1;
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text-dim);
  border-radius:12px;
  padding:11px 4px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.ctl-btn:active:not(:disabled){background:var(--border);}
.ctl-btn:disabled{opacity:.35;}
.ctl-btn.on{color:var(--accent);border-color:var(--accent);}

.next-btn{
  margin:12px 16px calc(16px + var(--safe-bottom));
  padding:18px;
  background:var(--accent);
  color:var(--accent-ink);
  border:none;
  border-radius:16px;
  font-size:16px;
  font-weight:800;
  flex-shrink:0;
}
.next-btn:active{filter:brightness(.9);}
.next-btn.ready{animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.03);}
}
@media (prefers-reduced-motion:reduce){
  .next-btn.ready{animation:none;}
}

.finish-overlay{
  position:absolute;inset:0;
  background:var(--bg);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:10px;
  padding:24px;
}
.finish-overlay[hidden]{display:none;}
.finish-emoji{font-size:64px;}
.finish-overlay h2{margin:0;font-size:22px;}
.finish-overlay p{margin:0;color:var(--text-dim);font-size:14px;}
.finish-overlay .btn{margin-top:16px;min-width:180px;}

/* ---------- toast + dialog ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(28px + var(--safe-bottom));
  transform:translateX(-50%);
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text);
  padding:11px 18px;
  border-radius:12px;
  font-size:13px;
  max-width:calc(100% - 40px);
  text-align:center;
  z-index:50;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.toast[hidden]{display:none;}

.dlg{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:18px;
  padding:20px;
  width:min(320px,calc(100vw - 48px));
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.dlg::backdrop{background:rgba(0,0,0,.6);}
.dlg h3{margin:0 0 8px;font-size:17px;}
.dlg p{margin:0;font-size:13.5px;color:var(--text-dim);line-height:1.5;}
.dlg p:empty{display:none;}
.dlg #dlg-input{margin-top:14px;}
.dlg-actions{display:flex;flex-direction:column;gap:8px;margin-top:18px;}
.dlg-actions.row{flex-direction:row;}
.dlg-actions .btn{flex:1;padding:13px;}