:root {
  --slider-margin: 5px;
  --slider-value-size: 14px;
  --slider-value-offset: 4px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  max-width: none;
  min-height: 100vh;
  background: #f7f9fc;
  color: #0f172a;
  overflow-x: hidden;
}

body.app-shell {
  background: #f7f9fc;
}

.app-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.app-navbar__container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.app-navbar__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.5rem 0;
}

.app-navbar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.app-navbar__logo {
  width: var(--navbar-logo-size, 3.5rem);
  height: var(--navbar-logo-size, 3.5rem);
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
}

.app-navbar__brand-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.app-navbar__brand-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #0f172a;
}

.app-navbar__brand-meta {
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
}

.app-navbar__brand-divider {
  color: rgba(148, 163, 184, 0.9);
  font-weight: 500;
}

.app-navbar__brand-meta--muted {
  color: #94a3b8;
  font-weight: 500;
}

.app-navbar__brand-user-link {
  color: inherit;
  text-decoration: none;
}

.app-navbar__brand-user-link:hover,
.app-navbar__brand-user-link:focus {
  color: #0f172a;
  text-decoration: underline;
}
.app-navbar__logout-link {
  color: #c2410c;
  text-decoration: none;
  padding-left: 0.35rem;
  border-left: 1px solid rgba(148, 163, 184, 0.5);
}
.app-navbar__logout-link:hover,
.app-navbar__logout-link:focus {
  color: #9a3412;
  text-decoration: underline;
}

.app-navbar__nav {
  margin-left: auto;
}

.app-navbar__nav-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
}

.app-navbar__link-wrapper {
  position: relative;
  display: flex;
}

.app-navbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-navbar__link-text,
.app-navbar__brand-name {
  line-height: 1.1;
}

.app-navbar__link:hover,
.app-navbar__link:focus {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(148, 163, 184, 0.35);
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(148, 163, 184, 0.18);
}

.app-navbar__link:focus-visible {
  outline: 2px solid #bfdbfe;
  outline-offset: 2px;
}

.app-navbar__link.is-active {
  color: #2563eb;
  background: #fff;
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
}

.app-navbar__dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  display: none;
  flex-direction: column;
  min-width: 14rem;
  padding: 0.35rem;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  z-index: 20;
}

.app-navbar__dropdown-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: #0f172a;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.app-navbar__dropdown-link:hover,
.app-navbar__dropdown-link:focus {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
}

.app-navbar__link-wrapper.has-dropdown:hover .app-navbar__dropdown,
.app-navbar__link-wrapper.has-dropdown:focus-within .app-navbar__dropdown {
  display: flex;
}

.app-navbar__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: inherit;
}

.app-navbar__link-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.app-navbar__link-initial {
  border-radius: 0.4rem;
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.app-navbar__link-text {
  display: none;
  white-space: nowrap;
}

.app-navbar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.app-navbar__user-block {
  margin-left: 0.75rem;   /* ← controls how far right the second line starts */
}


.app-main {
  max-width: 80rem;
  margin: 2rem auto 3rem;
  padding: 0 1rem;
}

.app-main--entry {
  max-width: 80rem;
  margin: 2rem auto 3rem;
  padding: 0 1rem;
}

@media (max-width: 768px) {
  .app-main--entry {
    padding: 0 1rem;
  }
}

@media (max-width: 768px) {
  .app-navbar__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
  }

  .app-navbar__brand {
    width: 100%;
    align-items: flex-start;
  }

  .app-navbar__nav {
    order: 2;
    width: 100%;
    margin-left: 0;
  }

  .app-navbar__nav-group {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }
}

@media (min-width: 640px) {
  .app-navbar__link-text {
    display: inline;
  }
}

@media (min-width: 769px) {
  .app-navbar__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .app-navbar__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .app-navbar__nav {
    margin-left: auto;
  }
}

.notification-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.notification-page__header {
  display: flex;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  align-items: center;
}

.notification-page__heading {
  display: flex;
  gap: 1rem;
  align-items: center;
  min-width: 0;
}

.notification-page__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.65rem;
  border-radius: 1.5rem;
  background: rgba(59, 130, 246, 0.16);
  color: #2563eb;
  box-shadow: inset 0 -2px 4px rgba(59, 130, 246, 0.12);
}

.notification-page__icon svg {
  width: 100%;
  height: 100%;
}

.notification-page__intro {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.notification-page__title {
  margin: 0;
  font-size: clamp(1.65rem, 2vw, 2.25rem);
  font-weight: 700;
  color: #0f172a;
}

.notification-page__meta {
  margin: 0;
  color: #4b5b78;
  font-size: 0.95rem;
  font-weight: 500;
}

.notification-page__actions {
  margin-left: auto;
}

.notification-page__actions form {
  margin: 0;
}

.notification-page__link-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(191, 219, 254, 0.9);
  background: rgba(241, 248, 255, 0.9);
  color: #1d4ed8;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(37, 99, 235, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.notification-page__link-action:hover,
.notification-page__link-action:focus {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 18px 28px -16px rgba(37, 99, 235, 0.55);
}

.notification-page__link-action:focus-visible {
  outline: 2px solid rgba(191, 219, 254, 0.8);
  outline-offset: 2px;
}

.notification-page__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
}

.notification-page__link-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.8;
}

.notification-group {
  background: transparent;
  border-radius: 1.25rem;
  border: none;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.notification-group__header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.notification-group__header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #466198;
}

.notification-group__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.75);
  color: #2563eb;
  font-size: 0.8rem;
  font-weight: 600;
}

.notification-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.notification-card {
  position: relative;
  padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.5rem);
  background: #ffffff;
  border-radius: 1.15rem;
  border: 1px solid rgba(221, 231, 255, 0.9);
  box-shadow: 0 16px 32px -20px rgba(30, 64, 175, 0.55);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.notification-card.is-unread {
  border-color: rgba(147, 197, 253, 0.95);
  box-shadow: 0 22px 40px -18px rgba(59, 130, 246, 0.6);
}

.notification-card__content {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  align-items: flex-start;
}

.notification-card__header {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: flex-start;
}

.notification-card__title-block {
  flex: 1;
  min-width: 0;
}

.notification-card__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.notification-card__status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  box-shadow: 0 0 0 4px rgba(219, 234, 254, 0.8);
}

.notification-card__title {
  display: block;
  font-weight: 600;
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.2;
}

.notification-card__title a {
  color: inherit;
  text-decoration: none;
}

.notification-card__title a:hover,
.notification-card__title a:focus {
  text-decoration: underline;
}

.notification-card__body {
  margin: 0;
  color: #4f617e;
  line-height: 1.45;
  white-space: pre-wrap;
}

.notification-card__body + .notification-card__timestamp {
  margin-top: 0.75rem;
}

.notification-card__timestamp {
  display: block;
  color: #7a8ca8;
  font-size: 0.85rem;
  font-weight: 500;
}

.notification-card__link {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}

.notification-card__link a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.notification-card__link a:hover,
.notification-card__link a:focus {
  color: #1d4ed8;
  text-decoration: underline;
}

.notification-card__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.notification-card__actions form {
  margin: 0;
}

.notification-inline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.notification-inline-button:hover,
.notification-inline-button:focus {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1px);
  outline: none;
}

.notification-inline-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.notification-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  border: none;
  background: rgba(226, 239, 255, 0.85);
  color: #1d4ed8;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 10px 26px -18px rgba(37, 99, 235, 0.6);
}

.notification-icon-button svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  stroke-width: 1.8;
}

.notification-icon-button:hover,
.notification-icon-button:focus {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 30px -16px rgba(37, 99, 235, 0.65);
}

.notification-icon-button:focus-visible {
  outline: 2px solid rgba(191, 219, 254, 0.9);
  outline-offset: 2px;
}

.notification-icon-button--confirm {
  background: rgba(59, 130, 246, 0.18);
  color: #1d4ed8;
}

.notification-icon-button--dismiss {
  background: rgba(226, 232, 240, 0.85);
  color: #475569;
}

.notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.75rem 1.75rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 1.5rem;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  color: #475569;
}

.notification-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}

.notification-empty--subtle {
  padding: 2rem 1.5rem;
  background: rgba(248, 250, 252, 0.92);
  border-style: solid;
}

.btn.link-btn {
  background: none;
  border: none;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.btn.link-btn:hover,
.btn.link-btn:focus {
  color: #1d4ed8;
  outline: none;
}

label {
  display: block;
  margin: .4rem 0 .2rem;
  font-weight: 600;
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-top: 1rem;
  font-size: .9rem;
}

.footer-bar .footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}

.footer-bar .footer-nav span[aria-hidden="true"] {
  margin: 0 .25rem;
}

.footer-bar .footer-nav a {
  color: inherit;
}

.footer-bar .footer-note {
  margin-left: auto;
  text-align: right;
  flex: 1 0 auto;
}

textarea,
input,
select {
  width: 100%;
  padding: .6rem;
  font-size: 1rem;
}

.row {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.col {
  flex: 1;
}

.time-select {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.time-select select {
  width: auto;
  min-width: 4rem;
  flex: 0 0 auto;
}

.time-select #experience_minute {
  min-width: 5rem;
}

.time-select .time-separator {
  font-weight: 600;
}

.slider-label {
  display: flex;
  justify-content: space-between;
}

.slider-container {
  position: relative;
  width: var(--slider-width, 100%);
  max-width: 100%;
  margin: 0 auto;
}


.slider-track-zone {
  position: relative;
  width: 100%;
  padding: var(--slider-track-padding, 0.75rem) var(--slider-track-inset, 1rem);
  margin: 0;
  margin-bottom: var(--slider-label-gap, 0.75rem);
}

.slider-track-zone::before,
.slider-track-zone::after {
  content: '';
}

.slider-end-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--end-size, 14px);
  font-weight: var(--end-weight, normal);
  margin-top: var(--end-offset, 0px);
}

.slider-end-labels span {
  flex: 1;
}

.slider-end-labels span:first-child {
  text-align: left;
}

.slider-end-labels span:last-child {
  text-align: right;
}

.slider-value-text {
  text-align: center;
  margin-top: var(--slider-value-offset, 4px);
  font-size: var(--slider-value-size, 14px);
}

.slider-track-zone .ticks {
  position: absolute;
  left: var(--slider-track-inset, 1rem);
  right: var(--slider-track-inset, 1rem);
  top: 50%;
  height: var(--tick-size, 8px);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1;
  transform: translateY(-50%) translateY(var(--tick-gap, 0px))
    translateX(var(--tick-offset, 0px));
}

.slider-track-zone .ticks span {
  width: 2px;
  background: #555;
  height: 100%;
}

.slider-track-zone .ticks span:first-child {
  transform: translateX(-1px);
}

.slider-track-zone .ticks span:last-child {
  transform: translateX(1px);
}

.slider-container.hide-outer-ticks .slider-track-zone .ticks span:first-child,
.slider-container.hide-outer-ticks .slider-track-zone .ticks span:last-child {
  visibility: hidden;
}

.slider-track-zone input[type=range] {
  position: relative;
  z-index: 0;
  margin: 0;
  margin-left: calc(-1 * var(--slider-track-inset, 1rem));
  margin-right: calc(-1 * var(--slider-track-inset, 1rem));
  width: calc(100% + 2 * var(--slider-track-inset, 1rem));
  padding: 0 var(--slider-track-inset, 1rem);
}

/* Thicker and fully customizable range inputs */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  height: 1.5rem;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: block;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 1.5rem;
  background: #ddd;
  border-radius: .75rem;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  background: #555;
  border-radius: 50%;
  margin-top: -0.375rem;
}
input[type=range]::-moz-range-track {
  height: 1.5rem;
  background: #ddd;
  border-radius: .75rem;
}
input[type=range]::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  background: #555;
  border: none;
  border-radius: 50%;
}
input[type=range]::-ms-track {
  height: 1.5rem;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: .75rem;
}
input[type=range]::-ms-thumb {
  width: 1.5rem;
  height: 1.5rem;
  background: #555;
  border-radius: 50%;
  border: none;
}

