/* Layout */
.hrmt-wrap { position: relative; min-height: 520px; border-radius: 12px; overflow: hidden; }
.hrmt-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.hrmt-ui { position:relative; z-index:1; display:grid; gap:14px; place-items:center; padding:16px; min-height:520px; }

.hrmt-topbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; }

/* Controls unified look */
.hrmt-btn, .hrmt-select, .hrmt-select select, .hrmt-slider-label {
  background: rgba(255,255,255,0.85);
  color:#000;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:8px;
  height:32px;
  font: 700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.hrmt-btn { padding:6px 10px; cursor:pointer; }
.hrmt-select { display:flex; align-items:center; gap:6px; padding:0 8px; }
.hrmt-select span { font:700 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:#000; }
.hrmt-select select { appearance:none; height:28px; border:none; background:transparent; padding:0 6px; outline:none; }

.hrmt-slider-label { display:flex; align-items:center; gap:8px; padding: 0 10px; }
.hrmt-slider-label input[type="range"] { height:4px; accent-color:#d4af37; }
.hrmt-minutes-val { font-weight:700; min-width: 2ch; text-align:center; }

/* Zen Ring */
.hrmt-zenring { position:relative; width:220px; height:220px; display:grid; place-items:center; }
.hrmt-ring { width:100%; height:100%; }
.ring-track { fill:none; stroke:rgba(0,0,0,0.15); stroke-width:10; }
.ring-progress { fill:none; stroke:#d4af37; stroke-width:10; stroke-linecap:round; transform: rotate(-90deg); transform-origin:50% 50%; stroke-dasharray: 326.725635; stroke-dashoffset: 326.725635; }
.hrmt-time { position:absolute; font:700 34px/1 ui-monospace,monospace; color:#111; text-shadow:0 1px 2px rgba(255,255,255,0.5); }

/* Control row */
.hrmt-controls { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.hrmt-btn:disabled { opacity:0.55; cursor:not-allowed; }

@media (max-width:640px){
  .hrmt-time { font-size: 30px; }
  .hrmt-btn, .hrmt-select, .hrmt-slider-label { height:30px; font-size:11px; }
}