:root{
  --bg:#0d1117;
  --bg-accent:#111827;
  --panel:#151d29;
  --panel-2:#1c2635;
  --panel-3:#223044;
  --text:#edf3fb;
  --muted:#9fb0c6;
  --accent:#7ea2d6;
  --accent-2:#8aaee0;
  --good:#67d49b;
  --warn:#f0c267;
  --bad:#ef8f8f;
  --border:#2b394c;
  --shadow:0 14px 34px rgba(0,0,0,.26);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:#d6e0f0;
  background:
    radial-gradient(circle at top left, rgba(126,162,214,.10), transparent 28%),
    radial-gradient(circle at top right, rgba(138,174,224,.07), transparent 20%),
    linear-gradient(180deg, var(--bg-accent) 0%, var(--bg) 220px);
}
a{color:#d6e0f0;text-decoration:none}
.container{width:min(1100px,92vw);margin:0 auto}


.row{
    margin-bottom:11px;
}




.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(11,16,24,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1rem 0;
}
.topbar h1{
  margin:0;
  font-size:1.35rem;
  letter-spacing:-.02em;
}
.sub{margin:.25rem 0 0;color:var(--muted)}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}
.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.68rem .95rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:#d6e0f0;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.nav a:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.1);
  transform:translateY(-1px);
}
.nav a.active{
  background:var(--panel-3);
  border-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

main{padding:1.2rem 0 2rem}
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:1.2rem 0 2rem;
  color:var(--muted);
}

.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row{display:grid;gap:.9rem;grid-template-columns:repeat(12,minmax(0,1fr))}
.col-2{grid-column:span 2}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}

.card{
  background:linear-gradient(180deg, rgba(22,29,41,.98), rgba(18,24,34,.98));
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  padding:1rem;
  box-shadow:var(--shadow);
}
.card h2,.card h3{
  margin:.1rem 0 .9rem;
  letter-spacing:-.02em;
  align-self: flex-start;
  
}
.soft-panel{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:18px;
  padding:1rem;
}
.soft-panel + .soft-panel{margin-top:.8rem}
.empty-state{
  padding:1rem;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.08);
  color:var(--muted);
}

.kpi{font-size:1.7rem;font-weight:700}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.hint{font-size:.85rem;color:var(--muted)}
.compact-note{font-size:.9rem;line-height:1.45}
.page-intro{margin:-.15rem 0 1rem;color:var(--muted);line-height:1.5}
.right{text-align:right}
.nowrap{white-space:nowrap}
.split{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:16px}
.stack-sm{display:grid;gap:.5rem}
.actions-grid{display:grid;gap:.8rem}

.pill,
.status-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.42rem .76rem;
  border-radius:999px;
  font-size:.84rem;
  font-weight:700;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(126,162,214,.12);
  color:#dce8fb;
}
.status-chip.progression-good{background:rgba(103,212,155,.14)}
.status-chip.progression-warn{background:rgba(240,194,103,.14)}
.status-chip.progression-bad{background:rgba(239,143,143,.14)}
.progression-good{color:var(--good)}
.progression-warn{color:var(--warn)}
.progression-bad{color:var(--bad)}

.list{margin:0;padding-left:1.1rem}
.list li{margin:.45rem 0}

.alert,.success{
  padding:.9rem 1rem;
  border-radius:14px;
  margin-bottom:1rem;
}
.alert.success,.success{
  background:rgba(103,212,155,.14);
  border:1px solid rgba(103,212,155,.28);
  color:#dff8ea;
}
.alert.error{
  background:rgba(239,143,143,.14);
  border:1px solid rgba(239,143,143,.28);
  color:#ffe7e7;
}

.table-wrap{
  margin-top:18px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
  border-radius:18px;
  overflow:hidden;
}
table{
  width:100%;
  border-collapse:collapse;
}
th,td{
  text-align:left;
  padding:.78rem;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:.95rem;
}
th{
  color:var(--muted);
  font-weight:600;
  background:rgba(255,255,255,.025);
}
tbody tr:hover{background:rgba(255,255,255,.03)}