.btn {
  padding: .6rem 1rem;
  font-weight: 600;
  border: 1px solid #444;
  background: #fafafa;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid #444;
  background: #f1f3f4;
  font-weight: 600;
  color: #333;
  cursor: help;
  user-select: none;
}

.help-icon:focus {
  outline: 2px solid #4285f4;
  outline-offset: 2px;
}

.btn.primary {
  background: #222;
  color: #fff;
  border-color: #222;
}

.btn.danger {
  background: #b91c1c;
  border-color: #991b1b;
  color: #fff;
}

.btn:disabled,
.btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

.btn.btn-small {
  padding: .4rem .75rem;
  font-size: .9rem;
}

.link-back {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}

.link-back:hover,
.link-back:focus {
  text-decoration: underline;
}

.form-card {
  margin-top: 1rem;
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.cs-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.5rem 0 3rem;
}

.cs-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 0 1.3rem;
  gap: .9rem;
}

.cs-hero-icon {
  width: 6rem;
  height: 6rem;
  border-radius: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #c084fc 0%, #6366f1 100%);
  border: 5px solid rgba(255, 255, 255, 0.8);
  color: #fff;
  box-shadow: 0 22px 45px -20px rgba(79, 70, 229, 0.6);
}

.cs-hero-copy {
  max-width: 32rem;
}

.cs-hero-copy h1 {
  font-size: 2.5rem;
  margin-bottom: .25rem;
  color: #2563eb;
}

.cs-hero-copy .muted {
  color: #4338ca;
  font-size: 1.1rem;
  line-height: 1.6;
}

.cs-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  margin-top: .35rem;
}

.cs-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: .2rem .9rem;
  border-radius: 999px;
  background: rgba(224, 242, 254, 0.65);
  border: 1px solid rgba(148, 197, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cs-hero-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  background: none;
  color: #1d4ed8;
}

.cs-hero-stat-metric {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: .65rem;
}

.cs-hero-stat-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2563eb;
  letter-spacing: .01em;
}

.cs-hero-stat-value {
  font-size: 2.1rem;
  font-weight: 700;
  color: #1d4ed8;
  line-height: 1;
}

.cs-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cs-hero-icon .cs-icon {
  width: 46px;
  height: 46px;
  color: #fff;
}

.cs-action-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .cs-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .cs-page {
    gap: 1.6rem;
    padding: 1.75rem 0 3rem;
  }

  .cs-hero {
    padding: 1.6rem 1.25rem 1.65rem;
    gap: 1rem;
  }

  .cs-hero-stats {
    padding: .75rem 1.1rem;
    gap: .9rem;
  }

  .cs-hero-stat {
    width: 100%;
    justify-content: flex-start;
  }

  .cs-action-card {
    padding: 1.75rem;
  }
}

.cs-action-card {
  border-radius: 1.75rem;
  padding: 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 28px 55px -32px rgba(30, 58, 138, 0.45);
}

.cs-action-card h3 {
  font-size: 1.35rem;
  margin-bottom: .75rem;
}

.cs-page .btn {
  border-radius: 999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.35rem;
  border-color: rgba(99, 102, 241, 0.25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.cs-page .btn.primary {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 18px 32px -18px rgba(79, 70, 229, 0.65);
}

.cs-page .btn:hover,
.cs-page .btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.45);
}

.cs-page .btn.btn-link {
  color: #4c1d95;
}

.cs-page .btn.btn-link:hover,
.cs-page .btn.btn-link:focus {
  color: #312e81;
}

.btn-icon {
  display: inline-flex;
}

.btn-icon .cs-icon {
  width: 20px;
  height: 20px;
}

.study-search-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: .35rem .5rem .35rem .75rem;
  border: 1px solid rgba(129, 140, 248, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.study-search-row input[type="search"] {
  border: none;
  padding: .5rem 0;
  font-size: 1rem;
  background: transparent;
  flex: 1 1 200px;
}

.study-search-row input[type="search"]:focus {
  outline: none;
}

.study-search-row .btn,
.study-search-row .btn.btn-link {
  border-radius: 999px;
  padding: .55rem 1.2rem;
  flex: 0 0 auto;
}

.study-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.18) 0%, rgba(196, 181, 253, 0.25) 100%);
  color: #4c1d95;
  flex: 0 0 auto;
}

.study-search-icon .cs-icon {
  width: 22px;
  height: 22px;
}

.cs-section {
  border-radius: 2rem;
  padding: 2rem 2.25rem;
  border: 1px solid rgba(203, 213, 225, 0.55);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.97) 0%, rgba(236, 244, 255, 0.9) 100%);
  box-shadow: 0 28px 55px -40px rgba(30, 58, 138, 0.35);
  margin-top: 0;
}

.cs-section-featured {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.cs-section + .cs-section {
  margin-top: 0;
}

.cs-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cs-section-header-featured {
  justify-content: flex-start;
  gap: 1.25rem;
}

.cs-section-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.15) 0%, rgba(129, 140, 248, 0.25) 100%);
  color: #4338ca;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.cs-section-featured .cs-section-icon {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.35) 0%, rgba(59, 130, 246, 0.45) 100%);
  color: #1e3a8a;
  box-shadow: 0 20px 40px -30px rgba(37, 99, 235, 0.6);
}

.cs-section-icon .cs-icon {
  width: 24px;
  height: 24px;
}

.cs-section-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}

.cs-section-eyebrow {
  font-size: 1.65rem;
  font-weight: 700;
  color: #1e3a8a;
  margin: 0;
}

.cs-section-featured .cs-section-eyebrow {
  color: #2563eb;
}

.cs-study-grid {
  gap: 1.5rem;
}

.study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.form-section {
  padding: 1rem 0;
  border-top: 1px solid #e5e7eb;
}

.form-section:first-of-type {
  padding-top: 0;
  border-top: none;
}

.form-section h3 {
  margin: 0 0 .35rem;
  font-size: 1.1rem;
}

.form-help {
  margin: 0 0 1rem;
  color: #4b5563;
  font-size: .95rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.form-error {
  margin: 0;
  font-size: .9rem;
  color: #b91c1c;
}

.form-field-inline {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
}

.form-field-inline label {
  margin: 0;
  font-weight: 500;
}

.form-hint {
  margin: 0;
  font-size: .85rem;
  color: #6b7280;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
}

.form-actions .btn {
  min-width: 120px;
  text-align: center;
}

.study-search-card {
  margin-top: 1.5rem;
}

.study-search-form {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.study-search-label {
  font-weight: 600;
}

.study-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.study-search-row input[type="search"] {
  flex: 1 1 260px;
  min-width: 200px;
}

.study-search-meta {
  margin: 0;
  font-size: .95rem;
  color: #6b7280;
}

.study-status-filters {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.study-status-buttons {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.study-list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.study-list-controls form {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.study-list-controls .study-search-label {
  margin: 0;
}

.study-sort-form select,
.study-page-size-form select {
  min-width: 140px;
}

.study-settings-fieldset .study-columns-table th:last-child,
.study-settings-fieldset .study-columns-table td.study-column-checkbox {
  text-align: center;
  width: 140px;
}

.study-columns-fieldset {
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.study-columns-fieldset legend {
  font-weight: 600;
  padding: 0 .25rem;
}

.study-columns-table-wrapper {
  overflow-x: auto;
  margin-top: .75rem;
}

.study-columns-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 320px;
}

.study-columns-table th,
.study-columns-table td {
  padding: .5rem .75rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}

.study-columns-table thead th {
  font-size: .9rem;
  color: #4b5563;
  font-weight: 600;
  background-color: #f9fafb;
}

.study-columns-table tbody tr:last-child th,
.study-columns-table tbody tr:last-child td {
  border-bottom: none;
}

.study-column-checkbox {
  width: 72px;
  text-align: center;
}

.study-column-checkbox input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
}

.study-column-label label {
  font-weight: 600;
  display: inline-block;
  margin-bottom: .15rem;
}

.study-column-description {
  color: #4b5563;
  font-size: .95rem;
}

.study-columns-table.read-only .study-column-label {
  font-weight: 600;
}

.study-columns-table.read-only td {
  padding-top: .65rem;
  padding-bottom: .65rem;
}

a.study-tag {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

a.study-tag:hover,
a.study-tag:focus {
  text-decoration: underline;
}

.study-section {
  margin-top: 2rem;
}

.study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.study-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 1.5rem;
  padding: 1.75rem;
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.98) 0%, rgba(239, 246, 255, 0.92) 100%);
  box-shadow: 0 28px 58px -38px rgba(30, 58, 138, 0.45);
}

.study-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
}

.study-card-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.study-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.study-chip {
  display: inline-flex;
  align-items: center;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.9);
  color: #1f2937;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.2;
}

.study-chip-success {
  background: rgba(220, 252, 231, 0.9);
  color: #15803d;
}

.study-chip-muted {
  background: rgba(243, 244, 246, 0.85);
  color: #4b5563;
}

.study-timeframe {
  margin: 0;
  color: #4c1d95;
}

.study-question {
  margin: .5rem 0 .25rem;
}

.study-description {
  margin: 0;
  color: #312e81;
}

.study-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.study-actions form {
  margin: 0;
}

.study-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}

.study-summary-list li {
  margin: 0;
}

.study-status {
  margin: 0 0 1rem;
  font-weight: 600;
  color: #1f2937;
}

.study-status.is-error {
  color: #b91c1c;
}

.cs-section-featured .cs-section-header {
  margin-bottom: 1rem;
  padding: 0 1.5rem;
  gap: 1rem;
}

.cs-section-featured .cs-section-icon {
  background: rgba(191, 219, 254, 0.6);
  color: #1d4ed8;
  box-shadow: none;
}

.cs-section-featured .cs-section-title-group {
  gap: 0.35rem;
}

.cs-section-featured .cs-section-eyebrow {
  font-size: 1.55rem;
  font-weight: 700;
  color: #0f172a;
}

.cs-section-featured .cs-study-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1.5rem 1.5rem;
}

.cs-section-featured .study-card {
  border-radius: 2rem;
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, rgba(249, 253, 255, 0.98), rgba(240, 247, 255, 0.98)) padding-box,
    linear-gradient(135deg, #67e8f9 0%, #60a5fa 45%, #a855f7 100%) border-box;
  box-shadow: 0 32px 65px -45px rgba(37, 99, 235, 0.55);
  padding: 2.5rem 2.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1.1fr);
  grid-auto-flow: row dense;
  gap: 1.5rem 2.5rem;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.cs-section-featured .study-card > * {
  position: relative;
  z-index: 1;
}

.cs-section-featured .study-card-header {
  grid-column: 1 / 2;
  align-items: center;
  gap: 1rem;
}

.cs-section-featured .study-card-header h3 {
  font-size: 1.65rem;
  color: #0f172a;
}

.cs-section-featured .study-meta {
  grid-column: 1 / 2;
  gap: 0.5rem;
}

.cs-section-featured .study-chip {
  background: rgba(56, 189, 248, 0.18);
  color: #0f172a;
}

.cs-section-featured .study-chip-success {
  background: rgba(134, 239, 172, 0.3);
  color: #15803d;
}

.cs-section-featured .study-chip-muted {
  background: rgba(221, 214, 254, 0.35);
  color: #5b21b6;
}

.cs-section-featured .study-timeframe,
.cs-section-featured .study-access-code {
  grid-column: 1 / 2;
}

.cs-section-featured .study-question {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 1.05rem;
  color: #0f172a;
}

.cs-section-featured .study-description {
  grid-column: 1 / -1;
  font-size: 1rem;
  color: #1e293b;
}

.cs-section-featured .study-participant-count {
  grid-column: 2 / 3;
  margin: 0;
  font-weight: 600;
  color: #0f172a;
}

.cs-section-featured .study-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  align-self: end;
}

