/* =============================================
   SleepMind CBT-I — Scoped CSS
   All selectors prefixed with .sm- or #sm-
   ============================================= */
:root {
  --sm-bg:#0b0f14; --sm-bg2:#111720; --sm-bg3:#161d28;
  --sm-surface:rgba(255,255,255,.045); --sm-surface-h:rgba(255,255,255,.07);
  --sm-border:rgba(255,255,255,.08); --sm-border-b:rgba(255,255,255,.15);
  --sm-text:#e8edf5; --sm-text2:#9ba8b8; --sm-text3:#5e6e82;
  --sm-teal:#00c9b1; --sm-teal-d:rgba(0,201,177,.12); --sm-teal-g:rgba(0,201,177,.25);
  --sm-indigo:#7c8ff7; --sm-indigo-d:rgba(124,143,247,.12);
  --sm-amber:#f5a623; --sm-amber-d:rgba(245,166,35,.12);
  --sm-rose:#ff6b8a; --sm-rose-d:rgba(255,107,138,.12);
  --sm-green:#3dd68c; --sm-green-d:rgba(61,214,140,.1);
  --sm-r:14px; --sm-rsm:8px; --sm-rxs:5px;
  --sm-blur:blur(16px); --sm-shadow:0 8px 32px rgba(0,0,0,.4);
  --sm-focus:0 0 0 3px rgba(0,201,177,.35);
  --sm-font:system-ui,-apple-system,'Segoe UI',sans-serif;
  --sm-max:1140px; --sm-anim:.2s cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme:light) {
  :root {
    --sm-bg:#f0f4f9; --sm-bg2:#e6ecf4; --sm-bg3:#dce4ef;
    --sm-surface:rgba(255,255,255,.72); --sm-surface-h:rgba(255,255,255,.88);
    --sm-border:rgba(0,0,0,.08); --sm-border-b:rgba(0,0,0,.14);
    --sm-text:#111827; --sm-text2:#4b5563; --sm-text3:#9ca3af;
    --sm-teal:#0891b2; --sm-teal-d:rgba(8,145,178,.1); --sm-teal-g:rgba(8,145,178,.2);
    --sm-indigo:#4f46e5; --sm-indigo-d:rgba(79,70,229,.1);
    --sm-amber:#d97706; --sm-amber-d:rgba(217,119,6,.1);
    --sm-rose:#e11d48; --sm-rose-d:rgba(225,29,72,.1);
    --sm-green:#059669; --sm-green-d:rgba(5,150,105,.1);
    --sm-shadow:0 8px 32px rgba(0,0,0,.1);
  }
}

/* Skip link */
.sm-skip {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden; font-family:var(--sm-font);
}
.sm-skip:focus {
  left:16px; top:16px; width:auto; height:auto; z-index:9999;
  padding:10px 18px; background:var(--sm-bg3); border:1px solid var(--sm-border-b);
  border-radius:var(--sm-rsm); color:var(--sm-text);
}

/* Header */
.sm-header {
  position:sticky; top:0; z-index:100;
  background:rgba(11,15,20,.8);
  backdrop-filter:var(--sm-blur); -webkit-backdrop-filter:var(--sm-blur);
  border-bottom:1px solid var(--sm-border);
}
@media (prefers-color-scheme:light) {
  .sm-header { background:rgba(240,244,249,.85); }
}
.sm-topbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:min(100% - 32px, var(--sm-max)); margin-inline:auto; padding:12px 0;
}
.sm-brand { display:flex; align-items:center; gap:10px; }
.sm-logomark {
  width:40px; height:40px; border-radius:10px;
  background:linear-gradient(135deg, var(--sm-teal), var(--sm-indigo));
  display:grid; place-items:center; font-weight:800; color:#fff;
  font-size:1rem; box-shadow:0 0 18px var(--sm-teal-g); flex-shrink:0;
}
.sm-brandname { display:block; font-size:.95rem; font-weight:700; color:var(--sm-text); }
.sm-brandsub  { display:block; font-size:.78rem; color:var(--sm-text2); margin-top:1px; }
.sm-nav { display:flex; gap:2px; }
.sm-nav button {
  background:transparent; border:none; color:var(--sm-text2);
  padding:7px 11px; border-radius:var(--sm-rsm); cursor:pointer;
  font-size:.83rem; font-weight:500; transition:all var(--sm-anim);
  font-family:var(--sm-font);
}
.sm-nav button:hover { background:var(--sm-surface-h); color:var(--sm-text); }
@media (max-width:800px) { .sm-nav { display:none; } }
.sm-hrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* Layout */
.sm-main {
  font-family:var(--sm-font);
  background:var(--sm-bg);
  color:var(--sm-text);
}
.sm-main::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 10% 20%, rgba(0,201,177,.07) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 90% 80%, rgba(124,143,247,.07) 0%, transparent 60%);
}
.sm-wrap {
  position:relative; z-index:1;
  width:min(100% - 28px, var(--sm-max));
  margin-inline:auto; padding:24px 0 80px;
}