form{display:grid;gap:.85rem}
label{
  display:grid;
  gap:.35rem;
  font-size:.95rem;
  color:#d6e0f0;
}
input,select,textarea{
  width:100%;
  padding:.86rem .95rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:#101823;
  color:#d6e0f0;
  font:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
textarea{min-height:110px;resize:vertical}
input::placeholder,textarea::placeholder{color:#7f91a9}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:rgba(126,162,214,.55);
  box-shadow:0 0 0 3px rgba(126,162,214,.14);
}
.search-input{
  margin-bottom:1rem;
  border-radius:18px;
  padding:.92rem 1rem;
}

button,
.button,
a.button,
input[type="submit"],
input[type="button"],
.btn,
.danger-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  width:auto;
  min-height:46px;
  padding:.78rem 1.08rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:var(--panel-2);
  color:#d6e0f0;
  font:inherit;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:none;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
button:hover,
.button:hover,
a.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.danger-btn:hover{
  background:var(--panel-3);
  border-color:rgba(255,255,255,.12);
  transform:translateY(-1px);
}
button.secondary,
.button.secondary,
a.button.secondary,
.btn.secondary{
  background:#141c28;
  margin-Bottom:0px;
}
button.secondary:hover,
.button.secondary:hover,
a.button.secondary:hover,
.btn.secondary:hover{
  background:#1a2433;
}
.danger-btn{
  background:#34202a;
}
.danger-btn:hover{
  background:#432635;
}
.btn.full,
.button.full,
a.button.full{
  width:100%;
}

.button-row,
.button-group,
.quick-actions .button-row,
.row.quick-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  align-items:center !important;
  margin-bottom:1rem;
}
.button-row > *,
.button-group > *,
.quick-actions .button-row > *,
.row.quick-actions > *{
  flex:0 0 auto !important;
  width:auto !important;
  margin:0 !important;
}
.button-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.8rem 1rem;
}

.timer{
  font-size:2.4rem;
  font-weight:800;
  letter-spacing:.04em;
  text-align:center;
  margin:.25rem 0 1rem;
}
.codebox{
  white-space:pre-wrap;
  background:#0c121a;
  border:1px solid rgba(255,255,255,.06);
  padding:1rem;
  border-radius:20px;
  line-height:1.45;
}

.exercise-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:.8rem;
}
.exercise-item{
  padding:.8rem;
  border-radius:16px;
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,.06);
}

.favorites-page-grid{align-items:start}
.favorites-selected-wrap,
.favorites-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
}
.favorites-selected-wrap{margin:.9rem 0 1rem}
.fav-chip-form{
  margin:0;
  display:block;
  flex:0 0 auto;
}
.fav-chip-form.selected{max-width:100%}
.fav-chip,
.exercise-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  width:auto;
  max-width:100%;
  padding:.72rem 1rem;
  border-radius:999px;
  background:var(--panel-2);
  color:#d6e0f0;
  border:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
  line-height:1.1;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.fav-chip:hover,
.exercise-chip:hover{
  background:var(--panel-3);
  border-color:rgba(255,255,255,.12);
}
.fav-chip.active{
  background:#182231;
  border-color:rgba(126,162,214,.35);
  outline:2px solid rgba(126,162,214,.10);
}
.fav-chip-x{
  font-size:1rem;
  font-weight:800;
  line-height:1;
}
.favorite-group{
  padding-top:.35rem;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:1rem;
}
.favorite-group:first-child{
  border-top:none;
  margin-top:.25rem;
  padding-top:0;
}
.favorite-group-head h3{margin:.15rem 0 .8rem}
.favorite-summary-item{
  display:grid;
  grid-template-columns:minmax(0,220px) 1fr;
  gap:1rem;
  padding:.8rem 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.favorite-summary-item:first-child{border-top:none}
.favorite-summary-suggestion{color:var(--muted)}
.favorites-sections{display:grid;gap:.35rem}

.inline-check{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.2rem 0 .1rem;
}
.inline-check .check-wrap{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  cursor:pointer;
  font-weight:600;
  color:#d6e0f0;
}
.inline-check input[type="checkbox"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.inline-check .checkmark{
  width:22px;
  height:22px;
  border-radius:7px;
  background:#141c28;
  border:1px solid rgba(255,255,255,.1);
  display:inline-block;
  position:relative;
}
.inline-check input[type="checkbox"]:checked + .checkmark{
  background:var(--panel-3);
  border-color:rgba(126,162,214,.42);
}
.inline-check input[type="checkbox"]:checked + .checkmark::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  font-size:14px;
}
.inline-check .check-text{color:var(--text)}

.plate-card{
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:1rem;
  margin-top:1rem;
}
.plate-results{
  display:grid;
  gap:.6rem;
  margin-top:.85rem;
}
.plate-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.75rem .9rem;
  border-radius:14px;
  background:#111722;
  border:1px solid rgba(255,255,255,.05);
}
.plate-item strong{font-size:.98rem}
.plate-meta,
.plate-empty{color:var(--muted);font-size:.9rem}

.filter-row{
  margin-bottom:22px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
  margin-bottom:14px;
}
.filter-row label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  opacity:.85;
}

@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .col-2,.col-3,.col-4,.col-5,.col-6,.col-8,.col-12{grid-column:span 1}
  .topbar-inner{align-items:flex-start;flex-direction:column}
  .nav{width:100%}
}