.cs-section-featured .study-actions .btn {
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
}

.cs-section-featured .study-actions .btn.primary {
  background: #38bdf8;
  border-color: rgba(56, 189, 248, 0.2);
  color: #0f172a;
}

.cs-section-featured .study-actions .btn.primary:hover,
.cs-section-featured .study-actions .btn.primary:focus {
  background: #0ea5e9;
  color: #fff;
}

.cs-section-featured .study-actions .btn.danger,
.cs-section-featured .study-actions .btn.btn-small.danger {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.2);
  color: #be123c;
}

.cs-section-featured .study-actions .btn.danger:hover,
.cs-section-featured .study-actions .btn.danger:focus,
.cs-section-featured .study-actions .btn.btn-small.danger:hover,
.cs-section-featured .study-actions .btn.btn-small.danger:focus {
  background: #f43f5e;
  color: #fff;
}

.cs-section-featured .study-actions form {
  display: contents;
}

.cs-section-featured .study-actions form .btn {
  display: inline-flex;
}

.cs-section-featured .study-actions p.muted {
  text-align: right;
}

.cs-section-featured .study-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  z-index: 0;
}

@media (max-width: 960px) {
  .cs-section-featured .cs-section-header {
    padding: 0 1rem;
  }

  .cs-section-featured .cs-study-grid {
    padding: 0 1rem 1.5rem;
  }

  .cs-section-featured .study-card {
    grid-template-columns: 1fr;
    padding: 2rem 2.25rem;
  }

  .cs-section-featured .study-participant-count,
  .cs-section-featured .study-actions {
    grid-column: 1 / 2;
  }

  .cs-section-featured .study-actions {
    justify-content: flex-start;
  }
}

.study-log-controls {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.study-entry-table-wrapper {
  overflow-x: auto;
  margin: 1rem 0;
}

.study-log-table {
  width: 100%;
  border-collapse: collapse;
}

.study-log-table th,
.study-log-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: .6rem;
  text-align: left;
  vertical-align: top;
}

.study-log-table th {
  background: #f8fafc;
}

.study-log-table tbody tr:hover {
  background: #f9fafb;
}

.study-log-include {
  width: 4rem;
  text-align: center;
}

.study-data-table td,
.study-data-table th {
  white-space: normal;
}

.study-data-table td:nth-child(7) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.study-metric-table td,
.study-metric-table th {
  text-align: right;
}

.study-metric-table th:first-child {
  text-align: left;
}

.study-toggle-fieldset {
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: 1.75rem;
  padding: 1.75rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(236, 72, 153, 0.08) 100%);
  box-shadow: 0 24px 60px -38px rgba(15, 23, 42, 0.5);
}

.study-toggle-fieldset legend {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
}

.study-toggle-fieldset > p {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: #475569;
}

.study-toggle-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.study-toggle-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.study-toggle-option--disabled {
  cursor: not-allowed;
}

.study-toggle-option--disabled input[type="checkbox"] {
  cursor: not-allowed;
}

.study-toggle-option input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.study-toggle-content {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.study-toggle-option--disabled .study-toggle-content {
  opacity: 0.7;
  background: rgba(248, 250, 252, 0.85);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: none;
}

.study-toggle-option--disabled:hover .study-toggle-content {
  border-color: rgba(148, 163, 184, 0.35);
}

.study-toggle-option:hover .study-toggle-content {
  border-color: rgba(99, 102, 241, 0.45);
}

.study-toggle-option input[type="checkbox"]:focus-visible + .study-toggle-content {
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
}

.study-toggle-option input[type="checkbox"]:checked + .study-toggle-content {
  border-color: rgba(99, 102, 241, 0.75);
  background: rgba(99, 102, 241, 0.12);
  box-shadow: 0 26px 55px -36px rgba(79, 70, 229, 0.7);
}

.study-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.study-toggle-name {
  font-weight: 600;
  color: #1f2937;
}

.study-toggle-option input[type="checkbox"]:checked + .study-toggle-content .study-toggle-name {
  color: #312e81;
}

.study-toggle-meta {
  font-size: 0.85rem;
  color: #4b5563;
}

.study-toggle-option input[type="checkbox"]:checked + .study-toggle-content .study-toggle-meta {
  color: #4338ca;
}

.study-toggle-switch {
  margin-left: auto;
  width: 3rem;
  height: 1.6rem;
  border-radius: 999px;
  background: rgba(203, 213, 225, 0.9);
  display: flex;
  align-items: center;
  padding: 0.2rem;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.study-toggle-thumb {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
  transition: transform 0.25s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.study-toggle-option input[type="checkbox"]:checked + .study-toggle-content .study-toggle-switch {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: 0 18px 38px -28px rgba(99, 102, 241, 0.75);
}

.study-toggle-option input[type="checkbox"]:checked + .study-toggle-content .study-toggle-thumb {
  transform: translateX(1.35rem);
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.45);
}

.page-header {
  margin-top: .5rem;
  margin-bottom: 1.25rem;
}

.page-header h2 {
  margin: 0;
}

.context-event-form-intro {
  margin-top: .25rem;
}

.context-event-form .form-section + .form-section {
  margin-top: 1rem;
}

.form-field.is-disabled {
  opacity: .6;
}

.form-field.is-disabled input {
  background: #f3f4f6;
  cursor: not-allowed;
}

#test-login {
  margin-top: 1rem;
}

nav {
  margin-bottom: 1rem;
}

.app-navbar__nav a {
  margin-right: 0;
}

.secondary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 0.85rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.line-break {
  flex-basis: 100%;   
  height: 0.1rem;    
  padding: 0;
}



nav a {
  margin-right: 0.5rem;
}

nav a:last-child {
  margin-right: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.entry-shell {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-bottom: 2rem;
}

.entry-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

.entry-hero-icon {
  width: 5.15rem;
  height: 5.15rem;
  border-radius: 2rem;
  background: linear-gradient(145deg, #0ea5e9 0%, #6366f1 55%, #a855f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 32px 68px -36px rgba(76, 29, 149, 0.55);
  transform: translateY(-6px);
}

.entry-hero-icon svg {
  width: 2.75rem;
  height: 2.75rem;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entry-hero-title {
  margin: 0;
  font-size: 2.55rem;
  font-weight: 600;
  color: #0f172a;
}

.entry-tip-card {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: 1.1rem;
  padding: 0.9rem 1.25rem 1rem 1.15rem;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(236, 72, 153, 0.08));
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 18px 40px -30px rgba(79, 70, 229, 0.35);
  max-width: 30rem;
}

.entry-tip-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.9rem;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.9), rgba(99, 102, 241, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.entry-tip-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.entry-tip-text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #475569;
  text-align: left;
  max-width: 22rem;
}

.entry-tip-dismiss {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  border: none;
  background: transparent;
  color: rgba(30, 41, 59, 0.55);
  font-size: 1rem;
  line-height: 1;
  padding: 0.35rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.entry-tip-dismiss:hover,
.entry-tip-dismiss:focus {
  background: rgba(148, 163, 184, 0.18);
  color: rgba(15, 23, 42, 0.85);
}

.entry-tip-dismiss:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.7);
  outline-offset: 2px;
}

.entry-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.entry-card {
  position: relative;
  background: #fff;
  border-radius: 1.9rem;
  padding: 2rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 30px 60px -35px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  gap: 1.55rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.entry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.entry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 72px -36px rgba(15, 23, 42, 0.45);
}

.entry-card:hover::after {
  opacity: 1;
}

.entry-card-heading {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.entry-card-heading h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: #0f172a;
}

.entry-card-heading p {
  margin: 0.2rem 0 0;
  color: #64748b;
  font-size: 0.95rem;
}

.entry-card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entry-card-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entry-card-icon-blue {
  background: #e0e7ff;
  color: #4338ca;
}

.entry-card-icon-green {
  background: #dcfce7;
  color: #15803d;
}

.entry-card-icon-purple {
  background: #ede9fe;
  color: #7c3aed;
}

.entry-card-icon-orange {
  background: #ffedd5;
  color: #ea580c;
}

.entry-card-icon-cyan {
  background: #cffafe;
  color: #0e7490;
}

.entry-field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.entry-field-label {
  font-size: 0.95rem;
  color: #1e293b;
}

.entry-field-error {
  display: none;
  color: #dc2626;
  font-weight: 700;
  font-size: 0.9rem;
  margin-left: 0.5rem;
}

.entry-field-error.is-visible {
  display: inline;
}

.entry-card textarea,
.entry-card input,
.entry-select select {
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.entry-card textarea:focus,
.entry-card input:focus,
.entry-select select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  background: #fff;
}

.entry-card textarea {
  min-height: 9rem;
  resize: vertical;
}

.entry-grid {
  display: grid;
  gap: 1.25rem;
}

.entry-grid-two {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.entry-card-mini {
  align-items: center;
  text-align: center;
}

.entry-card-mini-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
}

.entry-card-extreme {
  text-align: left;
  align-items: stretch;
  transition: box-shadow 0.2s ease;
}

.entry-card-extreme .entry-card-mini-content {
  align-items: stretch;
}

.entry-card-extreme-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.entry-card-extreme-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100%;
}

.entry-card-mini-hint {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.65);
}

.entry-extreme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font-weight: 600;
  color: #be123c;
  user-select: none;
}

.entry-extreme-switch.entry-extreme-switch--disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.entry-extreme-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.entry-extreme-switch-track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(190, 18, 60, 0.25);
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.entry-extreme-switch-thumb {
  position: absolute;
  top: 0.2rem;
  left: 0.22rem;
  width: 1.08rem;
  height: 1.08rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 18px -10px rgba(190, 18, 60, 0.55);
  transition: transform 0.2s ease;
}

.entry-extreme-switch input:checked + .entry-extreme-switch-track {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.9), rgba(190, 18, 60, 0.95));
}

.entry-extreme-switch input:checked + .entry-extreme-switch-track .entry-extreme-switch-thumb {
  transform: translateX(1.2rem);
}

.entry-extreme-switch input:disabled + .entry-extreme-switch-track {
  background: rgba(190, 18, 60, 0.15);
}

.entry-extreme-switch input:disabled + .entry-extreme-switch-track .entry-extreme-switch-thumb {
  box-shadow: none;
}

.entry-extreme-switch input:focus-visible + .entry-extreme-switch-track {
  outline: 3px solid rgba(244, 63, 94, 0.35);
  outline-offset: 2px;
}

.entry-extreme-switch-label {
  font-size: 0.95rem;
}

.entry-extreme-switch.entry-extreme-switch--disabled .entry-extreme-switch-label {
  color: rgba(190, 18, 60, 0.6);
}

.entry-extreme-ranges {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

@media (min-width: 720px) {
  .entry-extreme-ranges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.entry-extreme-range-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: 1rem;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.22);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.entry-extreme-range-name {
  font-weight: 600;
  color: #9f1239;
  flex-shrink: 0;
}

.entry-extreme-range-values {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: #0f172a;
}

.entry-extreme-bound {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 4.1rem;
}

.entry-extreme-bound-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.55);
}

.entry-extreme-bound-value {
  font-size: 1.05rem;
  color: #111827;
}

.entry-extreme-range-arrow {
  font-size: 1.15rem;
  color: rgba(15, 23, 42, 0.45);
}

.entry-card-extreme[data-extreme-enabled="true"] {
  box-shadow: 0 22px 48px -30px rgba(190, 24, 93, 0.6);
}

.entry-card-extreme[data-extreme-enabled="true"] .entry-extreme-range-item {
  background: rgba(244, 63, 94, 0.16);
  border-color: rgba(190, 24, 93, 0.35);
  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.1);
}

.entry-card-mini .entry-card-icon {
  align-self: center;
  box-shadow: 0 16px 36px -28px rgba(15, 23, 42, 0.45);
}

.entry-card-mini h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
}

