:root {
  color-scheme: light;
  --bg: #f6f8f7;
  --surface: #ffffff;
  --surface-2: #f8fbfa;
  --surface-3: #edf4f2;
  --ink: #182326;
  --muted: #5f6f72;
  --line: #dbe5e2;
  --brand: #0a6a67;
  --brand-2: #123f45;
  --accent: #9f6248;
  --ok: #2e7952;
  --warn: #9a650f;
  --danger: #a23d3d;
  --info: #456ea8;
  --shadow: 0 18px 42px rgba(22, 37, 39, 0.08);
  --soft-shadow: 0 10px 28px rgba(22, 37, 39, 0.06);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Segoe UI", "SF Pro Display", "Roboto", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
label.secondary-button {
  cursor: pointer;
}

a {
  color: var(--brand-2);
}

.topbar {
  align-items: center;
  background: #103238;
  color: #fff;
  display: flex;
  gap: 22px;
  justify-content: space-between;
  min-height: 92px;
  overflow: visible;
  padding: 18px clamp(18px, 4vw, 42px);
  position: relative;
  z-index: 200;
}

.topbar h1,
.case-strip h2,
.section-head h2,
.sidebar-section h2,
.panel-block h3,
.section-subhead h3 {
  margin: 0;
}

.topbar h1 {
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  font-weight: 780;
  line-height: 1.08;
}

.eyebrow {
  color: #cfe8e5;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.eyebrow.dark {
  color: var(--brand);
}

.topbar-actions,
.button-row,
.tabs,
.meta-pills,
.section-title-row,
.criteria-title,
.method-tags,
.session-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topbar-actions {
  overflow: visible;
  position: relative;
  z-index: 210;
}

.status {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 999px;
  color: #ebfffb;
  font-size: 0.82rem;
  padding: 8px 12px;
  white-space: nowrap;
}

.status.is-pending {
  color: #fff0c2;
}

.topbar-page-links {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar-page-links a {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #ebfffb;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 850;
  min-height: 36px;
  padding: 0 12px;
  text-decoration: none;
  white-space: nowrap;
}

.topbar-page-links a:hover,
.topbar-page-links a:focus-visible {
  background: #ffffff;
  color: var(--brand-2);
  outline: none;
}

.session-export-tools {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(224, 246, 247, 0.94), rgba(248, 253, 252, 0.98));
  border: 1px solid rgba(0, 109, 119, 0.2);
  border-left: 5px solid rgba(0, 109, 119, 0.72);
  border-radius: 8px;
  box-shadow: 0 12px 26px rgba(15, 84, 88, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 14px;
  padding: 12px;
}

.session-export-tools .microcopy {
  color: var(--muted);
  flex-basis: 100%;
  margin: 0;
}

.session-export-tools .secondary-button {
  background: #ffffff;
  border: 1px solid rgba(0, 109, 119, 0.22);
  box-shadow: 0 8px 18px rgba(15, 84, 88, 0.08);
}

.document-export-tools {
  margin-top: 10px;
}

.language-switch {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  display: inline-flex;
  overflow: hidden;
}

.language-pill {
  background: transparent;
  border: 0;
  color: #d9efec;
  font-size: 0.78rem;
  font-weight: 800;
  min-height: 36px;
  padding: 0 10px;
}

.language-pill.is-active {
  background: #fff;
  color: var(--brand-2);
}

.icon-button,
.primary-button,
.secondary-button,
.danger-button,
.small-button {
  border: 0;
  border-radius: 7px;
  font-weight: 800;
}

.icon-button {
  align-items: center;
  background: #fff;
  color: var(--brand-2);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  min-width: 40px;
  padding: 0 12px;
}

.primary-button,
.secondary-button,
.danger-button,
.small-button {
  min-height: 40px;
  padding: 0 14px;
}

.primary-button {
  background: var(--brand);
  color: #fff;
}

.secondary-button {
  background: var(--surface-3);
  color: var(--brand-2);
}

.danger-button {
  background: #fdecec;
  color: var(--danger);
}

.small-button {
  background: var(--brand);
  color: #fff;
  min-height: 34px;
  padding: 0 12px;
}

.app-shell {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1540px;
  padding: 20px clamp(14px, 3vw, 34px) 34px;
}

.case-sidebar {
  align-self: start;
  display: grid;
  gap: 16px;
  position: sticky;
  top: 18px;
}

.sidebar-section,
.workspace {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.sidebar-section {
  padding: 18px;
}

.section-title-row {
  justify-content: space-between;
}

.sidebar-section h2,
.section-head h2,
.case-strip h2 {
  font-size: 1.1rem;
}

.compact-label,
label {
  color: var(--ink);
  display: grid;
  font-size: 0.88rem;
  font-weight: 800;
  gap: 8px;
  margin-top: 14px;
}

input,
select,
textarea {
  background: #fbfcfb;
  border: 1px solid #cfdad7;
  border-radius: 7px;
  color: var(--ink);
  min-height: 42px;
  outline: none;
  padding: 10px 11px;
  width: 100%;
}

textarea {
  line-height: 1.45;
  resize: vertical;
}

input[type="checkbox"] {
  min-height: 18px;
  width: 18px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.secondary-button:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 109, 119, 0.2);
}

.case-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  max-height: 420px;
  overflow: auto;
  padding-right: 2px;
}

.case-item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: left;
  width: 100%;
}

.case-item.is-active {
  background: #eefaf8;
  border-color: #91cfc8;
}

.case-item strong {
  font-size: 0.95rem;
}

.case-item span,
.microcopy,
.helper,
.empty-state,
.source-list,
.safety-note p,
.method-card p,
.stack-item p,
.panel-block p {
  color: var(--muted);
  line-height: 1.5;
}

.case-item span,
.microcopy {
  font-size: 0.82rem;
}

.source-list {
  font-size: 0.86rem;
  margin: 10px 0 0;
  padding-left: 18px;
}

.source-list li + li {
  margin-top: 8px;
}

.workspace {
  min-width: 0;
  overflow: hidden;
}

.case-strip {
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 18px 22px;
}

.meta-pills {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pill,
.tag,
.badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  padding: 7px 9px;
  white-space: nowrap;
}

.pill {
  background: var(--surface-3);
  color: var(--brand-2);
}

.pill.warn {
  background: #fff4dd;
  color: var(--warn);
}

.pill.ok {
  background: #eaf7ef;
  color: var(--ok);
}

.tabs {
  background: #eef3f1;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(9, minmax(118px, 1fr));
  overflow-x: auto;
  padding: 14px;
}

.tab {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 0.94rem;
  font-weight: 880;
  line-height: 1.15;
  min-height: 56px;
  padding: 0 14px;
  text-align: center;
  white-space: normal;
}

.tab.is-active {
  background: #fff;
  border-color: #cbded9;
  box-shadow: var(--soft-shadow);
  color: var(--brand-2);
}

.group-overview {
  background: #fbfdfc;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 16px;
  padding: 20px 24px;
}

.group-overview-head {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.group-overview-head h2 {
  color: var(--brand-2);
  font-size: 1.28rem;
  margin: 0;
}

.group-overview-head span {
  color: var(--muted);
  display: block;
  line-height: 1.45;
  margin-top: 5px;
}

.group-count {
  background: #eaf5f4;
  border: 1px solid #cfe3df;
  border-radius: 999px;
  color: var(--brand-2);
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 850;
  padding: 8px 11px;
}

.group-module-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.group-module-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  min-height: 112px;
  padding: 14px;
  text-align: left;
}

.group-module-card:hover {
  border-color: #a9cbc6;
  box-shadow: var(--soft-shadow);
}

.group-module-card span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
}

.group-module-card strong {
  color: var(--brand-2);
}

.group-module-card small {
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.38;
}

.active-panel-stage {
  display: block;
  min-width: 0;
}

.workspace[data-active-group="planning"] .active-panel-stage {
  align-items: start;
  display: block;
  overflow-x: visible;
}

.workspace[data-active-group="planning"] .active-panel-stage > .tab-panel.is-active {
  min-width: 0;
}

.workspace[data-active-group="planning"] .active-panel-stage::-webkit-scrollbar {
  height: 10px;
}

.workspace[data-active-group="planning"] .active-panel-stage::-webkit-scrollbar-thumb {
  background: #c6d8d3;
  border-radius: 999px;
}

.workspace[data-active-group="planning"] .active-panel-stage::-webkit-scrollbar-track {
  background: #eef4f2;
  border-radius: 999px;
}

.tab-panel {
  display: none;
  padding: 24px;
}

.tab-panel.is-active {
  display: block;
}

.tab-panel.is-group-secondary {
  border-top: 10px solid var(--bg);
}

.has-grouped-panels .tab-panel.is-active:not(.is-group-secondary) {
  padding-bottom: 26px;
}

.section-head {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-subhead {
  margin: 22px 0 10px;
}

.metric-grid,
.form-grid,
.measure-grid,
.abc-grid,
.risk-grid,
.two-panel-grid,
.method-grid,
.advisor-layout,
.pia-layout {
  display: grid;
  gap: 14px;
}

.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.metric-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(22, 37, 39, 0.035);
  padding: 17px;
}

.metric-card strong {
  display: block;
  font-size: 1.55rem;
  margin-top: 8px;
}

.metric-card span {
  color: var(--muted);
  display: block;
  font-size: 0.82rem;
  line-height: 1.4;
}

.form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.measure-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.abc-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.risk-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.two-panel-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.panel-block {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.stack-list,
.criteria-list,
.session-list,
.avoid-list {
  display: grid;
  gap: 10px;
}

.stack-item,
.session-item,
.avoid-item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.stack-item strong,
.session-item strong {
  display: block;
  margin-bottom: 4px;
}

.score-card {
  align-items: center;
  background: #effbf8;
  border: 1px solid #bde2dc;
  border-radius: 8px;
  color: var(--brand-2);
  display: grid;
  min-width: 132px;
  padding: 12px 14px;
  text-align: center;
}

.score-card span {
  font-size: 1.5rem;
  font-weight: 850;
}

.score-card small {
  color: var(--muted);
  font-size: 0.76rem;
}

.criteria-list {
  margin-top: 18px;
}

.criteria-card,
.method-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.criteria-card.is-met {
  background: #f5fffb;
  border-color: #9bd1ba;
}

.criteria-title {
  justify-content: space-between;
  margin-bottom: 10px;
}

.criteria-title h3,
.method-card h3 {
  font-size: 1rem;
  line-height: 1.35;
  margin: 0;
}

.badge.ok {
  background: var(--ok);
  color: #fff;
}

.badge.wait {
  background: var(--warn);
  color: #fff;
}

.check-row {
  align-items: start;
  border-top: 1px solid #edf1ef;
  display: grid;
  gap: 10px;
  grid-template-columns: 22px 1fr;
  padding: 11px 0;
}

.check-row input {
  margin-top: 2px;
}

.check-row strong {
  display: block;
  font-size: 0.92rem;
}

.check-row span span {
  color: var(--muted);
  display: block;
  font-size: 0.86rem;
  line-height: 1.42;
  margin-top: 3px;
}

.evidence-box {
  margin-top: 8px;
}

.method-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workspace[data-active-group="planning"] .group-module-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.workspace[data-active-group="planning"] #groupOverview {
  display: none !important;
}

.workspace[data-active-group="assessment"] #groupOverview {
  display: none !important;
}

.workspace[data-active-group="planning"] #tab-methods,
.workspace[data-active-group="planning"] #tab-exercise {
  background: #fbfdfc;
}

.workspace[data-active-group="planning"] .tab-panel.is-group-secondary {
  border-top: 1px solid var(--line);
}

.workspace[data-active-group="planning"] .section-head {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
  margin-bottom: 18px;
  padding: 16px;
}

.workspace[data-active-group="planning"] #methodSummary {
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  overflow-x: auto;
  padding-bottom: 4px;
}

.workspace[data-active-group="planning"] #methodList,
.workspace[data-active-group="planning"] #recommendedExerciseList,
.workspace[data-active-group="planning"] #avoidList {
  display: grid;
  gap: 16px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(380px, 460px);
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 2px 2px 16px;
  scroll-snap-type: inline proximity;
}

.workspace[data-active-group="planning"] #methodList,
.workspace[data-active-group="planning"] #recommendedExerciseList,
.workspace[data-active-group="planning"] #avoidList {
  margin-inline: -2px;
}

.workspace[data-active-group="planning"] #methodList > *,
.workspace[data-active-group="planning"] #recommendedExerciseList > *,
.workspace[data-active-group="planning"] #avoidList > * {
  scroll-snap-align: start;
}

.workspace[data-active-group="planning"] #allExerciseList {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  overflow: visible;
  padding: 0;
}

.workspace[data-active-group="planning"] .exercise-layout {
  grid-template-columns: 1fr;
}

.workspace[data-active-group="planning"] .premium-panel {
  background: #fff;
}

.workspace[data-active-group="planning"] .exercise-domain-section {
  min-width: 0;
}

.workspace[data-active-group="planning"] .exercise-domain-section .exercise-card-grid {
  display: grid;
  gap: 14px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 360px);
  grid-template-columns: none;
  overflow-x: auto;
  padding: 2px 2px 12px;
}

.workspace[data-active-group="planning"] .exercise-domain-section + .exercise-domain-section {
  margin-top: 18px;
  padding-top: 18px;
}

.workspace[data-active-group="planning"] .method-card,
.workspace[data-active-group="planning"] .exercise-card,
.workspace[data-active-group="planning"] .avoid-item {
  background: #fff;
  border-color: #d7e4e1;
}

.workspace[data-active-group="planning"] .method-card h3,
.workspace[data-active-group="planning"] .exercise-card h4 {
  font-size: 1.02rem;
  font-weight: 820;
}

.workspace[data-active-group="planning"] .method-card p,
.workspace[data-active-group="planning"] .exercise-card p,
.workspace[data-active-group="planning"] .exercise-measure,
.workspace[data-active-group="planning"] .exercise-adapt {
  line-height: 1.5;
}

.workspace[data-active-group="planning"] #methodList::-webkit-scrollbar,
.workspace[data-active-group="planning"] #recommendedExerciseList::-webkit-scrollbar,
.workspace[data-active-group="planning"] #allExerciseList::-webkit-scrollbar,
.workspace[data-active-group="planning"] #avoidList::-webkit-scrollbar,
.workspace[data-active-group="planning"] .exercise-domain-section .exercise-card-grid::-webkit-scrollbar,
.workspace[data-active-group="planning"] #methodSummary::-webkit-scrollbar {
  height: 10px;
}

.workspace[data-active-group="planning"] #methodList::-webkit-scrollbar-thumb,
.workspace[data-active-group="planning"] #recommendedExerciseList::-webkit-scrollbar-thumb,
.workspace[data-active-group="planning"] #allExerciseList::-webkit-scrollbar-thumb,
.workspace[data-active-group="planning"] #avoidList::-webkit-scrollbar-thumb,
.workspace[data-active-group="planning"] .exercise-domain-section .exercise-card-grid::-webkit-scrollbar-thumb,
.workspace[data-active-group="planning"] #methodSummary::-webkit-scrollbar-thumb {
  background: #c6d8d3;
  border-radius: 999px;
}

.workspace[data-active-group="planning"] #methodList::-webkit-scrollbar-track,
.workspace[data-active-group="planning"] #recommendedExerciseList::-webkit-scrollbar-track,
.workspace[data-active-group="planning"] #allExerciseList::-webkit-scrollbar-track,
.workspace[data-active-group="planning"] #avoidList::-webkit-scrollbar-track,
.workspace[data-active-group="planning"] .exercise-domain-section .exercise-card-grid::-webkit-scrollbar-track,
.workspace[data-active-group="planning"] #methodSummary::-webkit-scrollbar-track {
  background: #eef4f2;
  border-radius: 999px;
}

.advisor-layout {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.pia-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
}

.pro-center-head {
  border-bottom: 1px solid var(--line);
  margin: -22px -22px 18px;
  padding: 22px;
}

.pro-dashboard-grid,
.pro-reference-row,
.pro-workbench {
  display: grid;
  gap: 16px;
}

.pro-dashboard-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  margin-top: 18px;
}

