/* Heart Rate Zone Calculator - Modern theme */
/* Ensure white text by default (site uses dark text by default) */
.ttb-hrz { 
  --bg:#0f1221;
  --card:#171a2e;
  --muted:#aeb6cf;
  --accent:#6ea8fe;
  --border:#2a2e4a;
  --btn:#2d60ff;
  --btn-ghost:#2a2e4a;
  --btn-outline:transparent;
  color:#fff;
  background:linear-gradient(180deg, #0d1020, #0b0e1a 40%, #0a0d19);
  padding:24px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.ttb-hrz * { color: inherit; }

.ttb-hrz-header h2{
  margin:0 0 6px 0;
  font-size:28px;
  letter-spacing:.2px;
}
.ttb-hrz-sub{color:var(--muted);margin:0 0 16px 0;}

.ttb-hrz-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}

.ttb-hrz-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); /* 2 columns per user request */
  gap:14px;
}
@media (max-width:720px){
  .ttb-hrz-grid{grid-template-columns:1fr;}
}

.ttb-hrz-field label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}
.ttb-hrz-field input,
.ttb-hrz-field select{
  width:100%;
  border:1px solid var(--border);
  background:#0f1327;
  color:#fff;
  border-radius:10px;
  padding:10px 12px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ttb-hrz-field input:focus,
.ttb-hrz-field select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(110,168,254,.15);
}
.ttb-hrz-field .ttb-hrz-help{color:var(--muted);font-size:12px;display:block;margin-top:6px;}
.req{color:#ffb3b3;}

.ttb-hrz-actions{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
.ttb-btn{
  background:var(--btn);
  border:none;
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  transition:transform .06s ease, opacity .2s ease, box-shadow .2s ease;
  box-shadow:0 8px 20px rgba(45,96,255,.25);
}
.ttb-btn:hover{opacity:.92; box-shadow:0 10px 24px rgba(45,96,255,.35);}
.ttb-btn:active{transform:translateY(1px);}
.ttb-ghost{background:var(--btn-ghost); box-shadow:none;}
.ttb-outline{background:transparent;border:1px solid var(--border);box-shadow:none;}

.ttb-hrz-results{
  margin-top:18px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}
.ttb-hidden{display:none !important;}

.ttb-hrz-summary{
  display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px;
}
.ttb-hrz-summary strong{color:#d2dbff;}

.ttb-hrz-bar{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  height:16px;
  border-radius:999px;
  overflow:hidden;
  margin:6px 0 14px 0;
  border:1px solid var(--border);
}
.ttb-hrz-bar .z1{background:#2ecc71;}
.ttb-hrz-bar .z2{background:#a3d977;}
.ttb-hrz-bar .z3{background:#f1c40f;}
.ttb-hrz-bar .z4{background:#e67e22;}
.ttb-hrz-bar .z5{background:#e74c3c;}

.ttb-hrz-table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:12px;
}
.ttb-hrz-table th, .ttb-hrz-table td{
  border:1px solid var(--border);
  padding:10px;
  text-align:left;
}
.ttb-hrz-table thead th{
  background:#0f1327;
  color:#d2dbff;
  font-weight:700;
}

.ttb-hrz-export{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;
}

.ttb-hrz-footer{margin-top:10px;color:var(--muted);font-size:12px;}

/* Print layout - capture area full width on print */
@media print{
  body *{ visibility:hidden; }
  .ttb-hrz, .ttb-hrz *{ visibility:visible; }
  .ttb-hrz{ box-shadow:none; background:#fff; color:#111; }
  .ttb-hrz *{ color:#111; }
  .ttb-hrz-export, .ttb-hrz-actions{ display:none !important; }
}