.entry-card-mini input {
  width: 100%;
  text-align: center;
  font-weight: 500;
  height: 2.6rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 0.35rem 1.1rem;
  background: rgba(148, 163, 184, 0.08);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

  .entry-card-mini input:focus {
    border-color: rgba(37, 99, 235, 0.6);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  }

  .entry-substances-field {
    gap: 1.2rem;
  }

  .entry-substances-control {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 1.4rem;
    border: 1px dashed rgba(13, 148, 136, 0.35);
    background: rgba(207, 250, 254, 0.45);
    box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.12);
    flex-wrap: wrap;
  }

  .entry-substances-control .entry-select {
    flex: 1;
    min-width: 12rem;
  }

  .entry-substances-control .entry-select select {
    border: none;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    min-height: 6rem;
    color: #0f172a;
    font-weight: 500;
  }

  .entry-substances-control .entry-select select:focus {
    box-shadow: none;
  }

  .entry-substances-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(15, 118, 110, 0.95));
    box-shadow: 0 16px 32px -22px rgba(13, 148, 136, 0.6);
    flex-shrink: 0;
  }

  .entry-substances-trigger-icon svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: #fff;
  }

  .entry-substances-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 2rem;
    padding: 0.25rem 0;
  }

  .entry-substances-selected[data-state="empty"]::before {
    content: attr(data-empty-label);
    color: rgba(15, 23, 42, 0.55);
    font-size: 0.9rem;
    font-weight: 500;
  }

  .entry-substances-selected[data-state="filled"]::before {
    content: none;
  }

  .entry-substances-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 12px 22px -18px rgba(13, 148, 136, 0.45);
  }

.entry-select {
  position: relative;
}

.entry-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.75rem;
}

.entry-select::after {
  content: '\25BC';
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  font-size: 0.8rem;
}

.entry-select-multi::after {
  display: none;
}

.entry-select-multi select {
  min-height: 7rem;
  padding-right: 1rem;
}

.entry-field-hint {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
}

.entry-nested {
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: #f8fafc;
  border: 1px dashed rgba(148, 163, 184, 0.45);
}

.entry-nested > * + * {
  margin-top: 1.25rem;
}

.entry-nested-grid {
  align-items: flex-start;
}

.entry-slider-stack {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .entry-slider-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

  .entry-card-slider {
    gap: 1.5rem;
    padding: 2.25rem 2rem;
    --slider-accent: #2563eb;
    --slider-glow: rgba(37, 99, 235, 0.18);
    --slider-label-color: #0f172a;
    --slider-text-muted: rgba(15, 23, 42, 0.8);
    --slider-value-bg: rgba(255, 255, 255, 0.55);
    --slider-number-bg: rgba(255, 255, 255, 0.95);
    --slider-number-border: rgba(148, 163, 184, 0.35);
    --slider-fill-color: var(--slider-accent, #2563eb);
    --slider-track-bg: rgba(255, 255, 255, 0.4);
    --slider-thumb-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.25), 0 4px 6px -4px rgba(15, 23, 42, 0.3);
    transition: background 0.35s ease;
  }

  .entry-card-blue {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    --slider-accent: #2563eb;
    --slider-glow: rgba(37, 99, 235, 0.22);
  }

  .entry-card-orange {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    --slider-accent: #ea580c;
    --slider-glow: rgba(234, 88, 12, 0.22);
  }

  .entry-card-green {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    --slider-accent: #16a34a;
    --slider-glow: rgba(22, 163, 74, 0.22);
  }

  .entry-card-plum {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    --slider-accent: #7c3aed;
    --slider-glow: rgba(124, 58, 237, 0.25);
  }

  #cannabis-inhaled-amount-row .slider-container {
    --slider-accent: #0f766e;
    --slider-glow: rgba(15, 118, 110, 0.22);
  }

/* General slider helper text */
.slider-value-text {
  font-weight: 500;
  color: #0f172a;
}

.entry-slider-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

  .entry-slider-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1.3rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slider-accent, #2563eb);
    box-shadow: 0 20px 42px -30px var(--slider-glow, rgba(37, 99, 235, 0.28));
  }

.entry-slider-icon svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entry-slider-titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.entry-slider-label {
  font-weight: 600;
  color: var(--slider-label-color, #0f172a);
  font-size: 1.05rem;
}

  .entry-slider-titles .slider-value-text {
    font-weight: 500;
    color: var(--slider-text-muted, rgba(15, 23, 42, 0.8));
    font-size: 0.85rem;
    background: var(--slider-value-bg, rgba(255, 255, 255, 0.55));
    border-radius: 0.85rem;
    padding: 0.25rem 0.75rem;
    box-shadow: 0 12px 30px -26px rgba(15, 23, 42, 0.65);
  }

  .entry-slider-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--slider-accent, #2563eb);
    background: var(--slider-number-bg, rgba(255, 255, 255, 0.95));
    border: 1px solid var(--slider-number-border, rgba(148, 163, 184, 0.35));
    box-shadow: 0 18px 40px -30px var(--slider-glow, rgba(37, 99, 235, 0.28));
  }

  .entry-card-slider .slider-container,
  #cannabis-inhaled-amount-row .slider-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    position: relative;
    border: none;
    border-radius: 0;
    overflow: visible;
    --slider-progress: 0.5;
    --slider-track-height: 0.5rem;
    --slider-thumb-size: 1.25rem;
    --slider-track-inset: 0px;
    --slider-track-padding: clamp(0.75rem, 1vw + 0.6rem, 1.05rem);
    --slider-label-gap: clamp(0.8rem, 1vw + 0.6rem, 1.2rem);
  }

  @media (min-width: 40rem) {
    .entry-card-slider .slider-container,
    #cannabis-inhaled-amount-row .slider-container {
      --slider-track-height: 0.75rem;
      --slider-thumb-size: 1.5rem;
      --slider-track-inset: 0px;
      --slider-track-padding: clamp(0.85rem, 1vw + 0.7rem, 1.2rem);
    }
  }

  .entry-card-slider .slider-track-zone,
  #cannabis-inhaled-amount-row .slider-track-zone,
  #inebriation-level-row .slider-track-zone {
    grid-column: 1 / -1;
    grid-row: 1;
    border-radius: 999px;
    margin-bottom: var(--slider-label-gap, 1rem);
    padding: var(--slider-track-padding, 0.85rem) var(--slider-track-inset, 1.25rem);
  }

  .entry-card-slider .slider-track-zone::before,
  .entry-card-slider .slider-track-zone::after,
  #cannabis-inhaled-amount-row .slider-track-zone::before,
  #cannabis-inhaled-amount-row .slider-track-zone::after,
  #inebriation-level-row .slider-track-zone::before,
  #inebriation-level-row .slider-track-zone::after {
    content: "";
    display: block;
    position: absolute;
    left: var(--slider-track-inset, 1rem);
    width: calc(100% - (var(--slider-track-inset, 1rem) * 2));
    top: 50%;
    height: var(--slider-track-height, 0.5rem);
    border-radius: calc(var(--slider-track-height, 0.5rem) / 2);
    pointer-events: none;
    transform: translateY(-50%);
    z-index: 1;
  }

  .entry-card-slider .slider-track-zone::before,
  #cannabis-inhaled-amount-row .slider-track-zone::before,
  #inebriation-level-row .slider-track-zone::before {
    background: linear-gradient(
      90deg,
      var(--slider-rest-start, var(--slider-track-bg, rgba(255, 255, 255, 0.45))) 0%,
      var(--slider-rest-end, var(--slider-track-bg, rgba(255, 255, 255, 0.25))) 100%
    );
  }

  .entry-card-slider .slider-track-zone::after,
  #cannabis-inhaled-amount-row .slider-track-zone::after,
  #inebriation-level-row .slider-track-zone::after {
    width: calc((100% - (var(--slider-track-inset, 1rem) * 2)) * var(--slider-progress, 0));
    background: var(--slider-fill-color, var(--slider-accent, #2563eb));
    transform-origin: left center;
    transition: width 0.12s ease, background 0.2s ease;
    z-index: 2;
  }

  .entry-card-slider .slider-track-zone input[type=range] {
    position: relative;
    z-index: 3;
    margin: 0;
    background: transparent;
    width: 100%;
    height: var(--slider-thumb-size, 1.25rem);
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
  }
  #inebriation-level-row .slider-track-zone input[type=range] {
    position: relative;
    z-index: 3; /* bring thumb above the filled line */
    margin: 0;
    margin-left: calc(-1 * var(--slider-track-inset, 1rem));
    margin-right: calc(-1 * var(--slider-track-inset, 1rem));
    padding: 0 var(--slider-track-inset, 1rem);
    background: transparent;
    width: calc(100% + 2 * var(--slider-track-inset, 1rem));
    height: var(--slider-thumb-size, 1.25rem);
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
  }

  .entry-card-slider .slider-track-zone input[type=range]:focus-visible {
    outline: none;
  }

  .entry-card-slider .slider-track-zone input[type=range]::-webkit-slider-runnable-track {
    height: var(--slider-track-height, 0.5rem);
    background: transparent;
    border: none;
  }
  #inebriation-level-row .slider-track-zone input[type=range]::-webkit-slider-runnable-track {
    height: var(--slider-track-height, 0.5rem);
    background: transparent;
    border: none;
  }

  .entry-card-slider .slider-track-zone input[type=range]::-moz-range-track {
    height: var(--slider-track-height, 0.5rem);
    background: transparent;
    border: none;
  }
  #inebriation-level-row .slider-track-zone input[type=range]::-moz-range-track {
    height: var(--slider-track-height, 0.5rem);
    background: transparent;
    border: none;
  }

  .entry-card-slider .slider-track-zone input[type=range]::-moz-range-progress {
    background: transparent;
    border: none;
  }
  #inebriation-level-row .slider-track-zone input[type=range]::-moz-range-progress {
    background: transparent;
    border: none;
  }

  .entry-card-slider .slider-track-zone input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--slider-thumb-size, 1.25rem);
    height: var(--slider-thumb-size, 1.25rem);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--slider-accent, #2563eb);
    box-shadow: var(--slider-thumb-shadow, 0 10px 15px -3px rgba(15, 23, 42, 0.25), 0 4px 6px -4px rgba(15, 23, 42, 0.3)), 0 0 0 4px rgba(255, 255, 255, 0.4);
    margin-top: calc((var(--slider-track-height, 0.5rem) - var(--slider-thumb-size, 1.25rem)) / 2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  #inebriation-level-row .slider-track-zone input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--slider-thumb-size, 1.25rem);
    height: var(--slider-thumb-size, 1.25rem);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--slider-accent, #2563eb);
    box-shadow: var(--slider-thumb-shadow, 0 10px 15px -3px rgba(15, 23, 42, 0.25), 0 4px 6px -4px rgba(15, 23, 42, 0.3)), 0 0 0 4px rgba(255, 255, 255, 0.4);
    margin-top: calc((var(--slider-track-height, 0.5rem) - var(--slider-thumb-size, 1.25rem)) / 2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .entry-card-slider .slider-track-zone input[type=range]::-moz-range-thumb {
    width: var(--slider-thumb-size, 1.25rem);
    height: var(--slider-thumb-size, 1.25rem);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--slider-accent, #2563eb);
    box-shadow: var(--slider-thumb-shadow, 0 10px 15px -3px rgba(15, 23, 42, 0.25), 0 4px 6px -4px rgba(15, 23, 42, 0.3)), 0 0 0 4px rgba(255, 255, 255, 0.4);
    margin-top: calc((var(--slider-track-height, 0.5rem) - var(--slider-thumb-size, 1.25rem)) / 2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  #inebriation-level-row .slider-track-zone input[type=range]::-moz-range-thumb {
    width: var(--slider-thumb-size, 1.25rem);
    height: var(--slider-thumb-size, 1.25rem);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--slider-accent, #2563eb);
    box-shadow: var(--slider-thumb-shadow, 0 10px 15px -3px rgba(15, 23, 42, 0.25), 0 4px 6px -4px rgba(15, 23, 42, 0.3)), 0 0 0 4px rgba(255, 255, 255, 0.4);
    margin-top: calc((var(--slider-track-height, 0.5rem) - var(--slider-thumb-size, 1.25rem)) / 2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .entry-card-slider .slider-track-zone input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
  #inebriation-level-row .slider-track-zone input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
  }

  .entry-card-slider .slider-track-zone input[type=range]::-ms-fill-lower,
  .entry-card-slider .slider-track-zone input[type=range]::-ms-fill-upper {
    background: transparent;
  }
  #inebriation-level-row .slider-track-zone input[type=range]::-ms-fill-lower,
  #inebriation-level-row .slider-track-zone input[type=range]::-ms-fill-upper {
    background: transparent;
  }

  .entry-card-slider .slider-track-zone input[type=range]::-ms-thumb {
    width: var(--slider-thumb-size, 1.25rem);
    height: var(--slider-thumb-size, 1.25rem);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--slider-accent, #2563eb);
    box-shadow: var(--slider-thumb-shadow, 0 10px 15px -3px rgba(15, 23, 42, 0.25), 0 4px 6px -4px rgba(15, 23, 42, 0.3)), 0 0 0 4px rgba(255, 255, 255, 0.4);
    margin-top: calc((var(--slider-track-height, 0.5rem) - var(--slider-thumb-size, 1.25rem)) / 2);
  }
  #inebriation-level-row .slider-track-zone input[type=range]::-ms-thumb {
    width: var(--slider-thumb-size, 1.25rem);
    height: var(--slider-thumb-size, 1.25rem);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--slider-accent, #2563eb);
    box-shadow: var(--slider-thumb-shadow, 0 10px 15px -3px rgba(15, 23, 42, 0.25), 0 4px 6px -4px rgba(15, 23, 42, 0.3)), 0 0 0 4px rgba(255, 255, 255, 0.4);
    margin-top: calc((var(--slider-track-height, 0.5rem) - var(--slider-thumb-size, 1.25rem)) / 2);
  }

  .entry-card-slider .slider-track-zone input[type=range]:active::-webkit-slider-thumb,
  .entry-card-slider .slider-track-zone input[type=range]:active::-moz-range-thumb,
  .entry-card-slider .slider-track-zone input[type=range]:active::-ms-thumb {
    transform: scale(1.1);
    box-shadow: 0 16px 34px -18px rgba(15, 23, 42, 0.6), 0 0 0 5px rgba(255, 255, 255, 0.45);
  }

  .entry-card-slider .slider-track-zone .ticks,
  #cannabis-inhaled-amount-row .slider-track-zone .ticks,
  #inebriation-level-row .slider-track-zone .ticks {
    z-index: 2;
  }

  .entry-card-slider .slider-track-zone .ticks span,
  #cannabis-inhaled-amount-row .slider-track-zone .ticks span,
  #inebriation-level-row .slider-track-zone .ticks span {
    background: rgba(15, 23, 42, 0.35);
  }

  .entry-card-slider .slider-end-labels,
  #cannabis-inhaled-amount-row .slider-end-labels,
  #inebriation-level-row .slider-end-labels {
    display: contents;
    margin-top: 0;
    gap: 0;
  }

  .entry-card-slider .slider-end-text--left,
  #cannabis-inhaled-amount-row .slider-end-text--left,
  #inebriation-level-row .slider-end-text--left {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    flex: initial;
    text-align: left;
  }

  .entry-card-slider .slider-end-text--right,
  #cannabis-inhaled-amount-row .slider-end-text--right,
  #inebriation-level-row .slider-end-text--right {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    flex: initial;
    text-align: right;
  }

  .entry-card-slider .slider-container .slider-value-text,
  #cannabis-inhaled-amount-row .slider-container .slider-value-text,
  #inebriation-level-row .slider-container .slider-value-text {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    font-weight: 500;
    color: var(--slider-text-muted, rgba(15, 23, 42, 0.8));
    font-size: 0.85rem;
    background: var(--slider-value-bg, rgba(255, 255, 255, 0.55));
    border-radius: 0.85rem;
    padding: 0.25rem 0.75rem;
    box-shadow: 0 12px 30px -26px rgba(15, 23, 42, 0.65);
  }

  .entry-card-slider .slider-end-text--left,
  .entry-card-slider .slider-end-text--right,
  #cannabis-inhaled-amount-row .slider-end-text--left,
  #cannabis-inhaled-amount-row .slider-end-text--right,
  #inebriation-level-row .slider-end-text--left,
  #inebriation-level-row .slider-end-text--right {
    color: rgba(15, 23, 42, 0.82);
    font-weight: 700;
  }

  .entry-card-slider .slider-container > .slider-value-text,
  #cannabis-inhaled-amount-row .slider-container > .slider-value-text,
  #inebriation-level-row .slider-container > .slider-value-text {
    justify-self: center;
    color: rgba(15, 23, 42, 0.82);
    font-weight: 500;
  }