/* Grid system */
.sm-g12 { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.sm-c12 { grid-column:span 12; } .sm-c8 { grid-column:span 8; }
.sm-c7 { grid-column:span 7; }  .sm-c6 { grid-column:span 6; }
.sm-c5 { grid-column:span 5; }  .sm-c4 { grid-column:span 4; }
.sm-c3 { grid-column:span 3; }
@media (max-width:860px) { .sm-c8,.sm-c7,.sm-c6,.sm-c5,.sm-c4,.sm-c3 { grid-column:span 12; } }
.sm-cols2 { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.sm-cols3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sm-cols4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:680px) { .sm-cols2,.sm-cols3,.sm-cols4 { grid-template-columns:1fr; } }
.sm-row   { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sm-rowsb { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }

/* Cards */
.sm-card {
  background:var(--sm-surface); border:1px solid var(--sm-border);
  border-radius:var(--sm-r); backdrop-filter:var(--sm-blur);
  -webkit-backdrop-filter:var(--sm-blur); padding:20px;
  position:relative; overflow:hidden; transition:border-color var(--sm-anim);
  margin-bottom:20px;
}
.sm-card:hover { border-color:var(--sm-border-b); }
.sm-gteal::before {
  content:''; position:absolute; top:-60px; left:-60px;
  width:200px; height:200px;
  background:radial-gradient(circle, var(--sm-teal-g), transparent 70%);
  pointer-events:none;
}

/* Typography */
.sm-h1 { font-size:1.9rem; font-weight:800; letter-spacing:-.5px; line-height:1.2; color:var(--sm-text); margin-bottom:12px; }
.sm-h2 { font-size:1.25rem; font-weight:700; letter-spacing:-.3px; color:var(--sm-text); margin:0; }
.sm-h3 { font-size:1rem; font-weight:700; color:var(--sm-text); }
.sm-h4 { font-size:.88rem; font-weight:700; color:var(--sm-text2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
.sm-muted { color:var(--sm-text2); }
.sm-caption { font-size:.82rem; color:var(--sm-text2); }
.sm-lead { font-size:.98rem; color:var(--sm-text2); max-width:500px; line-height:1.75; margin-bottom:20px; }
.sm-gradient-text {
  background:linear-gradient(90deg, var(--sm-teal), var(--sm-indigo));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.sm-divider { height:1px; background:var(--sm-border); margin:18px 0; }
.sm-shead { margin-bottom:18px; }
.sm-feature-list { list-style:none; padding:0; display:grid; gap:9px; font-size:.88rem; }

/* Badges */
.sm-badge {
  display:inline-flex; align-items:center; gap:5px; border-radius:999px;
  padding:4px 10px; font-size:.78rem; font-weight:600; border:1px solid;
}
.sm-bt { background:var(--sm-teal-d); color:var(--sm-teal); border-color:rgba(0,201,177,.2); }
.sm-bi { background:var(--sm-indigo-d); color:var(--sm-indigo); border-color:rgba(124,143,247,.2); }
.sm-ba { background:var(--sm-amber-d); color:var(--sm-amber); border-color:rgba(245,166,35,.2); }

/* Buttons */
.sm-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:var(--sm-rsm); padding:9px 16px;
  font-size:.88rem; font-weight:600; cursor:pointer;
  transition:all var(--sm-anim); min-height:40px; white-space:nowrap;
  font-family:var(--sm-font);
}
.sm-btn:focus { outline:none; box-shadow:var(--sm-focus); }
.sm-btnp {
  background:linear-gradient(135deg, var(--sm-teal), #00a898);
  color:#001a18; box-shadow:0 4px 14px var(--sm-teal-g);
}
.sm-btnp:hover { transform:translateY(-1px); box-shadow:0 6px 22px var(--sm-teal-g); }
.sm-btng { background:var(--sm-surface); border:1px solid var(--sm-border); color:var(--sm-text); }
.sm-btng:hover { background:var(--sm-surface-h); border-color:var(--sm-border-b); }
.sm-btnd { background:var(--sm-rose-d); color:var(--sm-rose); border:1px solid rgba(255,107,138,.2); }
.sm-btnsm { padding:6px 12px; font-size:.8rem; min-height:32px; }
.sm-btn[disabled] { opacity:.4; cursor:not-allowed; transform:none !important; }

/* Forms */
.sm-field { display:grid; gap:5px; }
.sm-field label { font-size:.82rem; font-weight:600; color:var(--sm-text2); }
.sm-main input,
.sm-main select,
.sm-main textarea {
  width:100%; padding:9px 12px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--sm-border);
  border-radius:var(--sm-rsm);
  color:var(--sm-text);
  font-family:var(--sm-font); font-size:.9rem;
  transition:all var(--sm-anim); min-height:40px;
}
@media (prefers-color-scheme:light) {
  .sm-main input, .sm-main select, .sm-main textarea { background:rgba(255,255,255,.8); }
}
.sm-main input:focus,
.sm-main select:focus,
.sm-main textarea:focus {
  outline:none; border-color:var(--sm-teal); box-shadow:0 0 0 3px var(--sm-teal-g);
}
.sm-main select option { background:var(--sm-bg3); color:var(--sm-text); }
.sm-main textarea { min-height:80px; resize:vertical; }

/* Scale radios */
.sm-scale { display:flex; gap:5px; flex-wrap:wrap; }
.sm-scale label {
  flex:1; min-width:40px; display:grid; place-items:center;
  padding:7px 4px; border-radius:var(--sm-rsm);
  border:1px solid var(--sm-border); background:var(--sm-surface);
  cursor:pointer; font-size:.82rem; font-weight:600;
  transition:all var(--sm-anim); color:var(--sm-text2); text-align:center;
}
.sm-scale input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.sm-scale label.sm-sel {
  background:var(--sm-teal-d); color:var(--sm-teal);
  border-color:rgba(0,201,177,.35); box-shadow:0 0 10px var(--sm-teal-g);
}

/* Tabs */
.sm-tabstrip {
  display:flex; gap:3px;
  background:var(--sm-surface); border:1px solid var(--sm-border);
  border-radius:var(--sm-rsm); padding:3px; margin-bottom:14px;
}
.sm-tabstrip button {
  flex:1; border:none; background:transparent; color:var(--sm-text2);
  border-radius:var(--sm-rxs); padding:7px 8px;
  font-size:.82rem; font-weight:600; cursor:pointer;
  transition:all var(--sm-anim); font-family:var(--sm-font);
}
.sm-tabstrip button.active { background:var(--sm-bg3); color:var(--sm-text); box-shadow:var(--sm-shadow); }
.sm-tabpanel { display:none; }
.sm-tabpanel.active { display:block; }

/* Wizard step bar */
.sm-stepbar { display:flex; gap:5px; margin-bottom:22px; }
.sm-sdot { flex:1; height:4px; border-radius:99px; background:var(--sm-surface-h); transition:all .3s; }
.sm-sdot.done { background:var(--sm-green); }
.sm-sdot.sm-cur { background:var(--sm-teal); box-shadow:0 0 8px var(--sm-teal-g); }
.sm-sblock { display:none; }
.sm-sblock.active { display:block; }

/* Stat cards */
.sm-statcard {
  background:var(--sm-surface); border:1px solid var(--sm-border);
  border-radius:var(--sm-r); padding:16px;
  display:flex; flex-direction:column; gap:7px;
}
.sm-staticon { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; font-size:1.1rem; }
.sm-icon-teal  { background:var(--sm-teal-d); }
.sm-icon-green { background:var(--sm-green-d); }
.sm-icon-indigo{ background:var(--sm-indigo-d); }
.sm-icon-amber { background:var(--sm-amber-d); }
.sm-statval   { font-size:1.5rem; font-weight:800; line-height:1; color:var(--sm-text); }
.sm-statlbl   { font-size:.78rem; color:var(--sm-text2); font-weight:500; }
.sm-stattrend { font-size:.78rem; font-weight:600; }

/* KPI rows */
.sm-kpi {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--sm-border);
  border-radius:var(--sm-rsm); background:var(--sm-surface); margin-bottom:7px;
}
.sm-kpilbl { font-size:.85rem; color:var(--sm-text2); }
.sm-kpival  { font-weight:700; font-size:.92rem; color:var(--sm-text); }

/* Alerts */
.sm-alert {
  border-radius:var(--sm-rsm); padding:12px 14px; border:1px solid;
  font-size:.88rem; line-height:1.6; margin-bottom:10px;
}
.sm-info    { background:var(--sm-teal-d);   border-color:rgba(0,201,177,.25); }
.sm-warn    { background:var(--sm-amber-d);  border-color:rgba(245,166,35,.25); }
.sm-danger  { background:var(--sm-rose-d);   border-color:rgba(255,107,138,.25); }
.sm-success { background:var(--sm-green-d);  border-color:rgba(61,214,140,.25); }

/* Table */
.sm-twrap { overflow-x:auto; border:1px solid var(--sm-border); border-radius:var(--sm-rsm); }
.sm-twrap table { width:100%; border-collapse:collapse; font-size:.86rem; }
.sm-twrap th {
  background:rgba(255,255,255,.04); padding:9px 11px;
  font-size:.76rem; font-weight:700; color:var(--sm-text2);
  text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid var(--sm-border); text-align:left; position:sticky; top:0;
}
.sm-twrap td { padding:9px 11px; border-bottom:1px solid var(--sm-border); vertical-align:top; }
.sm-twrap tr:last-child td { border-bottom:none; }

/* Checklist */
.sm-cklist { display:grid; gap:7px; }
.sm-ckitem {
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  border:1px solid var(--sm-border); border-radius:var(--sm-rsm);
  background:var(--sm-surface); cursor:pointer; transition:all var(--sm-anim);
}
.sm-ckitem:hover { background:var(--sm-surface-h); border-color:var(--sm-border-b); }
.sm-ckitem input[type=checkbox] {
  width:16px; height:16px; border-radius:4px; cursor:pointer;
  accent-color:var(--sm-teal); flex-shrink:0; margin-top:3px;
}
.sm-ckitem span { font-size:.88rem; color:var(--sm-text); }

/* Accordion */
.sm-card details { border:1px solid var(--sm-border); border-radius:var(--sm-rsm); background:var(--sm-surface); }
.sm-card details + details { margin-top:7px; }
.sm-card details[open] { border-color:var(--sm-teal); }
.sm-card summary { padding:12px 14px; cursor:pointer; font-weight:700; font-size:.9rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.sm-card summary::-webkit-details-marker { display:none; }
.sm-card summary::after { content:'›'; font-size:1.1rem; color:var(--sm-text3); transition:transform .2s; }
.sm-card details[open] summary::after { transform:rotate(90deg); }
.sm-dbody { padding:0 14px 14px; color:var(--sm-text2); font-size:.88rem; line-height:1.7; }

/* Charts */
.sm-chartbox { border:1px solid var(--sm-border); border-radius:var(--sm-rsm); padding:12px; background:rgba(0,0,0,.15); }
.sm-chartbox canvas { display:block; width:100% !important; max-width:100%; }

/* Heatmap */
.sm-hmap { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.sm-hcell {
  border-radius:var(--sm-rsm); padding:9px 6px;
  border:1px solid var(--sm-border); font-size:.78rem; text-align:center;
  background:var(--sm-surface);
}
.sm-h0 { border-color:rgba(255,107,138,.3); background:rgba(255,107,138,.08); }
.sm-h1 { border-color:rgba(245,166,35,.3);  background:rgba(245,166,35,.08); }
.sm-h2 { border-color:rgba(61,214,140,.3);  background:rgba(61,214,140,.08); }
@media (max-width:480px) { .sm-hmap { grid-template-columns:repeat(4,1fr); } }

/* Progress bar */
.sm-pbar  { height:7px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; margin-bottom:10px; }
.sm-pfill { height:100%; border-radius:99px; background:linear-gradient(90deg, var(--sm-teal), var(--sm-indigo)); transition:width .4s ease; }

/* Breathing */
.sm-bwrap { display:flex; flex-direction:column; align-items:center; gap:14px; padding:16px; }
.sm-bcircle {
  width:120px; height:120px; border-radius:50%;
  background:conic-gradient(var(--sm-teal), var(--sm-indigo), var(--sm-teal));
  box-shadow:0 0 36px var(--sm-teal-g);
  transition:transform 1s ease, opacity 1s ease;
  display:grid; place-items:center;
}
.sm-binner {
  width:92px; height:92px; border-radius:50%; background:var(--sm-bg2);
  display:grid; place-items:center; color:var(--sm-teal);
  font-weight:700; font-size:.9rem; text-align:center; line-height:1.3;
}

/* PMR text box */
.sm-pmrbox {
  min-height:48px; padding:11px;
  background:rgba(0,201,177,.06); border:1px solid rgba(0,201,177,.15);
  border-radius:var(--sm-rxs); color:var(--sm-teal);
  font-weight:600; font-size:.9rem; margin:12px 0; line-height:1.5;
}

/* Timer */
.sm-timerdisp {
  font-size:2.4rem; font-weight:800; color:var(--sm-teal);
  font-family:ui-monospace,monospace; letter-spacing:.05em;
  text-align:center; padding:14px 0;
}

/* Thought items */
.sm-titem {
  background:var(--sm-surface); border:1px solid var(--sm-border);
  border-radius:var(--sm-rsm); padding:12px; margin-bottom:9px;
  transition:all var(--sm-anim);
}
.sm-titem:hover { border-color:var(--sm-border-b); }

/* Week nav */
.sm-weeknav {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--sm-surface); border:1px solid var(--sm-border);
  border-radius:var(--sm-r); padding:12px 16px; margin-bottom:16px; flex-wrap:wrap;
}
.sm-wdots { display:flex; gap:7px; }
.sm-wdot {
  width:30px; height:30px; border-radius:50%; border:2px solid var(--sm-border);
  background:var(--sm-surface); display:grid; place-items:center;
  font-size:.78rem; font-weight:700; color:var(--sm-text3); cursor:pointer;
  transition:all var(--sm-anim);
}
.sm-wdot.done   { border-color:var(--sm-green); color:var(--sm-green); background:var(--sm-green-d); }
.sm-wdot.active { border-color:var(--sm-teal); color:var(--sm-teal); background:var(--sm-teal-d); box-shadow:0 0 10px var(--sm-teal-g); }

/* Hero */
.sm-herowrap { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start; padding:40px 0 28px; }
@media (max-width:720px) { .sm-herowrap { grid-template-columns:1fr; } }

/* Toast */
.sm-toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--sm-green); color:#001a0e;
  padding:9px 20px; border-radius:999px;
  font-weight:700; font-size:.88rem; opacity:0;
  transition:all .3s; z-index:9999; pointer-events:none;
  box-shadow:0 6px 20px rgba(61,214,140,.35);
}
.sm-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Print */
@media print {
  .sm-header, .sm-noprint { display:none !important; }
  .sm-main { background:#fff; color:#000; }
  .sm-main::before { display:none; }
  .sm-card, .sm-statcard, .sm-kpi, .sm-ckitem, .sm-alert {
    background:#fff !important; border:1px solid #ccc !important;
    backdrop-filter:none !important; box-shadow:none !important;
  }
}

/* Scrollbar */
.sm-main ::-webkit-scrollbar { width:5px; height:5px; }
.sm-main ::-webkit-scrollbar-thumb { background:var(--sm-border-b); border-radius:99px; }
.sm-main button:focus, .sm-main input:focus,
.sm-main select:focus, .sm-main textarea:focus { outline:none; box-shadow:var(--sm-focus); }