@media (max-width:700px){
  .nav a{flex:1 1 calc(50% - .5rem);text-align:center}
  .favorite-summary-item{grid-template-columns:1fr;gap:.45rem}
  .fav-chip,.exercise-chip{white-space:normal;text-align:center}
  .button-row > *,
  .button-group > *,
  .quick-actions .button-row > *,
  .row.quick-actions > *{flex:1 1 100% !important}
}


/* extra spacing between history filters and table */
.filter-row + .table-wrap{margin-top:18px;}
.filter-row + table{margin-top:18px;}


/* Final polish fixes */
html, body{
  background:#0d1117 !important;
  min-height:100%;
}

/* AI coach / feature card padding */
.ai-coach-card,
.next-workout-card,
.dashboard-feature-card{
  padding:28px !important;
}
.ai-coach-card h2,
.next-workout-card h2,
.dashboard-feature-card h2{
  margin:0 0 10px 0 !important;
}
.ai-coach-card p,
.next-workout-card p,
.dashboard-feature-card p{
  margin:0 0 18px 0 !important;
  line-height:1.5 !important;
}

/* Button spacing */
.button-group,
.button-row,
.quick-actions,
.pr-buttons{
  gap:12px !important;
}
.button-group > *,
.button-row > *,
.quick-actions > *,
.pr-buttons > *{
  margin:0 !important;
}
button,
.button,
a.button,
.btn,
.danger-btn{
  margin-bottom:0px;
  margin-top:0px;
}

/* Mobile nav hamburger */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:14px;
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,.08);
  color:#d6e0f0;
  cursor:pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  position:relative;
  transition:transform .18s ease, opacity .18s ease;
}
.nav-toggle span::before{position:absolute; top:-6px; left:0;}
.nav-toggle span::after{position:absolute; top:6px; left:0;}

@media (max-width: 820px){
  .topbar-inner{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
  }
  .nav-toggle{
    display:inline-flex !important;
  }
  .nav{
    display:none !important;
    width:100%;
    margin-top:12px;
  }
  .nav.is-open{
    display:flex !important;
    flex-direction:column;
    gap:10px;
  }
  .nav a{
    width:100%;
    justify-content:flex-start;
  }
  .topbar-inner{
    flex-wrap:wrap;
  }

  
  /* Dashboard AI coach card spacing */
.next-workout-card {
    padding: 32px;
}

.next-workout-card h2 {
    margin-bottom: 12px;
}

.next-workout-card p {
    margin-bottom: 22px;
    line-height: 1.6;
}

/* Space between text and button */
.next-workout-card .button,
.next-workout-card button {
    margin-top: 10px;
}





}



/* Real fix for Recent sets / Quick PR board headers */
.split > h2,
.split > h3{
  margin:0 !important;
  line-height:1 !important;
  min-height:46px;
  display:flex;
  align-items:center;
}

.split > .button,
.split > a.button,
.split > .btn,
.split > button{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  margin:0 !important;
}


.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
}
.stat-value{
  margin-top:.35rem;
  font-size:1.02rem;
  font-weight:700;
  line-height:1.35;
}
.measurement-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem .9rem;
}
@media (max-width:700px){
  .stats-grid,
  .measurement-summary-grid{
    grid-template-columns:1fr;
  }
}



/* === Safe mobile width + card button fixes === */
.card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.card > .table-wrap,
.card > table,
.card > canvas,
.card > form,
.card > ul,
.card > p:last-of-type{
  width:100%;
}
.card > a.button,
.card > .button,
.card > button,
.card > form:last-child{
  margin-top:auto;
  align-self:flex-start;
}

.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-wrap table{
  min-width:0;
}

@media (max-width:700px){
  .container{
    width:min(100%, 94vw);
  }

  .card{
    min-width:0;
    overflow:hidden;
  }

  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .table-wrap table{
    min-width:560px;
    white-space:nowrap;
  }

  input[type="date"],
  input[type="datetime-local"],
  select,
  input,
  textarea{
    min-width:0;
    max-width:100%;
  }

  .row{
    gap:.75rem;
  }

  th, td{
    padding:.65rem;
    font-size:.9rem;
  }

  .button,
  a.button,
  .btn,
  button,
  input[type="submit"],
  input[type="button"]{
    max-width:100%;
  }
}




/* === Targeted mobile fix: dashboard tables + gym mode date row === */
@media (max-width: 700px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr !important;
  }

  .row {
    grid-template-columns: 1fr !important;
    gap: .8rem !important;
  }

  .row > [class^="col-"],
  .row > [class*=" col-"] {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  .split {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .card {
    min-width: 0 !important;
    overflow: hidden;
  }

  .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap table,
  .card > table,
  .card table {
    min-width: 560px;
  }

  .card > table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  input[type="date"],
  input[type="datetime-local"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block;
    font-size: 16px;
  }
}