.entry-card-studies .study-toggle-fieldset {
  background: rgba(250, 250, 255, 0.9);
  border-radius: 1.25rem;
}

.entry-submit {
  margin-top: 1rem;
}

.entry-submit-button {
  flex: 1;
  border: none;
  padding: 1.15rem 1.6rem;
  border-radius: 1.4rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #6366f1 45%, #7c3aed 100%);
  cursor: pointer;
  box-shadow: 0 34px 70px -30px rgba(79, 70, 229, 0.65);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.entry-submit-button.clicked {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  box-shadow: 0 28px 60px -32px rgba(15, 23, 42, 0.6);
}

.entry-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.entry-submit .entry-submit-button {
  width: 100%;
}

.entry-saving-notice {
  margin: 0;
  color: #b91c1c;
  font-weight: 600;
  text-align: center;
}

.entry-submit-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 38px 78px -34px rgba(79, 70, 229, 0.72);
}

.entry-submit-button.clicked:hover {
  transform: none;
  box-shadow: 0 28px 60px -32px rgba(15, 23, 42, 0.6);
}

.entry-submit-button:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.45);
  outline-offset: 4px;
}

.entry-logout-timer {
  text-align: center;
  font-size: 0.95rem;
  color: #475569;
}


.entry-edit-footer {
  margin-top: 2.5rem;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 2rem;
}

.entry-edit-footer[hidden] {
  display: none !important;
}

.entry-edit-toolbar {
  position: fixed;
  right: 2.25rem;
  bottom: 2.25rem;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
  z-index: 30;
}

.entry-edit-toolbar.is-active {
  display: flex;
}

.entry-edit-toolbar[hidden] {
  display: none !important;
}

@media (max-width: 768px) {
  .entry-edit-footer {
    justify-content: center;
    padding-bottom: 1.5rem;
  }

  .entry-edit-toolbar {
    left: 1.25rem;
    right: 1.25rem;
    align-items: stretch;
  }

  .entry-edit-controls {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.entry-edit-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.15rem;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 48px -24px rgba(15, 23, 42, 0.6);
}

.entry-edit-button {
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.94);
  color: #1e1b4b;
  padding: 0.6rem 1.4rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.entry-edit-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -24px rgba(59, 130, 246, 0.6);
}

.entry-edit-button:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.4);
  outline-offset: 4px;
}

.entry-edit-button[disabled],
.entry-edit-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.entry-edit-button-primary {
  background: linear-gradient(135deg, #4338ca 0%, #312e81 100%);
  color: #f8fafc;
  border-color: transparent;
}

.entry-edit-button-primary:hover {
  box-shadow: 0 20px 40px -26px rgba(59, 130, 246, 0.75);
}

.entry-edit-button-outline {
  background: transparent;
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.45);
}

.entry-edit-button-outline:hover {
  background: rgba(59, 130, 246, 0.12);
}

.entry-edit-controls #entry-color-toggle {
  color: #f8fafc;
  border-color: rgba(226, 232, 240, 0.55);
}

.entry-edit-controls #entry-color-toggle:hover {
  background: rgba(148, 163, 184, 0.2);
}

.entry-edit-controls #entry-color-toggle[aria-pressed="true"] {
  background: rgba(59, 130, 246, 0.35);
  border-color: rgba(59, 130, 246, 0.65);
  color: #f8fafc;
}

.entry-edit-button-ghost {
  background: rgba(15, 23, 42, 0.28);
  color: #f8fafc;
  border-color: rgba(148, 163, 184, 0.5);
}

.entry-edit-button-ghost:hover {
  background: rgba(30, 64, 175, 0.4);
  color: #f8fafc;
}

.entry-edit-button.is-active,
.entry-edit-button[aria-pressed="true"] {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.5);
  color: #1d4ed8;
}

.entry-submit-button.is-disabled {
  opacity: 0.6;
  filter: saturate(65%);
  cursor: not-allowed;
}

.entry-submit-button.is-disabled [data-entry-copy] {
  cursor: text;
}

.entry-edit-ghost {
  display: none;
  margin-top: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.entry-edit-hint {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(37, 99, 235, 0.85);
  margin-bottom: 0.4rem;
}

.entry-edit-placeholder-value {
  display: block;
  width: 100%;
  min-height: 1.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.92);
  color: #1e1b4b;
  cursor: text;
}

.entry-edit-options-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.entry-edit-option {
  display: inline-block;
  padding: 0.4rem 0.65rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.95);
  color: #1e1b4b;
  min-width: 1.75rem;
  cursor: text;
}

.entry-edit-option[data-entry-copy-locked],
.entry-edit-placeholder-value[data-entry-copy-locked] {
  opacity: 0.6;
  cursor: not-allowed;
}

.entry-edit-mode .entry-edit-ghost {
  display: block;
}

.entry-color-controls {
  display: none;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.35);
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.entry-color-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #1e1b4b;
}

.entry-color-control input[type="color"] {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.entry-color-control input[type="color"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.entry-edit-mode.entry-edit-colors .entry-color-controls {
  display: flex;
}

.entry-edit-mode.entry-edit-colors .entry-form input[type="color"] {
  pointer-events: auto;
}

.entry-edit-mode .entry-shell {
  outline: 3px solid rgba(59, 130, 246, 0.55);
  outline-offset: 18px;
  transition: outline-color 0.2s ease;
}

.entry-edit-mode .login-content {
  outline: 3px solid rgba(59, 130, 246, 0.55);
  outline-offset: 18px;
  transition: outline-color 0.2s ease;
}

.entry-edit-mode [data-entry-copy]:not([data-entry-copy-readonly]) {
  outline: 1px dashed rgba(79, 70, 229, 0.5);
  outline-offset: 3px;
  border-radius: 0.4rem;
  cursor: text;
}

.entry-edit-mode [data-entry-copy]:not([data-entry-copy-readonly]):focus {
  outline: 2px solid rgba(79, 70, 229, 0.8);
  background-color: rgba(255, 255, 255, 0.2);
}

.entry-edit-mode .entry-form input,
.entry-edit-mode .entry-form textarea,
.entry-edit-mode .entry-form select,
.entry-edit-mode .entry-form .study-toggle-option input,
.entry-edit-mode .login-form input,
.entry-edit-mode .login-form button,
.entry-edit-mode .login-content .login-link,
.entry-edit-mode .login-content .login-test-button,
.entry-edit-mode .login-content a {
  pointer-events: none;
}

.entry-edit-mode [data-entry-copy] {
  pointer-events: auto;
}

@media (max-width: 768px) {
  .entry-edit-toolbar {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    align-items: stretch;
  }

  .entry-edit-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .entry-shell {
    gap: 2rem;
  }

  .entry-card {
    padding: 1.6rem;
    border-radius: 1.35rem;
  }

  .entry-hero-title {
    font-size: 2.1rem;
  }

  .entry-hero-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.75rem;
  }
}

.secondary-nav a {
  margin-right: 0;
  color: #334155;
  font-weight: 600;
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 0.65rem;
  transition: color 0.2s ease, background 0.2s ease;
}

.secondary-nav a:hover,
.secondary-nav a:focus {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.08);
  text-decoration: none;
}