.pro-workbench {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.pro-reference-row {
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  margin-top: 16px;
}

.pro-command-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.pro-focus-panel {
  background: #f8fbfd;
  border-color: #c6d8e8;
}

.pro-upgrade-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pro-upgrade-card {
  align-items: start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 138px;
  padding: 14px;
}

.pro-upgrade-card h4,
.pro-upgrade-card p,
.pro-priority p,
.pro-source-link span {
  margin: 0;
}

.pro-upgrade-card h4 {
  color: var(--brand-2);
  font-size: 1rem;
  margin-top: 8px;
}

.pro-upgrade-card p,
.pro-priority p,
.pro-blueprint p {
  color: var(--muted);
  line-height: 1.45;
}

.pro-status {
  background: #fff7e8;
  border: 1px solid #edd19d;
  border-radius: 999px;
  color: #7a4b00;
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 5px 8px;
}

.pro-priority {
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.pro-priority span {
  font-size: 1.05rem;
  font-weight: 900;
}

.pro-priority.ok {
  background: #edf8f1;
  border: 1px solid #b8dfc5;
}

.pro-priority.warn {
  background: #fff6e8;
  border: 1px solid #efd19c;
}

.pro-priority.danger {
  background: #fff0f0;
  border: 1px solid #efb6b6;
}

.pro-checklist {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.pro-checklist.compact {
  margin-top: 0;
}

.pro-check-row {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 10px;
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 44px;
  padding: 9px 10px;
  text-align: left;
}

.pro-check-row .done,
.pro-check-row .todo {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.pro-check-row .done {
  background: #e4f5eb;
  color: var(--ok);
}

.pro-check-row .todo {
  background: #fff1df;
  color: var(--warn);
}

.pro-blueprint {
  display: grid;
  gap: 12px;
}

.pro-step-list,
.pro-mini-list {
  margin: 0;
  padding-left: 20px;
}

.pro-step-list li,
.pro-mini-list li {
  line-height: 1.5;
  margin: 8px 0;
}

.pro-mini-list span {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

.pro-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pro-alert-list {
  display: grid;
  gap: 10px;
}

.pro-alert {
  background: #fff4f2;
  border: 1px solid #efc3bb;
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 12px;
}

.pro-alert p,
.pro-alert span {
  margin: 0;
}

.pro-alert span {
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 800;
}

.pro-source-board {
  display: grid;
  gap: 10px;
}

.pro-source-link {
  background: #f6f9fb;
  border: 1px solid #cfdae5;
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 5px;
  padding: 12px;
  text-decoration: none;
}

.pro-source-link strong {
  color: var(--brand-2);
}

.pro-source-link span {
  color: var(--muted);
  line-height: 1.4;
}

.pro-doc-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pro-doc-grid div {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 12px;
}

.pro-doc-grid strong {
  color: var(--brand-2);
  font-size: 1.25rem;
}

.pro-doc-grid span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.premium-head {
  border-bottom: 1px solid var(--line);
  margin: -22px -22px 18px;
  padding: 22px;
}

.premium-workflow-grid,
.exercise-layout,
.library-grid {
  display: grid;
  gap: 16px;
}

.premium-workflow-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exercise-layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.library-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.library-premium-layout {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.premium-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.premium-wide {
  grid-column: 1 / -1;
}

.today-timeline {
  display: grid;
  gap: 10px;
}

.timeline-row {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 96px minmax(0, 1fr);
  padding: 12px;
}

.timeline-row > span {
  background: #eaf5f4;
  border-radius: 7px;
  color: var(--brand-2);
  font-size: 0.82rem;
  font-weight: 900;
  padding: 8px;
  text-align: center;
}

.timeline-row strong,
.exercise-card h4,
.library-card h4 {
  color: var(--brand-2);
}

.timeline-row p,
.exercise-card p,
.library-card p,
.library-source-card p {
  color: var(--muted);
  line-height: 1.45;
  margin: 4px 0 0;
}

.premium-list ul {
  margin: 0;
  padding-left: 20px;
}

.premium-list li {
  line-height: 1.5;
  margin: 7px 0;
}

.exercise-mini-grid,
.exercise-card-grid {
  display: grid;
  gap: 12px;
}

.exercise-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exercise-card-grid.dense {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exercise-domain-section {
  display: grid;
  gap: 10px;
}

.exercise-domain-section + .exercise-domain-section {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}

.exercise-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.exercise-card h4 {
  font-size: 1rem;
  margin: 0;
}

.exercise-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exercise-meta span {
  background: #eef5f4;
  border-radius: 999px;
  color: var(--brand-2);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 8px;
}

.exercise-card ol {
  margin: 0;
  padding-left: 20px;
}

.exercise-card li {
  line-height: 1.45;
  margin: 5px 0;
}

.exercise-measure,
.exercise-adapt {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
  padding: 9px;
}

.library-card-list,
.library-source-grid {
  display: grid;
  gap: 10px;
}

.library-card,
.library-source-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.library-card h4 {
  margin: 0;
}

.library-card ul {
  margin: 0;
  padding-left: 20px;
}

.library-card li {
  line-height: 1.45;
  margin: 5px 0;
}

.library-card span {
  color: var(--accent);
  font-size: 0.83rem;
  font-weight: 800;
}

.knowledge-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.research-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.knowledge-grid.compact,
.research-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.knowledge-card,
.research-card,
.success-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.knowledge-card.is-match,
.research-card.is-match,
.success-card.is-match {
  background: #f3fbfa;
  border-color: #b9ded9;
}

.research-card {
  background: #f8fbf6;
}

.success-card {
  background: #fbf8f3;
}

.knowledge-card h4,
.research-card h4,
.success-card h4 {
  color: var(--brand-2);
  font-size: 1rem;
  margin: 0;
}

.knowledge-card p,
.research-card p,
.success-card p {
  color: var(--muted);
  line-height: 1.48;
  margin: 0;
}

.knowledge-topline,
.knowledge-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.knowledge-topline span,
.knowledge-reasons span,
.knowledge-score {
  background: #eaf5f4;
  border-radius: 999px;
  color: var(--brand-2);
  font-size: 0.72rem;
  font-weight: 850;
  padding: 5px 8px;
}

.knowledge-reasons span {
  background: #fff8ef;
  color: var(--accent);
}

.knowledge-columns {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.knowledge-columns.compact {
  grid-template-columns: 1fr;
}

.knowledge-columns > div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.knowledge-columns strong,
.knowledge-alert strong {
  color: var(--brand-2);
  display: block;
  font-size: 0.84rem;
  margin-bottom: 6px;
}

.knowledge-columns ul {
  margin: 0;
  padding-left: 18px;
}

.knowledge-columns li {
  color: var(--muted);
  line-height: 1.38;
  margin: 4px 0;
}

.knowledge-alert {
  background: #fff8ef;
  border: 1px solid #ebd5ba;
  border-radius: 8px;
  color: var(--accent);
  display: grid;
  gap: 2px;
  line-height: 1.4;
  padding: 10px;
}

.knowledge-alert span {
  font-size: 0.86rem;
  font-weight: 700;
}

.library-source-card {
  color: var(--ink);
  text-decoration: none;
}

.library-source-card strong {
  color: var(--brand-2);
}

.advisor-control,
.advisor-result,
.pia-form,
.pia-goals,
.pia-preview,
.api-settings {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.api-settings {
  background: #fff;
  margin-top: 12px;
}

.api-settings h3,
.pia-preview h3 {
  font-size: 1rem;
  margin: 0 0 10px;
}

.advisor-status {
  background: #fff7e6;
  border: 1px solid #eed7a8;
  border-radius: 8px;
  color: var(--warn);
  font-size: 0.88rem;
  line-height: 1.45;
  margin-top: 14px;
  padding: 12px;
}

.advisor-status.ok {
  background: #eefaf3;
  border-color: #b7ddc7;
  color: var(--ok);
}

.advisor-status.error {
  background: #fdecec;
  border-color: #efbbbb;
  color: var(--danger);
}

.advisor-help {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  font-size: 0.84rem;
  gap: 8px;
  line-height: 1.45;
  margin-top: 12px;
  padding: 12px;
}

.advisor-help code {
  background: #102a30;
  border-radius: 6px;
  color: #eafffa;
  display: block;
  overflow-wrap: anywhere;
  padding: 8px;
}

.advisor-output {
  display: grid;
  gap: 12px;
}

.advisor-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.advisor-section--emergency {
  background: #fff8f0;
  border-color: #f59e0b;
  border-left: 4px solid #f59e0b;
}

.advisor-section--emergency h3 {
  color: #92400e;
}

.advisor-section h3 {
  font-size: 1rem;
  margin: 0 0 8px;
}

.advisor-section ul,
.method-card ul,
.goal-card ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.goal-list {
  display: grid;
  gap: 10px;
}

.goal-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.goal-card strong {
  display: block;
  margin-bottom: 6px;
}

.goal-draft {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 2px;
}

.pia-preview {
  margin-top: 14px;
}

.method-card {
  display: grid;
  gap: 12px;
}

.method-card,
.exercise-card,
.avoid-item,
.premium-panel,
.advisor-control,
.advisor-result,
.pia-form,
.pia-goals,
.pia-preview,
.api-settings {
  box-shadow: 0 8px 22px rgba(22, 37, 39, 0.035);
}

.method-card,
.exercise-card {
  min-height: 100%;
}

.method-card footer {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.method-tags {
  flex-wrap: wrap;
}

.tag {
  background: #f1f4ef;
  color: var(--brand-2);
}

.tag.source {
  background: #eef3fb;
  color: var(--info);
}

.tag.caution {
  background: #fff0e8;
  color: var(--accent);
}

.avoid-block {
  margin-top: 22px;
}

.avoid-item {
  border-color: #f0c7c7;
}

.checkbox-line {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 22px 1fr;
}

.report-output {
  background: #102a30;
  border-radius: 8px;
  color: #eafffa;
  font-family: Consolas, Monaco, monospace;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
  min-height: 520px;
  overflow: auto;
  padding: 18px;
  white-space: pre-wrap;
}

.chart-box {
  min-height: 240px;
}

.chart-box svg {
  display: block;
  height: auto;
  width: 100%;
}

.bar-row {
  display: grid;
  gap: 6px;
}

.bar-row + .bar-row {
  margin-top: 10px;
}

.bar-label {
  color: var(--muted);
  display: flex;
  font-size: 0.84rem;
  justify-content: space-between;
}

.bar-track {
  background: #e8efed;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.bar-fill {
  background: var(--brand);
  height: 100%;
}

.import-label {
  align-items: center;
  display: inline-flex;
}

.import-label input {
  height: 1px;
  min-height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

@media (max-width: 1160px) {
  .workspace[data-active-group="planning"] .active-panel-stage {
    display: block;
    overflow-x: visible;
  }

  .app-shell,
  .metric-grid,
  .method-grid,
  .advisor-layout,
  .pia-layout,
  .two-panel-grid,
  .pro-dashboard-grid,
  .pro-workbench,
  .pro-reference-row,
  .pro-upgrade-grid,
  .premium-workflow-grid,
  .exercise-layout,
  .library-grid,
  .knowledge-grid,
  .knowledge-grid.compact,
  .research-grid,
  .research-grid.compact,
  .knowledge-columns,
  .exercise-card-grid,
  .exercise-card-grid.dense,
  .form-grid,
  .measure-grid,
  .abc-grid {
    grid-template-columns: 1fr;
  }

  .case-sidebar {
    position: static;
  }
}

@media (max-width: 680px) {
  .topbar,
  .case-strip,
  .section-head,
  .group-overview-head {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions,
  .button-row,
  .meta-pills {
    justify-content: flex-start;
  }

  .topbar-page-links {
    width: 100%;
  }

  .risk-grid {
    grid-template-columns: 1fr;
  }

  .tab-panel {
    padding: 16px;
  }

  .group-overview {
    padding: 16px;
  }
}

@media print {
  body {
    background: #fff;
  }

  .topbar,
  .case-sidebar,
  .case-strip,
  .tabs,
  .button-row,
  #buildPlanBtn,
  #refreshDashboardBtn,
  #exportAllBtn,
  #deleteCaseBtn,
  #addSessionBtn {
    display: none;
  }

  .app-shell,
  .workspace {
    display: block;
    max-width: none;
    padding: 0;
  }

  .workspace {
    border: 0;
    box-shadow: none;
  }

  .tab-panel {
    display: none;
  }

  #tab-report {
    display: block;
  }

  .report-output {
    background: #fff;
    color: #000;
    min-height: auto;
  }
}

.proplus-output {
  display: grid;
  gap: 14px;
}
.proplus-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.proplus-card,
.proplus-wide {
  background: #fbfdfc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.proplus-wide {
  grid-column: 1 / -1;
}
.proplus-card h3,
.proplus-wide h3 {
  margin: 0 0 10px;
  color: var(--brand-2);
}
.proplus-card h4,
.proplus-wide h4 {
  margin: 14px 0 6px;
}
.step-timeline {
  counter-reset: step;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.step-timeline li {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  list-style: none;
  padding: 12px 12px 12px 44px;
  position: relative;
}
.step-timeline li::before {
  counter-increment: step;
  content: counter(step);
  align-items: center;
  background: var(--brand);
  border-radius: 999px;
  color: white;
  display: inline-flex;
  font-weight: 800;
  height: 24px;
  justify-content: center;
  left: 12px;
  position: absolute;
  top: 12px;
  width: 24px;
}
.protocol-list {
  display: grid;
  gap: 8px;
  padding-left: 18px;
}
.quality-score {
  align-items: center;
  background: #eefaf8;
  border: 1px solid #bde2dc;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  padding: 14px;
}
.quality-score strong {
  color: var(--brand-2);
  font-size: 2rem;
}
@media (max-width: 900px) {
  .proplus-grid { grid-template-columns: 1fr; }
  .proplus-wide { grid-column: auto; }
}

.mentorpromax-output {
  display: grid;
  gap: 14px;
}
.max-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.max-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px;
}
.max-card.full { grid-column: 1 / -1; }
.max-card h3 { margin: 0 0 10px; color: var(--brand-2); }
.max-card h4 { margin: 12px 0 7px; }
.max-card ol, .max-card ul { margin: 8px 0 0; padding-left: 20px; }
.max-card li { margin: 6px 0; line-height: 1.45; }
.max-alert {
  background: #fff4dd;
  border: 1px solid #f1d49a;
  border-radius: 10px;
  padding: 12px;
}
.max-redline {
  background: #fdecec;
  border: 1px solid #f2b8b8;
  border-radius: 10px;
  padding: 12px;
}
.max-success {
  background: #eaf7ef;
  border: 1px solid #abd9bc;
  border-radius: 10px;
  padding: 12px;
}
@media (max-width: 900px) { .max-grid { grid-template-columns: 1fr; } }

.method-card-expanded {
  display: grid;
  gap: 16px;
}

.method-card-head {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.method-kicker {
  color: var(--accent);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.method-card-expanded .method-lead {
  background: #f8fbfa;
  border: 1px solid #d8e6e2;
  border-radius: 8px;
  display: grid;
  gap: 7px;
  line-height: 1.48;
  padding: 12px;
}

.method-card-expanded .method-lead strong {
  color: var(--brand-2);
}

.method-card-expanded .method-lead small {
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.42;
}

.method-accordion {
  display: grid;
  gap: 9px;
}

.clean-details {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.clean-details summary {
  align-items: center;
  color: var(--brand-2);
  cursor: pointer;
  display: flex;
  font-size: 0.9rem;
  font-weight: 850;
  justify-content: space-between;
  line-height: 1.25;
  list-style: none;
  padding: 11px 12px;
}

.clean-details summary::-webkit-details-marker {
  display: none;
}

.clean-details summary::after {
  color: var(--accent);
  content: "+";
  font-size: 1.05rem;
  font-weight: 900;
  margin-left: 12px;
}

.clean-details[open] summary {
  border-bottom: 1px solid var(--line);
}

.clean-details[open] summary::after {
  content: "-";
}

.clean-details ul,
.clean-details ol {
  margin: 10px 12px 12px;
  padding-left: 20px;
}

.clean-details p {
  color: var(--muted);
  line-height: 1.45;
  margin: 10px 12px 12px;
}

.clean-details li {
  line-height: 1.42;
}

.clean-details li + li {
  margin-top: 6px;
}

.exercise-info-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

.caution-text {
  color: var(--danger);
  font-weight: 800;
}

@media (max-width: 900px) {
  .method-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   WORLD CLASS POLISH LAYER
   VISUAL ONLY - STRUCTURE & DATA PRESERVED
   Copyright 2026 Ardit Ibishi
   ========================================================= */

:root{
  --radius-xl:18px;
  --radius-lg:12px;
  --radius-md:8px;
  --radius-sm:6px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;

  --world-shadow-soft:0 12px 34px rgba(16,50,56,.055);
  --world-shadow-card:0 20px 48px rgba(16,50,56,.085);
  --world-shadow-float:0 34px 90px rgba(16,50,56,.14);
}

html{
  scroll-behavior:smooth;
}

body{
  background:
    linear-gradient(180deg,#fbfcfc 0%, #f5f8f7 45%, #eef3f1 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    linear-gradient(rgba(16,50,56,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,50,56,.018) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.45), transparent 80%);
}

.topbar{
  background:
    linear-gradient(135deg,#0d3035 0%, #0a6a67 100%);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 60px rgba(13,48,53,.22);
  position:relative;
  overflow:visible;
  z-index:200;
}

.topbar::after{
  content:"";
  position:absolute;
  inset:auto 42px 0 42px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.26),
    transparent
  );
}

.brand-block{
  position:relative;
  padding-left:20px;
  max-width: 980px;
}

.brand-block::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:5px;
  border-radius:999px;
  background:linear-gradient(180deg,#f1d69c,rgba(255,255,255,.2));
  box-shadow:0 0 24px rgba(241,214,156,.35);
}

.topbar h1{
  font-size:clamp(1.8rem,3vw,2.65rem);
  letter-spacing:0;
  line-height:1.02;
}

.eyebrow{
  letter-spacing:.11em;
}

.app-shell{
  gap:28px;
  padding-top:28px;
}

.workspace,
.sidebar-section{
  border-radius:var(--radius-xl);
  border:1px solid rgba(16,50,56,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,252,251,.92));
  box-shadow:var(--world-shadow-float);
}

.sidebar-section{
  box-shadow:var(--world-shadow-card);
}

.case-strip{
  padding:26px 30px;
  border-bottom:1px solid rgba(16,50,56,.08);
  background:
    linear-gradient(180deg,#ffffff,#f8fbfa);
}

.case-strip h2,
.section-head h2{
  letter-spacing:0;
}

.tabs{
  background:
    linear-gradient(180deg,#eef5f3,#e8f0ee);
  padding:18px;
  gap:12px;
}

.tab{
  border-radius:16px;
  border:1px solid rgba(16,50,56,.05);
  background:rgba(255,255,255,.58);
  min-height:62px;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.tab:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.88);
}

.tab.is-active{
  background:
    linear-gradient(180deg,#ffffff,#f8fbfa);
  border-color:rgba(10,106,103,.20);
  box-shadow:
    0 16px 34px rgba(16,50,56,.11),
    inset 0 1px 0 rgba(255,255,255,.92);
  position:relative;
}

.tab.is-active::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:8px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),#d5b07b);
}

.metric-card,
.stack-item,
.session-item,
.avoid-item,
.method-card,
.criteria-card,
.group-module-card,
.panel-block,
.case-item{
  border-radius:var(--radius-xl);
  border:1px solid rgba(16,50,56,.07);
  background:
    linear-gradient(180deg,#ffffff,#fbfdfc);
  box-shadow:var(--world-shadow-soft);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.metric-card,
.method-card,
.criteria-card,
.group-module-card{
  position:relative;
  overflow:hidden;
}

.metric-card::before,
.method-card::before,
.criteria-card::before,
.group-module-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:
    linear-gradient(90deg,
      rgba(10,106,103,.92),
      rgba(213,176,123,.72),
      rgba(92,82,127,.45)
    );
}

.metric-card:hover,
.stack-item:hover,
.session-item:hover,
.avoid-item:hover,
.method-card:hover,
.criteria-card:hover,
.group-module-card:hover,
.case-item:hover{
  transform:translateY(-2px);
  border-color:rgba(10,106,103,.18);
  box-shadow:var(--world-shadow-card);
}

.section-head{
  margin-bottom:28px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(16,50,56,.08);
}

.section-head h2{
  font-size:1.55rem;
}

.section-subhead h3,
.panel-block h3{
  letter-spacing:0;
}

input,
select,
textarea{
  min-height:46px;
  border-radius:14px;
  background:
    linear-gradient(180deg,#ffffff,#fbfdfc);
  border:1px solid rgba(16,50,56,.12);
  padding:12px 14px;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible{
  box-shadow:0 0 0 4px rgba(10,106,103,.14);
  border-color:rgba(10,106,103,.35);
}

.primary-button,
.small-button{
  background:
    linear-gradient(135deg,#0a6a67,#11827b);
  box-shadow:0 12px 26px rgba(10,106,103,.20);
}

.primary-button:hover,
.small-button:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(10,106,103,.26);
}

button:active{
  transform:scale(.985);
}

.secondary-button{
  background:
    linear-gradient(180deg,#ffffff,#eef5f3);
  border:1px solid rgba(10,106,103,.12);
}

.case-item.is-active{
  background:
    linear-gradient(135deg,#eefbf8,#ffffff);
  border-color:rgba(10,106,103,.28);
  box-shadow:0 16px 36px rgba(10,106,103,.10);
}

.method-grid,
.exercise-mini-grid{
  grid-template-columns:1fr !important;
  gap:20px;
}

p,
li,
.microcopy,
.helper,
.stack-item p,
.panel-block p{
  line-height:1.65;
}

.signature-footer{
  margin-top:42px;
  padding:24px;
  border-top:1px solid rgba(16,50,56,.08);
  background:
    linear-gradient(
      90deg,
      rgba(16,50,56,.03),
      rgba(245,234,212,.45),
      rgba(16,50,56,.03)
    );
}

.signature-footer__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.92rem;
}

.signature-footer__brand{
  font-weight:900;
  color:var(--brand-2);
  letter-spacing:.02em;
}

.signature-footer__dot{
  color:#cba66f;
}

.signature-footer a{
  color:var(--brand-2);
  font-weight:850;
  text-decoration:none;
}

::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-track{
  background:#edf4f2;
}

::-webkit-scrollbar-thumb{
  background:
    linear-gradient(180deg,#a8c4bf,#6f9d96);
  border-radius:999px;
  border:3px solid #edf4f2;
}

::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(180deg,#8fb8b2,#527f79);
}

/* =========================================================
   WEBFLOW-STYLE CLINICAL POLISH
   Visual only: content, data and app logic preserved.
   ========================================================= */

:root {
  --bg: #f5f7f6;
  --surface: #ffffff;
  --surface-2: #f9fbfa;
  --surface-3: #edf3f1;
  --ink: #162326;
  --muted: #607174;
  --line: #dce6e3;
  --brand: #0a6a67;
  --brand-2: #123f45;
  --accent: #a46b4f;
  --shadow: 0 18px 50px rgba(18, 63, 69, 0.08);
  --soft-shadow: 0 10px 28px rgba(18, 63, 69, 0.055);
}

* {
  letter-spacing: 0 !important;
}

body {
  background:
    linear-gradient(180deg, #fbfcfc 0%, #f5f7f6 46%, #eef3f1 100%);
  color: var(--ink);
  font-family: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
}

body::before {
  background-image:
    linear-gradient(rgba(18, 63, 69, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 63, 69, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.28), transparent 76%);
}

.topbar {
  background: #102f35;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px rgba(16, 47, 53, 0.2);
  min-height: 104px;
  padding: 22px clamp(20px, 4vw, 46px);
}

.topbar h1 {
  font-size: clamp(1.75rem, 2.5vw, 2.45rem);
  font-weight: 820;
  line-height: 1.08;
}

.eyebrow {
  font-size: 0.76rem;
  font-weight: 850;
}

.app-shell {
  gap: 24px;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  max-width: 1660px;
  padding: 24px clamp(16px, 3vw, 38px) 42px;
}

.workspace,
.sidebar-section {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(18, 63, 69, 0.1);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.sidebar-section {
  padding: 20px;
}

.case-strip {
  background: linear-gradient(180deg, #ffffff, #f9fbfa);
  padding: 24px 28px;
}

.case-strip h2,
.section-head h2,
.group-overview-head h2 {
  color: var(--brand-2);
  font-size: clamp(1.2rem, 1.5vw, 1.55rem);
  font-weight: 820;
  line-height: 1.16;
}

.tabs {
  background: #edf3f1;
  border-bottom: 1px solid rgba(18, 63, 69, 0.1);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(9, minmax(138px, 1fr));
  padding: 16px;
}

.tab {
  align-items: center;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(18, 63, 69, 0.09);
  border-radius: 8px;
  color: #425457;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 850;
  justify-content: center;
  line-height: 1.18;
  min-height: 64px;
  padding: 10px 12px 12px;
  position: relative;
}

.tab:hover {
  background: #ffffff;
  border-color: rgba(10, 106, 103, 0.22);
  box-shadow: 0 12px 26px rgba(18, 63, 69, 0.07);
}

.tab.is-active {
  background: #ffffff;
  border-color: rgba(10, 106, 103, 0.3);
  box-shadow: 0 14px 30px rgba(10, 106, 103, 0.1);
  color: var(--brand-2);
}

.tab.is-active::after {
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), #d7b374);
}

.group-overview {
  background: #fbfcfc;
  gap: 18px;
  padding: 24px 28px;
}

.group-overview-head {
  align-items: flex-start;
}

.group-overview-head span {
  max-width: 860px;
}

.group-module-grid {
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.group-module-card {
  min-height: 122px;
  padding: 18px;
}

.active-panel-stage {
  display: block;
  min-width: 0;
}

.tab-panel {
  padding: 30px;
}

.tab-panel.is-group-secondary {
  border-top: 12px solid #f1f5f3;
}

.section-head {
  align-items: flex-start;
  background: transparent;
  border-bottom: 1px solid rgba(18, 63, 69, 0.1);
  gap: 18px;
  margin-bottom: 24px;
  padding: 0 0 18px;
}

.section-head p,
.group-overview-head span,
.panel-block p,
.method-card p,
.exercise-card p,
.library-card p,
.library-source-card p,
.microcopy,
.helper {
  color: var(--muted);
  line-height: 1.58;
}

.metric-grid,
.two-panel-grid,
.premium-workflow-grid,
.library-grid,
.form-grid,
.measure-grid,
.abc-grid,
.risk-grid,
.advisor-layout,
.pia-layout {
  gap: 18px;
}

.metric-card,
.stack-item,
.session-item,
.avoid-item,
.method-card,
.criteria-card,
.group-module-card,
.panel-block,
.case-item,
.premium-panel,
.exercise-card,
.library-card,
.library-source-card,
.advisor-section,
.goal-card {
  border: 1px solid rgba(18, 63, 69, 0.09);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--soft-shadow);
}

.metric-card::before,
.method-card::before,
.criteria-card::before,
.group-module-card::before {
  height: 3px;
  background: linear-gradient(90deg, rgba(10,106,103,.86), rgba(215,179,116,.78), rgba(91,90,130,.46));
}

.metric-card,
.method-card,
.criteria-card,
.premium-panel,
.exercise-card,
.library-card,
.library-source-card,
.advisor-section,
.goal-card {
  padding: 18px;
}

.panel-block {
  padding: 18px;
}

.metric-card:hover,
.stack-item:hover,
.session-item:hover,
.avoid-item:hover,
.method-card:hover,
.criteria-card:hover,
.group-module-card:hover,
.case-item:hover,
.exercise-card:hover,
.library-card:hover,
.library-source-card:hover {
  border-color: rgba(10, 106, 103, 0.22);
  box-shadow: 0 18px 42px rgba(18, 63, 69, 0.09);
  transform: translateY(-1px);
}

.panel-block h3,
.section-subhead h3,
.method-card h3,
.exercise-card h4,
.library-card h4 {
  color: var(--brand-2);
  font-weight: 830;
  line-height: 1.22;
}

.section-subhead {
  margin: 26px 0 12px;
}

input,
select,
textarea {
  background: #ffffff;
  border: 1px solid rgba(18, 63, 69, 0.15);
  border-radius: 8px;
  min-height: 46px;
}

.primary-button,
.secondary-button,
.danger-button,
.small-button,
.icon-button,
.language-switch {
  border-radius: 8px;
}

.primary-button,
.small-button {
  background: #0a6a67;
  box-shadow: 0 12px 26px rgba(10, 106, 103, 0.18);
}

.secondary-button {
  background: #ffffff;
  border: 1px solid rgba(10, 106, 103, 0.18);
  color: var(--brand-2);
}

.language-pill {
  min-height: 38px;
}

.case-list {
  max-height: 470px;
}

.case-item {
  gap: 6px;
  padding: 14px;
}

.case-item.is-active {
  background: #eefbf8;
  border-color: rgba(10, 106, 103, 0.38);
}

.workspace[data-active-group="planning"] #tab-methods,
.workspace[data-active-group="planning"] #tab-exercise {
  background: #fbfcfc;
}

.workspace[data-active-group="planning"] .section-head {
  background: #ffffff;
  border: 1px solid rgba(18, 63, 69, 0.09);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
  margin-bottom: 20px;
  padding: 18px;
}

.workspace[data-active-group="planning"] #methodSummary {
  display: grid;
  gap: 14px;
  grid-auto-columns: minmax(220px, 280px);
  grid-auto-flow: column;
  grid-template-columns: none;
  overflow-x: auto;
  padding: 2px 2px 14px;
}

.workspace[data-active-group="planning"] #methodList,
.workspace[data-active-group="planning"] #recommendedExerciseList,
.workspace[data-active-group="planning"] #avoidList {
  gap: 16px;
  grid-auto-columns: minmax(360px, 440px);
  padding: 2px 2px 18px;
}

.workspace[data-active-group="planning"] .exercise-domain-section .exercise-card-grid {
  gap: 16px;
  grid-auto-columns: minmax(330px, 400px);
  padding: 2px 2px 16px;
}

.workspace[data-active-group="planning"] .method-card,
.workspace[data-active-group="planning"] .exercise-card,
.workspace[data-active-group="planning"] .avoid-item {
  min-height: 100%;
}

.method-card-expanded {
  gap: 18px;
}

.method-card-head {
  border-bottom: 1px solid rgba(18, 63, 69, 0.08);
  padding-bottom: 12px;
}

.method-card-expanded .method-lead,
.clean-details,
.exercise-measure,
.exercise-adapt,
.timeline-row {
  border-radius: 8px;
}

.method-card-expanded .method-lead {
  background: #f9fbfa;
  border-color: rgba(18, 63, 69, 0.09);
}

.clean-details {
  background: #ffffff;
  border-color: rgba(18, 63, 69, 0.09);
}

.clean-details + .clean-details {
  margin-top: 2px;
}

.clean-details summary {
  font-size: 0.94rem;
  min-height: 48px;
  padding: 13px 14px;
}

.clean-details ul,
.clean-details ol,
.clean-details p {
  margin-left: 16px;
  margin-right: 16px;
}

.exercise-card ol,
.library-card ul,
.premium-list ul,
.advisor-section ul,
.method-card ul,
.goal-card ul {
  padding-left: 22px;
}

.exercise-card li,
.library-card li,
.premium-list li,
.advisor-section li,
.method-card li,
.goal-card li,
.clean-details li {
  line-height: 1.55;
  margin: 6px 0;
}

.premium-workflow-grid {
  align-items: start;
}

.report-output {
  border-radius: 8px;
}

.signature-footer {
  background: #ffffff;
  border-top: 1px solid rgba(18, 63, 69, 0.1);
  margin-top: 46px;
  padding: 24px;
}

.signature-footer__inner {
  color: var(--muted);
}

@media (max-width: 1280px) {
  .tabs {
    grid-template-columns: repeat(9, minmax(150px, 1fr));
  }
}

@media (max-width: 1160px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .case-sidebar {
    position: static;
  }

  .tabs {
    display: flex;
    overflow-x: auto;
  }

  .tab {
    min-width: 168px;
  }
}

.topbar .brand-block h1 {
  color: #ffffff;
  font-size: clamp(2.35rem, 4.6vw, 4.25rem);
  font-weight: 900;
  line-height: 0.96;
  text-transform: uppercase;
}

.brand-subtitle {
  color: #f2d69b;
  font-size: clamp(0.9rem, 1.15vw, 1.08rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 8px 0 0;
  max-width: 900px;
}

.brand-tagline {
  color: #d9efec;
  font-size: clamp(0.76rem, 0.95vw, 0.9rem);
  font-weight: 700;
  line-height: 1.35;
  margin: 5px 0 0;
  max-width: 930px;
}

@media (max-width: 760px) {
  .topbar,
  .case-strip,
  .section-head,
  .group-overview-head {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar {
    min-height: auto;
  }

  .app-shell {
    padding: 16px 12px 30px;
  }

  .tab-panel,
  .group-overview {
    padding: 18px;
  }

  .workspace[data-active-group="planning"] #methodList,
  .workspace[data-active-group="planning"] #recommendedExerciseList,
  .workspace[data-active-group="planning"] #avoidList,
  .workspace[data-active-group="planning"] .exercise-domain-section .exercise-card-grid {
    grid-auto-columns: minmax(286px, 86vw);
  }
}

.intervention-pro-plan {
  display: grid;
  gap: 22px;
  margin: 22px 0 28px;
}

.intervention-board,
.intervention-idea-section,
.intervention-support-card {
  background: #ffffff;
  border: 1px solid rgba(18, 63, 69, 0.09);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.intervention-board {
  display: grid;
  gap: 20px;
  overflow: hidden;
  padding: 22px;
}

.intervention-board-head {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 210px);
}

.intervention-board-head h3,
.intervention-idea-section h3,
.intervention-support-card h3 {
  color: var(--brand-2);
  font-size: 1.22rem;
  line-height: 1.22;
  margin: 0;
}

.intervention-board-head p {
  color: var(--muted);
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 980px;
}

.intervention-score-card {
  background: #eefbf8;
  border: 1px solid rgba(10, 106, 103, 0.18);
  border-radius: 8px;
  color: var(--brand-2);
  display: grid;
  gap: 5px;
  padding: 16px;
  text-align: center;
}

.intervention-score-card strong {
  font-size: 2rem;
  line-height: 1;
}

.intervention-score-card span,
.intervention-score-card small {
  color: var(--muted);
  font-weight: 800;
}

.intervention-priority-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.intervention-priority-title {
  align-items: end;
  border-top: 1px solid rgba(18, 63, 69, 0.08);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-top: 16px;
}

.intervention-priority-title h4 {
  color: var(--brand-2);
  font-size: 1rem;
  margin: 0;
}

.intervention-priority-title span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.35;
  text-align: right;
}

.intervention-priority-row article {
  align-items: center;
  background: #f9fbfa;
  border: 1px solid rgba(18, 63, 69, 0.08);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 72px;
  padding: 12px 14px;
}

.intervention-priority-row span,
.intervention-idea-number {
  align-items: center;
  background: #103238;
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
}

.intervention-priority-row span {
  height: 34px;
  width: 34px;
}

.intervention-priority-row strong {
  color: var(--brand-2);
  display: block;
  font-size: 1rem;
  line-height: 1.26;
}

.intervention-priority-row small {
  color: var(--muted);
  display: block;
  font-weight: 800;
  line-height: 1.35;
  margin-top: 4px;
}

.intervention-idea-section {
  padding: 22px;
}

.intervention-idea-section .section-subhead {
  margin: 0 0 16px;
}

.intervention-ideas-list {
  display: grid;
  gap: 14px;
}

.intervention-idea-card {
  background: #ffffff;
  border: 1px solid rgba(18, 63, 69, 0.09);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(18, 63, 69, 0.035);
  display: grid;
  gap: 16px;
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 16px;
}

.intervention-idea-number {
  height: 42px;
  width: 42px;
}

.intervention-idea-content {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.intervention-idea-top {
  align-items: start;
  border-bottom: 1px solid rgba(18, 63, 69, 0.08);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 10px;
}

.intervention-idea-top h3 {
  color: var(--brand-2);
  font-size: 1.08rem;
  line-height: 1.25;
  margin: 0;
}

.intervention-idea-content > p {
  color: var(--muted);
  line-height: 1.58;
  margin: 0;
}

.intervention-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.intervention-reasons span {
  background: #eef5f4;
  border: 1px solid rgba(10, 106, 103, 0.1);
  border-radius: 999px;
  color: var(--brand-2);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.25;
  padding: 7px 9px;
}

.intervention-support-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intervention-support-card {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.intervention-support-card ul,
.intervention-support-card ol {
  margin: 0;
  padding-left: 22px;
}

.intervention-support-card li {
  color: var(--muted);
  line-height: 1.58;
  margin: 7px 0;
}

.workspace[data-active-group="planning"] .intervention-pro-plan .clean-details {
  box-shadow: none;
}

.workspace[data-active-group="planning"] .intervention-pro-plan .method-tags {
  padding-top: 2px;
}

.workspace[data-active-group="planning"] #methodList {
  display: grid;
  gap: 16px;
  grid-auto-columns: auto;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  margin: 0 0 28px;
  overflow: visible;
  padding: 0;
}

.workspace[data-active-group="planning"] #methodList > * {
  min-width: 0;
  scroll-snap-align: none;
}

.workspace[data-active-group="planning"] #methodList:empty {
  display: none;
}

.session-flow-order-panel,
.session-flow-detail-panel {
  order: -1;
}

.session-flow-intervention-ideas {
  display: grid;
  gap: 18px;
}

.session-flow-detail-section {
  border: 0;
  box-shadow: none;
  padding: 0;
}

.session-flow-order-list {
  display: grid;
  gap: 10px;
}

.session-flow-order-list article {
  align-items: center;
  background: #f9fbfa;
  border: 1px solid rgba(18, 63, 69, 0.08);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 68px;
  padding: 12px 14px;
}

.session-flow-order-list span {
  align-items: center;
  background: #103238;
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.session-flow-order-list strong {
  color: var(--brand-2);
  display: block;
  font-size: 1rem;
  line-height: 1.25;
}

.session-flow-order-list small {
  color: var(--muted);
  display: block;
  font-weight: 800;
  line-height: 1.35;
  margin-top: 4px;
}

.planning-lab {
  display: grid;
  gap: 22px;
  margin: 22px 0 28px;
}

.planning-lab-hero,
.planning-lab-decision article,
.planning-lab-card {
  background: #ffffff;
  border: 1px solid rgba(18, 63, 69, 0.09);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
}

.planning-lab-hero {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  padding: 24px;
}

.planning-lab-hero h3 {
  color: var(--brand-2);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.15;
  margin: 0;
}

.planning-lab-hero p {
  color: var(--muted);
  line-height: 1.62;
  margin: 10px 0 0;
  max-width: 920px;
}

.planning-lab-focus {
  background: #eefbf8;
  border: 1px solid rgba(10, 106, 103, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  padding: 18px;
}

.planning-lab-focus span,
.planning-lab-focus small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.planning-lab-focus strong {
  color: var(--brand-2);
  font-size: 1.12rem;
  line-height: 1.28;
}

.planning-lab-decision {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.planning-lab-decision article {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.planning-lab-decision h4 {
  color: var(--brand-2);
  font-size: 1.12rem;
  margin: 0;
}

.planning-lab-decision ul {
  margin: 0;
  padding-left: 22px;
}

.planning-lab-decision li {
  color: var(--muted);
  line-height: 1.58;
  margin: 7px 0;
}

.planning-lab-list {
  display: grid;
  gap: 18px;
}

.planning-lab-card {
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: 20px;
}

.planning-lab-card-head {
  align-items: start;
  border-bottom: 1px solid rgba(18, 63, 69, 0.08);
  display: grid;
  gap: 16px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  padding-bottom: 14px;
}

.planning-lab-number,
.planning-fit-score {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-weight: 950;
  justify-content: center;
}

.planning-lab-number {
  background: #103238;
  color: #ffffff;
  font-size: 1.1rem;
  height: 46px;
  width: 46px;
}

.planning-fit-score {
  background: #2f8054;
  color: #ffffff;
  min-height: 38px;
  min-width: 38px;
  padding: 0 10px;
}

.planning-lab-card-head h3 {
  color: var(--brand-2);
  font-size: clamp(1.18rem, 1.4vw, 1.5rem);
  line-height: 1.2;
  margin: 0;
}

.planning-lab-card-head p {
  color: var(--muted);
  line-height: 1.58;
  margin: 10px 0 0;
}

.planning-fit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.planning-fit-row span {
  background: #eef5f4;
  border: 1px solid rgba(10, 106, 103, 0.1);
  border-radius: 999px;
  color: var(--brand-2);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.25;
  padding: 7px 9px;
}

.planning-lab-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-lab-grid .clean-details {
  align-self: start;
  box-shadow: none;
}

.planning-lab-grid .clean-details summary {
  font-size: 0.98rem;
}

.planning-lab-grid .clean-details li {
  line-height: 1.58;
}

.method-list-head {
  background: #ffffff;
  border: 1px solid rgba(18, 63, 69, 0.09);
  border-radius: 8px;
  box-shadow: var(--soft-shadow);
  display: grid;
  gap: 6px;
  padding: 20px;
}

.method-list-head h3 {
  color: var(--brand-2);
  font-size: 1.28rem;
  line-height: 1.2;
  margin: 0;
}

.method-list-head span {
  color: var(--muted);
  line-height: 1.5;
}

.therapy-flow-method-head {
  align-items: center;
  display: flex;
  gap: 16px;
  grid-column: 1 / -1;
  justify-content: space-between;
}

.therapy-flow-method-head .badge {
  flex-shrink: 0;
}

.intervention-method-ranked {
  width: 100%;
}

.intervention-method-ranked .method-card-head {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
}

.intervention-method-ranked .method-card-head small {
  color: var(--muted);
  display: block;
  font-weight: 800;
  line-height: 1.35;
  margin-top: 5px;
}

.method-card-number {
  align-items: center;
  background: #103238;
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-size: 1.05rem;
  font-weight: 950;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.intervention-method-ranked .method-accordion {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intervention-method-ranked .clean-details {
  align-self: start;
}

@media (max-width: 1180px) {
  .intervention-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .intervention-board,
  .intervention-idea-section,
  .intervention-support-card {
    padding: 16px;
  }

  .intervention-board-head,
  .intervention-support-grid,
  .intervention-idea-card {
    grid-template-columns: 1fr;
  }

  .intervention-priority-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .intervention-priority-title span {
    text-align: left;
  }

  .intervention-priority-row article {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .session-flow-order-list article {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .intervention-method-ranked .method-card-head,
  .intervention-method-ranked .method-accordion,
  .planning-lab-hero,
  .planning-lab-decision,
  .planning-lab-card-head,
  .planning-lab-grid {
    grid-template-columns: 1fr;
  }

  .intervention-idea-number {
    height: 36px;
    width: 36px;
  }

  .intervention-idea-top {
    align-items: stretch;
    flex-direction: column;
  }
}

.workspace[data-active-group="planning"] #recommendedExerciseList,
.workspace[data-active-group="planning"] #exerciseMethodList .therapy-method-library-grid,
.workspace[data-active-group="planning"] .exercise-domain-section .exercise-card-grid,
.workspace[data-active-group="planning"] .exercise-card-grid.dense {
  display: grid;
  gap: 16px;
  grid-auto-columns: auto;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  overflow: visible;
  padding: 0;
}

.workspace[data-active-group="planning"] #recommendedExerciseList > *,
.workspace[data-active-group="planning"] #exerciseMethodList .therapy-method-library-grid > *,
.workspace[data-active-group="planning"] .exercise-domain-section .exercise-card-grid > *,
.workspace[data-active-group="planning"] .exercise-card-grid.dense > * {
  min-width: 0;
  scroll-snap-align: none;
}

.workspace[data-active-group="planning"] .exercise-card {
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.workspace[data-active-group="planning"] .exercise-card h4,
.workspace[data-active-group="planning"] .exercise-card p,
.workspace[data-active-group="planning"] .exercise-measure,
.workspace[data-active-group="planning"] .exercise-adapt {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 920px) {
  .workspace[data-active-group="planning"] #recommendedExerciseList,
  .workspace[data-active-group="planning"] #exerciseMethodList .therapy-method-library-grid,
  .workspace[data-active-group="planning"] .exercise-domain-section .exercise-card-grid,
  .workspace[data-active-group="planning"] .exercise-card-grid.dense {
    grid-template-columns: 1fr;
  }
}

.therapy-method-library {
  margin-bottom: 22px;
}

.method-library-card .method-card-head {
  align-items: flex-start;
}

.method-library-card .knowledge-alert,
.method-library-card .clean-details {
  margin-top: 12px;
}

/* =========================================================
   CORE SPECTRUM COLLABORATION LAYER
   Added without removing existing modules
   ========================================================= */
.collab-hero-grid,
.collab-layout{
  display:grid;
  gap:18px;
}
.collab-hero-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:18px;
}
.collab-layout{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.collab-layout .premium-wide,
.collab-hero-grid .premium-wide{
  grid-column:1 / -1;
}
.form-grid{
  display:grid;
  gap:12px;
}
.form-grid.two-cols{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.subscription-options{
  display:grid;
  gap:10px;
  margin:10px 0 14px;
}
.subscription-card{
  align-items:flex-start;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
  display:grid;
  gap:4px;
  grid-template-columns:auto 1fr;
  margin:0;
  padding:12px;
}
.subscription-card input{
  margin-top:3px;
}
.subscription-card strong,
.subscription-card span{
  grid-column:2;
}
.team-access-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.team-member-card{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
}
.team-member-head,
.collab-subhead{
  align-items:center;
  display:flex;
  gap:12px;
  justify-content:space-between;
}
.team-member-head span{
  background:#eaf5f4;
  border-radius:999px;
  color:var(--brand-2);
  font-weight:900;
  padding:6px 9px;
}
.member-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.member-meta span,
.architecture-grid div,
.permission-matrix div,
.timeline-item,
.collab-list-item{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
}
.member-meta span{
  font-size:.78rem;
  font-weight:800;
}
.mini-danger{
  min-height:30px;
  padding:0 10px;
}
.permission-matrix,
.architecture-grid,
.case-timeline,
.collab-list{
  display:grid;
  gap:10px;
}
.permission-matrix div,
.architecture-grid div{
  display:grid;
  gap:4px;
}
.permission-matrix span,
.architecture-grid span,
.timeline-item p,
.collab-list-item span{
  color:var(--muted);
  line-height:1.45;
}
.task-entry-grid{
  display:grid;
  gap:10px;
  grid-template-columns:1fr minmax(120px,160px) auto;
  margin-bottom:12px;
}
.collab-list-item{
  align-items:center;
  display:flex;
  gap:12px;
  justify-content:space-between;
}
.timeline-item{
  display:grid;
  gap:12px;
  grid-template-columns:110px 1fr;
}
.timeline-item > span{
  color:var(--brand);
  font-size:.82rem;
  font-weight:900;
}
@media(max-width:980px){
  .collab-hero-grid,
  .collab-layout,
  .form-grid.two-cols,
  .task-entry-grid{
    grid-template-columns:1fr;
  }
  .timeline-item{
    grid-template-columns:1fr;
  }
}

.app-access-panel {
  margin-bottom: 18px;
  border: 1px solid rgba(10, 106, 103, 0.22);
  background: linear-gradient(180deg, #ffffff, #f7fbfa);
}
.global-subscription-options {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}
.three-cols {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}
.premium-badge {
  background: #efeafb;
  color: var(--premium-gold, #e6c576);
}
@media (max-width: 980px) {
  .global-subscription-options,
  .three-cols {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CORE SPECTRUM PREMIUM SPLIT LAYER
   Added only for Collaboration + Subscription tabs.
   Existing clinical/worksheet modules are not changed.
   ========================================================= */
.core-collab-head,
.subscription-hero {
  background: linear-gradient(135deg, #ffffff, #f2faf8);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--soft-shadow);
  padding: 18px;
}
.premium-badge {
  background: linear-gradient(135deg, var(--brand), var(--premium-gold, #e6c576));
  color: #fff;
  border-radius: 999px;
  padding: 9px 12px;
}
.collab-command-grid,
.subscription-detail-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  margin-bottom: 18px;
}
.collab-vision-card h3,
.subscription-intro-card h3 {
  color: var(--brand-2);
  font-size: clamp(1.35rem, 2vw, 2rem);
  margin: 8px 0 10px;
}
.connection-flow {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}
.case-node {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  border-radius: 18px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 22px 24px;
  width: 100%;
}
.flow-lines {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
  text-transform: uppercase;
}
.role-cloud,
.value-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}
.role-cloud span,
.value-pill-row span {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand-2);
  font-size: .78rem;
  font-weight: 850;
  padding: 9px 11px;
}
.collab-step-grid,
.shared-access-grid,
.role-permission-list,
.architecture-grid {
  display: grid;
  gap: 12px;
}
.collab-step-grid,
.shared-access-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.collab-step-grid > div,
.shared-access-grid > div,
.role-permission-list > div,
.premium-static-timeline > div,
.architecture-grid > div {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.collab-step-grid strong,
.shared-access-grid strong,
.role-permission-list strong,
.premium-static-timeline strong,
.architecture-grid strong {
  color: var(--brand-2);
  display: block;
  margin-bottom: 5px;
}
.collab-step-grid span,
.shared-access-grid span,
.role-permission-list span,
.premium-static-timeline span,
.architecture-grid span {
  color: var(--muted);
  display: block;
  font-size: .88rem;
  line-height: 1.45;
}
.premium-static-timeline {
  display: grid;
  gap: 10px;
  position: relative;
}
.subscription-intro-card {
  background: linear-gradient(135deg, #ffffff, #eef8f6);
  margin-bottom: 18px;
}
.epic-pricing-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}
.pricing-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  display: grid;
  gap: 14px;
  padding: 22px;
  position: relative;
}
.pricing-card.is-featured {
  border-color: rgba(10,106,103,.45);
  box-shadow: 0 22px 54px rgba(10,106,103,.16);
  transform: translateY(-6px);
}
.popular-ribbon {
  background: linear-gradient(135deg, var(--brand), var(--premium-gold, #e6c576));
  border-radius: 999px;
  color: #fff;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .06em;
  padding: 8px 10px;
  position: absolute;
  right: 18px;
  top: 18px;
}
.plan-kicker {
  color: var(--accent);
  display: block;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .06em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.pricing-card h3 {
  color: var(--brand-2);
  font-size: 1.35rem;
  margin: 0;
}
.price {
  color: var(--brand);
  font-size: 2rem;
  font-weight: 950;
  margin: 10px 0 0;
}
.price small {
  color: var(--muted);
  font-size: .88rem;
  font-weight: 750;
}
.pricing-card p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.pricing-card ul {
  color: var(--ink);
  margin: 0;
  padding-left: 19px;
}
.pricing-card li {
  margin: 7px 0;
}
.security-premium-card {
  background: linear-gradient(135deg, #fbfdfc, #eef6f4);
}
@media (max-width: 1100px) {
  .collab-command-grid,
  .subscription-detail-grid,
  .epic-pricing-grid {
    grid-template-columns: 1fr;
  }
  .pricing-card.is-featured {
    transform: none;
  }
}

/* === Collaboration Email Access Layer - added only for Collaboration tab === */
.tabs {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.collab-status-card {
  background: linear-gradient(135deg, #103238, #0a6a67);
  border-radius: 12px;
  color: #fff;
  min-width: 210px;
  padding: 16px 18px;
  text-align: right;
  box-shadow: var(--soft-shadow);
}

.collab-status-card span,
.premium-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.collab-status-card strong {
  display: block;
  font-size: 1.25rem;
  margin-top: 5px;
}

.collab-status-card small {
  color: #d7f2ef;
}

.collab-hero-grid,
.collab-workflow-grid,
.collab-security-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  margin-bottom: 16px;
}

.collab-security-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.collab-hero-panel h3,
.collab-role-card h3,
.collab-timeline-panel h3 {
  color: var(--brand-2);
  margin-top: 8px;
}

.collab-email-flow {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 18px;
}

.collab-email-flow div {
  background: #f4fbfa;
  border: 1px solid #cfe3df;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.collab-email-flow strong {
  align-items: center;
  background: var(--brand);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  margin-bottom: 7px;
  width: 30px;
}

.collab-email-flow span {
  color: var(--brand-2);
  display: block;
  font-size: .82rem;
  font-weight: 850;
}

.collab-steps {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  padding-left: 20px;
}

.collab-steps li + li {
  margin-top: 9px;
}

.collab-form-preview {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.collab-form-preview input:disabled,
.collab-form-preview select:disabled,
.collab-form-preview button:disabled {
  opacity: 1;
}

.collab-access-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.collab-access-list div {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}

.collab-access-list strong {
  color: var(--brand-2);
  display: block;
}

.collab-access-list span {
  color: var(--muted);
  display: block;
  font-size: .86rem;
  line-height: 1.45;
  margin-top: 4px;
}

.collab-role-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0;
}

.collab-role-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--soft-shadow);
  padding: 18px;
}

.collab-role-card.primary {
  border-color: #91cfc8;
  background: linear-gradient(180deg, #f3fffd, #fff);
}

.collab-role-card span {
  background: var(--surface-3);
  border-radius: 999px;
  color: var(--brand-2);
  display: inline-flex;
  font-size: .72rem;
  font-weight: 900;
  padding: 7px 10px;
  text-transform: uppercase;
}

.collab-role-card p,
.collab-role-card li {
  color: var(--muted);
}

.collab-role-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
}

.collab-timeline {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.collab-timeline div {
  align-items: start;
  background: #fbfdfc;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  display: grid;
  gap: 4px;
  padding: 13px 14px;
}

.collab-timeline span {
  color: var(--accent);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.collab-timeline strong {
  color: var(--brand-2);
}

@media (max-width: 1100px) {
  .collab-hero-grid,
  .collab-workflow-grid,
  .collab-security-grid,
  .collab-role-grid {
    grid-template-columns: 1fr;
  }

  .collab-email-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collab-status-card {
    text-align: left;
  }
}

/* === Functional Collaboration Team Access - only Collaboration tab === */
.tabs {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.collab-status-card {
  background: linear-gradient(135deg, #103238, #0a6a67);
  border-radius: 12px;
  color: #fff;
  min-width: 220px;
  padding: 16px 18px;
  text-align: right;
  box-shadow: var(--soft-shadow);
}

.collab-status-card span,
.premium-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.collab-status-card strong {
  display: block;
  font-size: 1.25rem;
  margin-top: 5px;
}

.collab-status-card small {
  color: #d7f2ef;
}

.collab-hero-grid,
.collab-workflow-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  margin-bottom: 16px;
}

.collab-summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 0;
}

.collab-summary-grid div {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.collab-summary-grid strong {
  color: var(--brand-2);
  display: block;
  font-size: 1.35rem;
}

.collab-summary-grid span {
  color: var(--muted);
  display: block;
  font-size: .78rem;
  line-height: 1.3;
}

.collab-email-flow {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 18px;
}

.collab-email-flow div {
  background: #f4fbfa;
  border: 1px solid #cfe3df;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.collab-email-flow strong {
  align-items: center;
  background: var(--brand);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  margin-bottom: 7px;
  width: 30px;
}

.collab-email-flow span {
  color: var(--brand-2);
  display: block;
  font-size: .82rem;
  font-weight: 850;
}

.collab-form-preview {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.collab-form-preview textarea {
  min-height: 88px;
}

.collab-steps {
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  padding-left: 20px;
}

.collab-steps li + li {
  margin-top: 9px;
}

.collab-access-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.collab-access-list div,
.collab-empty-state {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}

.collab-access-list strong,
.collab-empty-state strong {
  color: var(--brand-2);
  display: block;
}

.collab-access-list span,
.collab-empty-state span {
  color: var(--muted);
  display: block;
  font-size: .86rem;
  line-height: 1.45;
  margin-top: 4px;
}

.compact-collab-head {
  margin-bottom: 12px;
}

.collab-team-list {
  display: grid;
  gap: 14px;
}

.collab-member-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--soft-shadow);
  padding: 16px;
}

.collab-member-main {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.collab-member-main h3 {
  color: var(--brand-2);
  margin: 7px 0 2px;
}

.collab-member-main p {
  color: var(--muted);
  margin: 0;
}

.collab-member-role {
  background: #f4fbfa;
  border: 1px solid #cfe3df;
  border-radius: 10px;
  min-width: 210px;
  padding: 10px 12px;
  text-align: right;
}

.collab-member-role strong,
.collab-member-role span {
  display: block;
}

.collab-member-role span {
  color: var(--muted);
  font-size: .82rem;
  margin-top: 4px;
}

.collab-member-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 900;
  padding: 6px 9px;
  text-transform: uppercase;
}

.collab-member-status.pending {
  background: #fff4dd;
  color: var(--warn);
}

.collab-member-status.active {
  background: #eaf7ef;
  color: var(--ok);
}

.collab-member-desc {
  color: var(--muted);
  line-height: 1.45;
  margin: 12px 0;
}

.collab-invite-link {
  background: #f8fbfa;
  border: 1px dashed #b8ccc7;
  border-radius: 10px;
  color: var(--muted);
  font-size: .82rem;
  overflow: hidden;
  padding: 10px 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collab-member-actions {
  margin-top: 12px;
}

.microcopy.is-success {
  color: var(--ok);
  font-weight: 800;
}

.microcopy.is-error {
  color: var(--danger);
  font-weight: 800;
}

.collab-role-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0;
}

.collab-role-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--soft-shadow);
  padding: 18px;
}

.collab-role-card.primary {
  border-color: #91cfc8;
  background: linear-gradient(180deg, #f3fffd, #fff);
}

.collab-role-card span {
  background: var(--surface-3);
  border-radius: 999px;
  color: var(--brand-2);
  display: inline-flex;
  font-size: .72rem;
  font-weight: 900;
  padding: 7px 10px;
  text-transform: uppercase;
}

.collab-role-card h3,
.collab-timeline-panel h3,
.collab-team-panel h2 {
  color: var(--brand-2);
}

.collab-role-card p {
  color: var(--muted);
}

.collab-timeline {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.collab-timeline div {
  background: #fbfdfc;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  display: grid;
  gap: 4px;
  padding: 13px 14px;
}

.collab-timeline span {
  color: var(--accent);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.collab-timeline strong {
  color: var(--brand-2);
}

@media (max-width: 1100px) {
  .collab-hero-grid,
  .collab-workflow-grid,
  .collab-role-grid {
    grid-template-columns: 1fr;
  }

  .collab-email-flow,
  .collab-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .collab-member-main {
    display: grid;
  }

  .collab-member-role {
    min-width: 0;
    text-align: left;
  }

  .collab-status-card {
    text-align: left;
  }
}

/* === Core Spectrum Email Login Layer - only login/auth access === */
.login-top-button {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 999px;
  color: var(--brand-2);
  display: inline-flex;
  font-weight: 900;
  min-height: 40px;
  max-width: 240px;
  overflow: hidden;
  padding: 0 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-top-button[hidden] {
  display: none !important;
}

.login-top-button.is-logged-in {
  background: #fff;
  color: var(--brand-2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

.core-login-overlay {
  align-items: center;
  background: rgba(10, 18, 22, .58);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 22px;
  position: fixed;
  z-index: 99999;
}

.core-login-overlay.is-open {
  display: flex;
}

.core-login-modal {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 34px 90px rgba(0,0,0,.28);
  max-height: 92vh;
  max-width: 760px;
  overflow: auto;
  padding: 26px;
  position: relative;
  width: min(760px, 100%);
}

.core-login-close {
  align-items: center;
  background: var(--surface-3);
  border: 0;
  border-radius: 999px;
  color: var(--brand-2);
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  position: absolute;
  right: 18px;
  top: 18px;
  width: 38px;
}

.core-login-brand {
  max-width: 620px;
  padding-right: 44px;
}

.core-login-brand h2 {
  color: var(--brand-2);
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin: 0 0 8px;
}

.core-login-brand p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 18px;
}

.core-login-tabs-mini {
  background: var(--surface-3);
  border-radius: 12px;
  display: inline-flex;
  margin-bottom: 16px;
  padding: 5px;
}

.core-login-tabs-mini button {
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  font-weight: 900;
  min-height: 38px;
  padding: 0 14px;
}

.core-login-tabs-mini button.is-active {
  background: #fff;
  box-shadow: var(--soft-shadow);
  color: var(--brand-2);
}

.core-login-form {
  display: grid;
  gap: 12px;
}

.core-login-hidden {
  display: none !important;
}

.core-login-info-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.core-login-info-grid article,
.core-account-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.core-login-info-grid strong {
  color: var(--brand-2);
  display: block;
  margin-bottom: 5px;
}

.core-login-info-grid span {
  color: var(--muted);
  display: block;
  font-size: .86rem;
  line-height: 1.45;
}

.core-account-card {
  background: linear-gradient(180deg, #f3fffd, #fff);
  border-color: #bde2dc;
  margin: 12px 0 16px;
}

.core-account-card h3 {
  color: var(--brand-2);
  font-size: 1.35rem;
  margin: 6px 0 2px;
}

.core-account-card p {
  color: var(--muted);
  margin: 0;
}

.core-account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.core-account-meta span {
  background: var(--surface-3);
  border-radius: 999px;
  color: var(--brand-2);
  font-size: .78rem;
  font-weight: 850;
  padding: 7px 9px;
}

@media (max-width: 760px) {
  .core-login-info-grid {
    grid-template-columns: 1fr;
  }

  .core-login-modal {
    padding: 22px;
  }
}

/* === Verified Email Login + Profile Layer - only login/auth/profile === */
.core-login-register-fields {
  display: grid;
  gap: 12px;
}

.core-privacy-check {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  gap: 10px;
  line-height: 1.4;
}

.core-privacy-check input {
  margin-top: 3px;
  width: auto;
}

.core-verify-card {
  background: linear-gradient(180deg, #f3fffd, #fff);
  border: 1px solid #bde2dc;
  border-radius: 14px;
  padding: 18px;
}

.core-verify-card h3,
.core-profile-panel h3 {
  color: var(--brand-2);
  margin: 8px 0;
}

.core-verify-card p {
  color: var(--muted);
  line-height: 1.5;
}

.core-verification-code-box {
  background: #103238;
  border-radius: 12px;
  color: #fff;
  margin: 14px 0;
  padding: 15px;
  text-align: center;
}

.core-verification-code-box span {
  color: #cfe8e5;
  display: block;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.core-verification-code-box strong {
  display: block;
  font-size: 2rem;
  letter-spacing: .12em;
  margin-top: 5px;
}

.core-email-preview {
  background: var(--surface-2);
  border: 1px dashed #b8ccc7;
  border-radius: 12px;
  margin-top: 14px;
  padding: 13px;
}

.core-email-preview strong {
  color: var(--brand-2);
  display: block;
  margin-bottom: 6px;
}

.core-email-preview p {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .82rem;
  margin: 0;
  white-space: pre-wrap;
}

.core-profile-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  margin-top: 16px;
}

.core-profile-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
  padding: 18px;
}

.core-login-info-grid.one-column {
  grid-template-columns: 1fr;
}

.core-subscription-cloud-status {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.08);
}

.core-manual-payment-panel,
.core-manual-admin-panel,
.core-owner-admin-panel {
  margin: 18px 0;
}

.core-bank-details {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
}

.core-bank-details:empty {
  display: none;
}

.core-bank-details strong {
  color: var(--brand-2);
}

.core-bank-details dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.core-bank-details dl div {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 120px minmax(0, 1fr);
}

.core-bank-details dt {
  color: var(--muted);
  font-weight: 800;
}

.core-bank-details dd {
  font-weight: 850;
  margin: 0;
  overflow-wrap: anywhere;
}

.core-manual-payment-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 14px 0;
}

.core-manual-payment-grid label {
  color: var(--ink);
  display: grid;
  font-weight: 800;
  gap: 7px;
}

.core-manual-payment-grid input,
.core-manual-payment-grid select,
.core-manual-payment-grid textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  min-height: 42px;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}

.core-manual-payment-grid label:last-child {
  grid-column: 1 / -1;
}

.core-manual-admin-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.core-manual-admin-item {
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px;
}

.core-manual-admin-item h3,
.core-manual-admin-item p {
  margin: 0 0 6px;
}

.core-manual-admin-item small {
  color: var(--muted);
}

.core-admin-summary-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 0;
}

.core-admin-summary-grid div {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}

.core-admin-summary-grid span,
.core-admin-current-plan span {
  color: var(--muted);
  display: block;
  font-size: .84rem;
  font-weight: 800;
}

.core-admin-summary-grid strong {
  color: var(--brand-2);
  display: block;
  font-size: 1.35rem;
  margin-top: 4px;
}

.core-admin-toolbar {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 12px 0;
}

.core-admin-toolbar input,
.core-admin-controls input,
.core-admin-controls select {
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  min-height: 42px;
  padding: 9px 11px;
  width: 100%;
}

.core-admin-user-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.core-admin-user-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.core-admin-user-main {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.core-admin-user-main h3,
.core-admin-user-main p {
  margin: 0 0 6px;
}

.core-admin-user-main small,
.core-admin-current-plan small {
  color: var(--muted);
  display: block;
}

.core-admin-current-plan {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 150px;
  padding: 10px 12px;
}

.core-admin-current-plan strong {
  color: var(--brand-2);
  display: block;
  font-size: 1.05rem;
}

.core-admin-controls {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(170px, .8fr) 92px auto auto;
}

.core-admin-controls label {
  color: var(--ink);
  display: grid;
  font-weight: 800;
  gap: 6px;
}

.core-profile-actions {
  margin-top: 16px;
}

@media (max-width: 920px) {
  .core-profile-layout {
    grid-template-columns: 1fr;
  }
  .core-manual-payment-grid,
  .core-manual-admin-item,
  .core-bank-details dl div,
  .core-admin-summary-grid,
  .core-admin-toolbar,
  .core-admin-user-main,
  .core-admin-controls {
    grid-template-columns: 1fr;
  }
}

.free-preview-banner {
  align-items: center;
  background: #123c49;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 30px rgba(18, 60, 73, 0.18);
  color: #f6fbfb;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 10px clamp(16px, 4vw, 34px);
  position: sticky;
  top: 0;
  z-index: 80;
}

.free-preview-banner strong,
.free-preview-banner span {
  display: block;
}

.free-preview-banner strong {
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.free-preview-banner span {
  color: rgba(246, 251, 251, .82);
  font-size: .88rem;
  line-height: 1.45;
}

.free-preview-banner .secondary-button {
  background: #f6fbfb;
  border-color: transparent;
  color: #123c49;
  flex: 0 0 auto;
}

.free-preview-locked-tab {
  opacity: .58;
  position: relative;
}

.free-preview-locked-tab::after {
  background: #f5b841;
  border-radius: 999px;
  content: "";
  height: 7px;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 7px;
}

.free-preview-locked-action {
  filter: saturate(.72);
}

body.is-free-preview #tab-proplus,
body.is-free-preview #tab-mentorpromax {
  display: none !important;
}

.free-preview-list-lock {
  align-items: center;
  background: #f7faf9;
  border: 1px solid #d8e6e3;
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 14px;
}

.free-preview-list-lock strong {
  color: var(--brand-2);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.free-preview-list-lock span {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}

.free-preview-list-lock .secondary-button {
  justify-self: start;
}

.free-preview-toast {
  background: #102f39;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  bottom: 18px;
  box-shadow: 0 14px 32px rgba(16, 47, 57, .28);
  color: #fff;
  left: 50%;
  max-width: min(520px, calc(100vw - 28px));
  opacity: 0;
  padding: 12px 14px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 14px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 120;
}

.collaboration-access-banner {
  background: linear-gradient(135deg, rgba(16, 79, 92, 0.12), rgba(16, 47, 57, 0.08));
  border: 1px solid rgba(16, 79, 92, 0.22);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 14px;
}

.collaboration-access-banner strong {
  color: #0f4f5c;
  font-size: 0.95rem;
}

.collaboration-access-banner span {
  color: #35515a;
  font-size: 0.86rem;
}

.core-collab-hidden {
  display: none !important;
}

.is-collab-locked {
  opacity: 0.58;
  pointer-events: none;
}

.collab-shared-panel {
  margin-top: 14px;
}

.free-preview-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 760px) {
  .free-preview-banner {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================================
   Premium User Menu Dropdown (topbar)
   ========================================================================= */
.cs-usermenu{position:relative;display:inline-block;z-index:300}
.cs-usermenu-trigger{display:inline-flex;align-items:center;gap:10px;padding:5px 13px 5px 5px;border-radius:999px;border:1px solid rgba(255,255,255,.76);background:linear-gradient(135deg,#ffffff 0%,#f7fbfa 100%);color:#17393d;cursor:pointer;font-size:.88rem;font-weight:750;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;font-family:inherit;box-shadow:0 10px 24px rgba(3,34,37,.14),inset 0 0 0 1px rgba(10,106,103,.04)}
.cs-usermenu-trigger:hover{border-color:rgba(37,195,176,.9);box-shadow:0 14px 34px rgba(3,34,37,.2),0 0 0 4px rgba(26,184,166,.12);transform:translateY(-1px)}
.cs-usermenu-trigger[aria-expanded="true"]{border-color:rgba(37,195,176,.95);box-shadow:0 18px 42px rgba(3,34,37,.23),0 0 0 4px rgba(26,184,166,.14)}
.cs-usermenu-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#38e0c9 0%,#14b8a6 45%,#08746f 100%);color:#062927;font-weight:900;font-size:.86rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 9px 22px rgba(20,184,166,.34),inset 0 1px 0 rgba(255,255,255,.48)}
.cs-usermenu-avatar.lg{width:58px;height:58px;font-size:1.18rem;border-radius:18px;box-shadow:0 18px 34px rgba(20,184,166,.25),inset 0 1px 0 rgba(255,255,255,.5)}
.cs-usermenu-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-usermenu-caret{transition:transform .25s;color:var(--muted,#5f6f72)}
.cs-usermenu-trigger[aria-expanded="true"] .cs-usermenu-caret{transform:rotate(180deg)}

.cs-usermenu-dropdown{position:absolute;top:calc(100% + 12px);right:0;width:340px;max-height:min(460px,calc(100vh - 150px));background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(247,252,250,.98) 100%);border:1px solid rgba(207,226,222,.92);border-radius:22px;box-shadow:0 30px 70px rgba(8,34,37,.26),0 10px 26px rgba(8,34,37,.12),inset 0 1px 0 rgba(255,255,255,.95);z-index:10000;overflow:auto;animation:csMenuIn .22s cubic-bezier(.16,1,.3,1);transform-origin:top right;backdrop-filter:blur(18px)}
.cs-usermenu-dropdown::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#16b8a6,#9f6248,#5c527f);pointer-events:none}
@keyframes csMenuIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.cs-usermenu-head{display:flex;align-items:center;gap:16px;padding:24px 22px 18px;background:radial-gradient(circle at 18% 12%,rgba(22,184,166,.14),transparent 34%),linear-gradient(160deg,#fbfefe 0%,#f4faf8 100%);border-bottom:1px solid rgba(207,226,222,.9)}
.cs-usermenu-headinfo{min-width:0;flex:1}
.cs-usermenu-headinfo strong{display:block;font-size:1.02rem;font-weight:900;color:#102f35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-usermenu-headinfo small{display:block;font-size:.82rem;color:#64757a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.cs-usermenu-plan{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:4px 12px;border-radius:999px;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;background:#e8f0ef;color:#123f45;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.cs-usermenu-plan::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.cs-usermenu-plan.professional{background:#e8f5ee;color:#2e7952}
.cs-usermenu-plan.institution{background:#ede8f5;color:#5c527f}
.cs-usermenu-plan.owner{background:#fff5e8;color:#9f6248}

.cs-usermenu-links{display:grid;gap:7px;padding:12px}
.cs-usermenu-link{display:flex;align-items:center;gap:13px;width:100%;padding:12px 13px;border-radius:14px;border:1px solid transparent;background:transparent;color:#1f3337;font-size:.92rem;font-weight:760;cursor:pointer;text-decoration:none;transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;font-family:inherit;text-align:left}
.cs-usermenu-link:hover,.cs-usermenu-link:focus-visible{background:linear-gradient(135deg,#f6fbfa,#ffffff);border-color:rgba(10,106,103,.14);box-shadow:0 10px 24px rgba(16,50,56,.08);outline:none;transform:translateX(2px)}
.cs-usermenu-link span{width:34px;height:34px;border-radius:12px;background:linear-gradient(145deg,#f2f8f6,#ffffff);box-shadow:inset 0 0 0 1px rgba(10,106,103,.08),0 8px 18px rgba(16,50,56,.07);font-size:0;text-align:center;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:#0a6a67}
.cs-usermenu-link span::before{font-size:.82rem;font-weight:900;letter-spacing:0;color:currentColor}
.cs-usermenu-links .cs-usermenu-link:nth-child(1) span::before{content:"ID"}
.cs-usermenu-links .cs-usermenu-link:nth-child(2) span::before{content:"?"}
.cs-usermenu-links .cs-usermenu-link:nth-child(3) span::before{content:"A"}
.cs-usermenu-links .cs-usermenu-link:nth-child(4) span::before{content:"S"}
.cs-usermenu-foot{padding:12px;border-top:1px solid rgba(207,226,222,.9);background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(250,246,244,.75))}
.cs-usermenu-logout{display:flex;align-items:center;gap:13px;width:100%;padding:12px 13px;border-radius:14px;border:1px solid transparent;background:transparent;color:#9d3b3b;font-size:.92rem;font-weight:820;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;font-family:inherit;text-align:left}
.cs-usermenu-logout:hover,.cs-usermenu-logout:focus-visible{background:linear-gradient(135deg,#fff7f5,#ffffff);border-color:rgba(162,61,61,.16);box-shadow:0 10px 24px rgba(162,61,61,.08);outline:none;transform:translateX(2px)}
.cs-usermenu-logout span{width:34px;height:34px;border-radius:12px;background:linear-gradient(145deg,#fff1ec,#ffffff);box-shadow:inset 0 0 0 1px rgba(162,61,61,.1),0 8px 18px rgba(162,61,61,.08);font-size:0;text-align:center;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:#a23d3d}
.cs-usermenu-logout span::before{content:"OUT";font-size:.68rem;font-weight:900;letter-spacing:0;color:currentColor}

@media(max-width:640px){
  .cs-usermenu-name{display:none}
  .cs-usermenu-dropdown{
    left:0;
    right:auto;
    width:min(320px,calc(100vw - 32px));
    max-height:calc(100vh - 170px);
  }
}

/* =========================================================
   CORE SPECTRUM PREMIUM APP SHELL
   Visual skin only: existing HTML ids, JS bindings and API flows are untouched.
   ========================================================= */

:root{
  --premium-bg:#050b0d;
  --premium-bg-2:#081315;
  --premium-panel:#0d1d20;
  --premium-panel-2:#10272a;
  --premium-line:rgba(106, 202, 188, .18);
  --premium-line-strong:rgba(48, 222, 201, .36);
  --premium-text:#f3f8f7;
  --premium-muted:#9fb2b3;
  --premium-dim:#718587;
  --premium-teal:#25d6c1;
  --premium-teal-2:#0b8f83;
  --premium-sage:#9ec79c;
  --premium-gold:#e6c576;
  --premium-danger:#ffb2a5;
  --premium-shadow:0 26px 70px rgba(0,0,0,.36);
}

body{
  background:
    radial-gradient(circle at 78% 8%, rgba(18,118,104,.42), transparent 34%),
    radial-gradient(circle at 18% 0%, rgba(37,214,193,.13), transparent 24%),
    linear-gradient(180deg,#061113 0%,#071012 48%,#050b0d 100%);
  color:var(--premium-text);
}

body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.72), transparent 82%);
  z-index:-1;
}

.topbar{
  align-items:flex-start;
  background:
    radial-gradient(circle at 16% 18%, rgba(37,214,193,.18), transparent 28%),
    linear-gradient(135deg, rgba(11,36,39,.96), rgba(8,23,26,.94));
  border-bottom:1px solid rgba(106,202,188,.18);
  box-shadow:0 24px 80px rgba(0,0,0,.34);
  gap:26px;
  min-height:168px;
  overflow:visible;
  padding:30px clamp(18px,4vw,54px);
}

.brand-block{
  max-width:760px;
  padding-left:22px;
  position:relative;
}

.brand-block::before{
  background:linear-gradient(180deg,var(--premium-gold),var(--premium-teal));
  border-radius:999px;
  bottom:8px;
  content:"";
  left:0;
  position:absolute;
  top:8px;
  width:5px;
  box-shadow:0 0 24px rgba(37,214,193,.28);
}

.topbar h1{
  color:#fff;
  font-size:clamp(2.15rem,5.6vw,4.55rem);
  font-weight:930;
  line-height:.96;
  text-transform:uppercase;
}

.brand-subtitle{
  color:#f1d99b;
  font-size:clamp(1rem,1.6vw,1.35rem);
  font-weight:900;
  line-height:1.25;
  margin:14px 0 0;
}

.brand-tagline{
  color:#d3e0df;
  font-size:clamp(.95rem,1.35vw,1.14rem);
  font-weight:680;
  line-height:1.52;
  margin:14px 0 0;
  max-width:900px;
}

.topbar-actions{
  align-items:center;
  align-self:center;
  justify-content:flex-end;
  max-width:760px;
}

.topbar-page-links a{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(214,240,236,.18);
  color:#e8f7f5;
  min-height:42px;
  padding:0 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.topbar-page-links a:hover,
.topbar-page-links a:focus-visible{
  background:#f5fffd;
  border-color:rgba(37,214,193,.78);
  color:#092628;
  box-shadow:0 12px 28px rgba(0,0,0,.2);
}

.language-switch{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(214,240,236,.18);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.language-pill{
  color:#dcefed;
  min-height:42px;
  padding:0 15px;
}

.language-pill.is-active{
  background:#f5fffd;
  color:#092628;
}

.icon-button{
  background:#f5fffd;
  border:1px solid rgba(255,255,255,.72);
  border-radius:12px;
  color:#0a3133;
  height:42px;
  min-width:42px;
  box-shadow:0 14px 30px rgba(0,0,0,.2);
}

.app-shell{
  align-items:start;
  display:grid;
  gap:28px;
  grid-template-columns:minmax(280px,350px) minmax(0,1fr);
  max-width:1760px;
  padding:28px clamp(14px,3vw,44px) 48px;
}

.case-sidebar{
  gap:16px;
  top:22px;
}

.sidebar-section{
  background:linear-gradient(180deg, rgba(15,34,37,.94), rgba(9,22,24,.94));
  border:1px solid var(--premium-line);
  border-radius:18px;
  box-shadow:var(--premium-shadow);
  color:var(--premium-text);
  overflow:hidden;
  padding:20px;
}

.sidebar-section h2{
  color:#f7fffd;
  font-size:1.02rem;
  font-weight:900;
}

.sidebar-section .microcopy,
.sidebar-section p,
.sidebar-section small{
  color:var(--premium-muted);
}

.case-list{
  gap:10px;
  max-height:520px;
}

.case-item{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(214,240,236,.13);
  border-radius:14px;
  color:var(--premium-text);
  padding:15px;
  box-shadow:none;
}

.case-item strong{
  color:#f8fffd;
}

.case-item span,
.case-item small{
  color:var(--premium-muted);
}

.case-item:hover{
  background:rgba(37,214,193,.08);
  border-color:rgba(37,214,193,.32);
  box-shadow:0 16px 34px rgba(0,0,0,.24);
}

.case-item.is-active{
  background:linear-gradient(135deg, rgba(37,214,193,.16), rgba(230,197,118,.06));
  border-color:rgba(37,214,193,.48);
  box-shadow:0 0 0 1px rgba(37,214,193,.12),0 18px 40px rgba(0,0,0,.26);
}

.workspace{
  background:linear-gradient(180deg, rgba(14,30,33,.92), rgba(8,18,20,.96));
  border:1px solid var(--premium-line);
  border-radius:22px;
  box-shadow:var(--premium-shadow);
  color:var(--premium-text);
  overflow:hidden;
}

.case-strip{
  background:
    radial-gradient(circle at 82% 10%, rgba(37,214,193,.14), transparent 28%),
    linear-gradient(180deg, rgba(17,40,43,.98), rgba(11,25,28,.94));
  border-bottom:1px solid rgba(106,202,188,.18);
  padding:26px 30px;
}

.case-strip h2{
  color:#fff;
  font-size:clamp(1.5rem,2.2vw,2.15rem);
  font-weight:920;
}

.case-strip .eyebrow,
.eyebrow.dark{
  color:var(--premium-teal);
}

.meta-pills span,
.pill,
.plan-kicker{
  background:rgba(37,214,193,.1);
  border:1px solid rgba(37,214,193,.2);
  color:#d8f6f1;
}

.tabs{
  background:rgba(6,14,16,.74);
  border-bottom:1px solid rgba(106,202,188,.16);
  gap:10px;
  padding:16px;
}

.tab{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(214,240,236,.12);
  border-radius:14px;
  color:#c2d3d2;
  min-height:58px;
  box-shadow:none;
}

.tab:hover{
  background:rgba(37,214,193,.09);
  border-color:rgba(37,214,193,.34);
  color:#f4fffd;
  box-shadow:0 16px 32px rgba(0,0,0,.22);
}

.tab.is-active{
  background:linear-gradient(135deg, rgba(37,214,193,.18), rgba(230,197,118,.08));
  border-color:rgba(37,214,193,.46);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 36px rgba(0,0,0,.25);
}

.tab.is-active::after{
  background:linear-gradient(90deg,var(--premium-teal),var(--premium-gold));
  border-radius:999px;
  bottom:7px;
}

.group-overview,
.tab-panel{
  background:transparent;
  color:var(--premium-text);
}

.group-overview{
  border-bottom:1px solid rgba(106,202,188,.14);
}

.section-head{
  border-bottom:1px solid rgba(106,202,188,.16);
}

.section-head h2,
.group-overview-head h2,
.panel-block h3,
.section-subhead h3,
.method-card h3,
.exercise-card h4,
.library-card h4{
  color:#f7fffd;
}

.section-head p,
.group-overview-head span,
.panel-block p,
.method-card p,
.exercise-card p,
.library-card p,
.library-source-card p,
.microcopy,
.helper{
  color:var(--premium-muted);
}

.metric-card,
.stack-item,
.session-item,
.avoid-item,
.method-card,
.criteria-card,
.group-module-card,
.panel-block,
.premium-panel,
.exercise-card,
.library-card,
.library-source-card,
.advisor-section,
.goal-card,
.session-export-tools,
.free-preview-list-lock{
  background:linear-gradient(180deg, rgba(18,38,41,.9), rgba(11,25,28,.92));
  border:1px solid rgba(106,202,188,.16);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  color:var(--premium-text);
}

.metric-card::before,
.method-card::before,
.criteria-card::before,
.group-module-card::before{
  background:linear-gradient(90deg,var(--premium-teal),var(--premium-sage),var(--premium-gold));
  height:4px;
}

.metric-card:hover,
.stack-item:hover,
.session-item:hover,
.avoid-item:hover,
.method-card:hover,
.criteria-card:hover,
.group-module-card:hover,
.exercise-card:hover,
.library-card:hover,
.library-source-card:hover{
  border-color:rgba(37,214,193,.36);
  box-shadow:0 24px 56px rgba(0,0,0,.3);
}

.primary-button,
.small-button{
  background:linear-gradient(135deg,var(--premium-teal-2),var(--premium-teal));
  border:1px solid rgba(145,255,240,.28);
  color:#052224;
  box-shadow:0 16px 34px rgba(37,214,193,.18);
}

.primary-button:hover,
.small-button:hover{
  filter:saturate(1.08) brightness(1.04);
  transform:translateY(-1px);
}

.secondary-button,
label.secondary-button{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(214,240,236,.16);
  color:#e3f2f0;
  box-shadow:none;
}

.secondary-button:hover,
label.secondary-button:hover{
  background:rgba(37,214,193,.1);
  border-color:rgba(37,214,193,.34);
  color:#fff;
}

.danger-button{
  background:rgba(255,178,165,.12);
  border:1px solid rgba(255,178,165,.22);
  color:var(--premium-danger);
}

.app-shell input,
.app-shell select,
.app-shell textarea{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(214,240,236,.14);
  color:#f4fbfa;
}

.app-shell input::placeholder,
.app-shell textarea::placeholder{
  color:#7f9496;
}

.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus{
  border-color:rgba(37,214,193,.55);
  box-shadow:0 0 0 3px rgba(37,214,193,.14);
}

.signature-footer{
  background:linear-gradient(180deg, rgba(5,11,13,.92), rgba(3,8,10,.98));
  color:var(--premium-muted);
}

.signature-footer__brand,
.signature-footer a{
  color:#dff8f4;
}

::-webkit-scrollbar-track{
  background:#071114;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#25d6c1,#0b6f68);
  border-color:#071114;
}

@media(max-width:980px){
  .topbar{
    min-height:auto;
  }

  .app-shell{
    grid-template-columns:1fr;
  }

  .case-sidebar{
    position:static;
  }
}

@media(max-width:680px){
  .topbar{
    padding:24px 18px;
  }

  .brand-block{
    padding-left:16px;
  }

  .topbar h1{
    font-size:clamp(2.45rem,13vw,4rem);
  }

  .topbar-actions{
    justify-content:flex-start;
    width:100%;
  }

  .topbar-page-links{
    width:100%;
  }

  .app-shell{
    padding:18px 12px 34px;
  }

  .workspace,
  .sidebar-section{
    border-radius:18px;
  }

  .case-strip,
  .tab-panel,
  .group-overview{
    padding:20px;
  }
}

.app-shell a{
  color:#65f4df;
  text-decoration-color:rgba(101,244,223,.42);
  text-underline-offset:3px;
}

.app-shell a:hover,
.app-shell a:focus-visible{
  color:#fff4c7;
  text-decoration-color:#fff4c7;
}

.app-shell li::marker{
  color:rgba(167,206,200,.9);
}

/* Premium contrast normalization — sidebar links, planning lab hero, advisor controls */
.source-panel ul{
  display:grid;
  gap:10px;
  margin-bottom:0;
}

.source-panel a{
  color:#65f4df;
  font-weight:760;
}

.source-panel a:visited{
  color:#9ee9dc;
}

.app-shell label,
.checkbox-line span,
.compact-label{
  color:#edf8f6;
}

.app-shell label{
  font-weight:860;
}

.app-shell select option{
  background:#0c2023;
  color:#f4fbfa;
}

.app-shell input[type="checkbox"]{
  accent-color:var(--premium-teal);
}

.advisor-control,
.advisor-result,
.pia-form,
.pia-goals,
.pia-preview,
.api-settings,
.advisor-help,
.advisor-section,
.pricing-card,
.planning-lab-hero,
.planning-lab-decision article,
.planning-lab-card,
.session-flow-order-list article,
.clean-details,
.session-flow-order-panel,
.session-flow-detail-panel{
  background:linear-gradient(180deg, rgba(17,39,42,.94), rgba(9,22,24,.96));
  border:1px solid rgba(106,202,188,.18);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  color:var(--premium-text);
}

.advisor-control h3,
.advisor-result h3,
.api-settings h3,
.pia-preview h3,
.pricing-card h3,
.planning-lab-hero h3,
.planning-lab-decision h4,
.planning-lab-card-head h3,
.session-flow-order-list strong,
.clean-details summary,
.advisor-section h3{
  color:#f7fffd;
}

.advisor-help,
.advisor-help span,
.advisor-section li,
.pricing-card p,
.pricing-card li,
.planning-lab-hero p,
.planning-lab-card-head p,
.planning-lab-decision li,
.session-flow-order-list small,
.clean-details p,
.clean-details li,
.premium-list li{
  color:var(--premium-muted);
}

.advisor-help code{
  background:#061113;
  border:1px solid rgba(106,202,188,.18);
  color:#dffbf6;
}

.advisor-status{
  background:rgba(230,197,118,.12);
  border-color:rgba(230,197,118,.34);
  color:#ffe2a0;
}

.advisor-status.ok{
  background:rgba(37,214,193,.12);
  border-color:rgba(37,214,193,.32);
  color:#9ff8e9;
}

.advisor-status.error{
  background:rgba(255,114,104,.13);
  border-color:rgba(255,178,165,.38);
  color:#ffd1c8;
}

.advisor-section--emergency{
  background:linear-gradient(180deg, rgba(77,45,16,.72), rgba(34,22,13,.92));
  border-color:rgba(230,197,118,.42);
  border-left-color:var(--premium-gold);
}

.advisor-section--emergency h3{
  color:#ffe8a8;
}

.clean-details summary{
  background:rgba(255,255,255,.04);
  border-radius:12px;
}

.clean-details[open] summary{
  border-bottom-color:rgba(106,202,188,.16);
}

.session-flow-order-list article{
  grid-template-columns:48px minmax(0,1fr);
}

.session-flow-order-list span,
.planning-lab-number{
  background:linear-gradient(145deg,var(--premium-teal-2),var(--premium-teal));
  color:#052224;
  box-shadow:0 10px 22px rgba(37,214,193,.18);
}

.planning-fit-score{
  background:linear-gradient(145deg,#2d8657,#58c78a);
  color:#042015;
}

.planning-lab-focus{
  background:rgba(37,214,193,.1);
  border-color:rgba(37,214,193,.25);
}

.planning-lab-focus span,
.planning-lab-focus small{
  color:var(--premium-muted);
}

.planning-lab-focus strong{
  color:#f7fffd;
}

.today-timeline > *,
.premium-list > *,
.exercise-mini-grid > *,
.method-tags span,
.risk-list li,
.library-pill,
.stat-card,
.report-block,
.criteria-group,
.icd-card{
  background:rgba(255,255,255,.045);
  border-color:rgba(106,202,188,.15);
  color:var(--premium-text);
}

.today-timeline strong,
.premium-list strong,
.exercise-mini-grid strong,
.stat-card strong,
.report-block h3,
.criteria-group h3,
.icd-card h3{
  color:#f7fffd;
}

.today-timeline span,
.today-timeline p,
.exercise-mini-grid p,
.stat-card span,
.report-block p,
.criteria-group p,
.icd-card p{
  color:var(--premium-muted);
}

.session-export-tools{
  border-left-color:var(--premium-teal);
}

.session-export-tools .secondary-button{
  background:#f5fffd;
  border-color:rgba(255,255,255,.72);
  color:#0a3133;
}

.app-shell .empty-state{
  color:#b8c9c9;
}

.app-shell hr{
  border-color:rgba(106,202,188,.16);
}

html,
body{
  background:#070d0f !important;
}

html::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 8%, rgba(18,118,104,.42), transparent 34%),
    radial-gradient(circle at 18% 0%, rgba(37,214,193,.13), transparent 24%),
    linear-gradient(180deg,#061113 0%,#071012 48%,#050b0d 100%);
}

body{
  min-height:100vh;
}

body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) !important;
  background-size:64px 64px !important;
  opacity:.48;
}

.app-shell,
.workspace,
.active-panel-stage,
.workspace[data-active-group="planning"] .active-panel-stage,
.workspace[data-active-group="planning"] #tab-methods,
.workspace[data-active-group="planning"] #tab-exercise{
  background:transparent !important;
}

.workspace{
  background:
    linear-gradient(165deg, rgba(15,29,32,.92), rgba(7,13,15,.96)) !important;
}

.tab-panel,
.group-overview{
  background:
    linear-gradient(180deg, rgba(9,19,21,.72), rgba(7,13,15,.7)) !important;
}

.app-shell :is(
  .sidebar-section,
  .case-strip,
  .premium-panel,
  .panel-block,
  .metric-card,
  .stack-item,
  .session-item,
  .avoid-item,
  .method-card,
  .criteria-card,
  .group-module-card,
  .exercise-card,
  .library-card,
  .library-source-card,
  .advisor-control,
  .advisor-result,
  .advisor-section,
  .goal-card,
  .pia-form,
  .pia-goals,
  .pia-preview,
  .api-settings,
  .advisor-help,
  .pricing-card,
  .planning-lab-hero,
  .planning-lab-decision article,
  .planning-lab-card,
  .planning-lab-focus,
  .session-flow-order-panel,
  .session-flow-detail-panel,
  .session-flow-order-list article,
  .clean-details,
  .session-export-tools,
  .free-preview-list-lock,
  .collaboration-access-banner,
  .subscription-intro-card,
  .security-premium-card,
  .knowledge-alert,
  .knowledge-columns > div
){
  background:
    linear-gradient(160deg, rgba(16,31,34,.96), rgba(8,17,19,.97)) !important;
  border-color:rgba(106,202,188,.18) !important;
  color:#eef5f3 !important;
}

.app-shell :is(
  .today-timeline > *,
  .premium-list > *,
  .exercise-mini-grid > *,
  .method-tags span,
  .risk-list li,
  .library-pill,
  .stat-card,
  .report-block,
  .criteria-group,
  .icd-card,
  .intervention-method-ranked,
  .intervention-idea-section,
  .planning-lab-grid .clean-details,
  .exercise-domain-section,
  .exercise-card-grid > *,
  .team-member-card,
  .collab-member-card,
  .core-admin-user-card,
  .timeline-item
){
  background:rgba(255,255,255,.045) !important;
  border-color:rgba(106,202,188,.15) !important;
  color:#eef5f3 !important;
}

.app-shell :is(
  h1,h2,h3,h4,
  strong,
  .section-subhead h3,
  .panel-block h3,
  .method-card h3,
  .exercise-card h4,
  .library-card h4,
  .criteria-group h3,
  .icd-card h3,
  .report-block h3,
  .planning-lab-card-head h3,
  .session-flow-order-list strong
){
  color:#f7fffd !important;
}

.app-shell :is(
  p,
  small,
  span,
  li,
  .microcopy,
  .helper,
  .empty-state,
  .panel-block p,
  .method-card p,
  .exercise-card p,
  .library-card p,
  .library-source-card p,
  .planning-lab-card-head p,
  .clean-details p,
  .clean-details li,
  .session-flow-order-list small
){
  color:#aebdba;
}

.app-shell :is(label,.compact-label,.checkbox-line span){
  color:#eef5f3 !important;
}

/* Final onboarding-style normalization — prevents white panels inside the dark app shell */
.app-shell :is(input,select,textarea){
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(214,240,236,.16) !important;
  color:#f7fffd !important;
}

.app-shell :is(input,textarea)::placeholder{
  color:#7d908c !important;
  opacity:1;
}

.app-shell :is(input,select,textarea):focus{
  border-color:rgba(37,214,193,.58) !important;
  box-shadow:0 0 0 3px rgba(37,214,193,.14) !important;
}

.app-shell :is(.primary-button,.small-button){
  background:linear-gradient(120deg,#19b8a6,#0a6a67) !important;
  border-color:rgba(145,255,240,.28) !important;
  color:#04201d !important;
}

.app-shell :is(.secondary-button,label.secondary-button,.icon-button){
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(214,240,236,.16) !important;
  color:#e8f7f5 !important;
}

.app-shell :is(.secondary-button,label.secondary-button,.icon-button):hover{
  background:rgba(25,184,166,.12) !important;
  border-color:rgba(25,184,166,.34) !important;
  color:#fff !important;
}

.app-shell .session-export-tools .secondary-button{
  background:#f5fffd !important;
  border-color:rgba(255,255,255,.72) !important;
  color:#0a3133 !important;
}

.app-shell a{
  color:#65f4df !important;
}

.app-shell a:visited{
  color:#9ee9dc !important;
}

.app-shell a:hover,
.app-shell a:focus-visible{
  color:#fff4c7 !important;
}

.app-shell :is(.advisor-status,.notice,.status-message){
  background:rgba(230,197,118,.12) !important;
  border-color:rgba(230,197,118,.34) !important;
  color:#ffe2a0 !important;
}

.app-shell :is(.advisor-status.error,.microcopy.is-error,.error){
  background:rgba(255,114,104,.13) !important;
  border-color:rgba(255,178,165,.38) !important;
  color:#ffd1c8 !important;
}

.app-shell :is(.advisor-status.ok,.microcopy.is-success,.success){
  background:rgba(37,214,193,.12) !important;
  border-color:rgba(37,214,193,.32) !important;
  color:#9ff8e9 !important;
}

.app-shell .white-card,
.app-shell [class*="white"],
.app-shell [class*="light-card"]{
  background:linear-gradient(160deg, rgba(16,31,34,.96), rgba(8,17,19,.97)) !important;
  color:#eef5f3 !important;
}

.app-shell hr,
.app-shell .section-head,
.app-shell .planning-lab-card-head,
.app-shell .clean-details[open] summary{
  border-color:rgba(106,202,188,.16) !important;
}

/* ── Knowledge-alert cards: dark-theme contrast fix ──────────────────────
   .knowledge-alert titles were rendered with var(--brand-2) (dark teal) on
   a light cream background while the rest of the app is dark — making them
   nearly invisible. Now that the card itself uses the dark premium surface
   (added above), give the title a clear teal accent + ensure body text is
   legible light gray, both with !important to beat the generic dark-mode
   text rules safely. ── */
.app-shell .knowledge-alert strong,
.app-shell .knowledge-columns strong {
  color: #5be8d4 !important;
  font-family: var(--font-head);
  letter-spacing: 0.01em;
  font-size: 0.86rem;
  text-transform: none;
}
.app-shell .knowledge-alert span {
  color: #d7ece8 !important;
  font-weight: 600 !important;
}
.app-shell .knowledge-columns li {
  color: #aebdba !important;
}

:root{

  --cw-bg:        #f4f6fb;
  --cw-bg-2:      #eef1f8;
  --cw-surface:   #ffffff;
  --cw-surface-2: #f8f9fd;
  --cw-surface-3: #eef0f7;


  --cw-ink:       #1b2240;
  --cw-ink-soft:  #424a68;
  --cw-muted:     #6b7290;
  --cw-line:      #e2e6f2;
  --cw-line-soft: #edeff7;


  --cw-indigo:     #4338ca;
  --cw-indigo-2:   #312e81;
  --cw-blue:       #2563eb;
  --cw-emerald:    #059669;
  --cw-emerald-wash:#e6f6ef;


  --cw-amber:      #d97706;
  --cw-amber-wash: #fdf3e2;
  --cw-danger:     #dc2626;
  --cw-danger-wash:#fdeceb;
  --cw-info:       #2563eb;
  --cw-info-wash:  #eaf1fd;
  --cw-indigo-wash:#eef0fd;


  --cw-radius-xl: 18px;
  --cw-radius-lg: 12px;
  --cw-radius-md: 9px;
  --cw-radius-sm: 7px;

  --cw-shadow-xs: 0 1px 2px rgba(27, 34, 64, 0.04);
  --cw-shadow-sm: 0 2px 8px rgba(27, 34, 64, 0.05), 0 1px 2px rgba(27,34,64,.04);
  --cw-shadow:    0 10px 30px rgba(27, 34, 64, 0.07), 0 2px 6px rgba(27,34,64,.04);
  --cw-shadow-lg: 0 24px 56px rgba(27, 34, 64, 0.12), 0 6px 16px rgba(27,34,64,.05);
  --cw-ring:      0 0 0 3px rgba(67, 56, 202, 0.14);

  --cw-ease: cubic-bezier(.4,0,.2,1);
  --cw-ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── Page background: neutralize dark shell, restore clinical white ───── */
html, body{
  background: var(--cw-bg) !important;
}
html::before{

  background:
    radial-gradient(900px 480px at 100% -8%, rgba(67,56,202,.05), transparent 60%),
    radial-gradient(800px 460px at -8% 108%, rgba(5,150,105,.045), transparent 60%),
    var(--cw-bg) !important;
}
body{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before{

  background-image:
    linear-gradient(rgba(27,34,64,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,34,64,.02) 1px, transparent 1px) !important;
  opacity: .6;
}

/* ── Typography ──────────────────────────────────────────────────────── */
h1,h2,h3,h4,
.topbar h1,
.panel-block h3,
.section-head h2,
.case-strip h2{
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--cw-ink);
}
.eyebrow,
.eyebrow.dark{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 800;
  color: var(--cw-indigo);
}

.topbar{
  background:
    radial-gradient(600px 200px at 85% 0%, rgba(37,99,235,.35), transparent 60%),
    linear-gradient(135deg, var(--cw-indigo-2) 0%, #3730a3 55%, var(--cw-indigo) 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 12px 32px rgba(49,46,129,.18) !important;
}
.brand-block::before{
  background: linear-gradient(180deg, var(--cw-emerald), var(--cw-blue)) !important;
  box-shadow: 0 0 20px rgba(37,99,235,.3) !important;
}
.topbar h1{
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}
.brand-subtitle{ color: rgba(238,241,255,.86) !important; font-weight: 600; }
.brand-tagline{ color: rgba(214,221,255,.62) !important; }

.topbar-page-links a{
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: .82rem;
  color: rgba(238,241,255,.82) !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  transition: all .2s var(--cw-ease);
}
.topbar-page-links a:hover,
.topbar-page-links a:focus-visible{
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.language-switch{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.language-pill{
  color: rgba(238,241,255,.75) !important;
}
.language-pill.is-active{
  background: linear-gradient(120deg, var(--cw-emerald), var(--cw-blue)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.35) !important;
}

.topbar .icon-button{
  background: rgba(255,255,255,.1) !important;
  color: #eef1ff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.topbar .icon-button:hover{
  background: rgba(255,255,255,.2) !important;
  transform: translateY(-1px);
}
.cs-usermenu-trigger{
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
}
.cs-usermenu-trigger:hover,
.cs-usermenu-trigger[aria-expanded="true"]{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.28) !important;
}
.cs-usermenu-name{ color:#fff !important; }
.cs-usermenu-caret{ color:#dbe3ff !important; }

/* ── App-shell cards: clinical white enterprise ────────────────────────
   Inverts the dark-shell card backgrounds to crisp white surfaces with
   soft indigo-tinted borders and subtle elevation. */
.app-shell :is(
  .sidebar-section,
  .case-strip,
  .premium-panel,
  .panel-block,
  .metric-card,
  .stack-item,
  .session-item,
  .avoid-item,
  .method-card,
  .criteria-card,
  .group-module-card,
  .exercise-card,
  .library-card,
  .library-source-card,
  .advisor-control,
  .advisor-result,
  .advisor-section,
  .goal-card,
  .pia-form,
  .pia-goals,
  .pia-preview,
  .api-settings,
  .advisor-help,
  .pricing-card,
  .planning-lab-hero,
  .planning-lab-decision article,
  .planning-lab-card,
  .planning-lab-focus,
  .session-flow-order-panel,
  .session-flow-detail-panel,
  .session-flow-order-list article,
  .clean-details,
  .session-export-tools,
  .free-preview-list-lock,
  .collaboration-access-banner,
  .subscription-intro-card,
  .security-premium-card,
  .knowledge-alert,
  .knowledge-columns > div
){
  background: var(--cw-surface) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius-xl) !important;
  box-shadow: var(--cw-shadow-sm) !important;
  color: var(--cw-ink) !important;
  transition: box-shadow .22s var(--cw-ease), border-color .22s var(--cw-ease), transform .22s var(--cw-ease);
}
.app-shell :is(
  .sidebar-section,
  .panel-block,
  .metric-card,
  .stack-item,
  .session-item,
  .method-card,
  .exercise-card,
  .library-card,
  .goal-card,
  .knowledge-alert,
  .knowledge-columns > div
):hover{
  border-color:#d7ddf5 !important;
  box-shadow: var(--cw-shadow) !important;
}

.app-shell :is(
  .today-timeline > *,
  .premium-list > *,
  .exercise-mini-grid > *,
  .method-tags span,
  .risk-list li,
  .library-pill,
  .stat-card,
  .report-block,
  .criteria-group,
  .icd-card,
  .intervention-method-ranked,
  .intervention-idea-section,
  .planning-lab-grid .clean-details,
  .exercise-domain-section,
  .exercise-card-grid > *,
  .team-member-card,
  .collab-member-card,
  .core-admin-user-card,
  .timeline-item
){
  background: var(--cw-surface-2) !important;
  border-color: var(--cw-line-soft) !important;
  color: var(--cw-ink) !important;
}

.app-shell :is(
  h1,h2,h3,h4,
  strong,
  .section-subhead h3,
  .panel-block h3,
  .method-card h3,
  .exercise-card h4,
  .library-card h4,
  .criteria-group h3,
  .icd-card h3,
  .report-block h3,
  .planning-lab-card-head h3,
  .session-flow-order-list strong
){
  color: var(--cw-ink) !important;
}

.app-shell :is(
  p,
  small,
  span,
  li,
  .microcopy,
  .helper,
  .empty-state,
  .panel-block p,
  .method-card p,
  .exercise-card p,
  .library-card p,
  .library-source-card p,
  .planning-lab-card-head p,
  .clean-details p,
  .clean-details li,
  .session-flow-order-list small
){
  color: var(--cw-muted) !important;
}

.app-shell .knowledge-alert strong,
.app-shell .knowledge-columns strong{
  color: var(--cw-indigo) !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  font-size: .86rem;
  text-transform: none;
}
.app-shell .knowledge-alert span{
  color: var(--cw-ink-soft) !important;
  font-weight: 600 !important;
}
.app-shell .knowledge-columns li{
  color: var(--cw-muted) !important;
}

/* ── Forms, buttons, links, status badges: clinical white enterprise ──── */
.app-shell :is(label,.compact-label,.checkbox-line span){
  color: var(--cw-ink-soft) !important;
  font-weight: 700;
}

.app-shell :is(input,select,textarea){
  background: var(--cw-surface) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius-md) !important;
  color: var(--cw-ink) !important;
}
.app-shell :is(input,textarea)::placeholder{
  color: #9aa1c0 !important;
  opacity: 1;
}
.app-shell :is(input,select,textarea):focus{
  border-color: var(--cw-indigo) !important;
  box-shadow: var(--cw-ring) !important;
  outline: none;
}

.app-shell :is(.primary-button,.small-button){
  background: linear-gradient(120deg, var(--cw-indigo) 0%, var(--cw-blue) 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(67,56,202,.28) !important;
  border-radius: var(--cw-radius-sm) !important;
  font-weight: 700;
  transition: all .2s var(--cw-ease);
}
.app-shell :is(.primary-button,.small-button):hover{
  transform: translateY(-1.5px);
  box-shadow: 0 10px 26px rgba(67,56,202,.38) !important;
}
.app-shell :is(.primary-button,.small-button):active{ transform: translateY(0); }

.app-shell :is(.secondary-button,label.secondary-button,.icon-button){
  background: var(--cw-surface) !important;
  border: 1px solid var(--cw-line) !important;
  color: var(--cw-ink-soft) !important;
  border-radius: var(--cw-radius-sm) !important;
  box-shadow: var(--cw-shadow-xs) !important;
  transition: all .2s var(--cw-ease);
}
.app-shell :is(.secondary-button,label.secondary-button,.icon-button):hover{
  background: var(--cw-indigo-wash) !important;
  border-color: #ccd2f7 !important;
  color: var(--cw-indigo) !important;
  transform: translateY(-1px);
}

.app-shell .session-export-tools .secondary-button{
  background: var(--cw-emerald-wash) !important;
  border-color: #bfe6d6 !important;
  color: var(--cw-emerald) !important;
}

.app-shell a{ color: var(--cw-blue) !important; }
.app-shell a:visited{ color: var(--cw-indigo) !important; }
.app-shell a:hover,
.app-shell a:focus-visible{ color: var(--cw-indigo-2) !important; text-decoration: underline; }

.app-shell :is(.advisor-status,.notice,.status-message){
  background: var(--cw-amber-wash) !important;
  border: 1px solid #f3dcb0 !important;
  color: #8a5a0a !important;
  border-radius: var(--cw-radius-md) !important;
}
.app-shell :is(.advisor-status.error,.microcopy.is-error,.error){
  background: var(--cw-danger-wash) !important;
  border-color: #f6c6c3 !important;
  color: #a52a23 !important;
}
.app-shell :is(.advisor-status.ok,.microcopy.is-success,.success){
  background: var(--cw-emerald-wash) !important;
  border-color: #bfe6d6 !important;
  color: #0a6f50 !important;
}

.app-shell .white-card,
.app-shell [class*="white"],
.app-shell [class*="light-card"]{
  background: var(--cw-surface) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius-lg) !important;
  color: var(--cw-ink) !important;
}

.app-shell hr,
.app-shell .section-head,
.app-shell .planning-lab-card-head,
.app-shell .clean-details[open] summary{
  border-color: var(--cw-line) !important;
}

/* ── Tabs: clean indigo active state, white inactive ───────────────────── */
.tabs{
  background: var(--cw-surface-2) !important;
  border-bottom: 1px solid var(--cw-line) !important;
}
.tab{
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--cw-muted) !important;
  font-weight: 700;
  border-radius: var(--cw-radius-md) !important;
  transition: all .2s var(--cw-ease);
}
.tab:hover{
  background: var(--cw-surface) !important;
  color: var(--cw-indigo) !important;
  box-shadow: var(--cw-shadow-xs) !important;
}
.tab.is-active{
  background: var(--cw-surface) !important;
  border-color: #d7ddf5 !important;
  color: var(--cw-indigo) !important;
  box-shadow: var(--cw-shadow-sm) !important;
}
.tab.is-active::after{
  content:"";
  position:absolute;
  left:50%; bottom:-1px;
  transform: translateX(-50%);
  width: 28px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cw-emerald), var(--cw-blue));
}

/* ── Case strip / workspace / sidebar / group-overview ─────────────────── */
.workspace{
  background: var(--cw-surface) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius-xl) !important;
  box-shadow: var(--cw-shadow) !important;
}
.case-strip{
  background: linear-gradient(120deg, var(--cw-surface-2), var(--cw-surface)) !important;
  border-bottom: 1px solid var(--cw-line) !important;
}
.case-strip h2{ color: var(--cw-ink) !important; }
.meta-pills > *, .meta-pills span{
  background: var(--cw-indigo-wash) !important;
  color: var(--cw-indigo) !important;
  border: 1px solid #d7ddf5 !important;
  border-radius: 999px;
  font-weight: 700;
}
.group-overview{
  background: linear-gradient(135deg, var(--cw-indigo-wash), var(--cw-emerald-wash)) !important;
  border-bottom: 1px solid var(--cw-line) !important;
}

.case-sidebar .sidebar-section h2{ color: var(--cw-ink) !important; }
.safety-note{
  border-left: 3px solid var(--cw-emerald) !important;
  background: linear-gradient(180deg, var(--cw-surface), var(--cw-emerald-wash)) !important;
}
.safety-note p{ color: var(--cw-ink-soft) !important; }

.score-card{
  background: linear-gradient(135deg, var(--cw-emerald-wash), #effaf4) !important;
  border: 1px solid #bfe6d6 !important;
  color: var(--cw-ink) !important;
}
.score-card span{ color: var(--cw-emerald) !important; }

/* ── Focus rings + accessibility ────────────────────────────────────────── */
.app-shell :focus-visible,
.app-shell button:focus-visible,
.app-shell a:focus-visible{
  outline: 2px solid var(--cw-indigo) !important;
  outline-offset: 2px;
}

/* ── Scrollbars: light theme ─────────────────────────────────────────────── */
.app-shell *{ scrollbar-width: thin; scrollbar-color: #d6dcf2 transparent; }
.app-shell *::-webkit-scrollbar{ width: 10px; height: 10px; }
.app-shell *::-webkit-scrollbar-thumb{
  background: #d6dcf2;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.app-shell *::-webkit-scrollbar-thumb:hover{ background: #b9c2ec; background-clip: padding-box; }

/* ── User menu dropdown: align accent with indigo/emerald system ─────────── */
.cs-usermenu-avatar{
  background: linear-gradient(145deg, var(--cw-emerald) 0%, var(--cw-blue) 100%) !important;
}
.cs-usermenu-dropdown{
  background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,249,253,.99) 100%) !important;
  border: 1px solid var(--cw-line) !important;
  box-shadow: var(--cw-shadow-lg) !important;
}
.cs-usermenu-link{ color: var(--cw-ink) !important; }
.cs-usermenu-link:hover{ background: var(--cw-indigo-wash) !important; color: var(--cw-indigo) !important; }
.cs-usermenu-logout{ color: var(--cw-danger) !important; }
.cs-usermenu-logout:hover{ background: var(--cw-danger-wash) !important; }

/* ── Panel entrance micro-interaction ──────────────────────────────────── */
.tab-panel.is-active{ animation: cwPanelIn .35s var(--cw-ease-out); }
@keyframes cwPanelIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

:root{

  --sg-sage:       #7fb69a;
  --sg-sage-deep:  #4f8c72;
  --sg-mint:       #a8d8c5;
  --sg-mint-wash:  #eaf6f1;
  --sg-emerald:    #5fa987;
  --sg-emerald-wash:#e7f4ee;

  --sg-ink:        #25352f;
  --sg-ink-soft:   #4f6259;
  --sg-muted:      #7c9189;
  --sg-line:       #e1ece5;
  --sg-line-soft:  #edf5f0;

  --sg-bg:         #f4f9f6;
  --sg-surface:    #ffffff;
  --sg-surface-2:  #f7fbf9;

  --sg-amber:      #d9a441;
  --sg-amber-wash: #fbf3e2;
  --sg-danger:     #d98a7a;
  --sg-danger-wash:#fbece8;

  --sg-radius-xl: 20px;
  --sg-radius-lg: 14px;
  --sg-radius-md: 10px;
  --sg-radius-sm: 7px;

  --sg-shadow-xs: 0 1px 2px rgba(60, 90, 75, 0.05);
  --sg-shadow-sm: 0 2px 10px rgba(60, 90, 75, 0.06), 0 1px 2px rgba(60,90,75,.04);
  --sg-shadow:    0 12px 32px rgba(60, 90, 75, 0.08), 0 2px 6px rgba(60,90,75,.04);
  --sg-shadow-lg: 0 26px 60px rgba(60, 90, 75, 0.13), 0 6px 16px rgba(60,90,75,.05);
  --sg-ring:      0 0 0 3px rgba(95, 169, 135, 0.18);
}

/* ── Organic animated blob background ───────────────────────────────────
   Soft puzzle-piece-evoking shapes that drift and morph slowly across the
   page in pale sage/mint/emerald tones - calm, alive, never static. Each
   blob is its own layer so they can move independently at different
   speeds/paths, like overlapping puzzle pieces gently shifting. */
html::before{
  background: var(--sg-bg) !important;
}
body::before{
  content:"" !important;
  background-image: none !important;
  opacity: 1 !important;
}

.sg-blob-field{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.sg-blob{
  position: absolute;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  filter: blur(40px);
  opacity: .55;
  will-change: transform, border-radius;
}
.sg-blob--1{
  top: -8%; left: -6%;
  width: 620px; height: 560px;
  background: radial-gradient(circle at 35% 35%, rgba(168,216,197,.95), rgba(168,216,197,0) 72%);
  animation: sgDrift1 38s ease-in-out infinite, sgMorph1 26s ease-in-out infinite;
}
.sg-blob--2{
  top: -10%; right: -8%;
  width: 560px; height: 520px;
  background: radial-gradient(circle at 60% 40%, rgba(95,169,135,.55), rgba(95,169,135,0) 72%);
  animation: sgDrift2 44s ease-in-out infinite, sgMorph2 30s ease-in-out infinite;
}
.sg-blob--3{
  bottom: -12%; right: -6%;
  width: 700px; height: 640px;
  background: radial-gradient(circle at 45% 55%, rgba(127,182,154,.6), rgba(127,182,154,0) 72%);
  animation: sgDrift3 50s ease-in-out infinite, sgMorph3 34s ease-in-out infinite;
}
.sg-blob--4{
  bottom: -10%; left: -8%;
  width: 540px; height: 500px;
  background: radial-gradient(circle at 50% 50%, rgba(217,164,65,.28), rgba(217,164,65,0) 72%);
  animation: sgDrift4 42s ease-in-out infinite, sgMorph4 28s ease-in-out infinite;
}
.sg-blob--5{
  top: 32%; left: 38%;
  width: 640px; height: 600px;
  background: radial-gradient(circle at 50% 50%, rgba(168,216,197,.4), rgba(168,216,197,0) 75%);
  animation: sgDrift5 56s ease-in-out infinite, sgMorph5 36s ease-in-out infinite;
}

@keyframes sgDrift1{
  0%,100%{ transform: translate(0,0) scale(1); }
  25%{ transform: translate(40px,30px) scale(1.06); }
  50%{ transform: translate(10px,60px) scale(0.97); }
  75%{ transform: translate(-25px,20px) scale(1.03); }
}
@keyframes sgDrift2{
  0%,100%{ transform: translate(0,0) scale(1); }
  30%{ transform: translate(-35px,40px) scale(1.05); }
  60%{ transform: translate(-15px,-25px) scale(0.96); }
}
@keyframes sgDrift3{
  0%,100%{ transform: translate(0,0) scale(1); }
  35%{ transform: translate(-45px,-35px) scale(1.07); }
  70%{ transform: translate(20px,-15px) scale(0.95); }
}
@keyframes sgDrift4{
  0%,100%{ transform: translate(0,0) scale(1); }
  40%{ transform: translate(35px,-30px) scale(1.04); }
  75%{ transform: translate(15px,25px) scale(0.98); }
}
@keyframes sgDrift5{
  0%,100%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-46%,-54%) scale(1.08); }
}

@keyframes sgMorph1{
  0%,100%{ border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  50%{ border-radius: 60% 40% 35% 65% / 55% 65% 35% 45%; }
}
@keyframes sgMorph2{
  0%,100%{ border-radius: 55% 45% 40% 60% / 40% 55% 45% 60%; }
  50%{ border-radius: 38% 62% 60% 40% / 60% 42% 58% 40%; }
}
@keyframes sgMorph3{
  0%,100%{ border-radius: 48% 52% 58% 42% / 50% 45% 55% 50%; }
  50%{ border-radius: 62% 38% 42% 58% / 42% 58% 45% 55%; }
}
@keyframes sgMorph4{
  0%,100%{ border-radius: 50% 50% 45% 55% / 55% 50% 50% 45%; }
  50%{ border-radius: 40% 60% 60% 40% / 45% 55% 50% 55%; }
}
@keyframes sgMorph5{
  0%,100%{ border-radius: 45% 55% 50% 50% / 50% 45% 55% 50%; }
  50%{ border-radius: 58% 42% 45% 55% / 55% 50% 45% 50%; }
}

@media (prefers-reduced-motion: reduce){
  .sg-blob{ animation: none !important; }
}

/* ── Re-tint: redirect all --cw-* (indigo/blue) tokens to sage/mint ─────
   Since the v5 Clinical White layer above consumes --cw-* variables
   throughout (topbar, cards, buttons, tabs, focus rings, etc.), redefining
   them here cascades the new sage palette everywhere automatically. */
:root{
  --cw-indigo:      var(--sg-sage-deep);
  --cw-indigo-2:    #3d6f5a;
  --cw-blue:        var(--sg-emerald);
  --cw-emerald:     var(--sg-emerald);
  --cw-emerald-wash:var(--sg-emerald-wash);

  --cw-bg:          var(--sg-bg);
  --cw-bg-2:        var(--sg-mint-wash);
  --cw-surface:     var(--sg-surface);
  --cw-surface-2:   var(--sg-surface-2);
  --cw-surface-3:   var(--sg-mint-wash);

  --cw-ink:         var(--sg-ink);
  --cw-ink-soft:    var(--sg-ink-soft);
  --cw-muted:       var(--sg-muted);
  --cw-line:        var(--sg-line);
  --cw-line-soft:   var(--sg-line-soft);

  --cw-amber:       var(--sg-amber);
  --cw-amber-wash:  var(--sg-amber-wash);
  --cw-danger:      var(--sg-danger);
  --cw-danger-wash: var(--sg-danger-wash);
  --cw-info:        var(--sg-emerald);
  --cw-info-wash:   var(--sg-mint-wash);
  --cw-indigo-wash: var(--sg-mint-wash);

  --cw-radius-xl: var(--sg-radius-xl);
  --cw-radius-lg: var(--sg-radius-lg);
  --cw-radius-md: var(--sg-radius-md);
  --cw-radius-sm: var(--sg-radius-sm);

  --cw-shadow-xs: var(--sg-shadow-xs);
  --cw-shadow-sm: var(--sg-shadow-sm);
  --cw-shadow:    var(--sg-shadow);
  --cw-shadow-lg: var(--sg-shadow-lg);
  --cw-ring:      var(--sg-ring);
}

/* ── Topbar: soft sage gradient instead of deep indigo ──────────────────
   The v5 layer hardcodes indigo gradient colors directly (not via tokens)
   for the topbar, so override those specific declarations here. */
.topbar{
  background:
    radial-gradient(600px 240px at 85% 0%, rgba(168,216,197,.45), transparent 60%),
    linear-gradient(135deg, var(--sg-sage-deep) 0%, #5b9c80 55%, var(--sg-sage) 100%) !important;
  box-shadow: 0 12px 32px rgba(79,140,114,.18) !important;
}
.brand-block::before{
  background: linear-gradient(180deg, var(--sg-mint), var(--sg-emerald)) !important;
  box-shadow: 0 0 20px rgba(95,169,135,.35) !important;
}
.language-pill.is-active{
  background: linear-gradient(120deg, var(--sg-mint), var(--sg-emerald)) !important;
  color: #1f3a2e !important;
}
.cs-usermenu-avatar{
  background: linear-gradient(145deg, var(--sg-emerald) 0%, var(--sg-sage-deep) 100%) !important;
}

.score-card{
  background: linear-gradient(135deg, var(--sg-emerald-wash), #f1faf6) !important;
  border-color: #cdeadd !important;
}
.score-card span{ color: var(--sg-emerald-deep, var(--sg-sage-deep)) !important; }
.group-overview{
  background: linear-gradient(135deg, var(--sg-mint-wash), var(--sg-emerald-wash)) !important;
}
.meta-pills > *, .meta-pills span{
  border-color: #cdeadd !important;
}
.tab.is-active::after{
  background: linear-gradient(90deg, var(--sg-emerald), var(--sg-mint)) !important;
}

.app-shell *{ scrollbar-color: #cfe6da transparent !important; }
.app-shell *::-webkit-scrollbar-thumb{ background: #cfe6da !important; background-clip: padding-box; }
.app-shell *::-webkit-scrollbar-thumb:hover{ background: #b3d8c6 !important; background-clip: padding-box; }

:root{

  --np-teal:    #14b8a6;
  --np-indigo:  #6366f1;
  --np-sage:    #84cc16;
  --np-coral:   #fb923c;

  --np-teal-wash:   #e3f8f5;
  --np-indigo-wash: #ececfd;
  --np-sage-wash:   #f1f9e1;
  --np-coral-wash:  #fef0e3;
}

/* ── Primary brand re-tint: sage -> teal/indigo as the dominant duo ─────
   Keep the calm light-mint surfaces from v7, but shift the "active /
   primary" accent from pure sage-green to teal (communication) with
   indigo (neurodiversity) as the secondary action color. */
:root{
  --cw-indigo:      var(--np-teal);
  --cw-indigo-2:    #0d9488;
  --cw-blue:        var(--np-indigo);
  --cw-emerald:     var(--np-teal);
  --cw-emerald-wash:var(--np-teal-wash);
  --cw-indigo-wash: var(--np-indigo-wash);
  --cw-amber:       var(--np-coral);
  --cw-amber-wash:  var(--np-coral-wash);
}

.topbar{
  background:
    radial-gradient(640px 260px at 88% 0%, rgba(99,102,241,.30), transparent 60%),
    radial-gradient(520px 220px at 10% 100%, rgba(132,204,22,.18), transparent 60%),
    linear-gradient(135deg, #0d9488 0%, #14b8a6 55%, #5eead4 100%) !important;
  box-shadow: 0 12px 32px rgba(13,148,136,.20) !important;
}
.brand-block::before{
  background: linear-gradient(180deg, var(--np-coral), var(--np-indigo)) !important;
  box-shadow: 0 0 20px rgba(99,102,241,.35) !important;
}
.language-pill.is-active{
  background: linear-gradient(120deg, var(--np-teal), var(--np-indigo)) !important;
  color: #fff !important;
}
.cs-usermenu-avatar{
  background: linear-gradient(145deg, var(--np-indigo) 0%, var(--np-teal) 100%) !important;
}
.tab.is-active::after{
  background: linear-gradient(90deg, var(--np-teal), var(--np-indigo)) !important;
}
.score-card{
  background: linear-gradient(135deg, var(--np-teal-wash), #f1fdfb) !important;
  border-color: #b8ece5 !important;
}
.score-card span{ color: var(--np-teal) !important; -webkit-text-fill-color: #0d9488 !important; }
.group-overview{
  background: linear-gradient(135deg, var(--np-indigo-wash), var(--np-teal-wash)) !important;
}

.app-shell :is(.advisor-status,.notice,.status-message){
  background: var(--np-coral-wash) !important;
  border-color: #fbd9b8 !important;
  color: #b15a14 !important;
}
.app-shell :is(.advisor-status.ok,.microcopy.is-success,.success){
  background: var(--np-sage-wash) !important;
  border-color: #d4ecae !important;
  color: #5a7a0e !important;
}

.app-shell .knowledge-alert strong,
.app-shell .knowledge-columns strong{
  color: var(--np-indigo) !important;
}

.sg-blob{ display:none !important; }

body::after{
  content:"";
  position: fixed;
  inset: -5%;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'%3E%3Cg fill='none' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath stroke='%2314b8a6' stroke-opacity='.16' d='M-50 120 C 250 40, 550 220, 850 130 S 1400 40, 1650 160'/%3E%3Cpath stroke='%236366f1' stroke-opacity='.13' d='M-50 260 C 280 180, 560 360, 860 270 S 1420 180, 1650 300'/%3E%3Cpath stroke='%2384cc16' stroke-opacity='.13' d='M-50 400 C 300 320, 600 500, 900 410 S 1430 320, 1650 440'/%3E%3Cpath stroke='%2314b8a6' stroke-opacity='.10' d='M-50 540 C 260 460, 580 640, 880 550 S 1410 460, 1650 580'/%3E%3Cpath stroke='%23fb923c' stroke-opacity='.10' d='M-50 700 C 300 620, 600 800, 900 710 S 1430 620, 1650 740'/%3E%3Cpath stroke='%236366f1' stroke-opacity='.09' d='M-50 850 C 280 770, 560 950, 860 860 S 1420 770, 1650 890'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 130% auto;
  background-position: center 0;
  animation: npWaveDrift 70s ease-in-out infinite;
}
@keyframes npWaveDrift{
  0%,100%{ background-position: 0% 0%; transform: translateY(0) scale(1); }
  50%{ background-position: 6% 4%; transform: translateY(1.5%) scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
  body::after{ animation: none !important; }
}

/* ── Fix: .tab-panel container background ───────────────────────────────
   .tab-panel/.group-overview previously shared a dark !important gradient
   (rgba(9,19,21,...)) intended for the old dark theme. .group-overview was
   re-tinted in earlier layers, but .tab-panel itself was missed, leaving a
   dark-gray panel behind the now-light cards (mismatched architecture).
   Make .tab-panel transparent so it shows the clean page background,
   consistent with the rest of the Neurodiversity Premium surface. */
.tab-panel{
  background: transparent !important;
  color: var(--cw-ink) !important;
}

/* ── Zero-state pills: de-emphasize "0 / not yet" metadata ──────────────
   Pills showing "Mosha pa shenuar", "0 seanca", "0 sinjale kujdesi",
   "ICD-10 0/10" etc. previously rendered with the same indigo-wash accent
   as real data - four "0" badges in a row read as unfinished/empty rather
   than calm "not started yet". A neutral slate style communicates
   "no data yet" without alarm or false emphasis. */
.app-shell .meta-pills .pill.neutral{
  background: var(--cw-surface-2) !important;
  color: var(--cw-muted) !important;
  border: 1px solid var(--cw-line) !important;
  font-weight: 600 !important;
}

/* ── Harmonize brand-bar with topbar gradient family ─────────────────────
   The brand-block::before vertical accent bar previously used coral->indigo
   while the topbar itself uses a teal->emerald gradient - two unrelated
   color families colliding in the same component. Use emerald->coral so the
   bar stays in the topbar's green family while still carrying a
   Neurodiversity Premium accent (coral) at its tip. */
.brand-block::before{
  background: linear-gradient(180deg, #5eead4, var(--np-coral)) !important;
  box-shadow: 0 0 18px rgba(94,234,212,.35) !important;
}

/* ── Tabs: breathing room for wrapped rows ───────────────────────────────
   .tabs uses an auto-fit grid; on narrower viewports extra tabs
   (Subscription, Reports) wrap to a second row flush against the first,
   reading as "tacked on" rather than part of the same group. A touch more
   row-gap plus a slightly larger horizontal gap give wrapped rows clear
   breathing room while staying visually part of the same tab bar. */
.tabs{
  row-gap: 10px !important;
  column-gap: 8px !important;
  padding: 14px 14px 12px !important;
}

/* ── Unify the two mismatched top-stripe gradients ───────────────────────
   .metric-card/.method-card/.criteria-card/.group-module-card top stripes
   used the old --premium-teal/sage/gold trio (teal->green->amber), while
   .cs-usermenu-dropdown::before used an even older teal->accent->purple
   trio (#16b8a6,#9f6248,#5c527f). Neither matches the Neurodiversity
   Premium accents. Both now share one consistent teal->indigo->coral
   gradient, tying the dropdown header stripe and the dashboard metric
   cards into the same visual language. */
.metric-card::before,
.method-card::before,
.criteria-card::before,
.group-module-card::before{
  background: linear-gradient(90deg, var(--np-teal), var(--np-indigo), var(--np-coral)) !important;
}
.cs-usermenu-dropdown::before{
  background: linear-gradient(90deg, var(--np-teal), var(--np-indigo), var(--np-coral)) !important;
}

/* ── Tab-switch performance: remove per-switch fade/translate ────────────
   .tab-panel.is-active replayed a 350ms fade+translateY animation on every
   tab click, making the view feel like it "freezes" briefly before content
   settles - especially on panels with many cards. Switching tabs should
   feel instant. Keep a much shorter, opacity-only fade purely for the
   FIRST paint via animation-fill-mode, without blocking interaction
   (pointer-events unaffected by CSS animations, but the visual delay read
   as "blocked"). */
.tab-panel.is-active{
  animation: cwPanelInFast .12s linear !important;
}
@keyframes cwPanelInFast{
  from{ opacity: .55; }
  to{ opacity: 1; }
}

/* ── Reduce ambient background repaint cost ──────────────────────────────
   The wavy-line background layer animated continuously across the whole
   viewport, which can compound with tab-switch repaints on lower-end
   devices. Slow it further and promote to its own compositor layer so it
   never blocks foreground interaction. */
body::after{
  animation-duration: 120s !important;
  will-change: background-position, transform;
  contain: strict;
}

@media (prefers-reduced-motion: reduce){
  .tab-panel.is-active{ animation: none !important; }
}

.app-shell .clean-details summary{
  color: var(--cw-ink) !important;
  background: var(--cw-surface-2) !important;
  border-radius: var(--cw-radius-md) !important;
  font-weight: 700;
  font-size: .9rem;
}
.app-shell .clean-details summary:hover{
  background: var(--cw-indigo-wash) !important;
  color: var(--np-teal) !important;
}
.app-shell .clean-details[open] > summary{
  color: var(--np-teal) !important;
  background: var(--np-teal-wash) !important;
  border-bottom: 1px solid rgba(20,184,166,.2) !important;
  border-radius: var(--cw-radius-md) var(--cw-radius-md) 0 0 !important;
}
.app-shell .clean-details p,
.app-shell .clean-details li{
  color: var(--cw-ink-soft) !important;
}

/* ── Layer B: Clinical Intelligence UI components ────────────────────────── */

.app-shell .meta-pills .pill.danger{
  background: var(--np-coral-wash) !important;
  color: #b84a1e !important;
  border-color: #f9c9b2 !important;
  font-weight: 800 !important;
  animation: ciPulse 2.5s ease-in-out infinite;
}
.app-shell .meta-pills .pill.warn{
  background: var(--cw-amber-wash) !important;
  color: #8a5a0a !important;
  border-color: #f3dcb0 !important;
  font-weight: 800 !important;
}
@keyframes ciPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(251,146,60,.28); }
  50%{ box-shadow: 0 0 0 5px rgba(251,146,60,0); }
}

.ci-risk-alert{ border-left: 3px solid; }
.ci-alert-high{
  background: var(--np-coral-wash) !important;
  border-left-color: var(--np-coral) !important;
}
.ci-alert-high strong{ color: #b84a1e !important; }
.ci-alert-medium{
  background: var(--cw-amber-wash) !important;
  border-left-color: var(--cw-amber) !important;
}
.ci-alert-medium strong{ color: #8a5a0a !important; }
.ci-alert-early{
  background: var(--np-indigo-wash) !important;
  border-left-color: var(--np-indigo) !important;
}
.ci-alert-early strong{ color: var(--np-indigo) !important; }

.cs-status-bar{
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 clamp(14px,2.4vw,28px);
  min-height: 46px;
  background:
    linear-gradient(135deg,
      rgba(20,184,166,.06) 0%,
      rgba(255,255,255,.96) 50%,
      rgba(99,102,241,.05) 100%);
  border-bottom: 1px solid var(--cw-line);
  border-top: 1px solid var(--cw-line-soft);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background .2s var(--cw-ease);
  user-select: none;
}
.cs-status-bar::before{

  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--np-teal);
  transition: background .3s;
}
.cs-status-bar[data-risk="high"]::before{ background: var(--np-coral); }
.cs-status-bar[data-risk="medium"]::before{ background: var(--cw-amber); }
.cs-status-bar[data-risk="early"]::before{ background: var(--np-indigo); }
.cs-status-bar[data-risk="watch"]::before{ background: var(--np-sage); }
.cs-status-bar[data-risk="none"]::before{ background: var(--np-teal); }

.cs-status-bar:hover{
  background: linear-gradient(135deg, rgba(20,184,166,.09) 0%, rgba(255,255,255,.98) 50%, rgba(99,102,241,.08) 100%);
}

.cs-sb-signals{
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  flex-wrap: nowrap;
  overflow: hidden;
  padding-left: 6px;
}

.cs-sb-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: -.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all .18s var(--cw-ease);
  flex-shrink: 0;
}
.cs-sb-chip .cs-sb-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cs-sb-chip.ok{
  background: var(--np-teal-wash);
  color: #0d7a6e;
  border-color: rgba(20,184,166,.2);
}
.cs-sb-chip.ok .cs-sb-dot{ background: var(--np-teal); }

.cs-sb-chip.warn{
  background: var(--cw-amber-wash);
  color: #7a4e0a;
  border-color: rgba(217,164,65,.22);
}
.cs-sb-chip.warn .cs-sb-dot{ background: var(--cw-amber); }

.cs-sb-chip.danger{
  background: var(--np-coral-wash);
  color: #a83518;
  border-color: rgba(251,146,60,.22);
  animation: sbPulse 2.8s ease-in-out infinite;
}
.cs-sb-chip.danger .cs-sb-dot{
  background: var(--np-coral);
  animation: dotPulse 2.8s ease-in-out infinite;
}
.cs-sb-chip.info{
  background: var(--np-indigo-wash);
  color: #3730a3;
  border-color: rgba(99,102,241,.18);
}
.cs-sb-chip.info .cs-sb-dot{ background: var(--np-indigo); }

.cs-sb-chip.neutral{
  background: var(--cw-surface-2);
  color: var(--cw-muted);
  border-color: var(--cw-line);
}
.cs-sb-chip.neutral .cs-sb-dot{ background: #b0bec5; }

.cs-sb-sep{
  width: 1px; height: 16px;
  background: var(--cw-line);
  flex-shrink: 0;
  margin: 0 2px;
}

.cs-sb-action{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  background: linear-gradient(120deg, var(--np-teal), var(--np-indigo));
  color: #fff;
  border: none;
  flex-shrink: 0;
  margin-left: 10px;
  box-shadow: 0 3px 10px rgba(20,184,166,.25);
  transition: all .2s var(--cw-ease);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-sb-action .cs-sb-arrow{ font-style: normal; opacity: .85; }

.cs-status-bar:hover .cs-sb-action{
  box-shadow: 0 5px 16px rgba(20,184,166,.38);
  transform: translateX(2px);
}

.cs-sb-hint{
  font-size: .68rem;
  color: var(--cw-muted);
  opacity: .6;
  margin-left: 10px;
  flex-shrink: 0;
  font-weight: 600;
}

@keyframes sbPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(251,146,60,.22); }
  50%{ box-shadow: 0 0 0 4px rgba(251,146,60,0); }
}
@keyframes dotPulse{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.35); opacity:.7; }
}

.cs-status-bar.cs-sb-empty{
  justify-content: center;
  opacity: .55;
  cursor: default;
  pointer-events: none;
}
.cs-status-bar.cs-sb-empty::before{ display:none; }

/* ─── Responsive: hide less-important chips on narrow screens ─────────── */
@media(max-width:900px){
  .cs-sb-hint{ display:none; }
  .cs-sb-chip.cs-sb-hide-sm{ display:none; }
}
@media(max-width:680px){
  .cs-sb-chip:nth-child(n+4):not(.cs-sb-action){ display:none; }
}

.ci-full-panel{
  border-radius: var(--cw-radius-xl);
  border: 1px solid var(--cw-line);
  background: var(--cw-surface);
  box-shadow: var(--cw-shadow-sm);
  overflow: hidden;
  margin-top: 20px;
}

.ci-fp-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  background: linear-gradient(120deg, rgba(20,184,166,.07), rgba(99,102,241,.05));
  border-bottom: 1px solid var(--cw-line-soft);
}
.ci-fp-header-left{ display:flex; flex-direction:column; gap:3px; }
.ci-fp-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--np-teal);
}
.ci-fp-badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--np-teal);
  animation: dotPulse 3s ease-in-out infinite;
}
.ci-fp-title{
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--cw-ink);
  letter-spacing: -.015em;
}
.ci-fp-engine{
  font-size: .7rem;
  color: var(--cw-muted);
  font-weight: 600;
}
.ci-fp-pattern-badge{
  padding: 6px 14px;
  border-radius: var(--cw-radius-sm);
  background: var(--np-indigo-wash);
  color: var(--np-indigo);
  font-size: .76rem;
  font-weight: 800;
  border: 1px solid rgba(99,102,241,.18);
  text-align: right;
}

.ci-fp-dims{
  display: grid;
  grid-template-columns: repeat(6,1fr);
  border-bottom: 1px solid var(--cw-line-soft);
}
@media(max-width:900px){ .ci-fp-dims{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:580px){ .ci-fp-dims{ grid-template-columns:repeat(2,1fr); } }

.ci-fp-dim{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border-right: 1px solid var(--cw-line-soft);
  position: relative;
  transition: background .2s;
}
.ci-fp-dim:last-child{ border-right:none; }
.ci-fp-dim:hover{ background: var(--cw-surface-2); }

.ci-fp-dim-label{
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cw-muted);
}
.ci-fp-dim-arc{
  position: relative;
  width: 56px; height: 56px;
}
.ci-fp-dim-arc svg{ width:56px; height:56px; transform: rotate(-90deg); }
.ci-fp-dim-track{ fill:none; stroke:var(--cw-line); stroke-width:5; }
.ci-fp-dim-fill{
  fill:none; stroke-width:5; stroke-linecap:round;
  stroke-dasharray: 138.2;
  transition: stroke-dashoffset .8s cubic-bezier(.16,1,.3,1),stroke .4s;
}
.ci-fp-dim-value{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size: .78rem;
  font-weight: 900;
  color: var(--cw-ink);
  transform: rotate(90deg) ;
  pointer-events:none;
}
.ci-fp-dim-sub{
  font-size:.64rem; color:var(--cw-muted); font-weight:600;
  text-align:center; line-height:1.3;
}

.ci-fp-dim-fill.score-high  { stroke: var(--np-teal); }
.ci-fp-dim-fill.score-mid   { stroke: var(--cw-amber); }
.ci-fp-dim-fill.score-low   { stroke: var(--np-coral); }
.ci-fp-dim-fill.score-neutral{ stroke: #b0bec5; }

.ci-fp-interp{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--cw-line-soft);
}
@media(max-width:700px){ .ci-fp-interp{ grid-template-columns:1fr; } }

.ci-fp-interp-block{
  padding: 18px 22px;
  border-right: 1px solid var(--cw-line-soft);
}
.ci-fp-interp-block:last-child{ border-right:none; }
.ci-fp-interp-label{
  font-size:.66rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--cw-muted);margin-bottom:8px;
}
.ci-fp-interp-text{
  font-size:.86rem; line-height:1.6; color:var(--cw-ink-soft);
}
.ci-fp-interp-text strong{ color:var(--cw-ink); font-weight:800; }

.ci-fp-triggers{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:14px 22px;
  border-bottom:1px solid var(--cw-line-soft);
  background: var(--cw-surface-2);
}
.ci-fp-trigger-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  font-size:.73rem; font-weight:700;
  border:1px solid var(--cw-line);
  background:var(--cw-surface); color:var(--cw-ink-soft);
}
.ci-fp-trigger-chip.high{ border-color:#f9c9b2; background:var(--np-coral-wash); color:#9a3214; }
.ci-fp-trigger-chip.medium{ border-color:#f3dcb0; background:var(--cw-amber-wash); color:#7a4e0a; }

.ci-fp-nba{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  background:linear-gradient(120deg,rgba(20,184,166,.06),rgba(99,102,241,.04));
  border-bottom:1px solid var(--cw-line-soft);
  gap:16px;
}
.ci-fp-nba-label{
  font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--np-teal);margin-bottom:4px;
}
.ci-fp-nba-text{
  font-size:.95rem;font-weight:800;color:var(--cw-ink);
  letter-spacing:-.015em;
}
.ci-fp-nba-sub{ font-size:.78rem;color:var(--cw-muted);margin-top:3px; }
.ci-fp-nba-btn{
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px;
  border-radius:var(--cw-radius-sm);
  background:linear-gradient(120deg,var(--np-teal),var(--np-indigo));
  color:#fff;font-weight:800;font-size:.85rem;
  border:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 14px rgba(20,184,166,.28);
  transition:all .2s var(--cw-ease);
}
.ci-fp-nba-btn:hover{
  transform:translateY(-1.5px);
  box-shadow:0 7px 20px rgba(20,184,166,.38);
}

.ci-fp-cds{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 22px;
  background:var(--cw-surface-2);
}
.ci-fp-cds-icon{
  flex-shrink:0;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--np-indigo-wash);
  color:var(--np-indigo);font-size:.8rem;
}
.ci-fp-cds-text{ flex:1; }
.ci-fp-cds-title{
  font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--cw-ink);margin-bottom:3px;
}
.ci-fp-cds-body{
  font-size:.72rem;line-height:1.5;color:var(--cw-muted);
}
.ci-fp-cds-meta{
  font-size:.65rem;color:var(--cw-muted);opacity:.7;
  margin-top:4px;font-family:monospace;
}

/* ── Topbar: reduce min-height from 168px to ~110px, tighter padding ─── */
.topbar{
  min-height: 108px !important;
  padding: 18px clamp(18px, 4vw, 46px) 0 !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

/* ── Status bar: lives at the BOTTOM of the topbar (same background) ──── */

.cs-status-bar{
  flex: 0 0 100% !important;
  margin: 10px -46px 0 -46px !important;
  padding: 0 46px !important;
  min-height: 38px !important;
  background: rgba(0,0,0,.14) !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
}
.cs-status-bar::before{ display: none !important; }

.cs-sb-chip{
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.15) !important;
  padding: 3px 10px !important;
  font-size: .73rem !important;
}
.cs-sb-chip.danger{
  background: rgba(251,146,60,.25) !important;
  color: #fff !important;
  border-color: rgba(251,146,60,.35) !important;
  animation: sbPulse 2.8s ease-in-out infinite;
}
.cs-sb-dot{ background: rgba(255,255,255,.7) !important; }
.cs-sb-chip.danger .cs-sb-dot{ background: #fb923c !important; }
.cs-sb-sep{ background: rgba(255,255,255,.2) !important; }
.cs-sb-hint{ color: rgba(255,255,255,.5) !important; }
.cs-sb-action{
  padding: 4px 11px 4px 9px !important;
  font-size: .72rem !important;
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}
.cs-status-bar.cs-sb-empty{
  background: rgba(0,0,0,.08) !important;
}

.dash-overview{
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Row 1: Key metric numbers ─────────────────────────────────────────── */
.dash-metrics-row{
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--cw-line-soft);
  padding: 20px clamp(16px,2.4vw,28px);
  flex-wrap: wrap;
  row-gap: 16px;
}
.dash-metric{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0 24px 0 0;
  border-right: 1px solid var(--cw-line-soft);
  min-width: 90px;
}
.dash-metric:last-child{ border-right: none; }
.dash-metric-val{
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--cw-ink);
  line-height: 1;
}
.dash-metric-val.ok{ color: var(--np-teal); }
.dash-metric-val.warn{ color: var(--cw-amber); }
.dash-metric-val.danger{ color: var(--np-coral); }
.dash-metric-val.neutral{ color: var(--cw-muted); }
.dash-metric-label{
  font-size: .67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cw-muted);
}

/* ── Row 2: Intelligence strip (pattern · NBA · risk) ──────────────────── */
.dash-intel-row{
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px clamp(16px,2.4vw,28px);
  background: linear-gradient(90deg, rgba(20,184,166,.04), rgba(99,102,241,.03));
  border-bottom: 1px solid var(--cw-line-soft);
  flex-wrap: wrap;
  row-gap: 10px;
}
.dash-intel-block{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 22px;
}
.dash-intel-sep{
  width: 1px;
  height: 32px;
  background: var(--cw-line);
  margin-right: 22px;
  flex-shrink: 0;
}
.dash-intel-label{
  font-size: .63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cw-muted);
}
.dash-intel-val{
  font-size: .88rem;
  font-weight: 800;
  color: var(--cw-ink);
}
.dash-intel-val.dash-nba{ color: var(--np-teal); }

.dash-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  border: 1px solid transparent;
}
.dash-badge.danger{
  background: var(--np-coral-wash);
  color: #a83518;
  border-color: rgba(251,146,60,.22);
  animation: ciPulse 2.8s ease-in-out infinite;
}
.dash-badge.warn{
  background: var(--cw-amber-wash);
  color: #7a4e0a;
  border-color: rgba(217,164,65,.22);
}
.dash-badge.info{
  background: var(--np-indigo-wash);
  color: var(--np-indigo);
  border-color: rgba(99,102,241,.18);
}

/* ── Row 3: Methods + Risks (two columns) ──────────────────────────────── */
.dash-two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--cw-line-soft);
}
@media(max-width:680px){ .dash-two-col{ grid-template-columns:1fr; } }

.dash-col{
  padding: 16px clamp(14px,2vw,22px);
  border-right: 1px solid var(--cw-line-soft);
}
.dash-col:last-child{ border-right: none; }
.dash-col-label{
  font-size: .63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cw-muted);
  margin-bottom: 10px;
}
.dash-empty{
  font-size: .82rem;
  color: var(--cw-muted);
  font-style: italic;
}

.dash-method-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--cw-radius-sm);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  margin-bottom: 4px;
  transition: all .18s var(--cw-ease);
}
.dash-method-item:hover{
  background: var(--np-teal-wash);
  border-color: rgba(20,184,166,.18);
}
.dash-method-num{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--np-teal-wash);
  color: var(--np-teal);
  font-size: .7rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.dash-method-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-method-text strong{
  font-size: .83rem;
  color: var(--cw-ink);
  font-weight: 800;
  line-height: 1.2;
}
.dash-method-text small{
  font-size: .73rem;
  color: var(--cw-muted);
  line-height: 1.3;
}

.dash-risk-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--cw-radius-sm);
  margin-bottom: 4px;
}
.dash-risk-dot{
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--np-coral);
  margin-top: 5px;
}
.dash-risk-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-risk-text strong{
  font-size: .83rem;
  color: var(--cw-ink);
  font-weight: 800;
  line-height: 1.2;
}
.dash-risk-text small{
  font-size: .73rem;
  color: var(--cw-muted);
  line-height: 1.3;
}

/* ── Row 4: Module shortcuts (compact pill row) ─────────────────────────── */
.dash-modules-row{
  display: flex;
  gap: 8px;
  padding: 12px clamp(14px,2vw,22px);
  flex-wrap: wrap;
  background: var(--cw-surface-2);
}
.dash-module-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  background: var(--cw-surface);
  color: var(--cw-ink-soft);
  border: 1px solid var(--cw-line);
  cursor: pointer;
  transition: all .18s var(--cw-ease);
}
.dash-module-btn:hover{
  background: var(--np-teal-wash);
  color: var(--np-teal);
  border-color: rgba(20,184,166,.22);
}
.dash-module-num{
  font-size: .65rem;
  font-weight: 900;
  color: var(--cw-muted);
}

/* ── v7.5: Topbar gjysma — layout horizontal, nav djathtas ─────────────
   Bazuar në preview live: padding 16px, H1 ~1.9rem, nav+ikona djathtas,
   tagline e fshehur, status bar si strip absolut poshtë. */
.topbar{
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  min-height: 0 !important;
  padding: 16px clamp(18px,4vw,46px) 48px !important;
}
.topbar h1{
  font-size: clamp(1.35rem, 2.4vw, 1.9rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}
.brand-tagline{ display: none !important; }
.brand-subtitle{
  font-size: .74rem !important;
  margin-top: 2px !important;
}
.brand-block{
  padding-left: 16px !important;
  max-width: none !important;
  flex: 1 1 auto;
  min-width: 0;
}
.brand-block::before{
  top: 3px !important;
  bottom: 3px !important;
  width: 4px !important;
}
.topbar-actions{
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0;
}
.topbar-page-links a{
  padding: 5px 12px !important;
  font-size: .78rem !important;
}

.cs-status-bar{
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  min-height: 32px !important;
  background: rgba(0,0,0,.16) !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  padding: 0 clamp(18px,4vw,46px) !important;
  margin: 0 !important;
}
.cs-status-bar::before{ display:none !important; }
.cs-sb-chip{
  background: rgba(255,255,255,.11) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.14) !important;
  padding: 2px 9px !important;
  font-size: .69rem !important;
}
.cs-sb-dot{ background: rgba(255,255,255,.75) !important; }
.cs-sb-sep{ background: rgba(255,255,255,.2) !important; }
.cs-sb-action{
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: none !important;
  padding: 3px 10px !important;
  font-size: .69rem !important;
}
.cs-sb-hint{ color: rgba(255,255,255,.45) !important; }
.cs-status-bar.cs-sb-empty{
  justify-content: center;
  opacity: .55;
  cursor: default;
  pointer-events: none;
}

/* ── Dashboard rich panel: method cards + focus + checklist ────────────── */

.dash-action-row{
  display:flex;align-items:center;gap:0;
  padding:14px clamp(16px,2.4vw,28px);
  background:linear-gradient(90deg,rgba(20,184,166,.05),rgba(99,102,241,.03));
  border-top:1px solid var(--cw-line-soft);
  border-bottom:1px solid var(--cw-line-soft);
  flex-wrap:wrap;row-gap:10px;
}

.dash-method-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:14px;
}
@media(max-width:700px){ .dash-method-grid{ grid-template-columns:1fr; } }

.dash-mcard{
  display:flex;flex-direction:column;gap:6px;
  padding:14px 16px;border-radius:14px;
  background:var(--cw-surface-2);
  border:1px solid var(--cw-line);
  text-align:left;cursor:pointer;
  transition:all .2s var(--cw-ease);
  position:relative;overflow:hidden;
}
.dash-mcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
}
.dash-mcard--teal::before  { background:linear-gradient(90deg,var(--np-teal),#5eead4); }
.dash-mcard--indigo::before{ background:linear-gradient(90deg,var(--np-indigo),#a5b4fc); }
.dash-mcard--sage::before  { background:linear-gradient(90deg,var(--np-sage),#bef264); }
.dash-mcard--coral::before { background:linear-gradient(90deg,var(--np-coral),#fcd34d); }

.dash-mcard:hover{
  border-color:#cdeadd;
  box-shadow:var(--cw-shadow);
  transform:translateY(-2px);
}
.dash-mcard-top{
  display:flex;justify-content:space-between;align-items:center;
}
.dash-mcard-num{
  font-size:.65rem;font-weight:900;color:var(--cw-muted);
  text-transform:uppercase;letter-spacing:.08em;
}
.mcard-status{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:999px;
  font-size:.68rem;font-weight:800;
}
.mcard-status.gati   { background:var(--np-teal-wash);color:#0d7a6e; }
.mcard-status.warn   { background:var(--cw-amber-wash);color:#7a4e0a; }
.mcard-status.info   { background:var(--np-indigo-wash);color:var(--np-indigo); }
.mcard-status.neutral{ background:var(--cw-surface-3);color:var(--cw-muted); }

.dash-mcard-title{
  font-size:.88rem;font-weight:800;color:var(--cw-ink);line-height:1.2;
}
.dash-mcard-detail{
  font-size:.73rem;color:var(--cw-muted);line-height:1.4;flex:1;
}
.dash-mcard-btn{
  display:inline-flex;align-items:center;
  font-size:.74rem;font-weight:800;color:var(--np-teal);
  margin-top:4px;
}

.dash-focus-card{
  border-radius:13px;padding:16px;margin:12px 12px 8px;
  border:1px solid transparent;
}
.dash-focus--teal{
  background:var(--np-teal-wash);border-color:rgba(20,184,166,.22);
}
.dash-focus--warn{
  background:var(--np-coral-wash);border-color:rgba(251,146,60,.22);
}
.dash-focus-lbl{
  font-size:.63rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--np-teal);margin-bottom:5px;
}
.dash-focus--warn .dash-focus-lbl{ color:var(--np-coral); }
.dash-focus-title{
  font-size:.92rem;font-weight:900;color:var(--cw-ink);margin-bottom:7px;line-height:1.25;
}
.dash-focus-detail{
  font-size:.76rem;color:var(--cw-ink-soft);line-height:1.55;
}
.dash-focus-btn{
  width:100%;margin-top:12px;padding:9px;border-radius:8px;
  border:1px solid var(--cw-line);background:var(--cw-surface);
  font-size:.8rem;font-weight:800;color:var(--cw-ink);cursor:pointer;
  transition:all .18s var(--cw-ease);
}
.dash-focus-btn:hover{
  background:var(--np-teal-wash);border-color:rgba(20,184,166,.25);color:var(--np-teal);
}

.dash-checklist{ padding:4px 12px 12px; }
.dash-check-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:9px 6px;border-bottom:1px solid var(--cw-line-soft);
}
.dash-check-item:last-child{ border-bottom:none; }
.dash-check-icon{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:900;flex-shrink:0;margin-top:1px;
}
.dash-check-icon.ok  { background:var(--np-teal-wash);color:#0d7a6e; }
.dash-check-icon.warn{ background:var(--cw-amber-wash);color:#d97706; }
.dash-check-icon.info{ background:var(--np-indigo-wash);color:var(--np-indigo); }
.dash-check-text strong{
  font-size:.82rem;font-weight:800;color:var(--cw-ink);display:block;
}
.dash-check-text span{ font-size:.72rem;color:var(--cw-muted); }

.dash-cds-badge{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px clamp(14px,2vw,22px);
  background:var(--cw-surface-2);
  border-top:1px solid var(--cw-line-soft);
}
.dash-cds-icon{
  width:22px;height:22px;border-radius:50%;
  background:var(--np-indigo-wash);color:var(--np-indigo);
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;flex-shrink:0;
}
.dash-cds-body{
  font-size:.7rem;color:var(--cw-muted);line-height:1.5;
}
.dash-cds-body strong{ color:var(--cw-ink-soft); }

.dgo-wrap{display:flex;flex-direction:column;gap:0}

/* ── Metric scorecards ────────────────────────────────────────────────── */
.dgo-metrics{
  display:flex;gap:0;
  padding:18px clamp(14px,2.4vw,26px);
  border-bottom:1px solid var(--cw-line-soft);
  flex-wrap:wrap;row-gap:14px;
  background:linear-gradient(180deg,var(--cw-surface),var(--cw-surface-2));
}
.dgo-metric{
  display:flex;flex-direction:column;gap:4px;
  padding-right:22px;border-right:1px solid var(--cw-line-soft);
  min-width:80px;
}
.dgo-metric:last-child{border-right:none}
.dgo-metric--primary{min-width:100px}
.dgo-metric-val{
  font-size:1.7rem;font-weight:900;letter-spacing:-.04em;
  line-height:1;color:var(--cw-ink);
}
.dgo-metric-val.ok   {color:var(--np-teal)}
.dgo-metric-val.warn {color:var(--cw-amber)}
.dgo-metric-val.danger{color:var(--np-coral)}
.dgo-metric-val.neutral{color:var(--cw-muted)}
.dgo-metric-label{
  font-size:.64rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--cw-muted);
}

.dgo-metric-bar{
  height:3px;background:var(--cw-line);border-radius:999px;overflow:hidden;
  width:70px;margin-top:3px;
}
.dgo-metric-bar-fill{
  height:100%;border-radius:999px;
  transition:width .7s cubic-bezier(.16,1,.3,1);
}
.dgo-metric-bar-fill.ok{background:var(--np-teal)}
.dgo-metric-bar-fill.warn{background:var(--cw-amber)}
.dgo-metric-bar-fill.danger{background:var(--np-coral)}

/* ── Intelligence strip ───────────────────────────────────────────────── */
.dgo-intel{
  display:flex;align-items:center;gap:0;
  padding:11px clamp(14px,2.4vw,26px);
  background:linear-gradient(90deg,rgba(20,184,166,.04),rgba(99,102,241,.03));
  border-bottom:1px solid var(--cw-line-soft);
  flex-wrap:wrap;row-gap:8px;
}
.dgo-intel-item{display:flex;flex-direction:column;gap:2px;padding-right:18px}
.dgo-intel-label{
  font-size:.6rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--cw-muted);
}
.dgo-intel-val{font-size:.86rem;font-weight:800;color:var(--cw-ink)}
.dgo-intel-sep{width:1px;height:28px;background:var(--cw-line);margin:0 18px 0 0;flex-shrink:0}
.dgo-cta-btn{
  margin-left:auto;flex-shrink:0;
  padding:7px 16px !important;font-size:.78rem !important;
}

.dgo-risk-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:999px;
  font-size:.74rem;font-weight:800;border:1px solid transparent;
}
.dgo-risk-badge.ok     {background:var(--np-teal-wash);color:#0d7a6e;border-color:rgba(20,184,166,.2)}
.dgo-risk-badge.info   {background:var(--np-indigo-wash);color:var(--np-indigo);border-color:rgba(99,102,241,.18)}
.dgo-risk-badge.warn   {background:var(--cw-amber-wash);color:#7a4e0a;border-color:rgba(217,164,65,.22)}
.dgo-risk-badge.danger {
  background:var(--np-coral-wash);color:#a83518;border-color:rgba(251,146,60,.22);
  animation:ciPulse 2.8s ease-in-out infinite;
}

/* ── Main content: two columns ────────────────────────────────────────── */
.dgo-content{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--cw-line-soft);
}
@media(max-width:720px){.dgo-content{grid-template-columns:1fr}}

.dgo-methods-panel,.dgo-signals-panel{
  padding:16px clamp(14px,2vw,22px);
}
.dgo-methods-panel{border-right:1px solid var(--cw-line-soft)}
@media(max-width:720px){.dgo-methods-panel{border-right:none;border-bottom:1px solid var(--cw-line-soft)}}

.dgo-panel-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;
}
.dgo-panel-title{
  font-size:.65rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--cw-muted);
}
.dgo-chart-label{
  font-size:.65rem;font-weight:700;color:var(--cw-muted);
  background:var(--cw-surface-2);padding:2px 8px;
  border-radius:999px;border:1px solid var(--cw-line-soft);
}

.dgo-methods-list{display:flex;flex-direction:column;gap:6px}
.dgo-method{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:11px;
  background:var(--cw-surface-2);border:1px solid var(--cw-line-soft);
  cursor:pointer;text-align:left;width:100%;
  transition:all .18s var(--cw-ease);
}
.dgo-method:hover{
  background:var(--np-teal-wash);border-color:rgba(20,184,166,.2);
  transform:translateX(2px);
}
.dgo-method-idx{
  width:24px;height:24px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:900;
  background:var(--np-teal-wash);color:var(--np-teal);
}
.dgo-method:hover .dgo-method-idx{background:var(--np-teal);color:#fff}
.dgo-method-info{flex:1;display:flex;flex-direction:column;gap:1px}
.dgo-method-info strong{font-size:.82rem;font-weight:800;color:var(--cw-ink);line-height:1.2}
.dgo-method-info span{font-size:.7rem;color:var(--cw-muted);line-height:1.3}
.dgo-method-arrow{color:var(--cw-muted);font-size:1.1rem;flex-shrink:0}

.dgo-empty-state{
  text-align:center;padding:20px 12px;color:var(--cw-muted);
}
.dgo-empty-state p{font-size:.78rem;font-style:italic}

.dgo-chart{
  margin-bottom:12px;
  background:var(--cw-surface);
  border:1px solid var(--cw-line-soft);
  border-radius:12px;padding:10px 8px 6px;
}
.dgo-chart-empty{padding:8px}

.dgo-triggers{margin-top:4px}
.dgo-triggers-label{
  font-size:.62rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--cw-muted);
  display:block;margin-bottom:6px;
}
.dgo-triggers-list{display:flex;flex-wrap:wrap;gap:5px}
.dgo-trigger{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:999px;
  font-size:.69rem;font-weight:700;
  background:var(--np-coral-wash);color:#9a3214;
  border:1px solid rgba(251,146,60,.2);
}
.dgo-trigger.ok{background:var(--np-teal-wash);color:#0d7a6e;border-color:rgba(20,184,166,.2)}
.dgo-trigger.info{background:var(--np-indigo-wash);color:var(--np-indigo);border-color:rgba(99,102,241,.18)}

.dgo-cv-bar{margin-top:12px;padding-top:12px;border-top:1px solid var(--cw-line-soft)}

/* ── Module pills ─────────────────────────────────────────────────────── */
.dgo-modules{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:10px clamp(14px,2vw,22px);
  background:var(--cw-surface-2);
}
.dgo-module-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:999px;
  font-size:.76rem;font-weight:700;
  background:var(--cw-surface);color:var(--cw-ink-soft);
  border:1px solid var(--cw-line);cursor:pointer;
  transition:all .18s var(--cw-ease);
}
.dgo-module-pill:hover{
  background:var(--np-teal-wash);color:var(--np-teal);
  border-color:rgba(20,184,166,.22);
}
.dgo-module-num{font-size:.63rem;font-weight:900;color:var(--cw-muted)}

/* ── Mobile refinement: keep dashboard overview connected and readable ─── */
@media (max-width: 760px){
  .dgo-metrics,
  .dash-metrics-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    padding:14px;
  }
  .dgo-metric,
  .dash-metric{
    min-width:0;
    padding:10px;
    border-right:0;
    border-radius:14px;
    background:rgba(255,255,255,.74);
    border:1px solid var(--cw-line-soft);
  }
  .dgo-metric-val,
  .dash-metric-val{
    font-size:1.32rem;
    letter-spacing:-.02em;
  }
  .dgo-metric-label,
  .dash-metric-label{
    font-size:.56rem;
    line-height:1.2;
    letter-spacing:.06em;
  }
  .dgo-metric-bar{
    width:100%;
    max-width:82px;
  }

  .dgo-intel,
  .dash-intel-row{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    padding:12px 14px 14px;
    align-items:stretch;
  }
  .dgo-intel-sep,
  .dash-intel-sep{
    display:none;
  }
  .dgo-intel-item,
  .dash-intel-block{
    min-width:0;
    width:100%;
    padding:11px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.72);
    border:1px solid var(--cw-line-soft);
  }
  .dgo-intel-val,
  .dash-intel-val{
    overflow-wrap:anywhere;
    line-height:1.35;
  }
  .dgo-ke-cits{
    width:100%;
    min-width:0;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
  }
  .ke-citation-compact{
    max-width:100%;
    white-space:normal;
    line-height:1.25;
  }
  .dgo-cta-btn{
    width:100%;
    margin:2px 0 0 !important;
    justify-content:center;
    min-height:44px;
  }
}

@media (max-width: 480px){
  .dgo-metrics,
  .dash-metrics-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    padding:12px;
  }
  .dgo-metric,
  .dash-metric{
    padding:10px 9px;
  }
  .dgo-metric--primary{
    grid-column:span 2;
  }
  .dgo-metric-val,
  .dash-metric-val{
    font-size:1.24rem;
  }
}

/* ── Compact citation inline ─────────────────────────────────────────────── */
.ke-citation-compact{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;font-size:.69rem;font-weight:700;
  background:var(--cw-surface-2);border:1px solid var(--cw-line);
  color:var(--cw-ink-soft);text-decoration:none;
  transition:all .18s var(--cw-ease);cursor:pointer;
}
.ke-citation-compact:hover{
  background:var(--np-teal-wash);border-color:rgba(20,184,166,.2);
  color:var(--np-teal);
}
.ke-cit-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
.ke-cit-year{opacity:.6;font-size:.65rem}

/* ── Full citation card ───────────────────────────────────────────────────── */
.ke-citation-card{
  background:var(--cw-surface);border:1px solid var(--cw-line);
  border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:5px;
  transition:box-shadow .2s;
}
.ke-citation-card:hover{box-shadow:var(--cw-shadow-sm)}
.ke-cit-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.ke-cit-type{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.ke-cit-year-badge{
  font-size:.68rem;font-weight:800;padding:1px 8px;
  border-radius:999px;background:var(--cw-surface-2);
  color:var(--cw-muted);border:1px solid var(--cw-line);
}
.ke-cit-label{font-size:.86rem;font-weight:800;color:var(--cw-ink);line-height:1.2}
.ke-cit-full{font-size:.73rem;color:var(--cw-muted);font-style:italic;line-height:1.5}
.ke-cit-note{font-size:.75rem;color:var(--cw-ink-soft);line-height:1.5}
.ke-cit-link{
  font-size:.72rem;font-weight:700;color:var(--np-teal);
  text-decoration:none;margin-top:2px;
}
.ke-cit-link:hover{text-decoration:underline}

/* ── Evidence rationale panel ────────────────────────────────────────────── */
.ke-rationale{
  background:linear-gradient(135deg,rgba(20,184,166,.05),rgba(99,102,241,.03));
  border:1px solid rgba(20,184,166,.2);border-radius:14px;
  padding:16px 18px;display:flex;flex-direction:column;gap:10px;
}
.ke-rationale-head{
  display:flex;align-items:center;gap:10px;
  font-size:.66rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;color:var(--np-teal);
}
.ke-rationale-icon{font-size:1rem}
.ke-rationale-text{font-size:.8rem;line-height:1.65;color:var(--cw-ink-soft)}
.ke-rationale-text strong{color:var(--cw-ink)}
.ke-guideline-cite{
  font-size:.75rem;font-style:italic;color:var(--cw-muted);
  padding:8px 12px;background:var(--cw-surface);
  border-radius:8px;border-left:3px solid var(--np-teal);
  line-height:1.5;
}
.ke-citations-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}

/* ── PubMed live search panel ────────────────────────────────────────────── */
.ke-pubmed-panel{
  background:var(--cw-surface);border:1px solid var(--cw-line);
  border-radius:14px;overflow:hidden;
}
.ke-pubmed-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--cw-line-soft);
  background:var(--cw-surface-2);
}
.ke-pubmed-title-row{
  font-size:.72rem;font-weight:800;color:var(--cw-ink);
  display:flex;align-items:center;gap:7px;
}
.ke-pubmed-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:999px;
  font-size:.62rem;font-weight:800;
  background:rgba(37,99,235,.1);color:#1d4ed8;
  border:1px solid rgba(37,99,235,.15);
}
.ke-pubmed-query{
  font-size:.68rem;color:var(--cw-muted);font-family:monospace;
  padding:2px 7px;background:var(--cw-bg);border-radius:5px;
  border:1px solid var(--cw-line);
}
.ke-pubmed-body{padding:12px}
.ke-pubmed-loading{
  display:flex;align-items:center;gap:10px;
  padding:14px;font-size:.78rem;color:var(--cw-muted);
}
.ke-pubmed-spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--cw-line);
  border-top-color:var(--np-teal);
  animation:keSpin .8s linear infinite;flex-shrink:0;
}
@keyframes keSpin{to{transform:rotate(360deg)}}
.ke-pubmed-empty{font-size:.76rem;color:var(--cw-muted);font-style:italic;padding:8px}
.ke-pubmed-result{
  display:flex;flex-direction:column;gap:4px;
  padding:10px 12px;border-radius:10px;
  border:1px solid var(--cw-line-soft);
  margin-bottom:7px;text-decoration:none;
  background:var(--cw-surface-2);
  transition:all .18s var(--cw-ease);cursor:pointer;
}
.ke-pubmed-result:hover{
  background:var(--np-teal-wash);border-color:rgba(20,184,166,.2);
  transform:translateX(2px);
}
.ke-pubmed-title{font-size:.8rem;font-weight:700;color:var(--cw-ink);line-height:1.35}
.ke-pubmed-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:.69rem;color:var(--cw-muted)}
.ke-pubmed-year{
  font-weight:800;color:var(--np-teal);
  background:var(--np-teal-wash);padding:1px 7px;
  border-radius:999px;
}
.ke-pubmed-pmid{
  font-size:.64rem;color:var(--cw-muted);
  font-family:monospace;
}
.ke-pubmed-footer{
  padding:8px 16px 10px;border-top:1px solid var(--cw-line-soft);
  font-size:.66rem;color:var(--cw-muted);
  display:flex;justify-content:space-between;align-items:center;
}
.ke-pubmed-footer a{color:var(--np-teal);text-decoration:none}

/* ── Evidence grid (library / source cards) ──────────────────────────────── */
.ke-source-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;
}
.ke-source-type-filter{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;
}
.ke-type-pill{
  padding:4px 12px;border-radius:999px;font-size:.72rem;font-weight:700;
  background:var(--cw-surface-2);color:var(--cw-ink-soft);
  border:1px solid var(--cw-line);cursor:pointer;
  transition:all .18s var(--cw-ease);
}
.ke-type-pill.active,
.ke-type-pill:hover{
  background:var(--np-teal-wash);color:var(--np-teal);
  border-color:rgba(20,184,166,.2);
}

/* ── dgo-ke-cits: citation pills in dashboard intel strip ─────────────── */
.dgo-ke-cits{
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;flex:1;min-width:0;
}

/* ── v8.3.2: premium dashboard progress chart ─────────────────────────── */
.dgo-signals-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(240,251,248,.78)),
    radial-gradient(420px 180px at 78% 8%, rgba(20,184,166,.12), transparent 62%);
}
.dgo-signals-panel .dgo-panel-head{
  margin-bottom:14px;
}
.dgo-chart-label{
  padding:6px 12px !important;
  background:rgba(255,255,255,.86) !important;
  border-color:rgba(207,226,222,.88) !important;
  color:#55706d !important;
  box-shadow:0 8px 22px rgba(16,50,56,.05);
}
.dgo-chart{
  position:relative;
  margin-bottom:14px !important;
  padding:0 !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,251,248,.94)) !important;
  border:1px solid rgba(207,226,222,.88) !important;
  border-radius:20px !important;
  box-shadow:
    0 20px 44px rgba(20,61,67,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
  overflow:hidden;
}
.dgo-chart::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(20,184,166,.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(99,102,241,.045) 1px, transparent 1px);
  background-size:64px 100%, 100% 36px;
  pointer-events:none;
}
.dgo-chart-svg{
  position:relative;
  z-index:1;
  width:100%;
  min-height:190px;
  display:block;
}
.dgo-triggers{
  margin-top:10px !important;
}
.dgo-triggers-list{
  gap:8px !important;
}
.dgo-trigger{
  padding:7px 12px !important;
  border-radius:999px !important;
  font-size:.74rem !important;
  font-weight:850 !important;
  box-shadow:0 8px 18px rgba(16,50,56,.05);
}
.dgo-cv-bar{
  margin-top:16px !important;
  padding:14px 16px 13px !important;
  border:1px solid rgba(207,226,222,.86) !important;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(255,255,255,.84), rgba(248,253,251,.92));
  box-shadow:0 14px 30px rgba(20,61,67,.06);
}
.dgo-cv-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.dgo-cv-head span{
  font-size:.7rem;
  font-weight:900;
  color:#617876;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.dgo-cv-head strong{
  font-size:.8rem;
  font-weight:950;
}
.dgo-cv-bar.is-stable .dgo-cv-head strong{color:#0d7a6e}
.dgo-cv-bar.is-watch .dgo-cv-head strong{color:#d97706}
.dgo-cv-bar.is-risk .dgo-cv-head strong{color:#a83518}
.dgo-cv-track{
  height:8px;
  background:linear-gradient(90deg, #e7f1ee, #edf1f7);
  border-radius:999px;
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(9,39,44,.08);
}
.dgo-cv-fill{
  height:100%;
  border-radius:999px;
  transition:width .65s cubic-bezier(.16,1,.3,1);
}
.dgo-cv-bar.is-stable .dgo-cv-fill{background:linear-gradient(90deg, var(--np-teal), #5eead4)}
.dgo-cv-bar.is-watch .dgo-cv-fill{background:linear-gradient(90deg, #f59e0b, #fb923c)}
.dgo-cv-bar.is-risk .dgo-cv-fill{background:linear-gradient(90deg, #f97316, #ef4444)}
.dgo-cv-scale{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  font-size:.66rem;
  color:#6f817f;
  font-weight:650;
}

@media(max-width:720px){
  .dgo-chart-svg{min-height:164px}
  .dgo-cv-bar{padding:12px 13px !important}
}

/* ── v8.3.1: premium tab focus state ─────────────────────────────────────
   Browsers can draw a heavy native focus outline on clicked tab buttons.
   Keep keyboard accessibility, but render the focus ring inside the existing
   tab geometry so the active module card does not look broken or oversized. */
.app-shell .tab:focus,
.app-shell .tab:focus-visible{
  outline: none !important;
}
.app-shell .tab:focus-visible{
  box-shadow:
    inset 0 0 0 2px rgba(20,184,166,.88),
    0 0 0 3px rgba(20,184,166,.12),
    var(--cw-shadow-xs) !important;
}
.app-shell .tab.is-active:focus-visible{
  box-shadow:
    inset 0 0 0 2px rgba(20,184,166,.92),
    0 0 0 3px rgba(99,102,241,.14),
    var(--cw-shadow-sm) !important;
}

.method-card--v2{
  background:var(--cw-surface,#fff);
  border:1px solid var(--cw-line,#e2e6f2);
  border-radius:18px;
  padding:0;
  overflow:hidden;
  display:flex;flex-direction:column;gap:0;
  box-shadow:0 2px 10px rgba(27,34,64,.05);
  transition:box-shadow .2s var(--cw-ease);
}
.method-card--v2:hover{box-shadow:0 6px 22px rgba(27,34,64,.1)}

.method-card--v2::before{
  content:"";display:block;height:4px;
  background:linear-gradient(90deg,var(--np-teal),var(--np-indigo));
}

.method-card-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;padding:18px 20px 12px;
}
.method-card-head-left{display:flex;gap:12px;align-items:flex-start;flex:1;min-width:0}
.method-card-score-badge{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:900;
  background:linear-gradient(135deg,var(--np-teal),var(--np-indigo));
  color:#fff;box-shadow:0 3px 8px rgba(20,184,166,.3);
}
.method-card-title{
  font-size:.95rem;font-weight:800;color:var(--cw-ink,#1b2240);
  line-height:1.25;margin:0;
}

.method-card-why{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:0 20px 10px;
}
.method-card-why-label{
  font-size:.63rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--cw-muted,#6b7290);flex-shrink:0;
}
.method-reason-chip{
  display:inline-flex;align-items:center;
  padding:2px 9px;border-radius:999px;
  font-size:.7rem;font-weight:700;
  background:var(--np-teal-wash,#e3f8f5);color:#0d7a6e;
  border:1px solid rgba(20,184,166,.18);
}

.method-card-evidence{
  font-size:.76rem;line-height:1.55;color:var(--cw-ink-soft,#424a68);
  padding:0 20px 8px;
  font-style:italic;
  border-bottom:1px solid var(--cw-line-soft,#edf5f0);
}
.method-card-body{
  font-size:.82rem;line-height:1.65;color:var(--cw-ink,#1b2240);
  padding:10px 20px 8px;
}

.method-card-actions{
  padding:10px 20px 12px;
  border-top:1px dashed var(--cw-line-soft,#edf5f0);
}
.method-actions-title{
  font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--cw-muted,#6b7290);
  display:block;margin-bottom:7px;
}
.method-actions-list{
  margin:0;padding-left:16px;display:flex;flex-direction:column;gap:5px;
}
.method-actions-list li{
  font-size:.79rem;color:var(--cw-ink-soft,#424a68);line-height:1.45;
}

/* ── Session Flow Accordion ────────────────────────────────────────────── */
.method-session-flow{
  border-top:2px solid var(--np-teal,#14b8a6);
  margin:0;
}
.method-sf-summary{
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;cursor:pointer;
  background:linear-gradient(90deg,rgba(20,184,166,.05),rgba(99,102,241,.03));
  list-style:none;user-select:none;
}
.method-sf-summary::-webkit-details-marker{display:none}
.method-sf-summary strong{
  flex:1;font-size:.83rem;color:var(--cw-ink,#1b2240);
}
.method-sf-steps-count{
  font-size:.68rem;font-weight:700;
  background:var(--cw-surface-2,#f7fbf9);
  padding:2px 9px;border-radius:999px;
  color:var(--cw-muted,#6b7290);border:1px solid var(--cw-line,#e2e6f2);
  flex-shrink:0;
}
details[open] .method-sf-summary{
  border-bottom:1px solid var(--cw-line-soft,#edf5f0);
}

.method-sf-body{
  padding:14px 20px;display:flex;flex-direction:column;gap:16px;
  background:var(--cw-surface,#fff);
}

.method-sf-section{border-radius:12px;overflow:hidden;border:1px solid var(--cw-line,#e2e6f2)}
.method-sf-section-head{
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;
  background:var(--cw-surface-2,#f7fbf9);
  border-bottom:1px solid var(--cw-line-soft,#edf5f0);
}
.method-sf-section-head strong{
  flex:1;font-size:.78rem;font-weight:800;color:var(--cw-ink,#1b2240);
}
.method-sf-section-count{
  font-size:.65rem;font-weight:700;color:var(--cw-muted,#6b7290);
  background:var(--cw-surface,#fff);
  padding:1px 7px;border-radius:999px;
  border:1px solid var(--cw-line,#e2e6f2);
}

.method-sf-steps{
  margin:0;padding:10px 14px 10px 10px;
  display:flex;flex-direction:column;gap:6px;list-style:none;
}
.method-sf-step{
  display:flex;align-items:flex-start;gap:10px;
  padding:6px 8px;border-radius:8px;
  transition:background .15s;
}
.method-sf-step:hover{background:var(--np-teal-wash,#e3f8f5)}
.method-sf-step-num{
  width:22px;height:22px;border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:900;
  background:var(--np-teal-wash,#e3f8f5);color:var(--np-teal,#14b8a6);
  border:1px solid rgba(20,184,166,.15);
}
.method-sf-step-text{
  font-size:.78rem;line-height:1.55;color:var(--cw-ink-soft,#424a68);flex:1;
}

.method-caution-bar{
  padding:10px 20px;
  background:var(--cw-amber-wash,#fdf3e2);
  border-top:1px solid rgba(217,164,65,.2);
  font-size:.76rem;color:#7a4e0a;font-weight:700;
}

/* ── Subscription pricing — yearly option line ──────────────────────────── */
.sub-price-alt{
  font-size:.78rem;color:var(--cw-muted,#6b7290);
  margin:-4px 0 8px;font-weight:600;
}
.sub-price-alt strong{
  color:var(--np-teal,#14b8a6);font-weight:800;
}

/* ── 1. REFINED DESIGN TOKENS ─────────────────────────────────────────── */
:root {

  --pro-teal:        #0d7a76;
  --pro-teal-2:      #0a5c59;
  --pro-teal-3:      #094f4c;
  --pro-teal-wash:   #e8f5f4;
  --pro-teal-mid:    #b8e2e0;
  --pro-accent:      #c07a56;
  --pro-accent-wash: #faf0ea;
  --pro-emerald:     #1a9e6e;
  --pro-emerald-wash:#e6f6ef;
  --pro-amber:       #c47f1a;
  --pro-amber-wash:  #fdf3e0;
  --pro-danger:      #c0392b;
  --pro-danger-wash: #fdf0ef;


  --pro-bg:        #f2f6f6;
  --pro-surface:   #ffffff;
  --pro-surface-2: #f7fafa;
  --pro-surface-3: #edf4f3;


  --pro-ink:       #152520;
  --pro-ink-2:     #2d4440;
  --pro-muted:     #627370;
  --pro-line:      #d8e6e4;
  --pro-line-soft: #eaf2f1;


  --pro-shadow-xs: 0 1px 3px rgba(10, 45, 42, 0.05);
  --pro-shadow-sm: 0 3px 10px rgba(10, 45, 42, 0.06), 0 1px 3px rgba(10,45,42,.04);
  --pro-shadow:    0 8px 28px rgba(10, 45, 42, 0.08), 0 2px 8px rgba(10,45,42,.04);
  --pro-shadow-lg: 0 20px 52px rgba(10, 45, 42, 0.12), 0 6px 16px rgba(10,45,42,.05);
  --pro-shadow-focus: 0 0 0 3px rgba(13, 122, 118, 0.18);


  --pro-font: "Inter", "SF Pro Display", system-ui, sans-serif;


  --pro-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --pro-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pro-dur-fast: 150ms;
  --pro-dur:      220ms;
  --pro-dur-slow: 380ms;


  --pro-r-xs:  4px;
  --pro-r-sm:  8px;
  --pro-r-md:  12px;
  --pro-r-lg:  16px;
  --pro-r-xl:  22px;
  --pro-r-2xl: 28px;
}

/* ── 2. PAGE SHELL ────────────────────────────────────────────────────── */
html, body {
  background: var(--pro-bg) !important;
  font-family: var(--pro-font) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

body::before {
  background-image:
    linear-gradient(rgba(10,45,42,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,45,42,.015) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  opacity: 0.7 !important;
}

/* ── 3. TOPBAR — Deep teal with subtle warm gradient ──────────────────── */
.topbar {
  background:
    radial-gradient(700px 180px at 80% -10%, rgba(13,180,170,.22), transparent 65%),
    linear-gradient(135deg, var(--pro-teal-3) 0%, var(--pro-teal-2) 48%, #0c6a65 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 8px 28px rgba(8,36,34,.22) !important;
  border-bottom: none !important;
  min-height: 80px !important;
}

.topbar h1 {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem) !important;
  font-weight: 820 !important;
  letter-spacing: -0.022em !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

.brand-subtitle {
  color: rgba(190, 235, 232, 0.9) !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
}

.brand-tagline {
  color: rgba(160, 215, 212, 0.65) !important;
  font-size: 0.72rem !important;
}

.brand-block::before {
  background: linear-gradient(180deg, #38e0c9, var(--pro-accent)) !important;
  box-shadow: 0 0 18px rgba(56, 224, 201, 0.35) !important;
  border-radius: 3px !important;
}

.topbar-page-links a {
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(210,240,238,.88) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: .81rem !important;
  padding: 6px 14px !important;
  transition: all var(--pro-dur) var(--pro-ease) !important;
  letter-spacing: .01em !important;
}
.topbar-page-links a:hover,
.topbar-page-links a:focus-visible {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

.topbar .icon-button {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: rgba(210,240,238,.9) !important;
  transition: all var(--pro-dur) var(--pro-ease) !important;
}
.topbar .icon-button:hover {
  background: rgba(255,255,255,.2) !important;
  transform: translateY(-1px) !important;
}

.language-switch {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
}
.language-pill { color: rgba(210,240,238,.75) !important; }
.language-pill.is-active {
  background: linear-gradient(120deg, #38e0c9, var(--pro-teal)) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(13,122,118,.35) !important;
}

/* ── 4. CASE STRIP ────────────────────────────────────────────────────── */
.case-strip {
  background: linear-gradient(to right, var(--pro-surface-2), var(--pro-surface)) !important;
  border-bottom: 1px solid var(--pro-line) !important;
  padding: 14px clamp(16px, 3vw, 36px) !important;
}
.case-strip h2 {
  font-weight: 820 !important;
  color: var(--pro-ink) !important;
  letter-spacing: -0.015em !important;
}

.meta-pills > *, .meta-pills span, .pill {
  background: var(--pro-teal-wash) !important;
  border: 1px solid var(--pro-teal-mid) !important;
  color: var(--pro-teal-2) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: .76rem !important;
  padding: 4px 11px !important;
  letter-spacing: .01em !important;
  transition: all var(--pro-dur-fast) var(--pro-ease) !important;
}
.pill.warn {
  background: var(--pro-amber-wash) !important;
  border-color: #e8c98a !important;
  color: var(--pro-amber) !important;
}
.pill.ok {
  background: var(--pro-emerald-wash) !important;
  border-color: #a8e0c8 !important;
  color: var(--pro-emerald) !important;
}
.pill.danger, .pill.is-danger {
  background: var(--pro-danger-wash) !important;
  border-color: #f2b8b4 !important;
  color: var(--pro-danger) !important;
}

/* ── 5. WORKSPACE & CARDS ─────────────────────────────────────────────── */
.workspace {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-r-xl) !important;
  box-shadow: var(--pro-shadow) !important;
  overflow: hidden !important;
}

.app-shell :is(
  .sidebar-section,
  .panel-block,
  .metric-card,
  .method-card,
  .exercise-card,
  .library-card,
  .library-source-card,
  .session-item,
  .stack-item,
  .goal-card,
  .criteria-card,
  .advisor-result,
  .advisor-section,
  .knowledge-alert,
  .knowledge-columns > div,
  .planning-lab-card,
  .planning-lab-decision article,
  .planning-lab-focus,
  .subscription-intro-card,
  .security-premium-card,
  .pricing-card,
  .collaboration-access-banner,
  .free-preview-list-lock,
  .pia-form, .pia-goals, .pia-preview,
  .api-settings, .advisor-help, .advisor-control,
  .avoid-item,
  .session-export-tools,
  .clean-details,
  .group-module-card
) {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-r-lg) !important;
  box-shadow: var(--pro-shadow-sm) !important;
  color: var(--pro-ink) !important;
  transition:
    box-shadow var(--pro-dur) var(--pro-ease),
    border-color var(--pro-dur) var(--pro-ease),
    transform var(--pro-dur) var(--pro-ease) !important;
}

.app-shell :is(
  .method-card,
  .exercise-card,
  .library-card,
  .session-item,
  .goal-card,
  .group-module-card,
  .knowledge-alert,
  .knowledge-columns > div,
  .stack-item
):hover {
  border-color: var(--pro-teal-mid) !important;
  box-shadow: var(--pro-shadow) !important;
  transform: translateY(-2px) !important;
}

.app-shell :is(
  .today-timeline > *,
  .premium-list > *,
  .stat-card,
  .report-block,
  .criteria-group,
  .icd-card,
  .intervention-method-ranked,
  .intervention-idea-section,
  .exercise-domain-section,
  .exercise-card-grid > *,
  .timeline-item,
  .team-member-card,
  .collab-member-card,
  .core-admin-user-card
) {
  background: var(--pro-surface-2) !important;
  border-color: var(--pro-line-soft) !important;
  color: var(--pro-ink) !important;
}

.premium-panel {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-r-xl) !important;
  box-shadow: var(--pro-shadow) !important;
}

/* ── 6. TYPOGRAPHY ────────────────────────────────────────────────────── */
.app-shell :is(h1, h2, h3, h4),
.app-shell .section-head h2,
.app-shell .panel-block h3,
.app-shell .case-strip h2,
.app-shell .section-subhead h3,
.app-shell .method-card h3,
.app-shell .exercise-card h4,
.app-shell .criteria-group h3,
.app-shell .planning-lab-card-head h3 {
  color: var(--pro-ink) !important;
  font-weight: 780 !important;
  letter-spacing: -0.016em !important;
}

.app-shell :is(p, small, .microcopy, .helper, .empty-state) {
  color: var(--pro-muted) !important;
}

.app-shell strong {
  color: var(--pro-ink-2) !important;
  font-weight: 750 !important;
}

.eyebrow, .eyebrow.dark {
  color: var(--pro-teal) !important;
  font-size: .68rem !important;
  font-weight: 820 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* ── 7. TABS ──────────────────────────────────────────────────────────── */
.tabs {
  background: var(--pro-surface-2) !important;
  border-bottom: 1px solid var(--pro-line) !important;
  padding: 0 clamp(12px, 2vw, 24px) !important;
  gap: 2px !important;
}

.tab {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--pro-r-sm) var(--pro-r-sm) 0 0 !important;
  color: var(--pro-muted) !important;
  font-weight: 700 !important;
  font-size: .84rem !important;
  padding: 11px 16px !important;
  position: relative !important;
  transition: all var(--pro-dur) var(--pro-ease) !important;
  letter-spacing: .005em !important;
}

.tab:hover {
  color: var(--pro-teal) !important;
  background: rgba(13,122,118,.06) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.tab.is-active {
  background: var(--pro-surface) !important;
  border-color: var(--pro-line) !important;
  border-bottom-color: var(--pro-surface) !important;
  color: var(--pro-teal-2) !important;
  font-weight: 800 !important;
  box-shadow: var(--pro-shadow-xs) !important;
}

.tab.is-active::after {
  content: "" !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 32px !important;
  height: 3px !important;
  border-radius: 3px 3px 0 0 !important;
  background: linear-gradient(90deg, #38e0c9, var(--pro-teal)) !important;
}

/* ── 8. BUTTONS ───────────────────────────────────────────────────────── */

.app-shell :is(.primary-button, .small-button),
.primary-button, .small-button {
  background: linear-gradient(135deg, var(--pro-teal) 0%, var(--pro-teal-2) 100%) !important;
  border: none !important;
  border-radius: var(--pro-r-sm) !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  font-size: .88rem !important;
  box-shadow: 0 4px 14px rgba(13,122,118,.28), 0 1px 3px rgba(13,122,118,.18) !important;
  transition: all var(--pro-dur) var(--pro-ease) !important;
  letter-spacing: .01em !important;
}
.app-shell :is(.primary-button, .small-button):hover,
.primary-button:hover, .small-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(13,122,118,.36), 0 2px 6px rgba(13,122,118,.2) !important;
}
.app-shell :is(.primary-button, .small-button):active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(13,122,118,.2) !important;
}

.app-shell :is(.secondary-button, label.secondary-button, .icon-button:not(.topbar .icon-button)) {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-r-sm) !important;
  color: var(--pro-ink-2) !important;
  font-weight: 700 !important;
  box-shadow: var(--pro-shadow-xs) !important;
  transition: all var(--pro-dur) var(--pro-ease) !important;
}
.app-shell :is(.secondary-button, label.secondary-button):hover {
  background: var(--pro-teal-wash) !important;
  border-color: var(--pro-teal-mid) !important;
  color: var(--pro-teal-2) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--pro-shadow-sm) !important;
}

.app-shell .danger-button {
  background: var(--pro-danger-wash) !important;
  border: 1px solid #f2b8b4 !important;
  color: var(--pro-danger) !important;
  border-radius: var(--pro-r-sm) !important;
  font-weight: 750 !important;
  transition: all var(--pro-dur) var(--pro-ease) !important;
}
.app-shell .danger-button:hover {
  background: var(--pro-danger) !important;
  color: #fff !important;
  border-color: var(--pro-danger) !important;
  transform: translateY(-1px) !important;
}

/* ── 9. FORMS ─────────────────────────────────────────────────────────── */
.app-shell :is(input, select, textarea) {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-r-sm) !important;
  color: var(--pro-ink) !important;
  font-family: var(--pro-font) !important;
  transition: border-color var(--pro-dur-fast) var(--pro-ease), box-shadow var(--pro-dur-fast) var(--pro-ease) !important;
}
.app-shell :is(input, textarea)::placeholder {
  color: #9aaba8 !important;
  opacity: 1 !important;
}
.app-shell :is(input, select, textarea):focus {
  border-color: var(--pro-teal) !important;
  box-shadow: var(--pro-shadow-focus) !important;
  outline: none !important;
}
.app-shell :is(label, .compact-label, .checkbox-line span) {
  color: var(--pro-ink-2) !important;
  font-weight: 700 !important;
  font-size: .84rem !important;
}

/* ── 10. METRIC CARDS ─────────────────────────────────────────────────── */
.metric-card {
  border-radius: var(--pro-r-md) !important;
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-line) !important;
  box-shadow: var(--pro-shadow-xs) !important;
  transition: all var(--pro-dur) var(--pro-ease) !important;
  overflow: hidden !important;
}
.metric-card:hover {
  box-shadow: var(--pro-shadow-sm) !important;
  border-color: var(--pro-teal-mid) !important;
}
.metric-card strong, .metric-value {
  color: var(--pro-teal-2) !important;
  font-weight: 820 !important;
  font-size: 1.45rem !important;
  letter-spacing: -0.02em !important;
}
.metric-card small, .metric-label {
  color: var(--pro-muted) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

/* ── 11. STATUS BADGES ────────────────────────────────────────────────── */
.badge {
  border-radius: 999px !important;
  font-weight: 750 !important;
  font-size: .72rem !important;
  letter-spacing: .02em !important;
  padding: 3px 10px !important;
}

.app-shell :is(.advisor-status, .notice, .status-message) {
  background: var(--pro-amber-wash) !important;
  border: 1px solid #e8c98a !important;
  color: #7a4e0a !important;
  border-radius: var(--pro-r-md) !important;
}
.app-shell :is(.advisor-status.error, .microcopy.is-error, .error) {
  background: var(--pro-danger-wash) !important;
  border-color: #f2b8b4 !important;
  color: #8a1f1a !important;
}
.app-shell :is(.advisor-status.ok, .microcopy.is-success, .success) {
  background: var(--pro-emerald-wash) !important;
  border-color: #a8e0c8 !important;
  color: #0a6f50 !important;
}

/* ── 12. SIDEBAR ──────────────────────────────────────────────────────── */
.case-sidebar {
  background: var(--pro-surface-2) !important;
  border-right: 1px solid var(--pro-line) !important;
}

.sidebar-section h2 {
  font-size: .72rem !important;
  font-weight: 820 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--pro-muted) !important;
}

/* ── 13. SECTION HEADS ────────────────────────────────────────────────── */
.section-head {
  border-bottom: 1px solid var(--pro-line) !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
}
.section-head h2 {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--pro-ink) !important;
  letter-spacing: -0.015em !important;
}

/* ── 14. LINKS ────────────────────────────────────────────────────────── */
.app-shell a { color: var(--pro-teal) !important; }
.app-shell a:visited { color: var(--pro-teal-2) !important; }
.app-shell a:hover, .app-shell a:focus-visible {
  color: var(--pro-teal-3) !important;
  text-decoration: underline !important;
}

/* ── 15. CASE LIST CARDS ──────────────────────────────────────────────── */
.case-card {
  border-radius: var(--pro-r-md) !important;
  border: 1px solid var(--pro-line) !important;
  background: var(--pro-surface) !important;
  transition: all var(--pro-dur) var(--pro-ease) !important;
  cursor: pointer !important;
  padding: 14px 16px !important;
}
.case-card:hover {
  border-color: var(--pro-teal-mid) !important;
  box-shadow: var(--pro-shadow-sm) !important;
  transform: translateX(3px) !important;
}
.case-card.is-active {
  background: var(--pro-teal-wash) !important;
  border-color: var(--pro-teal-mid) !important;
  border-left: 3px solid var(--pro-teal) !important;
}

/* ── 16. KNOWLEDGE ALERTS ─────────────────────────────────────────────── */
.app-shell .knowledge-alert {
  border-left: 3px solid var(--pro-teal) !important;
  background: var(--pro-teal-wash) !important;
  border-color: var(--pro-teal-mid) !important;
}
.app-shell .knowledge-alert strong,
.app-shell .knowledge-columns strong {
  color: var(--pro-teal-2) !important;
  font-weight: 800 !important;
}

/* ── 17. SESSION ITEMS ────────────────────────────────────────────────── */
.session-item {
  border-radius: var(--pro-r-md) !important;
}
.session-item:hover {
  border-color: var(--pro-teal-mid) !important;
  box-shadow: var(--pro-shadow-sm) !important;
}

/* ── 18. SECTION BORDERS & DIVIDERS ──────────────────────────────────── */
.app-shell hr,
.app-shell .section-head,
.app-shell .planning-lab-card-head {
  border-color: var(--pro-line) !important;
}

/* ── 19. SCROLLBAR — refined ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--pro-line);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--pro-teal-mid); }

/* ── 20. FOCUS STATES — accessibility ────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--pro-teal) !important;
  outline-offset: 2px !important;
}
button:focus-visible,
.secondary-button:focus-visible,
.primary-button:focus-visible {
  outline: 2px solid var(--pro-teal) !important;
  outline-offset: 2px !important;
  box-shadow: var(--pro-shadow-focus) !important;
}

/* ── 21. SMOOTH TRANSITIONS — page load ──────────────────────────────── */
.sidebar-section,
.panel-block,
.metric-card,
.method-card,
.workspace,
.premium-panel {
  transition:
    box-shadow var(--pro-dur) var(--pro-ease),
    border-color var(--pro-dur) var(--pro-ease),
    transform var(--pro-dur) var(--pro-ease) !important;
}

/* ── 22. EMPTY STATES ─────────────────────────────────────────────────── */
.empty-state {
  padding: 40px 24px !important;
  text-align: center !important;
  color: var(--pro-muted) !important;
}
.empty-state p {
  color: var(--pro-muted) !important;
  font-size: .9rem !important;
}

/* ── 23. REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 24. MOBILE REFINEMENTS ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .topbar { min-height: 68px !important; padding: 12px 16px !important; }
  .topbar h1 { font-size: 1.3rem !important; }
  .workspace { border-radius: var(--pro-r-md) !important; }
  .metric-card { border-radius: var(--pro-r-sm) !important; }
  .tab { font-size: .78rem !important; padding: 9px 12px !important; }
}

/* ── 25. PRINT ────────────────────────────────────────────────────────── */
@media print {
  .topbar, .tabs, .case-sidebar { display: none !important; }
  .workspace { box-shadow: none !important; border: none !important; }
  body { background: white !important; }
}

/* ── Clinical Narrative Fields ────────────────────────────────────────── */
.narrative-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.narrative-grid > label:first-child {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .narrative-grid { grid-template-columns: 1fr; }
  .narrative-grid > label:first-child { grid-column: 1; }
}

.session-narrative {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-radius: var(--pro-r-sm, 8px);
  font-size: .83rem;
  line-height: 1.5;
  background: var(--pro-surface-2, #f7fafa);
  border-left: 3px solid var(--pro-line, #d8e6e4);
}
.session-narrative.ok {
  background: var(--pro-emerald-wash, #e6f6ef);
  border-left-color: var(--pro-emerald, #1a9e6e);
}
.session-narrative.warn {
  background: var(--pro-amber-wash, #fdf3e0);
  border-left-color: var(--pro-amber, #c47f1a);
}
.session-narrative.info {
  background: var(--pro-teal-wash, #e8f5f4);
  border-left-color: var(--pro-teal, #0d7a76);
}
.session-narrative strong {
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: block;
  margin-bottom: 2px;
  color: var(--pro-ink-2, #2d4440) !important;
}

/* ── Contacts Grid ────────────────────────────────────────────────────── */
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.contacts-grid .sidebar-section {
  padding: 18px;
}
.contacts-grid h2 {
  font-size: .78rem !important;
  font-weight: 820 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--pro-teal, #0d7a76) !important;
  margin-bottom: 12px !important;
}
.contact-input {
  width: 100%;
  margin-top: 3px;
  font-size: .85rem;
}

/* ── Parent Report Preview ────────────────────────────────────────────── */
.parent-report-preview {
  background: var(--pro-surface, #fff);
  border: 1px solid var(--pro-line, #d8e6e4);
  border-radius: var(--pro-r-lg, 16px);
  padding: 24px;
  max-width: 560px;
}
.parent-report-text {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--pro-ink, #152520);
  white-space: pre-wrap;
  font-family: var(--pro-font, "Inter", sans-serif);
}

/* ── Documents Panel ──────────────────────────────────────────────────── */
#documentsPanel label {
  display: block;
  margin-bottom: 10px;
}
#documentsPanel input[type="file"] {
  border: 2px dashed var(--pro-line, #d8e6e4);
  border-radius: var(--pro-r-sm, 8px);
  padding: 12px;
  width: 100%;
  background: var(--pro-surface-2, #f7fafa);
  cursor: pointer;
  transition: border-color .2s;
}
#documentsPanel input[type="file"]:hover {
  border-color: var(--pro-teal-mid, #b8e2e0);
}

/* ── Calendar Panel ───────────────────────────────────────────────────── */
#sessionCalendarPanel .form-grid {
  margin-bottom: 10px;
}

/* ── Progress SVG in report ───────────────────────────────────────────── */
.report-graph-section {
  margin: 20px 0;
  padding: 16px;
  background: var(--pro-surface-2, #f7fafa);
  border-radius: var(--pro-r-md, 12px);
  border: 1px solid var(--pro-line, #d8e6e4);
}
.report-graph-section h3 {
  font-size: .78rem;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pro-muted, #627370);
  margin-bottom: 12px;
}

/* ── Progress Charts Dashboard ────────────────────────────────────────── */
.charts-dashboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chart-main {
  background: var(--pro-surface);
  border: 1px solid var(--pro-line);
  border-radius: var(--pro-r-lg);
  padding: 16px;
  box-shadow: var(--pro-shadow-xs);
}
.charts-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.chart-item {
  background: var(--pro-surface);
  border: 1px solid var(--pro-line);
  border-radius: var(--pro-r-md);
  padding: 12px;
  box-shadow: var(--pro-shadow-xs);
}
.chart-box {
  min-height: 180px;
  background: var(--pro-surface-2);
  border-radius: var(--pro-r-md);
  border: 1px solid var(--pro-line-soft);
}

/* ── Alert Panel ──────────────────────────────────────────────────────── */
#alertsPanel {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

/* ── Quick Entry Tap Buttons ─────────────────────────────────────────── */
#quickEntryPanel button:active {
  transform: scale(0.95);
  transition: transform 80ms ease;
}

/* ── Report Action Buttons ───────────────────────────────────────────── */
#reportActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
#reportActions .primary-button {
  font-size: 0.88rem;
}

@media (max-width: 640px) {
  .charts-grid-2 { grid-template-columns: 1fr; }
  #quickEntryPanel > div:nth-child(2) { grid-template-columns: 1fr 1fr; }
}

/* ── FBA Gate Banner (autism-research skill, NICE CG170) ─────────────────── */
.fba-gate-banner {
  background: #fff8f0;
  border: 1.5px solid #f59e0b;
  border-left: 4px solid #d97706;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.fba-gate-banner strong { color: #92400e; display: block; margin-bottom: 6px; font-size: .95rem; }
.fba-gate-banner p { color: #78350f; font-size: .88rem; line-height: 1.55; margin: 0 0 10px; }
.fba-confirm-label { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; color: #78350f; cursor: pointer; }
.fba-confirm-label input { margin-top: 2px; accent-color: #d97706; width: 16px; height: 16px; flex-shrink: 0; }

/* ── Session Form 2-Step (UIUX-expert skill, WCAG 2.2) ───────────────────── */
.session-step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 12px 0 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,0,0,0.15);
  background: transparent;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  min-height: 44px; /* WCAG touch target */
  transition: all 150ms ease;
}
.step-pill.active {
  background: var(--premium-teal, #1a9e6e);
  border-color: var(--premium-teal, #1a9e6e);
  color: #fff;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  font-size: .8rem;
  font-weight: 700;
}
.step-pill:not(.active) .step-num { background: rgba(0,0,0,0.1); }
.step-divider { color: var(--text-muted, #9ca3af); font-size: .9rem; }
.session-next-btn, .session-back-btn {
  width: 100%;
  margin-top: 16px;
  min-height: 48px; /* WCAG touch target */
  font-size: 1rem;
}
.session-back-btn { margin-bottom: 16px; }

/* ── Touch targets 44px minimum (WCAG 2.2, UIUX-expert skill) ───────────── */
input[type="number"],
input[type="text"],
input[type="date"],
input[type="email"],
select {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 1rem;
}
textarea { min-height: 80px; padding: 10px 12px; font-size: 1rem; }
button, .tab, .small-button, .secondary-button, .primary-button, .danger-button {
  min-height: 44px;
}
.small-button { min-height: 36px; } /* exception pour petits boutons contextuels */

/* ── Pricing Tiers (Marketing-expert skill) ───────────────────────────────── */
.ob-plan-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ob-plan .price { font-size: 2rem; font-weight: 800; line-height: 1; margin: 8px 0 4px; }
.ob-plan .price span { font-size: .9rem; font-weight: 500; opacity: .7; }

/* Referral box */
.ob-referral-box {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 20px 0;
}
.ob-referral-box label { display: block; margin-bottom: 10px; cursor: default; }
.ob-referral-box label strong { display: block; margin-bottom: 4px; color: #15803d; }
.ob-referral-box label span { font-size: .85rem; color: #166534; }
.ob-referral-input { display: flex; gap: 8px; }
.ob-referral-input input {
  flex: 1;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .95rem;
  min-height: 44px;
}
.ob-referral-status { font-size: .85rem; margin: 8px 0 0; min-height: 20px; }
.ob-referral-status.ok { color: #15803d; }
.ob-referral-status.err { color: #dc2626; }

/* ── Method Card Tabs (uiux-expert skill) ────────────────────────────────── */
.method-card-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.badge.info { background: #dbeafe; color: #1e40af; }
.method-fit-badge {
  border: 1px solid transparent;
  letter-spacing: .01em;
}
.method-fit-badge.low {
  background: #eef2f1;
  border-color: #d7e0de;
  color: #536562;
}
.method-fit-badge.good {
  background: #e8f1ff;
  border-color: #b7cdf7;
  color: #24539a;
}
.method-fit-badge.excellent {
  background: #e5f7ef;
  border-color: #a8e2c3;
  color: #137a52;
}

.method-tabs {
  display: flex; gap: 4px; margin: 14px 0 0;
  border-bottom: 2px solid var(--border, rgba(0,0,0,0.08));
  padding-bottom: 0;
}
.method-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted, #6b7280); cursor: pointer;
  font-size: .82rem; font-weight: 600; padding: 8px 14px;
  margin-bottom: -2px; min-height: 40px; border-radius: 6px 6px 0 0;
  transition: all 150ms;
}
.method-tab:hover { color: var(--premium-teal, #1a9e6e); background: rgba(26,158,110,.05); }
.method-tab.active {
  color: var(--premium-teal, #1a9e6e);
  border-bottom-color: var(--premium-teal, #1a9e6e);
  background: rgba(26,158,110,.05);
}
.method-tab-panel { padding-top: 14px; }

/* Session Flow Timeline */
.session-flow-timeline { display: flex; flex-direction: column; gap: 0; }
.sf-intro { margin-bottom: 14px; }
.sf-intro strong { display: block; font-size: .95rem; margin-bottom: 4px; }
.sf-intro span { font-size: .82rem; color: var(--text-muted,#6b7280); }
.sf-step { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border,rgba(0,0,0,.06)); }
.sf-step:last-child { border-bottom: none; }
.sf-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--premium-teal,#1a9e6e); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; flex-shrink: 0; margin-top: 2px;
}
.sf-prompt .sf-step-num { background: #6366f1; }
.sf-step-body { flex: 1; }
.sf-step-label { font-size: .82rem; font-weight: 700; margin-bottom: 6px; color: var(--text-2,#374151); }
.sf-step-list { margin: 0; padding-left: 18px; }
.sf-step-list li { font-size: .85rem; color: var(--text-2,#374151); margin-bottom: 4px; line-height: 1.5; }

/* Generate panel */
.method-generate-panel { background: #f8fafc; border-radius: 8px; padding: 16px; }
.mg-intro { margin-bottom: 14px; }
.mg-intro strong { display: block; font-size: .95rem; margin-bottom: 4px; }
.mg-intro span { font-size: .82rem; color: var(--text-muted,#6b7280); }
.mg-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.mg-note { font-size: .8rem; color: var(--text-muted,#6b7280); }
.mg-preview-card { background: #fff; border: 1px solid var(--border,rgba(0,0,0,.1)); border-radius: 8px; padding: 14px; margin: 10px 0; }
.mg-preview-row { margin-bottom: 10px; font-size: .88rem; }
.mg-preview-row strong { display: block; margin-bottom: 4px; }
.mg-preview-row ol { margin: 4px 0 0 16px; padding: 0; }
.mg-preview-row li { margin-bottom: 3px; }

/* ── Prompt Level Indicator (special-educator skill) ─────────────────────── */
.prompt-level-indicator { margin-top: 8px; }
.pli-bar-track { background: #e5e7eb; border-radius: 99px; height: 8px; margin-bottom: 6px; overflow: hidden; }
.pli-bar-fill  { height: 100%; border-radius: 99px; transition: width .4s ease, background .4s ease; }
.pli-label { font-size: .82rem; font-weight: 700; margin-bottom: 4px; }
.pli-hint  { font-size: .78rem; color: var(--text-muted,#6b7280); }
.prompt-trend { display: block; font-size: .78rem; font-weight: 600; margin: 3px 0; }
.prompt-trend.up   { color: #16a34a; }
.prompt-trend.down { color: #dc2626; }
.prompt-trend.same { color: #6b7280; }

/* ── SMART Goal Builder (special-educator skill) ─────────────────────────── */
.smart-goal-builder { border: 1.5px solid #c4b5fd; border-radius: 10px; padding: 16px; background: #faf5ff; }
.sgb-header { margin-bottom: 14px; }
.sgb-header strong { display: block; font-size: .95rem; color: #6d28d9; margin-bottom: 4px; }
.sgb-hint { font-size: .78rem; color: #7c3aed; }
.sgb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
@media (max-width: 600px) { .sgb-grid { grid-template-columns: 1fr; } }
.sgb-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sgb-preview { margin-top: 12px; }
.sgb-preview-card { background: #fff; border: 1px solid #c4b5fd; border-radius: 8px; padding: 14px; }
.sgb-preview-label { font-size: .78rem; color: #6d28d9; font-weight: 600; margin-bottom: 8px; }
.sgb-preview-card p { font-size: .88rem; color: #374151; margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   FABLE-5 DESIGN LAYER v9.7 — Premium clinical UI (design+uiux skills)
   ═══════════════════════════════════════════════════════════════════ */

/* ── CCE Hero Card ─────────────────────────────────────────────── */
.cce-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15,79,76,.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(15,79,76,.08), 0 2px 8px rgba(15,79,76,.05) !important;
  background: linear-gradient(180deg, #fbfefd 0%, #f4faf8 100%) !important;
}
.cce-hero-band { position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.cce-hero-band.excellent { background: linear-gradient(90deg, #0f9d6e, #34d399); }
.cce-hero-band.good      { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.cce-hero-band.low       { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.cce-explain {
  font-size: .84rem; color: #4b6660; line-height: 1.6;
  max-width: 720px; margin: 8px 0 0;
  padding: 10px 14px; background: rgba(26,158,110,.06);
  border-left: 3px solid #1a9e6e; border-radius: 0 8px 8px 0;
}

/* ── Method Cards — premium ────────────────────────────────────── */
.method-card-expanded {
  border-radius: 14px !important;
  border: 1px solid rgba(15,47,57,.1) !important;
  box-shadow: 0 2px 12px rgba(15,47,57,.05) !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.method-card-expanded:hover {
  box-shadow: 0 10px 30px rgba(15,47,57,.1) !important;
  border-color: rgba(26,158,110,.35) !important;
  transform: translateY(-2px);
}
.method-fit-badge { font-weight: 800 !important; letter-spacing: .01em; }
.method-fit-badge.excellent { background: #d1fae5 !important; color: #065f46 !important; }
.method-fit-badge.good      { background: #dbeafe !important; color: #1e40af !important; }
.method-fit-badge.low       { background: #f1f5f9 !important; color: #475569 !important; }

/* ── Method Tabs — refined ─────────────────────────────────────── */
.method-tabs {
  display: flex; gap: 6px; margin: 16px 0 0;
  padding: 4px; background: rgba(15,47,57,.045);
  border-radius: 10px; border-bottom: none;
}
.method-tab {
  flex: 1; border: none; border-radius: 8px; background: transparent;
  color: #5a7370; cursor: pointer; font-size: .84rem; font-weight: 700;
  padding: 10px 12px; min-height: 42px; margin: 0;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.method-tab:hover { color: #0f6e56; background: rgba(255,255,255,.7); }
.method-tab.active {
  background: #fff; color: #0f6e56;
  box-shadow: 0 2px 8px rgba(15,79,76,.12);
  border-bottom: none;
}
.method-tab:focus-visible { outline: 2px solid #1a9e6e; outline-offset: 2px; }
.method-tab-panel { padding-top: 16px; animation: mtpIn .22s ease; }
@keyframes mtpIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Session Flow Timeline — premium ───────────────────────────── */
.session-flow-timeline { position: relative; padding-left: 4px; }
.sf-intro {
  background: linear-gradient(135deg, rgba(26,158,110,.08), rgba(79,70,229,.05));
  border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
}
.sf-step { position: relative; border-bottom: none !important; padding: 10px 0 14px 0 !important; }
.sf-step:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 34px; bottom: -6px;
  width: 2px; background: linear-gradient(180deg, rgba(26,158,110,.35), rgba(26,158,110,.08));
}
.sf-step-num {
  box-shadow: 0 2px 8px rgba(26,158,110,.3);
  font-size: .74rem !important;
}
.sf-prompt .sf-step-num { box-shadow: 0 2px 8px rgba(99,102,241,.35); }
.sf-step-list li { position: relative; }
.sf-step-list li::marker { color: #1a9e6e; }

/* ── Generate Panel — premium ──────────────────────────────────── */
.method-generate-panel {
  background: linear-gradient(180deg, #f8fafc, #f1f7f5) !important;
  border: 1px dashed rgba(26,158,110,.3);
  border-radius: 12px !important;
}
.mg-actions .primary-button {
  background: linear-gradient(135deg, #1a9e6e, #0f7a54) !important;
  box-shadow: 0 4px 14px rgba(26,158,110,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mg-actions .primary-button:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,158,110,.4); }

/* ── Knowledge alerts inside CCE — cleaner ─────────────────────── */
.cce-hero .knowledge-alert {
  border-radius: 10px; border-left: 3px solid rgba(26,158,110,.5);
  background: rgba(255,255,255,.75);
}

/* ── Global micro-polish ───────────────────────────────────────── */
.primary-button, .secondary-button, .small-button { transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
.primary-button:active, .secondary-button:active { transform: scale(.98); }
.criteria-card { transition: border-color .18s ease, box-shadow .18s ease; }
.criteria-card:hover { border-color: rgba(26,158,110,.3); box-shadow: 0 4px 14px rgba(15,47,57,.06); }
.criteria-card.is-met { border-left: 4px solid #1a9e6e; }
:focus-visible { outline: 2px solid #1a9e6e; outline-offset: 2px; }

@media (max-width: 640px) {
  .method-tabs { flex-direction: column; }
  .method-tab { min-height: 44px; }
}

/* ── CCE Engine Signals row ────────────────────────────────────── */
.cce-signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 10px; margin: 14px 0; }
.cce-signal {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px; border-radius: 10px; font-size: .84rem;
  background: #fff; border: 1px solid rgba(15,47,57,.08);
  border-left-width: 4px;
}
.cce-signal.ok   { border-left-color: #10b981; }
.cce-signal.wait { border-left-color: #f59e0b; }
.cce-signal.warn { border-left-color: #ef4444; }
.cce-signal-k { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #5a7370; }

/* ── Generated Structured Plan (Fable-5) ───────────────────────── */
.gsp-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,#fdfffe,#f3faf7);
  border: 1px solid rgba(15,110,86,.18); border-radius: 16px;
  box-shadow: 0 10px 36px rgba(15,79,76,.1);
  padding: 22px 24px; margin-bottom: 20px;
}
.gsp-band { position:absolute; top:0; left:0; right:0; height:5px;
  background: linear-gradient(90deg,#1a9e6e,#4f46e5,#e05a4e); }
.gsp-head { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.gsp-goal { font-size:.88rem; color:#2d4440; margin-top:6px; }
.gsp-actions { display:flex; gap:8px; align-items:flex-start; }
.gsp-board { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:8px 0 4px; }
.gsp-task {
  display:flex; flex-direction:column; gap:4px; padding:12px 14px;
  background:#fff; border:1.5px solid rgba(26,158,110,.2); border-radius:12px;
  font-size:.82rem; transition:transform .15s ease, box-shadow .15s ease;
}
.gsp-task:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(15,79,76,.12); }
.gsp-task-icon { font-size:1.3rem; }
.gsp-task strong { font-size:.8rem; color:#0f6e56; }
.gsp-task span:last-child { color:#5a7370; line-height:1.45; }
.gsp-timeline { display:flex; flex-direction:column; gap:0; }
.gsp-block { display:flex; gap:14px; padding:10px 0; position:relative; }
.gsp-block:not(:last-child)::before { content:""; position:absolute; left:52px; top:32px; bottom:-4px; width:2px;
  background:linear-gradient(180deg,rgba(26,158,110,.3),rgba(26,158,110,.06)); }
.gsp-time { flex-shrink:0; width:88px; font-size:.72rem; font-weight:800; color:#0f6e56;
  background:rgba(26,158,110,.1); border-radius:8px; padding:5px 8px; height:fit-content; text-align:center; }
.gsp-block ul { margin:6px 0 0 16px; padding:0; }
.gsp-block li { font-size:.84rem; color:#3d5350; line-height:1.55; margin-bottom:3px; }
.gsp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:14px; }
.gsp-grid > div { background:#fff; border:1px solid rgba(15,47,57,.08); border-radius:12px; padding:12px 16px; }
.gsp-grid strong { font-size:.8rem; display:block; margin-bottom:6px; color:#0f6e56; }
.gsp-grid ul { margin:0 0 0 16px; padding:0; }
.gsp-grid li { font-size:.8rem; color:#4b6660; line-height:1.5; margin-bottom:3px; }
@media (max-width:640px){ .gsp-time{width:70px;font-size:.66rem;} .gsp-head{flex-direction:column;} }

/* ── Engine v5 Directive ───────────────────────────────────────── */
.cce-directive {
  margin: 14px 0; padding: 14px 18px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(79,70,229,.07), rgba(26,158,110,.06));
  border: 1px solid rgba(79,70,229,.18); border-left: 4px solid #4f46e5;
}
.cce-directive strong { display: block; font-size: .84rem; color: #3730a3; margin-bottom: 8px; }
.cce-directive ol { margin: 0 0 0 18px; padding: 0; }
.cce-directive li { font-size: .86rem; color: #2d3a55; line-height: 1.6; margin-bottom: 6px; font-weight: 500; }

/* ── PIA Goal Suggestions (Engine→PIA link) ────────────────────── */
.pia-suggestions { margin-bottom: 16px; }
.pia-sugg-head { margin-bottom: 10px; }
.pia-sugg-head strong { display:block; font-size:.9rem; color:#6d28d9; }
.pia-sugg-head span { font-size:.78rem; color:#7c6aa8; }
.pia-sugg-card {
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,#faf5ff,#f3f0ff); border:1px solid #ddd6fe;
  border-radius:12px; padding:12px 16px; margin-bottom:8px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.pia-sugg-card:hover { border-color:#a78bfa; box-shadow:0 4px 14px rgba(109,40,217,.12); }
.pia-sugg-domain { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#6d28d9; }
.pia-sugg-body p { font-size:.84rem; color:#3b3654; margin:4px 0; line-height:1.5; }
.pia-sugg-body small { font-size:.76rem; color:#7c6aa8; }
.pia-sugg-card .small-button { flex-shrink:0; background:#6d28d9; color:#fff; border:none; }
.pia-sugg-card .small-button:disabled { background:#10b981; opacity:1; }

/* ── Engine v10: Case Health Ring + Breakdown + Precheck ───────── */
.chs-ring-wrap { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.chs-ring { width:92px; height:92px; }
.chs-arc { stroke:#1a9e6e; transition: stroke-dasharray .6s ease; }
.chs-ring-wrap.good .chs-arc { stroke:#2563eb; }
.chs-ring-wrap.warn .chs-arc { stroke:#f59e0b; }
.chs-ring-wrap.low  .chs-arc { stroke:#ef4444; }
.chs-num { font-size:26px; font-weight:900; fill:#0f2f39; }
.chs-lbl { font-size:10px; fill:#5a7370; }
.chs-meta { display:flex; flex-direction:column; }
.chs-meta strong { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:#5a7370; }
.chs-meta span { font-size:.95rem; font-weight:800; color:#0f2f39; }
.chs-breakdown { margin:10px 0; }
.chs-parts { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; padding:10px 0; }
.chs-part { background:#fff; border:1px solid rgba(15,47,57,.08); border-radius:10px; padding:10px 14px; }
.chs-part-head { display:flex; justify-content:space-between; font-size:.8rem; margin-bottom:6px; }
.chs-part-head strong { color:#0f6e56; }
.chs-bar { background:#eef2f1; border-radius:99px; height:7px; overflow:hidden; margin-bottom:5px; }
.chs-bar-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#1a9e6e,#34d399); transition:width .5s ease; }
.chs-part small { font-size:.72rem; color:#6b8380; }
.cce-selfeval { margin:10px 0 0; padding:8px 12px; border-radius:8px; font-size:.82rem; font-weight:600; }
.cce-selfeval.ok   { background:#ecfdf5; color:#065f46; }
.cce-selfeval.warn { background:#fef2f2; color:#991b1b; }
.cce-selfeval.wait { background:#fffbeb; color:#92400e; }
.precheck-banner { background:#fffbeb; border:1.5px solid #fcd34d; border-radius:10px; padding:10px 14px; margin-bottom:10px; }
.precheck-banner p { font-size:.82rem; color:#78350f; margin:2px 0; }
.precheck-banner small { font-size:.72rem; color:#a16207; }
@media (max-width:700px){ .chs-ring{width:72px;height:72px;} }

/* ── Shtresa njerëzore ─────────────────────────────────────────── */
.cce-human { margin:12px 0 0; padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,.7); border:1px dashed rgba(79,70,229,.25);
  font-size:.86rem; color:#4b5563; font-style:italic; line-height:1.6; }

/* ── Assessment Summary (v10.2) ────────────────────────────────── */
.asum-card { display:flex; gap:20px; align-items:center; background:linear-gradient(180deg,#fdfffe,#f3faf7);
  border:1px solid rgba(15,110,86,.16); border-radius:16px; padding:18px 22px; margin-bottom:18px;
  box-shadow:0 8px 28px rgba(15,79,76,.08); flex-wrap:wrap; }
.asum-ring { width:96px; height:96px; flex-shrink:0; }
.asum-body { flex:1; min-width:260px; }
.asum-stats { display:flex; gap:16px; flex-wrap:wrap; font-size:.86rem; color:#3d5350; margin:6px 0 10px; }
.asum-stats strong { color:#0f6e56; font-size:1rem; }
.asum-red { color:#b91c1c !important; }
.asum-red strong { color:#b91c1c !important; }
.asum-top { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.asum-chip { background:#fff; border:1px solid rgba(15,47,57,.12); border-radius:99px;
  padding:5px 12px; font-size:.76rem; font-weight:600; color:#3d5350; }
.asum-chip.hot { background:#fff7ed; border-color:#fdba74; color:#9a3412; }
.asum-actions { display:flex; gap:10px; flex-wrap:wrap; }
.asum-hint { font-size:.78rem; color:#92400e; margin:10px 0 0; }
@media (max-width:640px){ .asum-card{flex-direction:column;text-align:center;} .asum-stats{justify-content:center;} .asum-actions{justify-content:center;} }

/* ── Session Plan Strip (plan↔seancë LIVE, v10.3) ──────────────── */
.sps-strip { background:linear-gradient(90deg,rgba(26,158,110,.07),rgba(79,70,229,.05));
  border:1px solid rgba(26,158,110,.2); border-radius:12px; padding:12px 16px; margin-bottom:16px; }
.sps-board { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sps-chip { background:#fff; border:1px solid rgba(15,79,76,.15); border-radius:99px;
  padding:4px 12px; font-size:.8rem; font-weight:700; color:#0f6e56; }
.sps-method { margin-left:auto; font-size:.78rem; font-weight:800; color:#4f46e5; }
.sps-directive { margin:8px 0 0; font-size:.82rem; color:#3d5350; line-height:1.5; }

/* ── MOBILE PERFECTION (≤480px) — çdo shtresë e re ─────────────── */
@media (max-width:480px){
  .cce-hero { padding:14px !important; }
  .chs-ring-wrap { width:100%; justify-content:center; margin-top:8px; }
  .cce-signals { grid-template-columns:1fr; }
  .cce-directive { padding:12px; }
  .cce-directive li { font-size:.82rem; }
  .gsp-card { padding:14px 16px; }
  .gsp-board { grid-template-columns:1fr 1fr; }
  .gsp-actions { width:100%; }
  .gsp-actions button { flex:1; }
  .asum-card { padding:14px; gap:12px; }
  .asum-ring { width:80px; height:80px; }
  .method-tabs { flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .method-tab { white-space:nowrap; flex:0 0 auto; }
  .sps-method { margin-left:0; width:100%; }
  .sf-step { gap:10px; }
  .sf-step-num { width:24px; height:24px; }
  .gsp-time { width:64px; font-size:.62rem; }
  .pia-sugg-card { flex-direction:column; align-items:stretch; }
  .pia-sugg-card .small-button { width:100%; min-height:44px; }
}

/* ── v10.3.3: Mobile topbar flow ────────────────────────────────────────
   Keep the status strip in document flow so it cannot cover the controls. */
@media (max-width: 640px) {
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 16px 16px 0 !important;
    overflow: visible !important;
  }

  .brand-block {
    width: 100% !important;
    padding-left: 14px !important;
  }

  .brand-block::before {
    top: 2px !important;
    bottom: 2px !important;
  }

  .topbar h1 {
    font-size: 1.28rem !important;
    line-height: 1.08 !important;
  }

  .brand-subtitle {
    max-width: 34rem !important;
    margin-top: 5px !important;
    font-size: .72rem !important;
    line-height: 1.4 !important;
  }

  .topbar-actions {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) 44px 44px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 14px !important;
  }

  .topbar-page-links {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .topbar-page-links a {
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 6px 7px !important;
    font-size: .75rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .cs-usermenu {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  .cs-usermenu-trigger {
    justify-content: center !important;
    width: 54px !important;
    min-width: 54px !important;
    min-height: 44px !important;
    padding: 4px !important;
  }

  .cs-usermenu-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  .cs-usermenu-caret {
    display: none !important;
  }

  .language-switch {
    display: grid !important;
    grid-column: 2 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .language-pill {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 4px !important;
  }

  .topbar .icon-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  #newCaseBtn { grid-column: 3 !important; }
  #printBtn {
    grid-column: 4 !important;
    font-size: 0 !important;
  }
  #printBtn::before {
    content: "PDF";
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: 0;
  }

  .cs-status-bar {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 / -1 !important;
    width: calc(100% + 32px) !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 -16px !important;
    padding: 6px 16px !important;
    overflow: hidden !important;
  }

  .cs-sb-signals {
    min-width: 0 !important;
    gap: 6px !important;
    padding-left: 0 !important;
  }

  .cs-sb-chip {
    min-width: 0 !important;
    max-width: 46vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .cs-sb-chip:nth-child(n + 2),
  .cs-sb-sep,
  .cs-sb-hint {
    display: none !important;
  }

  .cs-sb-action {
    flex: 0 1 auto !important;
    max-width: 48vw !important;
    margin-left: auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  .topbar {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .topbar-actions {
    grid-template-columns: 50px minmax(0, 1fr) 42px 42px !important;
    gap: 8px !important;
  }

  .cs-usermenu-trigger {
    width: 50px !important;
    min-width: 50px !important;
  }

  .topbar .icon-button {
    width: 42px !important;
    min-width: 42px !important;
  }

  .cs-status-bar {
    width: calc(100% + 24px) !important;
    margin-right: -12px !important;
    margin-left: -12px !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
}

/* v10.3.6: one explicit duration source for every generated session plan. */
.session-duration-control {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(64px, 1fr));
  min-height: 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.session-duration-control button {
  min-width: 64px;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}

.session-duration-control button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.session-duration-control button[aria-pressed="true"] {
  background: #ffffff;
  color: #0b5f5b;
}

.session-duration-control button:focus-visible {
  outline: 3px solid #f0c96b;
  outline-offset: -3px;
}

@media (max-width: 720px) {
  .session-duration-control {
    width: 100%;
  }

  .section-head .button-row > .session-duration-control,
  .section-head .button-row > #todayBuildPlanBtn,
  .section-head .button-row > #todayOpenSessionBtn {
    flex: 1 1 100%;
  }
}

/* v10.4: Clinical Intake links diagnosis/Lernprogramm/Zielenplan to session planning. */
.case-intake-card,
.plan-intake-materials {
  margin: 18px 0;
  padding: 22px;
  border: 1px solid rgba(17, 120, 112, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(28, 196, 181, 0.08), rgba(255, 255, 255, 0.94) 44%, rgba(94, 102, 246, 0.05));
  box-shadow: 0 16px 45px rgba(12, 44, 44, 0.08);
}

.case-intake-grid {
  align-items: start;
}

.case-intake-engine-link {
  margin: 14px 0 18px;
  padding: 14px 16px;
  border-left: 4px solid #11b8a7;
  border-radius: 8px;
  background: rgba(10, 77, 74, 0.07);
  color: #123f3c;
}

.case-intake-engine-link strong {
  display: block;
  margin-bottom: 4px;
}

.clinical-chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
  font-size: 0.76rem;
  font-weight: 750;
}

.clinical-chain span {
  padding: 5px 8px;
  border: 1px solid rgba(17, 120, 112, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.76);
}

.clinical-chain b {
  color: #0d7a76;
}

.clinical-chain-status {
  margin: 9px 0 0;
  color: #58706d;
  font-size: 0.7rem;
}

.case-intake-wide {
  grid-column: 1 / -1;
}

.case-intake-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 18px;
}

.case-intake-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(17, 120, 112, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #173d3d;
  font-weight: 760;
  cursor: pointer;
}

.case-intake-chip input {
  accent-color: #11b8a7;
}

.case-intake-upload,
.case-intake-review,
.case-intake-material-preview {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(16, 86, 82, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

.case-intake-review {
  display: grid;
  gap: 12px;
}

.case-intake-review[hidden] {
  display: none;
}

.case-intake-review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.case-intake-material-grid,
.plan-intake-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.case-intake-material-grid > div,
.plan-intake-material-grid > article {
  padding: 14px;
  border: 1px solid rgba(17, 120, 112, 0.14);
  border-radius: 12px;
  background: rgba(246, 253, 251, 0.82);
}

.case-intake-material-grid p,
.plan-intake-material-grid p {
  margin: 6px 0 0;
  color: #657a7a;
}

.plan-intake-material-grid ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #4f6969;
}

.plan-intake-materials {
  margin: 14px 0 18px;
  background:
    linear-gradient(135deg, rgba(10, 95, 88, 0.08), rgba(255, 255, 255, 0.94) 56%, rgba(240, 201, 107, 0.10));
}

@media (max-width: 720px) {
  .case-intake-card,
  .plan-intake-materials {
    padding: 16px;
    border-radius: 14px;
  }

  .case-intake-chip {
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
  }

  .clinical-chain {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }

  .clinical-chain b {
    display: none;
  }
}
.case-link-gate {
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid #b9ded8;
  border-left: 4px solid #0f8f83;
  background: #f3fbf9;
  color: #173c38;
}

.case-link-gate.review {
  border-color: #e5cf8c;
  border-left-color: #ad7608;
  background: #fffaf0;
  color: #5a430d;
}

.case-link-gate.blocked {
  border-color: #e8aaa3;
  border-left-color: #b42318;
  background: #fff4f2;
  color: #7a271a;
}

.case-link-gate p {
  margin: 6px 0 0;
}

.case-link-issue {
  font-size: .88rem;
  font-weight: 650;
}

.case-link-issue.critical {
  color: #b42318;
}

.case-intake-review-confirm {
  margin-top: 12px;
  align-items: flex-start;
  color: var(--ink, #152520);
}

.measurement-contract-notice {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #d8a545;
  background: #fff8e8;
  color: #68480f;
  font-size: 0.9rem;
  line-height: 1.45;
}

.case-fixed-contract {
  margin: 16px 0;
  border: 1px solid #cfe2df;
  border-radius: 8px;
  background: #fbfdfc;
  overflow: hidden;
}

.case-fixed-contract > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  cursor: pointer;
  background: #f1f8f7;
}

.case-fixed-contract > summary span:first-child {
  display: grid;
  gap: 3px;
}

.case-fixed-contract > summary small,
.workflow-frequency-guide span {
  color: #607a76;
  font-size: .84rem;
}

.case-fixed-review {
  padding: 5px 8px;
  border: 1px solid #9fd4cb;
  border-radius: 6px;
  color: #12665e;
  font-size: .78rem;
  font-weight: 750;
}

.case-fixed-review.due {
  border-color: #dfbd73;
  background: #fff7e5;
  color: #75520b;
}

.case-fixed-identity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 16px 14px;
  border: 1px solid #dce9e7;
  background: #dce9e7;
}

.case-fixed-identity span {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  background: #fff;
}

.case-fixed-identity b {
  color: #55716d;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.case-fixed-contract .case-intake-grid {
  padding: 0 16px 16px;
}

.workflow-frequency-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid #a9d9d1;
  border-left: 4px solid #0f8f83;
  background: #f2faf8;
}

.workflow-frequency-guide > div {
  display: grid;
  gap: 4px;
}

.session-workflow-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px;
  border: 1px solid #d7e6e3;
  background: #f7faf9;
}

.session-workflow-switch button {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid transparent;
  background: transparent;
  color: #45615d;
  font-weight: 750;
}

.session-workflow-switch button[aria-pressed="true"] {
  border-color: #66c5ba;
  background: #e6f7f4;
  color: #0c6159;
}

#tab-sessions[data-workflow-mode="daily"] .session-periodic-block {
  display: none !important;
}

.abc-conditional-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 8px;
  padding: 10px 12px;
  border: 1px solid #d8e5e3;
  background: #f8fbfa;
  color: #506b67;
}

[data-session-abc-panel][hidden] {
  display: none !important;
}

.publication-preflight {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d9a29b;
  border-left: 4px solid #b42318;
  background: #fff5f3;
  color: #7a271a;
}

.publication-preflight ul {
  margin: 7px 0 0;
  padding-left: 20px;
}

.publication-preflight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.publication-preflight-actions .secondary-button {
  background: #ffffff;
  border-color: #b46a61;
  color: #76261f;
}

@media (max-width: 720px) {
  .case-fixed-contract > summary,
  .workflow-frequency-guide,
  .abc-conditional-head {
    align-items: stretch;
    flex-direction: column;
  }

  .case-fixed-identity {
    grid-template-columns: 1fr;
  }

  .workflow-frequency-guide .primary-button,
  .abc-conditional-head .secondary-button {
    width: 100%;
  }

  .session-workflow-switch button {
    flex: 1 1 140px;
  }
}