:root{
  /* Calm Medical / Wellness (Light) */
  --sc-bg1:#F8FAFC;
  --sc-bg2:#EEF2FF;
  --sc-border:rgba(15,23,42,.12);
  --sc-text:#0F172A;
  --sc-muted:rgba(15,23,42,.70);
  --sc-soft:rgba(15,23,42,.04);
  --sc-primary:#2563EB;
  --sc-primary2:#22C55E;
  --sc-shadow: 0 18px 45px rgba(2,6,23,.10);
  --sc-radius:18px;
}


/* Force readable text even if theme overrides headings */
.scWrap, .scWrap *{ box-sizing:border-box; }
.scWrap{ color: var(--sc-text) !important; }
.scWrap h1, .scWrap h2, .scWrap h3, .scWrap h4, .scWrap p, .scWrap label, .scWrap span, .scWrap summary, .scWrap li, .scWrap div{
  color: inherit !important;
}

.scWrap{
  max-width: 920px;
  margin: 24px auto;
  padding: 18px;
  border-radius: var(--sc-radius);
  background: radial-gradient(900px 420px at 20% -10%, rgba(37,99,235,.10), transparent 60%),
            radial-gradient(700px 360px at 90% 0%, rgba(34,197,94,.08), transparent 55%),
            linear-gradient(180deg, var(--sc-bg1), var(--sc-bg2));
  box-shadow: var(--sc-shadow);
  border: 1px solid var(--sc-border);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue";
}

.scHero{ padding: 8px 6px 16px; }
.scHero__badge{ display:inline-flex; align-items:center; gap:10px; padding:7px 12px; border-radius:999px; background:var(--sc-soft); border:1px solid var(--sc-border); }
.scDot{ width:9px; height:9px; border-radius:999px; background:linear-gradient(135deg, var(--sc-primary), var(--sc-primary2)); box-shadow:0 0 0 6px rgba(92,240,181,.12); }
.scHero__badgeText{ font-size:13px; letter-spacing:.2px; color:var(--sc-muted) !important; }
.scHero__title{ margin:14px 0 6px; font-size: 30px; line-height:1.15; color: var(--sc-text) !important; }
.scHero__sub{ margin:0; color: var(--sc-muted) !important; max-width: 70ch; }

.scCard{ border:1px solid var(--sc-border); background: linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.02)); border-radius: var(--sc-radius); padding: 16px; }
.scCard--tool{ margin-top: 10px; }
.scCard--results{ margin-top: 14px; }

.scTabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 12px; }
.scTab{
  display:flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--sc-border);
  background: rgba(15,23,42,.03);
  cursor:pointer;
}
.scTab__icon{ opacity:.9; }
.scTab.is-active{
  border-color: rgba(37,99,235,.35);
  background: linear-gradient(180deg, rgba(92,240,181,.18), rgba(15,23,42,.03));
}

.scPanel{ display:none; }
.scPanel.is-active{ display:block; }

.scGrid{ display:grid; grid-template-columns: 1fr; gap:14px; }
@media(min-width:760px){ .scGrid{ grid-template-columns: 1fr 1fr; } }
.scGrid--2{ grid-template-columns: 1fr; }
@media(min-width:760px){ .scGrid--2{ grid-template-columns: 1fr 1fr; } }

.scField label{ display:block; font-weight:650; margin: 0 0 8px; }
.scInput{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--sc-border);
  background: rgba(0,0,0,.18);
  color: var(--sc-text) !important;
  outline: none;
}
.scInput::placeholder{ color: rgba(255,255,255,.65); }
.scInput:focus{ border-color: rgba(65,212,255,.55); box-shadow: 0 0 0 5px rgba(65,212,255,.12); }
.scHelp{ margin-top: 8px; font-size: 13px; color: var(--sc-muted) !important; }

.scBtn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--sc-border);
  background: rgba(15,23,42,.04);
  cursor:pointer;
  text-decoration:none;
}
.scBtn--primary{
  width:100%;
  margin-top: 14px;
  border-color: rgba(37,99,235,.35);
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(34,197,94,.85));
  color: #ffffff !important;
  font-weight: 800;
}
.scBtn--ghost{ background: rgba(15,23,42,.03); }
.scActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.scActions .scBtn{ min-width: 130px; }

.scResultsHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.scResultsTitle{ margin:0; font-size: 20px; }
.scResultsSub{ margin-top: 6px; color: var(--sc-muted) !important; font-size: 13px; }

.scResultsGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media(min-width:760px){ .scResultsGrid{ grid-template-columns: repeat(3, 1fr); } }

.scResultCard{
  border-radius: 16px;
  border: 1px solid var(--sc-border);
  background: rgba(0,0,0,.18);
  padding: 12px;
}
.scResultCard.is-best{ border-color: rgba(92,240,181,.60); background: linear-gradient(180deg, rgba(92,240,181,.12), rgba(0,0,0,.18)); }
.scResultCard__top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.scPill{
  display:inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--sc-border);
  background: rgba(15,23,42,.05);
}
.scPill--best{ border-color: rgba(37,99,235,.35); }
.scCycles{ color: var(--sc-muted) !important; font-size: 12px; }
.scTime{ margin-top: 12px; font-size: 22px; font-weight: 850; letter-spacing:.2px; }
.scMeta{ margin-top: 6px; color: var(--sc-muted) !important; font-size: 12px; }

.scResultsTip{ margin-top: 12px; color: var(--sc-muted) !important; font-size: 13px; }

.scNapBig{
  margin-top: 16px;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: .4px;
  text-align: center;
}

.scHint{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--sc-border);
  background: rgba(15,23,42,.03);
  color: var(--sc-muted) !important;
  font-size: 13px;
}

.scHistory{ margin-top: 16px; }
.scHistory__head{ display:flex; justify-content:space-between; align-items:center; }
.scHistory__title{ margin:0; font-size: 16px; }
.scLink{ background:transparent; border:0; color: var(--sc-primary2) !important; cursor:pointer; text-decoration:underline; padding: 6px 0; }
.scHistItem{
  margin-top: 10px;
  border:1px solid var(--sc-border);
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.16);
}
.scHistItem__title{ font-weight: 800; }
.scHistItem__meta{ margin-top: 4px; font-size: 12px; color: var(--sc-muted) !important; }
.scHistItem__lines{ margin-top: 8px; font-size: 13px; }
.scHistItem__lines div{ opacity:.95; }

.scFoot{ margin-top: 16px; display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; align-items:center; padding: 8px 4px 0; }
.scFoot__brand{ color: var(--sc-muted) !important; font-size: 13px; }
.scFoot__note{ color: var(--sc-muted) !important; font-size: 12px; }


/* Make native time picker icon visible on dark UI (Chrome/Edge/Safari) */
.scInput[type="time"]{ color-scheme: dark; }
.scInput[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: .95;
  cursor: pointer;
}
/* Ensure the small clock icon stays visible */
.scInput[type="time"]::-webkit-clear-button{ filter: invert(1); }



/* Desktop time picker reliability + visibility */
.flatpickr-calendar{ z-index: 999999 !important; }
.scWrap input[type='time']{ appearance:auto !important; -webkit-appearance:auto !important; }
.scWrap, .scCard{ overflow: visible !important; }