.muted {
  color: #666;
  font-size: .9rem;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: .4rem .6rem;
  text-align: left;
}

th {
  background: #f5f5f5;
}

.context-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.context-event-item {
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.context-event-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.context-event-title-group {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.context-event-title {
  font-weight: 700;
  font-size: 1.05rem;
}

.context-event-type {
  align-self: flex-start;
  padding: .15rem .65rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.context-event-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.context-event-time {
  font-size: .92rem;
  font-weight: 600;
  color: #374151;
}

.context-event-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.context-event-complete {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}

.context-event-complete:hover,
.context-event-complete:focus {
  background: #1d4ed8;
  border-color: #1e3a8a;
  color: #fff;
}

.context-event-description {
  margin: .75rem 0 0;
  color: #374151;
  line-height: 1.5;
}

.context-event-delete,
.context-event-edit {
  text-decoration: none;
}

@media (max-width: 600px) {
  body {
    margin: 2rem var(--slider-margin, 5px);
  }

  .row {
    flex-direction: column;
    align-items: stretch;
  }

  .col {
    width: 100%;
  }

  .slider-container {
    width: 100%;
  }

  .slider-end-labels span:first-child {
    margin-left: 0.25rem;
  }

  .slider-end-labels span:last-child {
    margin-right: 0.25rem;
  }

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

  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .form-actions .btn {
    width: 100%;
  }

  .context-event-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .context-event-meta {
    justify-content: flex-start;
    width: 100%;
  }
}

.flash {
  padding: 0.5rem 0.8rem;
  border-radius: 0.25rem;
  margin: 0.5rem 0;
}

.flash.ok {
  background: #e6ffed;
  border: 1px solid #34d399;
}

.flash.error {
  background: #ffecec;
  border: 1px solid #f87171;
}

details.card {
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  padding: 1rem;
  margin: 1rem 0;
}

details.card summary {
  font-weight: 600;
  cursor: pointer;
}

.admin-settings details {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.admin-settings summary {
  font-weight: 700;
  cursor: pointer;
}

.admin-settings .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}

.admin-settings input[type=text],
.admin-settings input[type=number],
.admin-settings select {
  max-width: 400px;
}

.admin-settings textarea {
  width: 100%;
  max-width: none;
  resize: both;
}

.admin-settings textarea.profile-option-textarea {
  width: 100%;
  min-width: min(720px, 100%);
}

.admin-settings .profile-options-table td {
  width: 100%;
}

.admin-settings__form {
  margin: 0;
}

.admin-settings__form table {
  width: 100%;
}

.admin-settings .secondary-nav-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
}

.admin-settings .secondary-nav-section h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.admin-settings .secondary-nav-section > p {
  margin: 0 0 1rem;
}

.admin-settings .secondary-nav-groups {
  display: grid;
  gap: 1rem;
}

.admin-settings .secondary-nav-group {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 1rem;
  background: #f9fafb;
}

.admin-settings .secondary-nav-group fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.admin-settings .secondary-nav-group legend {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.admin-settings .secondary-nav-group table {
  width: 100%;
}

.admin-settings .actions {
  margin-top: 0.5rem;
}

.admin-settings .actions button + button {
  margin-left: 1rem;
}

.admin-log-table-wrapper {
  overflow-x: auto;
}

.admin-log-table-wrapper table {
  font-size: 0.85em;
}

.security-section {
  margin-top: 2.5rem;
}

.security-section__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.security-section__header h3 {
  margin: 0;
}

.security-section__body {
  margin-top: 1rem;
  display: grid;
  gap: 1.5rem;
}

.security-section__body--stacked {
  gap: 2rem;
}

.feedback-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.feedback-controls label {
  font-weight: 600;
}

.feedback-controls input[type="search"] {
  min-width: 160px;
  max-width: 220px;
  width: 200px;
}

.feedback-controls select {
  max-width: 160px;
}

#per_page {
  max-width: 110px;
}

#feedback-container {
  max-width: 190px;
}

.feedback-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.feedback-table-wrapper th,
.feedback-table-wrapper td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
}

.feedback-log-row {
  transition: background-color 0.2s ease-in-out;
}

.feedback-log-row.status-in-progress {
  background-color: #fef9c3;
}

.feedback-log-row.status-fixed {
  background-color: #dcfce7;
}

.feedback-log-row.status-ignored {
  background-color: #e5e7eb;
}

.feedback-delete-form {
  margin-top: 0.5rem;
}

.feedback-delete-btn {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0;
}

.btn.link-btn.danger {
  color: #b91c1c;
}

.btn.link-btn.danger:hover,
.btn.link-btn.danger:focus {
  color: #991b1b;
}

.feedback-status-meta {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: #475569;
}

.admin-stat-value {
  font-weight: 600;
}

.admin-stat-link {
  color: inherit;
  text-decoration: none;
}

.admin-stat-link:hover,
.admin-stat-link:focus {
  text-decoration: underline;
}

.admin-stat-value.is-alert,
.admin-stat-value.is-alert .admin-stat-link,
.admin-stat-link.is-alert {
  color: #dc2626;
}

.feedback-log-location {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.feedback-log-method {
  font-weight: 600;
  text-transform: uppercase;
  color: #1e293b;
}

.feedback-log-path {
  word-break: break-word;
}

.feedback-log-message {
  word-break: break-word;
  white-space: pre-wrap;
}

.feedback-log-user {
  min-width: 200px;
}

.feedback-log-user-email,
.feedback-log-user-username {
  word-break: break-word;
}

.feedback-log-status {
  min-width: 160px;
}

.feedback-status-form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.feedback-status-form select {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid #cbd5f5;
  background-color: #f8fafc;
  font-size: 0.85rem;
}

.feedback-page .app-main {
  max-width: 100%;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.feedback-log-details {
  min-width: 220px;
  word-break: break-word;
}

.feedback-log-stack-details {
  margin-top: 0.35rem;
}

.feedback-log-stack-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.4rem 0;
}

.feedback-copy-status {
  font-size: 0.85em;
  color: #475569;
}

.feedback-copy-status.is-success {
  color: #047857;
}

.feedback-copy-status.is-error {
  color: #b91c1c;
}

.feedback-log-meta {
  font-size: 0.85em;
  color: #475569;
}

.feedback-log-referrer {
  font-size: 0.85em;
  color: #64748b;
  word-break: break-word;
}

.feedback-log-details details {
  margin-top: 0.35rem;
}

.feedback-log-stack { 
  max-height: 240px;
  overflow: auto;
  background: #f8fafc;
  border: 1px solid #cbd5f5;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

.feedback-log-screenshot {
  margin-top: 0.35rem;
}

.feedback-log-screenshot-body {
  margin-top: 0.4rem;
}

.feedback-log-screenshot-body img {
  max-width: 100%;
  height: auto;
  border: 1px solid #cbd5f5;
  border-radius: 0.5rem;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
}

.bug-report-launcher {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 950;
}

.bug-report-launcher .bug-report-trigger {
  background: #0f172a;
  color: #f8fafc;
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
}

.bug-report-launcher .bug-report-trigger:hover,
.bug-report-launcher .bug-report-trigger:focus {
  background: #1e293b;
  color: #f8fafc;
}

.bug-report-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.68);
  z-index: 1000;
  padding: 1rem;
}

.bug-report-overlay[hidden] {
  display: none;
}

.bug-report-submitting {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #f8fafc;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.24);
  font-size: 0.95rem;
  z-index: 1100;
  text-align: center;
  max-width: calc(100% - 2rem);
}

.bug-report-dialog {
  background: #ffffff;
  color: inherit;
  border-radius: 1rem;
  max-width: 32rem;
  width: 100%;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
  padding: 1.5rem;
  position: relative;
}

.bug-report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.bug-report-header h2 {
  font-size: 1.5rem;
  margin: 0;
}

.bug-report-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

.bug-report-intro {
  margin: 0 0 1rem;
  color: #475569;
  font-size: 0.95rem;
}

.bug-report-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.bug-report-field[hidden] {
  display: none !important;
}

.bug-report-field label {
  font-weight: 600;
  font-size: 0.95rem;
}

.bug-report-field input,
.bug-report-field textarea {
  width: 100%;
  border: 1px solid #cbd5f5;
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  background: #f8fafc;
}

.bug-report-field textarea {
  resize: vertical;
  min-height: 6rem;
}

.bug-report-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.bug-report-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .bug-report-launcher {
    right: 1rem;
    bottom: 1rem;
  }

  .bug-report-dialog {
    padding: 1.25rem;
  }
}

.feedback-pagination {
  margin-top: 1rem;
}

.feedback-controls .btn-link {
  margin-left: 0.5rem;
}

.stroop-prompt {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  width: min(320px, calc(100vw - 2.5rem));
  background: #f8fafc;
  border: 1px solid #cbd5f5;
  border-radius: 0.75rem;
  padding: 1.1rem 1.2rem 1rem 1.1rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
  display: none;
  z-index: 2000;
  line-height: 1.5;
}

.stroop-prompt.is-active {
  display: block;
}

.stroop-prompt-title {
  margin: 0 0 .35rem 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0f172a;
}

.stroop-prompt-body {
  margin: 0 0 .85rem 0;
  color: #1f2937;
  font-size: .95rem;
}

.stroop-prompt-link {
  display: inline-block;
  padding: .55rem 1rem;
  border-radius: .65rem;
  background: #111827;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.stroop-prompt-link:hover,
.stroop-prompt-link:focus {
  background: #1f2937;
  transform: translateY(-1px);
}

.stroop-prompt-close {
  position: absolute;
  top: .45rem;
  right: .6rem;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}

.stroop-prompt-close:hover,
.stroop-prompt-close:focus {
  color: #0f172a;
}

.stroop-prompt-timer {
  margin: .85rem 0 0;
  font-size: .85rem;
  color: #475569;
}

.stroop-experience-links {
  margin: 1rem 0 1.5rem;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  background: #f8fafc;
}

.stroop-experience-links h4 {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
}

.stroop-experience-empty {
  margin: 0;
  color: #64748b;
}

.stroop-experience-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.stroop-experience-list li {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-top: .75rem;
  border-top: 1px solid #e2e8f0;
}

.stroop-experience-list li:first-child {
  border-top: none;
  padding-top: 0;
}

.stroop-experience-list a {
  color: #1e3a8a;
  font-weight: 600;
  text-decoration: none;
}

.stroop-experience-list a:hover,
.stroop-experience-list a:focus {
  text-decoration: underline;
}

.btn.btn-link {
  border: none;
  background: transparent;
  color: #2563eb;
  padding-left: .25rem;
  padding-right: .25rem;
  box-shadow: none;
}

.btn.btn-link:hover,
.btn.btn-link:focus {
  text-decoration: underline;
  box-shadow: none;
}

.stroop-experience-match {
  font-size: .85rem;
  color: #475569;
}

@media (max-width: 540px) {
  .stroop-prompt {
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}

/* Login layout inspired by Figma handoff */
body.login-layout {
  margin: 0;
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(135deg, #f5f3ff 0%, #ecfeff 45%, #fef9c3 100%);
  color: #0f172a;
}

body.login-layout > h1,
body.login-layout .app-navbar,
body.login-layout .secondary-nav,
body.login-layout > p {
  display: none !important;
}

.login-wrapper {
  position: relative;
  width: min(100%, 460px);
  margin: 0 auto;
}

.login-background {
  position: absolute;
  inset: -3rem;
  pointer-events: none;
  overflow: hidden;
  opacity: .45;
}

.login-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(40px);
}

.login-orb-primary {
  width: 8rem;
  height: 8rem;
  top: 4rem;
  left: 0;
  background: rgba(79, 70, 229, .35);
}

.login-orb-success {
  width: 6rem;
  height: 6rem;
  top: 12rem;
  right: -1rem;
  background: rgba(16, 185, 129, .35);
}

.login-orb-warning {
  width: 7rem;
  height: 7rem;
  bottom: 2rem;
  left: 1rem;
  background: rgba(250, 204, 21, .35);
}

.login-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
}

.login-hero {
  text-align: center;
  display: grid;
  gap: 1.25rem;
}

.login-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(var(--login-logo-size, 5rem), var(--login-logo-background-size, var(--login-logo-size, 5rem)));
  height: max(var(--login-logo-size, 5rem), var(--login-logo-background-size, var(--login-logo-size, 5rem)));
  margin: 0 auto;
  border-radius: 1.75rem;
  overflow: visible;
}

