/* Sleep Timers Suite — Default LIGHT. Toggle Dark Mode with 🌙 */
:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --primary:#0ea5e9;
  --primary2:#0284c7;
  --border: rgba(2,6,23,.10);
  --chip:#f1f5f9;
  --green:#16a34a;
}

.sts-wrapper.sts-dark{
  --bg:#0b1220;
  --card:#0f172a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --primary:#38bdf8;
  --primary2:#0ea5e9;
  --border: rgba(255,255,255,.10);
  --chip: rgba(255,255,255,.06);
  --green:#22c55e;
}

.sts-wrapper{
  max-width: 720px;
  margin: 24px auto;
  padding: 18px;
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  border-radius: 16px;
  border: 1px solid var(--border);
}

.sts-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sts-header h2{ margin:0; font-size: 20px; }
.sts-header-actions{ display:flex; gap:8px; }

.sts-ghost{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 900;
}

.sts-time{
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-top: 10px;
  text-align:center;
}
@media (max-width:480px){
  .sts-time{ font-size: 44px; }
}

.sts-phase{
  text-align:center;
  margin-top: 12px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: .02em;
}

.sts-sub{
  text-align:center;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.sts-grid3{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width:560px){
  .sts-grid3{ grid-template-columns: 1fr; }
}

.sts-label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 800;
}

.sts-input{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.9);
  color: var(--text);
  font-weight: 800;
}
.sts-wrapper.sts-dark .sts-input{
  background: rgba(255,255,255,.04);
}

.sts-presets{ margin-top: 14px; }
.sts-chiprow{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 8px; }
.sts-chip{
  background: var(--chip);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  cursor:pointer;
  font-weight: 900;
}
.sts-chip:hover{ border-color: rgba(14,165,233,.45); }

.sts-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}

.sts-primary,.sts-secondary{
  border:0;
  padding: 12px 16px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 900;
  min-width: 120px;
}
.sts-primary{ background: var(--primary); color: white; }
.sts-primary:hover{ background: var(--primary2); }
.sts-secondary{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.sts-secondary:disabled, .sts-primary:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.sts-row{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 12px;
}

.sts-check{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--muted);
  font-size: 13px;
  user-select:none;
}

.sts-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-top: 14px;
}

.sts-cardtitle{
  font-weight: 900;
  margin-bottom: 10px;
}

.sts-share{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.sts-sharebtn{
  background: var(--green);
  color: white;
  border:0;
  border-radius: 10px;
  padding: 10px 12px;
  cursor:pointer;
  font-weight: 900;
}
.sts-sharebtn:hover{ filter: brightness(.95); }

.sts-hint{
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
  text-align:center;
}

.sts-progress{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.08);
  overflow:hidden;
  margin-top: 12px;
  border: 1px solid var(--border);
}
.sts-wrapper.sts-dark .sts-progress{
  background: rgba(255,255,255,.06);
}
.sts-progressbar{
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width 120ms linear;
}

.sts-hidden{ display:none !important; }

.sts-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 99999;
}
.sts-modalbox{
  width: min(520px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  text-align:center;
}
.sts-donetitle{ font-size: 18px; font-weight: 900; }
.sts-modalactions{ margin-top: 14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }