/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');*/
:root{
  --bg:#0b1220; --card:#0f1a2d; --text:#e8f0ff; --muted:#9fb0c9; --acc:#4da3ff; --line:rgba(255,255,255,.08);
}
:root[data-theme="light"]{
  --bg:#f4f7fb;
  --card:#ffffff;
  --muted:#5a6b86;
  --text:#0b1220;
  --acc:#2563eb;
  --line:rgba(10,20,40,.12);
  --bad:#dc2626;
  --good:#16a34a;
}
:root[data-theme="light"] body{
  background:linear-gradient(180deg,#eef3fb,#eef3fb 60%,#e7eef9);
}
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  background:#f6f9ff;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
.hero {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
}
.logo {
	width: 100%;
	max-width: 220px;
	margin: 10px 0 5px;
	background-color: var(--text);
  border-radius: 50%;
  padding: 20px;
}
a{color:var(--acc);text-decoration:none}
.wrap{max-width:720px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin:12px 0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:4px}
input,select,button{border-radius:12px;border:1px solid var(--line);background:#0b1730;color:var(--text);padding:10px 12px}
input[type="date"]{cursor:text}input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}
/*button{font-family:system-ui,Segoe UI,Roboto,Arial}*/
button{background:var(--acc);border:none;color:#06101f;font-weight:700;cursor:pointer}
button.secondary{background:#0b1730;color:var(--text);border:1px solid var(--line)}
.btn{font-size:14px;background:var(--acc);border:none;color:#06101f;font-weight:700;cursor:pointer;border-radius:12px;padding:10px 12px}
.small{font-size:12px;color:var(--muted)}
.h1{font-size:20px;font-weight:800;margin:6px 0 10px}
.h2{font-size:18px;font-weight:800;margin:6px 0 10px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#0b1730;border:1px solid var(--line);color:var(--muted)}
.badge[href]:hover,button.badge:hover{color:var(--text)!important}
button.badge{color:var(--muted)!important;font-weight:400}
.exercise{padding:12px;border-radius:14px;border:1px solid var(--line);margin:10px 0;background:#0b1730}
.setrow{display:grid;grid-template-columns:44px 1fr 1fr 54px;gap:8px;align-items:center;margin:8px 0}
.setrow input{width:100%}
.chk{width:20px;height:20px}
.hr{height:1px;background:var(--line);margin:12px 0}
.progress{height:10px;background:#0b1730;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.progress > div{height:100%;background:var(--acc);width:0%}

.outline {
	font-weight: 600;
	border: 2px solid;
}
a.outline:hover {
	border: 2px solid var(--text);
}
/* Light theme override */

:root[data-theme="light"] .logo{
background-color:#eef3fb;
}

/* When light theme, make surfaces solid (looks cleaner) */
:root[data-theme="light"] .progress,
:root[data-theme="light"] .badge,
:root[data-theme="light"] .card,
:root[data-theme="light"] .exercise{
  background: var(--card);
  backdrop-filter: none;
}

/* Inputs in light theme */
:root[data-theme="light"] .code,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  background: #f1f5ff;
  color: var(--text);
}
:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter: none;
}

/* Buttons */
:root[data-theme="light"] .btn,
:root[data-theme="light"] button{
  color:#fff;
}

/* Optional: make ghost buttons readable in light */
:root[data-theme="light"] button.ghost{
  background: transparent;
  color: var(--text);
}

/* Modal */
.ex-modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:9999;
}
.ex-modal.open{display:flex}
.ex-modal .box{
  width:min(720px, 100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}
.exm-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.exm-title{font-weight:900;font-size:18px}
.exm-desc{color:var(--muted);font-size:13px;margin:8px 0 12px}
.exm-images{
  display:flex;
  gap:10px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
}
.exm-images img{
  width:100%;
  max-width:520px;
  /*aspect-ratio: 16/10;*/
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
  scroll-snap-align:start;
}

/* UI Alert/Confirm modal */
.ui-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.60);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:10000;
}
.ui-modal.open{display:flex}

.ui-box{
  width:min(520px, 100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.ui-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.ui-title{
  font-weight:900;
  font-size:16px;
}

.ui-x{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0b1730;
  color:var(--text);
  cursor:pointer;
  font-size:25px;
  line-height:0;
	padding:0;
}

.ui-msg{
  margin:10px 0 14px;
  color:var(--muted);
  white-space:pre-wrap;
  font-size:16px;
}

.ui-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

.ui-btn{
  border-radius:12px;
  padding:10px 12px;
  border:none;
  background:var(--acc);
  color:#06101f;
  font-weight:800;
  cursor:pointer;
}

.ui-btn.secondary{
  background:#0b1730;
  color:var(--text);
  border:1px solid var(--line);
}

/* Programs */
.badge.active {
	font-weight: 400;
	font-size: 12px;
	border-color: rgba(77,163,255,.55);
}

/* ---------------- Program view: EXACT first-variant structure (no inline) ---------------- */

/* Workout header block (replaces inline on title + sub) */
.pv-wh-title{
  font-weight:900;
  font-size:18px;
}
.pv-wh-sub{
  opacity:.8;
  margin-top:4px;
}

/* Exercise list wrapper (replaces: margin-top:12px; display:grid; gap:10px;) */
.pv-list{
  margin-top:12px;
  display:grid;
  gap:10px;
}

/* Each exercise row wrapper (replaces: class="row" style="gap:12px; align-items:flex-start") */
.pv-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:4px;            /* keep same as .row if you want */
}

/* Thumb box (replaces inline width/height/radius/overflow/flex/border) */
.pv-thumb{
  width:56px;
  height:56px;
  border-radius:12px;
  overflow:hidden;
  flex:0 0 auto;
  border:1px solid var(--line);
  display:block;
  cursor:pointer;
}

.pv-thumb:hover { border-color: rgba(77,163,255,.55); }

/* Thumb img (replaces inline: width/height/object-fit) */
.pv-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Right column (replaces inline flex:1) */
.pv-body{
  flex:1;
  min-width:0;
}

/* Title line (replaces inline font-weight:800; and makes it clickable) */
.pv-title{
  font-weight:800;
  color:var(--text);
  text-decoration:none;
}
/*.pv-title:hover{ text-decoration:underline; }*/

/* Meta line (replaces inline opacity:.85; margin-top:2px) */
.pv-meta{
  opacity:.85;
  margin-top:2px;
}

/* Variants line (replaces inline opacity:.75; margin-top:6px or none) */
.pv-vars{
  opacity:.75;
  margin-top:6px;
}

/* Variants link styling */
.pv-varlink{
  color:var(--acc);
  text-decoration:none;
}
.pv-varlink:hover{opacity:.9}

@media (max-width: 600px){
  .nav{
    gap: 5px;
    padding: 2px 0;
  }
}