.login-logo::before {
  content: "";
  position: absolute;
  width: var(--login-logo-background-size, var(--login-logo-size, 5rem));
  height: var(--login-logo-background-size, var(--login-logo-size, 5rem));
  border-radius: inherit;
  background: var(--login-logo-background-color, #4f46e5);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
  z-index: 0;
}

.login-logo img {
  position: relative;
  width: var(--login-logo-size, 5rem);
  max-width: var(--login-logo-size, 5rem);
  max-height: var(--login-logo-size, 5rem);
  height: auto;
  object-fit: contain;
  border-radius: 1.25rem;
  z-index: 1;
}

.login-logo--no-background {
  width: var(--login-logo-size, 5rem);
  height: var(--login-logo-size, 5rem);
}

.login-logo--no-background::before {
  display: none;
}

.login-logo svg {
  width: 2.5rem;
  height: 2.5rem;
  stroke: #fff;
  stroke-width: 1.75;
}

.login-version {
  display: inline-block;
  margin-left: 0.35em;
  font-size: 0.5em;
  font-weight: 600;
  line-height: 1;
}

.login-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #4338ca;
}

.login-description {
  font-size: 1rem;
  line-height: 1.7;
  color: #475569;
  margin: 0 auto;
}

.login-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.login-feature {
  background: #fff;
  border-radius: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, .25);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
  text-align: center;
  font-size: .75rem;
  color: #64748b;
  pointer-events: none; 
}

.login-feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1rem;
  margin: 0 auto .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stroke + weight only */
.login-feature-icon svg {
  stroke: #fff;
  stroke-width: 1.75;
}

/* Actual size control */
.login-feature-svg {
  width: 3.5rem;
  height: 3.5rem;
  display: block;
}

.login-feature-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.login-feature-link:hover .login-feature,
.login-feature-link:focus .login-feature {
  transform: translateY(-3px);
  transition: transform 0.15s ease;
}

.login-feature p {
  margin: 0;
  user-select: none;
}

.login-feature-primary { background: #4f46e5; }
.login-feature-success { background: #10b981; }
.login-feature-warning { background: #facc15; }


.login-card {
  background: rgba(255, 255, 255, .92);
  border-radius: 1.75rem;
  border: 1px solid rgba(148, 163, 184, .25);
  box-shadow: 0 25px 50px -12px rgba(30, 41, 59, 0.25);
  padding: 2rem;
  display: grid;
  gap: 1.5rem;
}

.login-card-header {
  text-align: center;
  display: grid;
  gap: .5rem;
}

.login-card-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
}

.login-card-header p {
  margin: 0;
  color: #64748b;
}

.login-form {
  display: grid;
  gap: 1.25rem;
}

.login-status {
  margin: 0.35rem 0 0 0;
  text-align: center;
  color: #dc2626;
  font-weight: 600;
}

.login-input-group {
  display: grid;
  gap: .5rem;
  text-align: left;
}

.login-input-group label {
  font-size: .85rem;
  font-weight: 600;
  color: #475569;
  margin: 0;
}

.login-input-group input {
  border-radius: .9rem;
  border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, .2);
  height: 3rem;
  padding: 0 1rem;
  font-size: 1rem;
  color: #0f172a;
}

.login-password-field {
  position: relative;
}

.login-password-field input {
  padding-right: 3rem;
}

.login-password-toggle {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: .25rem;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.login-password-toggle:hover,
.login-password-toggle:focus {
  color: #1e293b;
}

.login-password-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-width: 1.75;
}

.login-password-icon-hide {
  display: none;
}

.login-password-toggle.is-visible .login-password-icon-show {
  display: none;
}

.login-password-toggle.is-visible .login-password-icon-hide {
  display: block;
}

.login-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-remember {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #475569;
  font-weight: 500;
}

.login-remember input {
  width: 1rem;
  height: 1rem;
}

.login-submit {
  width: 100%;
  height: 3rem;
  border-radius: 1rem;
  border: none;
  background: #4f46e5;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 15px 30px rgba(79, 70, 229, 0.4);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.login-submit:hover,
.login-submit:focus {
  background: #4338ca;
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(79, 70, 229, 0.35);
}

.login-links {
  text-align: center;
}

.login-link {
  border: none;
  background: none;
  color: #64748b;
  font-size: .9rem;
  cursor: pointer;
  padding: 0;
}

.login-link:hover,
.login-link:focus {
  color: #4f46e5;
  text-decoration: underline;
}

.login-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: .75rem;
  color: #94a3b8;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(148, 163, 184, .4);
}

.login-divider span {
  background: rgba(255, 255, 255, .92);
  padding: 0 .75rem;
  border-radius: 9999px;
}

.login-google {
  width: 100%;
  height: 3rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, .5);
  background: rgba(255, 255, 255, .9);
  color: #0f172a;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}

.login-google svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.login-google[disabled] {
  cursor: not-allowed;
  opacity: .8;
}

.login-test {
  text-align: center;
}

.login-test-button {
  border: none;
  background: none;
  color: #4f46e5;
  font-weight: 600;
  cursor: pointer;
}

.login-test-button:hover,
.login-test-button:focus {
  text-decoration: underline;
}

.login-footer {
  text-align: center;
  display: grid;
  gap: .5rem;
  font-size: .75rem;
  color: #64748b;
}

.login-footer a {
  color: #4f46e5;
  font-weight: 600;
  text-decoration: none;
}

.login-footer a:hover,
.login-footer a:focus {
  text-decoration: underline;
}

@media (max-width: 520px) {
  .login-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-wrapper {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .login-features {
    grid-template-columns: 1fr;
  }

  .login-card {
    padding: 1.5rem;
  }
}

.share-form {
  margin: 0;
  padding: 1.5rem 1.5rem 1.5rem;
  background: transparent;
}

.share-request-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.25rem 0;
  text-align: center;
}

.share-request-button,
.share-save-button {
  white-space: nowrap;
}

.share-config-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.share-config-table col.share-col-data { width: 34%; }
.share-config-table col.share-col-toggle { width: 12%; }
.share-config-table col.share-col-range { width: 24%; }
.share-config-table col.share-col-detail { width: 30%; }

.share-config-table thead th {
  text-align: left;
  font-size: .85rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #475467;
  border-bottom: 1px solid #d0d5dd;
  padding-bottom: .5rem;
}

.share-config-table th,
.share-config-table td {
  border-top: 1px solid #d0d5dd;
  padding: .75rem;
  vertical-align: top;
}

.share-config-table tbody tr:first-child th,
.share-config-table tbody tr:first-child td {
  border-top: 0;
}

.share-config-table th {
  font-weight: 600;
}

.share-config-table td.share-toggle {
  white-space: nowrap;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: .35rem;
}

.share-config-table thead th.share-toggle,
.share-config-table thead th.share-range {
  text-align: left;
}

.share-config-table td.share-range {
  vertical-align: top;
  padding-right: 1.25rem;
}

.share-config-table td.share-toggle label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.share-config-table td.share-toggle .muted {
  font-size: .75rem;
}

.share-config-table td.share-detail {
  vertical-align: top;
}

.share-profile-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: .75rem;
  table-layout: fixed;
}

.share-profile-table col.profile-col-field { width: 70%; }
.share-profile-table col.profile-col-toggle { width: 30%; }

.share-profile-table thead th {
  text-align: left;
  font-size: .85rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #475467;
  border-bottom: 1px solid #d0d5dd;
  padding-bottom: .5rem;
}

.share-profile-table th,
.share-profile-table td {
  border-top: 1px solid #d0d5dd;
  padding: .75rem;
  vertical-align: top;
}

.share-profile-table tbody tr:first-child th,
.share-profile-table tbody tr:first-child td {
  border-top: 0;
}

.share-profile-table th {
  font-weight: 600;
}

.share-profile-table .share-item-title {
  margin-bottom: .25rem;
}

.profile-share-toggle {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: flex-start;
}

.profile-share-toggle label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.share-row.requested {
  background: #fef3c7;
}

.requested-flag {
  display: inline-block;
  margin-left: .75rem;
  padding: .15rem .5rem;
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px;
  background: #f59e0b;
  color: #ffffff;
}

.share-scope {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}

.share-range-date {
  margin-top: .5rem;
  width: 100%;
  max-width: 14rem;
}

.share-item-title {
  font-size: 1rem;
  font-weight: 600;
}

.share-item-help {
  margin-top: .35rem;
}

.grant-clinician-form {
  display: grid;
  gap: .5rem;
  max-width: 26rem;
}

.session-preferences {
  margin-top: 1rem;
  display: grid;
  gap: .5rem;
  max-width: 22rem;
}

.session-preferences-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.session-preferences-controls select {
  min-width: 12rem;
}

.share-scope label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.share-scope input[type="date"] {
  border: 1px solid #d0d5dd;
  border-radius: .5rem;
  padding: .35rem .6rem;
}

.context-type-grid {
  margin-top: .75rem;
  display: grid;
  gap: .4rem .75rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.share-profile-panel {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border: 1px solid #d0d5dd;
  border-radius: .75rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.share-profile-panel.requested {
  background: #fef3c7;
  border-color: #f59e0b33;
}

.share-profile-panel.pending {
  box-shadow: inset 0 0 0 2px #f59e0b33;
}

.share-status-list {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
}

.share-status-list li {
  margin: .1rem 0;
}

.share-profile-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  align-items: center;
}

.checkbox-grid {
  margin-top: .75rem;
  display: grid;
  gap: .4rem .75rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.checkbox-grid label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.muted.small {
  font-size: .85rem;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  margin-bottom: 1rem;
}

.context-summary {
  margin-top: 1rem;
}

.context-summary ul {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
}

.context-summary li {
  padding: .25rem 0;
}

.share-profile-summary {
  margin: 0;
  padding-left: 1rem;
}

.share-profile-option {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  justify-content: flex-start;
  width: 100%;
}

.profile-request-mode {
  margin: .5rem 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.profile-request-mode label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.profile-request-grid {
  margin-top: .5rem;
  display: grid;
  gap: .4rem .75rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: flex-start;
}

.profile-request-grid .share-profile-option {
  width: auto;
}

.share-preferences {
  border: 1px solid #d0d5dd;
  border-radius: .75rem;
  margin-top: 1.5rem;
  background: #ffffff;
  overflow: hidden;
}

.share-preferences summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  background: #f8fafc;
}

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

.share-preferences[open] summary {
  border-bottom: 1px solid #d0d5dd;
}

.share-preferences-summary {
  width: 100%;
}

.share-summary-main {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.share-summary-role {
  font-size: .85rem;
  color: #6b7280;
  font-weight: 500;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .2rem .65rem;
}

.badge-warning {
  background: #f59e0b;
  color: #ffffff;
}

.badge-muted {
  background: #e5e7eb;
  color: #1f2937;
}

.share-alert {
  margin: 1rem 0;
  padding: .75rem 1rem;
  border-radius: .75rem;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b33;
}

.share-alert-global {
  margin-top: 1rem;
}

.warning-text {
  color: #b45309;
  font-weight: 600;
}

/* Character counter utilities */
.char-counter {
  color: #666;
  font-size: .85rem;
}

.char-counter--warning {
  color: #b45309;
  font-weight: 600;
}

.char-counter--danger {
  color: #b91c1c;
  font-weight: 600;
}

.share-row.pending {
  box-shadow: inset 4px 0 0 #f59e0b66;
}

.share-table-pending {
  background: #fff7ed;
}

.small-text {
  font-size: .75rem;
}

/* Clinician portal styling */

body.clinician-layout {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  background: #e5e5e5;
  color: #1f2937;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.clinician-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem 0.5rem;
}

.clinician-header h1 {
  margin: 0;
  font-size: 1.75rem;
  color: #0f172a;
}

.clinician-user {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.clinician-user .badge {
  background: #dbeafe;
  color: #1e3a8a;
  padding: .125rem .5rem;
  border-radius: 9999px;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.clinician-nav {
  display: flex;
  gap: 1rem;
  padding: 0 2rem 1.5rem;
  border-bottom: 1px solid #cbd5f5;
}

.clinician-nav a {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
}

.clinician-nav a:hover,
.clinician-nav a:focus {
  text-decoration: underline;
}

.clinician-content {
  flex: 1;
  padding: 0 2rem 2rem;
  display: grid;
  gap: 1.5rem;
}

body.clinician-layout .muted {
  color: #64748b;
}

body.clinician-layout .card {
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

body.clinician-layout .card h2 {
  margin-top: 0;
  color: #0f172a;
}

body.clinician-layout .card h3 {
  color: #1f2937;
}

body.clinician-layout .add-patient {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

body.clinician-layout .add-patient h3 {
  margin: .5rem 0 0;
  font-size: 1rem;
}

body.clinician-layout .invite-form {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

body.clinician-layout .invite-banner {
  background: #0f172a;
  color: #ffffff;
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

body.clinician-layout .invite-banner-text {
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
}

body.clinician-layout .invite-code {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 1.4rem;
  letter-spacing: .15em;
}

body.clinician-layout .pending-invites ul {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
}

body.clinician-layout .pending-invites li {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  padding: .4rem .75rem;
  border-radius: .6rem;
  border: 1px solid transparent;
}

body.clinician-layout .pending-invites li.highlight {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.35);
}

body.clinician-layout .pending-invites li .code {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-weight: 600;
  letter-spacing: .08em;
  color: #0f172a;
}

body.clinician-layout .pending-invites li .timestamp {
  font-size: .85rem;
  color: #475467;
}

body.clinician-layout .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: .75rem;
  border: 1px solid #cbd5f5;
  font-weight: 600;
  cursor: pointer;
  background: #f1f5f9;
  color: #0f172a;
  transition: box-shadow .15s ease, transform .15s ease;
}

body.clinician-layout .btn.primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: transparent;
}

body.clinician-layout .btn.secondary {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

body.clinician-layout .btn.danger {
  background: linear-gradient(135deg, #f87171, #dc2626);
  color: #ffffff;
  border-color: transparent;
}

body.clinician-layout .btn:hover,
body.clinician-layout .btn:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  transform: translateY(-1px);
}

body.clinician-layout input,
body.clinician-layout select,
body.clinician-layout textarea {
  background: #ffffff;
  border: 1px solid #cbd5f5;
  border-radius: .75rem;
  padding: .5rem .75rem;
  color: #0f172a;
  width: 100%;
  box-sizing: border-box;
}

body.clinician-layout input:focus,
body.clinician-layout select:focus,
body.clinician-layout textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

body.clinician-layout label {
  display: block;
  margin-top: 1rem;
  margin-bottom: .25rem;
  font-weight: 600;
  color: #0f172a;
}

body.clinician-layout .clinician-auth {
  max-width: 28rem;
  margin: 3rem auto;
  text-align: left;
}

body.clinician-layout .flash-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: .5rem;
}

body.clinician-layout .flash-item {
  padding: .75rem 1rem;
  border-radius: .75rem;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #cbd5f5;
  color: #0f172a;
}

body.clinician-layout .flash-item.ok {
  border-color: #22c55e;
  color: #166534;
}

body.clinician-layout .flash-item.error {
  border-color: #ef4444;
  color: #7f1d1d;
}

body.clinician-layout .flash-item.info {
  border-color: #3b82f6;
  color: #1d4ed8;
}

body.clinician-layout .threshold-form {
  display: grid;
  gap: 1rem;
}

body.clinician-layout .threshold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

body.clinician-layout .table-scroll {
  overflow-x: auto;
}

body.clinician-layout .clinician-table {
  width: 100%;
  border-collapse: collapse;
}

body.clinician-layout .clinician-table th,
body.clinician-layout .clinician-table td {
  padding: .75rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

body.clinician-layout .clinician-table th {
  color: #0f172a;
}

body.clinician-layout .clinician-request-table .request-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

body.clinician-layout .clinician-request-table .request-scope label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

body.clinician-layout .clinician-request-table input[type="date"] {
  min-width: 10rem;
}

body.clinician-layout .clinician-table tr.has-alert {
  background: #fee2e2;
}

body.clinician-layout .baseline-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.clinician-layout .baseline-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

body.clinician-layout .patient-overview .overview-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

body.clinician-layout .alert-panel {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: .75rem;
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
}

body.clinician-layout .context-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

body.clinician-layout .context-filters label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: #f8fafc;
  border-radius: 9999px;
  padding: .25rem .75rem;
  border: 1px solid #e2e8f0;
}

body.clinician-layout .context-filters input[type="checkbox"] {
  width: auto;
}

body.clinician-layout .viz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

body.clinician-layout .viz-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

body.clinician-layout .viz-title h2 {
  margin: 0;
}

body.clinician-layout .viz-controls {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: stretch;
  padding: .75rem;
  border: 1px solid #e2e8f0;
  border-radius: .85rem;
  background: #f8fafc;
}

body.clinician-layout .viz-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
}

body.clinician-layout .viz-controls--stacked {
  gap: 1rem;
}

body.clinician-layout .viz-control--search .tag-search {
  width: 100%;
}

body.clinician-layout .time-range-inputs {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-start;
}

body.clinician-layout .time-range-dates {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: nowrap;
}

body.clinician-layout .time-range-inputs .separator {
  color: #94a3b8;
}

body.clinician-layout .range-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

body.clinician-layout .tag-search {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: .35rem .5rem;
  border: 1px solid #e2e8f0;
  border-radius: .65rem;
  background: #fff;
}

body.clinician-layout .tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

body.clinician-layout .tag-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .65rem;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 9999px;
  font-size: .9rem;
}

body.clinician-layout .tag-pill button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

body.clinician-layout .tag-pill__remove {
  color: #4338ca;
}

body.clinician-layout .tag-search input[type="text"] {
  border: none;
  outline: none;
  min-width: 12rem;
  flex: 1 1 10rem;
  padding: .35rem;
}

body.clinician-layout .viz {
  min-height: 420px;
  height: 420px;
  margin-bottom: 1.5rem;
  width: 100%;
}

body.clinician-layout .note-form {
  margin-top: 2rem;
  display: grid;
  gap: .75rem;
}

body.clinician-layout .note-form textarea {
  min-height: 6rem;
}

body.clinician-layout .datetime-field {
  display: flex;
  gap: .75rem;
  align-items: center;
}

body.clinician-layout .datetime-field input[type="datetime-local"] {
  flex: 1;
}

body.clinician-layout .shared-profile-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

body.clinician-layout .shared-profile-grid > div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: 1rem;
}

.changelog-entry {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.changelog-entry:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.changelog-entry__title {
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: #0f172a;
}

.questionnaire-builder {
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: 1rem;
  background: #f8fafc;
  display: grid;
  gap: 1rem;
}

.questionnaire-builder-list {
  display: grid;
  gap: 1rem;
}

.questionnaire-builder-empty {
  margin: 0;
  color: #64748b;
  font-style: italic;
}

.questionnaire-builder-footer {
  display: flex;
  justify-content: flex-start;
}

.questionnaire-builder-item {
  border: 1px solid #cbd5f5;
  border-radius: .75rem;
  background: #fff;
  padding: 1rem;
  display: grid;
  gap: .75rem;
}

.questionnaire-builder-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
}

.questionnaire-builder-item-header h4 {
  margin: 0;
}

.questionnaire-builder-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.questionnaire-builder-item-body {
  display: grid;
  gap: .75rem;
}

.questionnaire-list-editor {
  display: grid;
  gap: .5rem;
}

.questionnaire-list-editor-items {
  display: grid;
  gap: .5rem;
}

.questionnaire-list-editor-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  align-items: center;
}

.questionnaire-list-editor-item input[type="text"] {
  width: 100%;
}

.questionnaire-scale-editor {
  display: grid;
  gap: .5rem;
}

.questionnaire-scale-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.questionnaire-question-block {
  display: grid;
  gap: .5rem;
  margin-bottom: .75rem;
}

.questionnaire-question-fieldset {
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: .75rem 1rem;
  display: grid;
  gap: .5rem;
  background: #fff;
}

.questionnaire-question-fieldset legend {
  font-weight: 600;
}

.questionnaire-question-type {
  margin: 0;
}

.questionnaire-grid-wrapper {
  overflow-x: auto;
}

.questionnaire-grid-table {
  width: 100%;
  border-collapse: collapse;
}

.questionnaire-grid-table th,
.questionnaire-grid-table td {
  border: 1px solid #e2e8f0;
  text-align: center;
  padding: .5rem;
}

.questionnaire-grid-table th[scope="row"] {
  text-align: left;
  background: #f1f5f9;
}

.questionnaire-grid-table input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
}

.questionnaire-choice-table-wrapper {
  overflow-x: auto;
}

.questionnaire-choice-table {
  width: 100%;
  border-collapse: collapse;
}

.questionnaire-choice-table tr + tr {
  border-top: 1px solid #e2e8f0;
}

.questionnaire-choice-control {
  width: 4rem;
  padding: .35rem .5rem;
  text-align: center;
}

.questionnaire-choice-label {
  padding: .35rem .5rem;
  text-align: left;
}

.questionnaire-choice-label label {
  display: block;
  font-weight: 500;
}

.questionnaire-choice-table input[type="radio"],
.questionnaire-choice-table input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
}

.questionnaire-scale-control {
  display: grid;
  gap: .5rem;
}

.questionnaire-scale-control input[type="range"] {
  width: 100%;
}

.questionnaire-scale-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #475569;
}

.questionnaire-scale-value {
  font-weight: 600;
  font-size: 1rem;
  color: #1e293b;
  min-width: 3rem;
  text-align: center;
}

.questionnaire-scale-end {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.questionnaire-scale-end-min {
  justify-content: flex-start;
  text-align: left;
}

.questionnaire-scale-end-max {
  justify-content: flex-end;
  text-align: right;
}

.admin-tests-form {
  margin: 1rem 0 1.5rem;
}

.admin-tests-picker {
  border: 1px solid #cbd5e1;
  border-radius: .75rem;
  padding: 1rem;
}

.admin-tests-picker legend {
  font-weight: 600;
  padding: 0 .25rem;
}

.admin-tests-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: .25rem 0 .5rem;
}

.admin-tests-table-wrapper {
  margin: .75rem 0;
  border-radius: .5rem;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.admin-tests-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-tests-table tr:nth-child(even) {
  background: #f8fafc;
}

.admin-tests-table td {
  padding: .5rem .75rem;
  vertical-align: middle;
}

.admin-tests-checkbox {
  width: 44px;
  text-align: center;
}

.admin-tests-name label {
  font-weight: 600;
  cursor: pointer;
  word-break: break-word;
}

.admin-tests-description {
  color: #475569;
  font-size: .95rem;
  line-height: 1.4;
}

.admin-test-log-wrapper {
  margin-top: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: .75rem;
  background: #f8fafc;
}

.live-test-log {
  margin-top: 1rem;
}

.live-test-log__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-test-log {
  padding: 1rem;
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 24rem;
  color: #0f172a;
}

.admin-last-run__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.admin-last-run__actions {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
}


@media (max-width: 720px) {
  .clinician-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  .clinician-nav {
    flex-wrap: wrap;
  }

  .clinician-content {
    padding: 0 1rem 2rem;
  }
}