@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;900&display=swap');@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;500&display=swap");/* Generic LoadingSkeleton - Clean, reusable skeleton components */

/* Base skeleton animation */
@keyframes skeleton-pulse {
  0% {
    background-position: calc(-1 * var(--skeleton-gradient-size)) 0;
  }
  100% {
    background-position: calc(var(--skeleton-gradient-size) + 100%) 0;
  }
}

/* Base skeleton background - applied to all skeleton types */
.lore-skeleton-box,
.lore-skeleton-line,
.lore-skeleton-circle {
  background: linear-gradient(90deg, var(--skeleton-gradient-color-1) 25%, var(--skeleton-gradient-color-2) 50%, var(--skeleton-gradient-color-1) 75%);
  background-size: var(--skeleton-gradient-size) 100%;
  animation: skeleton-pulse var(--skeleton-animation-duration) infinite;
}

/* Primitive Components */
.lore-skeleton-box {
  display: block;
  margin-bottom: var(--skeleton-box-margin-bottom);
}

.lore-skeleton-line {
  display: block;
  margin-bottom: var(--skeleton-line-margin-bottom);
}

.lore-skeleton-circle {
  border-radius: 50%;
  margin-bottom: var(--skeleton-circle-margin-bottom);
}

/* Generic Layout Patterns */
.lore-card-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--skeleton-card-gap);
  padding: var(--skeleton-card-padding);
  border: 1px solid var(--skeleton-card-border-color);
  border-radius: var(--skeleton-card-border-radius);
  background-color: var(--skeleton-card-bg);
}

.lore-card-skeleton__content {
  display: flex;
  flex-direction: column;
  gap: var(--skeleton-card-content-gap);
}

.lore-list-item-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--skeleton-list-item-gap);
  padding: var(--skeleton-list-item-padding-vertical) 0;
}
/* Link Component Styles */

.lore-link {
  display: inline-flex;
  align-items: center;
  gap: var(--link-gap);
  font-family: var(--link-font-family);
  font-size: inherit;
  font-weight: var(--link-font-weight);
  line-height: inherit;
  -webkit-text-decoration: var(--link-text-decoration);
          text-decoration: var(--link-text-decoration);
  color: var(--link-color-default);
  transition: color var(--link-transition-duration) var(--link-transition-timing);
  cursor: pointer;
}

.lore-link:hover {
  color: var(--link-color-hover);
}

.lore-link:active {
  color: var(--link-color-active);
}

.lore-link:focus-visible {
  border-radius: var(--link-focus-border-radius);
  outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
  outline-offset: var(--link-focus-outline-offset);
}

/* Default variant */

.lore-link--default {
  color: var(--link-color-default);
}

/* Subtle variant - secondary text color */

.lore-link--subtle {
  font-weight: var(--link-font-weight-subtle);
  color: var(--link-color-subtle);
}

.lore-link--subtle:hover {
  color: var(--link-color-subtle-hover);
}

/* Underline variant - always underlined (same as default now) */

.lore-link--underline {
  -webkit-text-decoration: var(--link-text-decoration);
          text-decoration: var(--link-text-decoration);
}

/* Disabled state */

.lore-link--disabled {
  color: var(--link-color-disabled);
  opacity: var(--link-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* External icon */

.lore-link__external-icon {
  flex-shrink: 0;
  width: var(--link-external-icon-size);
  height: var(--link-external-icon-size);
}
/* Sheet Component Styles */

.lore-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--sheet-overlay-bg);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: var(--sheet-z-index);
  touch-action: none; /* Prevent page scrolling when interacting with sheet */
  overscroll-behavior: none; /* Prevent page scroll bounce/overscroll */
  
  /* iOS-style backdrop blur for modern browsers */
  backdrop-filter: blur(var(--sheet-backdrop-blur));
}

/* Notification sheets - lighter overlay, higher z-index */
.lore-sheet-overlay--notification {
  z-index: var(--sheet-z-index-notification);
  background-color: var(--sheet-overlay-bg-notification);
}

/* Notification sheet container styling */
.lore-sheet-overlay--notification .lore-sheet-container {
  box-shadow: var(--sheet-shadow-notification);
}

.lore-sheet-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--sheet-container-bg);
  border-top-left-radius: var(--sheet-border-radius-top);
  border-top-right-radius: var(--sheet-border-radius-top);
  box-shadow: var(--sheet-shadow);
  will-change: transform;
  transform: translateY(100%); /* Start hidden */
  touch-action: pan-y; /* Allow vertical dragging for sheet gestures, prevent page scroll */
  /* Force container to be viewport height for correct percentage-based transforms */
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.lore-sheet-content {
  /* Remove padding - let the content components handle their own spacing */
  padding: 0;
  /* Safe area inset for iPhone home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* Critical: Prevent touch gestures from propagating to background webview scroll */
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Wrapper for sheet content to ensure proper scrolling behavior */
.lore-sheet-content > * {
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allow flex child to shrink */
}

/* 
 * Scrollable content area - auto-applies scroll constraints
 * Usage: Add data-sheet-scrollable attribute to your scrollable content
 * 
 * The --sheet-visible-height CSS variable is set by JavaScript when the sheet
 * opens or snaps to a breakpoint, allowing content to dynamically constrain
 * its height based on the current sheet position.
 * 
 * @example
 * <div data-sheet-scrollable>
 *   {your scrollable content}
 * </div>
 */
[data-sheet-scrollable] {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* Critical for flex scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
  overscroll-behavior: contain; /* Prevent scroll chaining */
}

/* Constrain scrollable area height based on current breakpoint position */
.lore-sheet-content [data-sheet-scrollable] {
  /* 
   * Use JS-provided --sheet-visible-height variable for dynamic height constraint.
   * Subtract content offset for drag indicator + breathing room.
   * Falls back to 100vh - offset if variable not set (shouldn't happen in normal use).
   */
  max-height: calc(var(--sheet-visible-height, 100vh) - var(--sheet-content-offset));
}

.lore-sheet-drag-indicator {
  width: var(--sheet-drag-indicator-width);
  height: var(--sheet-drag-indicator-height);
  background-color: var(--sheet-drag-indicator-bg);
  border-radius: var(--sheet-drag-indicator-border-radius);
  margin: var(--sheet-drag-indicator-margin) auto;
  cursor: grab;
}

/* Animation is handled entirely by JavaScript to avoid conflicts */
.lore-sheet-overlay--open {
  /* Just controls backdrop visibility, transform handled by JS */
}
/* Modal Component Styles */

/* Backdrop – full-screen semi-opaque layer */
.lore-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--modal-z-index, 1000);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.55));
  touch-action: none;
  overscroll-behavior: none;
}

/* Modal container – flex column so content can scroll and button stays at bottom; overflow visible so silhouette image can extend above */
.lore-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--modal-width, 320px);
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 80px);
  border-radius: var(--modal-border-radius, 16px);
  background-color: var(--modal-bg, #ffffff);
  box-shadow: var(--modal-shadow, 0 8px 32px rgba(0, 0, 0, 0.24));
  overflow: visible;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  --modal-title-color: var(--text-call-out);
}

/* When a header image is present, round the top corners to match the bottom */
.lore-modal--has-header-image {
  border-top-left-radius: var(--modal-border-radius, 16px);
  border-top-right-radius: var(--modal-border-radius, 16px);
}

/* No top padding when header image is present so the title sits directly under the image when offset is 0 */
.lore-modal--has-header-image .lore-modal__content {
  padding-top: 0;
}

/* Header image area – 8px horizontal inset so the modal box extends 8px beyond the image on the sides */
.lore-modal__header-image {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding-left: 6px;
  padding-right: 6px;
  box-sizing: border-box;
  pointer-events: none;
  line-height: 0;
}

.lore-modal__image {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Text content – scrollable when tall; takes remaining space so button stays at bottom */
.lore-modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: var(--spacing-24) var(--spacing-24) 0;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Title – uses --modal-title-color (default: call-out blue); override via prop or CSS variable */
.lore-modal__title {
  color: var(--modal-title-color);
}

/* Body text – left-aligned (CSS ensures it wins over inherited or global styles) */
.lore-modal__body {
  text-align: left;
}

/* Action button area – stays at bottom of white box; button spans width of text content */
.lore-modal__actions {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-24);
  box-sizing: border-box;
}

.lore-modal__actions button {
  width: 100%;
  min-width: 0;
}

/* Mobile optimisations */
@media (width <=480px) {
  .lore-modal {
    width: calc(100vw - 32px);
  }
}/**
 * Badge Component Styles
 * 
 * Uses design tokens for all values to ensure consistency
 * and automatic dark mode support.
 */

/* Base badge styles */
.lore-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--badge-gap);
  padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
  border-radius: var(--badge-border-radius);
  font-family: var(--badge-font-family);
  font-weight: var(--badge-font-weight);
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-sizing: border-box;
}

/* Size variants */
.lore-badge--sm {
  height: var(--badge-height-sm);
  font-size: var(--badge-font-size-sm);
}

.lore-badge--md {
  height: var(--badge-height-md);
  font-size: var(--badge-font-size-md);
}

/* Border variant */
.lore-badge--bordered {
  border: var(--badge-border-width) solid var(--badge-border-color);
}

/* Status dot */
.lore-badge__dot {
  width: var(--badge-dot-size);
  height: var(--badge-dot-size);
  border-radius: var(--badge-border-radius-full);
  flex-shrink: 0;
}

/* Icon container */
.lore-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lore-badge--sm .lore-badge__icon {
  width: var(--badge-icon-size-sm);
  height: var(--badge-icon-size-sm);
}

.lore-badge--sm .lore-badge__icon > * {
  width: 100%;
  height: 100%;
}

.lore-badge--md .lore-badge__icon {
  width: var(--badge-icon-size-md);
  height: var(--badge-icon-size-md);
}

.lore-badge--md .lore-badge__icon > * {
  width: 100%;
  height: 100%;
}

/* Text container */
.lore-badge__text {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   STAT VARIANT
   For points, streaks, and other metrics
   ============================================ */

.lore-badge--stat {
  border-radius: var(--border-radius-radius-md);
  min-width: 3.333rem;
}

/* Stat - Blue (Streaks) */
.lore-badge--stat-blue {
  background-color: var(--badge-stat-blue-bg);
  color: var(--badge-stat-blue-text);
}

/* Stat - Yellow (Points) */
.lore-badge--stat-yellow {
  background-color: var(--badge-stat-yellow-bg);
  color: var(--badge-stat-yellow-text);
}

/* ============================================
   STATUS VARIANT
   For in-progress, completed, available, etc.
   ============================================ */

.lore-badge--status {
  border-radius: var(--badge-border-radius);
}

/* Status - Success (In Progress) */
.lore-badge--status-success {
  background-color: var(--badge-status-success-bg);
  color: var(--badge-status-success-text);
}

.lore-badge--status-success .lore-badge__dot {
  background-color: var(--badge-status-success-dot);
}

/* Status - Neutral (Completed) */
.lore-badge--status-neutral {
  background-color: var(--badge-status-neutral-bg);
  color: var(--badge-status-neutral-text);
}

/* Status - Info */
.lore-badge--status-info {
  background-color: var(--badge-status-info-bg);
  color: var(--badge-status-info-text);
}

.lore-badge--status-info .lore-badge__dot {
  background-color: var(--badge-status-info-dot);
}

/* Status - Warning */
.lore-badge--status-warning {
  background-color: var(--badge-status-warning-bg);
  color: var(--badge-status-warning-text);
}

.lore-badge--status-warning .lore-badge__dot {
  background-color: var(--badge-status-warning-dot);
}

/* Status - Error */
.lore-badge--status-error {
  background-color: var(--badge-status-error-bg);
  color: var(--badge-status-error-text);
}

.lore-badge--status-error .lore-badge__dot {
  background-color: var(--badge-status-error-dot);
}

/* ============================================
   COUNT VARIANT
   For notification counts, pagination, etc.
   ============================================ */

.lore-badge--count {
  border-radius: var(--badge-border-radius);
  min-width: var(--badge-height-sm);
}

.lore-badge--count.lore-badge--md {
  min-width: var(--badge-height-md);
}

/* Count - Primary (Teal) */
.lore-badge--count-primary {
  background-color: var(--badge-count-primary-bg);
  color: var(--badge-count-primary-text);
}

/* Count - Secondary (Gray) */
.lore-badge--count-secondary {
  background-color: var(--badge-count-secondary-bg);
  color: var(--badge-count-secondary-text);
}
/* DatePicker Component Styles */

.datepicker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--input-gap);
  width: 100%;
  font-family: var(--input-font-family);
}

/* Label */

.datepicker-label {
  font-size: var(--input-label-font-size);
  font-weight: var(--input-label-font-weight);
  line-height: 1.4;
  color: var(--input-label-text-default);
}

.datepicker--disabled .datepicker-label {
  color: var(--input-label-text-disabled);
}

.datepicker-asterisk {
  color: var(--input-asterisk);
}

/* Input wrapper */

.datepicker-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.datepicker--disabled .datepicker-input-wrapper {
  cursor: not-allowed;
}

/* Input */

.datepicker-input {
  width: 100%;
  min-height: 2.222rem;
  padding: var(--input-padding);
  padding-right: var(--datepicker-input-padding-right);
  border: 2px solid var(--input-border-default);
  border-radius: var(--input-border-radius);
  font-family: inherit;
  font-size: var(--input-font-size);
  color: var(--input-text-default);
  background: var(--input-bg-default);
  transition: border-color var(--datepicker-transition-duration) var(--datepicker-transition-timing);
  cursor: pointer;
  box-sizing: border-box;
}

.datepicker-input::-moz-placeholder {
  color: var(--input-text-placeholder);
}

.datepicker-input::placeholder {
  color: var(--input-text-placeholder);
}

.datepicker-input:focus {
  border-color: var(--input-border-focus);
  outline: none;
}

.datepicker--error .datepicker-input {
  border-color: var(--input-border-error);
}

.datepicker--disabled .datepicker-input {
  border-color: var(--input-border-disabled);
  color: var(--input-text-disabled);
  background: var(--input-bg-disabled);
  cursor: not-allowed;
}

/* Clear button */

.datepicker-clear {
  position: absolute;
  right: var(--datepicker-clear-right);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--datepicker-clear-size);
  height: var(--datepicker-clear-size);
  padding: 0;
  border: none;
  border-radius: var(--border-radius-radius-full);
  color: var(--datepicker-clear-icon-color);
  background: var(--datepicker-clear-bg);
  transition: background-color var(--datepicker-transition-duration) var(--datepicker-transition-timing);
  cursor: pointer;
}

.datepicker-clear:hover {
  background: var(--datepicker-clear-bg-hover);
}

/* Calendar icon */

.datepicker-icon {
  position: absolute;
  right: var(--datepicker-icon-right);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--datepicker-icon-color);
  pointer-events: none;
}

/* Helper text */

.datepicker-helper {
  font-size: var(--input-helper-font-size);
  line-height: 1.4;
  color: var(--input-helper-text-default);
}

.datepicker--error .datepicker-helper {
  color: var(--input-helper-text-error);
}

/* Calendar dropdown */

.datepicker-calendar {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--datepicker-calendar-z-index);
  width: var(--datepicker-calendar-width);
  margin-top: var(--spacing-8);
  padding: var(--spacing-16);
  border: 1px solid var(--datepicker-calendar-border);
  border-radius: var(--input-border-radius);
  box-shadow: var(--datepicker-calendar-shadow);
  background: var(--datepicker-calendar-bg);
}

/* Calendar header */

.datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-12);
}

.datepicker-month-year {
  font-size: var(--typography-font-sizes-base);
  font-weight: var(--typography-font-weights-semibold);
  color: var(--datepicker-month-year-color);
}

.datepicker-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--datepicker-nav-size);
  height: var(--datepicker-nav-size);
  padding: 0;
  border: none;
  border-radius: var(--border-radius-radius-md);
  color: var(--datepicker-nav-icon-color);
  background: transparent;
  transition: background-color var(--datepicker-transition-duration) var(--datepicker-transition-timing);
  cursor: pointer;
}

.datepicker-nav:hover {
  background: var(--datepicker-nav-bg-hover);
}

/* Weekday headers */

.datepicker-weekdays {
  display: grid;
  gap: var(--datepicker-weekday-gap);
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--spacing-8);
}

.datepicker-weekday {
  padding: var(--spacing-4);
  font-size: var(--typography-font-sizes-xs);
  font-weight: var(--typography-font-weights-medium);
  text-align: center;
  color: var(--datepicker-weekday-color);
}

/* Days grid */

.datepicker-days {
  display: grid;
  gap: var(--datepicker-day-gap);
  grid-template-columns: repeat(7, 1fr);
}

.datepicker-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--datepicker-day-size);
  height: var(--datepicker-day-size);
  padding: 0;
  border: none;
  border-radius: var(--border-radius-radius-md);
  font-size: var(--typography-font-sizes-sm);
  color: var(--datepicker-day-color);
  background: var(--datepicker-day-bg);
  transition: background-color var(--datepicker-transition-duration) var(--datepicker-transition-timing), color var(--datepicker-transition-duration) var(--datepicker-transition-timing);
  cursor: pointer;
}

.datepicker-day:hover:not(.datepicker-day--disabled, .datepicker-day--selected) {
  background: var(--datepicker-day-hover-bg);
}

.datepicker-day--empty {
  cursor: default;
}

.datepicker-day--today {
  font-weight: var(--datepicker-day-today-font-weight);
  color: var(--datepicker-day-today-color);
}

.datepicker-day--selected {
  font-weight: var(--datepicker-day-selected-font-weight);
  color: var(--datepicker-day-selected-color);
  background: var(--datepicker-day-selected-bg);
}

.datepicker-day--disabled {
  color: var(--datepicker-day-disabled-color);
  opacity: var(--datepicker-day-disabled-opacity);
  cursor: not-allowed;
}
.infoButton {
  padding: var(--info-button-padding);
  border: var(--info-button-border);
  background: var(--info-button-background);
  cursor: var(--info-button-cursor);
  -webkit-tap-highlight-color: transparent;
}

.infoButton:focus {
  outline: none;
}
/* ErrorDisplay Component Styles */

/* Typography handled by Typography component - only layout and variant styles here */

.lore-error-display {
  position: relative;
  border-radius: var(--error-display-border-radius);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Content container */

.lore-error-display__content {
  display: flex;
  flex-direction: column;
  gap: var(--error-display-content-gap);
}

.lore-error-display__message-container {
  display: flex;
  align-items: flex-start;
  gap: var(--error-display-message-container-gap);
}

.lore-error-display__text-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--error-display-text-content-gap);
  min-width: 0;
}

.lore-error-display__title {
  /* Typography component handles font styles */
}

.lore-error-display__message {
  /* Typography component handles font styles */
  word-wrap: break-word;
}

/* Icon styles */

.lore-error-display__icon-container {
  flex-shrink: 0;
  margin-top: var(--error-display-icon-margin-top);
}

.lore-error-display__icon {
  width: var(--error-display-icon-size);
  height: var(--error-display-icon-size);
  color: var(--error-display-icon-color);
}

/* Action buttons container */

.lore-error-display__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--error-display-actions-gap);
  margin-top: var(--error-display-actions-margin-top);
}

.lore-error-display__action-button {
  flex-shrink: 0;
}

/* Dismiss button */

.lore-error-display__dismiss-button {
  position: absolute;
  top: var(--spacing-8);
  right: var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--error-display-dismiss-padding);
  border: none;
  border-radius: var(--error-display-dismiss-border-radius);
  color: var(--error-display-dismiss-color);
  background: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.lore-error-display__dismiss-button:hover {
  color: var(--error-display-dismiss-color-hover);
  background-color: var(--error-display-dismiss-bg-hover);
}

.lore-error-display__dismiss-button:focus {
  outline: var(--error-display-dismiss-outline-width) solid var(--error-display-dismiss-outline-color);
  outline-offset: var(--error-display-dismiss-outline-offset);
}

/* Variant: Inline (default) */

.lore-error-display--inline {
  padding: var(--error-display-inline-padding);
  border: 1px solid var(--error-display-inline-border-color);
  background-color: var(--error-display-inline-bg);
}

.lore-error-display--inline .lore-error-display__title {
  color: var(--error-display-inline-title-color);
}

.lore-error-display--inline .lore-error-display__message {
  color: var(--error-display-inline-message-color);
}

/* Variant: Toast */

.lore-error-display--toast {
  position: fixed;
  top: var(--spacing-24);
  right: var(--spacing-24);
  z-index: var(--error-display-toast-z-index);
  min-width: var(--error-display-toast-min-width);
  max-width: var(--error-display-toast-max-width);
  padding: var(--error-display-toast-padding);
  border: 1px solid var(--error-display-toast-border-color);
  box-shadow: var(--error-display-toast-shadow);
  background-color: var(--error-display-toast-bg);
  transition: all var(--error-display-transition-duration) ease;
}

.lore-error-display--toast.lore-error-display--hidden {
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
}

/* Variant: Banner */

.lore-error-display--banner {
  margin-bottom: var(--error-display-banner-margin-bottom);
  padding: var(--error-display-banner-padding-vertical) var(--error-display-banner-padding-horizontal);
  border-left: var(--error-display-banner-border-width) solid var(--error-display-banner-border-color);
  background-color: var(--error-display-banner-bg);
}

.lore-error-display--banner .lore-error-display__content {
  gap: var(--error-display-message-container-gap);
}

.lore-error-display--banner .lore-error-display__title {
  color: var(--error-display-banner-title-color);
}

.lore-error-display--banner .lore-error-display__message {
  color: var(--error-display-banner-message-color);
}

.lore-error-display--banner .lore-error-display__actions {
  margin-top: 0;
}

/* Variant: Modal */

.lore-error-display--modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: var(--error-display-modal-z-index);
  min-width: var(--error-display-modal-min-width);
  max-width: var(--error-display-modal-max-width);
  max-height: var(--error-display-modal-max-height);
  padding: var(--error-display-modal-padding);
  border-radius: var(--error-display-modal-border-radius);
  box-shadow: var(--error-display-modal-shadow);
  overflow-y: auto;
  background-color: var(--error-display-modal-bg);
  transition: all var(--error-display-transition-duration) ease;
  transform: translate(-50%, -50%);
}

.lore-error-display--modal.lore-error-display--hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  pointer-events: none;
}

.lore-error-display--modal .lore-error-display__text-content {
  gap: var(--spacing-8);
}

.lore-error-display--modal .lore-error-display__actions {
  justify-content: flex-end;
  margin-top: var(--spacing-24);
}

/* Modal backdrop */

.lore-error-display--modal::before {
  position: fixed;
  z-index: -1;
  background-color: var(--error-display-modal-backdrop-bg);
  pointer-events: auto;
  content: "";
  inset: 0;
}

/* Mobile optimizations */

@media (width <= 480px) {
  .lore-error-display--toast {
    top: var(--spacing-12);
    right: var(--spacing-12);
    left: var(--spacing-12);
    min-width: auto;
    max-width: none;
  }

  .lore-error-display--modal {
    top: var(--spacing-24);
    right: var(--spacing-12);
    left: var(--spacing-12);
    min-width: auto;
    max-height: calc(100vh - 40px);
    transform: none;
  }

  .lore-error-display--modal.lore-error-display--hidden {
    transform: scale(0.95);
  }

  .lore-error-display__actions {
    flex-direction: column;
  }

  .lore-error-display__actions .lore-error-display__action-button {
    width: 100%;
  }

  .lore-error-display__message-container {
    gap: var(--spacing-8);
  }
}
/* MaintenanceScreen Component Styles */

/* Typography handled by Typography component - only layout styles here */

.maintenance-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--maintenance-screen-bg);
  box-sizing: border-box;
}

.maintenance-screen__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--maintenance-screen-container-gap);
  width: 100%;
  max-width: var(--maintenance-screen-container-max-width);
  padding: var(--maintenance-screen-container-padding-block) var(--maintenance-screen-container-padding-inline);
  box-sizing: border-box;
}

.maintenance-screen__illustration {
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  line-height: var(--maintenance-screen-illustration-line-height);
  place-items: start;
}

.maintenance-screen__illustration svg {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
/* PageHeader Component Styles */

/* Single wrapper: padding and flex layout on the header only (no inner .navigation) */
.pageHeader {
  position: relative;
  z-index: var(--page-header-z-index);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--page-header-min-height);
  padding: var(--page-header-padding-vertical) var(--page-header-padding-horizontal);
  background-color: var(--page-header-bg-default);
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Sticky positioning */

.pageHeader.sticky {
  position: sticky;
  top: 0;
}

/* Background variants */

.pageHeader.variant-default {
  background-color: var(--page-header-bg-default);
}

.pageHeader.variant-transparent {
  background-color: var(--page-header-bg-transparent);
}

.pageHeader.variant-primary {
  color: var(--text-on-primary);
  background-color: var(--page-header-bg-primary);
}

/* Action sections */

.pageHeader .leadingActions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--page-header-actions-gap);
}

.pageHeader .centerContent {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* When center content has a title, ensure proper spacing for absolute centering */

.pageHeader .centerContent--hasTitle {
  position: absolute;
  right: 0;
  left: 0;
  justify-content: center;
  pointer-events: none;
}

.pageHeader .centerContent--hasTitle > * {
  pointer-events: auto;
}

.pageHeader .trailingActions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--page-header-actions-gap);
}

/* Action wrapper for consistent spacing */

.pageHeader .actionWrapper {
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.pageHeader .actionWrapper > button {
  border: none;
  background: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Back Navigation Link */

/* stylelint-disable order/properties-order */
.pageHeader .pageHeader__backLink {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: var(--page-header-back-link-gap);
  font-family: var(--page-header-back-link-font-family);
  font-size: var(--page-header-back-link-font-size);
  font-weight: var(--page-header-back-link-font-weight);
  line-height: var(--typography-line-heights-normal);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* Note: color is set via inline style to ensure it overrides inherited button colors */
}
/* stylelint-enable order/properties-order */

.pageHeader .pageHeader__backLink:focus {
  outline: none;
}

.pageHeader .pageHeader__backLink svg {
  width: var(--page-header-back-link-icon-size);
  height: var(--page-header-back-link-icon-size);
}

/* Title Styles */

.pageHeader .pageHeader__title {
  margin: 0;
  font-family: var(--page-header-title-font-family);
  font-size: var(--page-header-title-font-size);
  font-weight: var(--page-header-title-font-weight);
  line-height: var(--typography-line-heights-normal);
  color: var(--page-header-title-color);
}

.pageHeader .pageHeader__title--left {
  text-align: left;
}

.pageHeader .pageHeader__title--center {
  text-align: center;
}

/* Mobile optimizations */

@media (width <= 480px) {
  .pageHeader {
    min-height: var(--page-header-min-height-mobile);
  }

  .pageHeader .leadingActions,
  .pageHeader .trailingActions {
    gap: var(--page-header-actions-gap-mobile);
  }
}

/* Tablet optimizations */

@media (width >= 768px) {
  .pageHeader {
    min-height: var(--page-header-min-height-tablet);
  }

  .pageHeader .leadingActions,
  .pageHeader .trailingActions {
    gap: var(--page-header-actions-gap-tablet);
  }
}
/* SessionExpired Component Styles */

/* Typography handled by Typography component - only layout styles here */

.session-expired {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--session-expired-bg);
  box-sizing: border-box;
}

.session-expired__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--session-expired-container-gap);
  width: 100%;
  max-width: var(--session-expired-container-max-width);
  padding: var(--session-expired-container-padding-block) var(--session-expired-container-padding-inline);
  box-sizing: border-box;
}

.session-expired__illustration {
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  line-height: var(--session-expired-illustration-line-height);
  place-items: start;
}

.session-expired__illustration svg {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
/* TabBar Component Styles */

.lore-tab-bar {
  position: relative;
  display: flex;
  width: 100%;
}

.lore-tab-bar__item {
  flex: 1;
  padding: var(--tab-bar-item-padding-vertical) var(--tab-bar-item-padding-horizontal);
  border: none;
  font-family: var(--tab-bar-item-font-family);
  font-size: var(--tab-bar-item-font-size);
  font-weight: var(--tab-bar-item-font-weight);
  text-align: center;
  color: var(--tab-bar-item-color-inactive);
  background: none;
  transition: color var(--tab-bar-transition-duration) var(--tab-bar-transition-timing);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Truncate long labels at large font scale */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lore-tab-bar__item:focus {
  outline: none;
}

.lore-tab-bar__item--active {
  color: var(--tab-bar-item-color-active);
}

.lore-tab-bar__indicator {
  position: absolute;
  bottom: 0;
  height: var(--tab-bar-indicator-height);
  border-radius: var(--tab-bar-indicator-border-radius);
  background-color: var(--tab-bar-indicator-color);
  transition: transform var(--tab-bar-transition-duration) var(--tab-bar-transition-timing), width var(--tab-bar-transition-duration) var(--tab-bar-transition-timing);
}



/**
 * Lore Design System - Complete Styles
 * 
 * Import this single file to get all design system styles:
 * 
 * @example
 * import '@sequelae/lore-core/dist/styles/index.css';
 */
/* 1. CSS Reset - normalize browser defaults */
/* Minimal modern reset with accessibility enhancements */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  /* Base font size: 18px (112.5% of browser default 16px)
     All rem values scale proportionally from this base.
     Using percentage preserves user's browser font size preferences. */
  font-size: 112.5%;
  /* Prevent iOS font scaling issues in landscape */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  /* Smooth scrolling for anchor links */
  scroll-behavior: smooth;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
html,
body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
/* 1b. Accessible font scaling - root cap + iOS Dynamic Type */
/*
 * Accessible font scaling
 *
 * iOS Safari (WKWebView):
 *   font: -apple-system-body tracks Dynamic Type. The root font size grows
 *   with the user's preferred text size, and rem-based token values scale
 *   accordingly. Capping is handled per-token via CSS clamp() in the
 *   generated variables.css — each font-size and spacing token self-limits
 *   at the pixel value it would reach at a 24px root.
 *
 *   Note: SwiftUI .dynamicTypeSize() modifiers on a WKWebView's parent
 *   do NOT cap the WebView's rendered content. The clamp() approach is
 *   the authoritative cap for all MFE text.
 *
 * Non-iOS browsers:
 *   112.5% base (18px at default 16px) with a max of --lore-font-scale-max.
 *   24px aligns with iOS xxxLarge (~135% of the 17pt default body font,
 *   mapped proportionally to the 18px lore-core base).
 *   Override the cap per-MFE:  :root { --lore-font-scale-max: 28px; }
 */
:root {
  --lore-font-scale-max: 24px;
}
/* iOS Safari: track Dynamic Type via system font keyword.
   Do NOT set font-size after this — it would replace the Dynamic Type value.
   Per-token clamp() values in variables.css provide the upper bound. */
@supports (-webkit-touch-callout: none) {
  html {
    font: -apple-system-body;
  }
}
/* Non-iOS: percentage base with cap.
   112.5% = 18px at browser default 16px; scales with browser font prefs. */
@supports not (-webkit-touch-callout: none) {
  html {
    font-size: min(112.5%, var(--lore-font-scale-max));
  }
}
/* 2. Design Tokens - CSS variables (colors, spacing, etc.) */
/**
 * Do not edit directly
 * Generated automatically from design tokens
 */
/* Primitives and Theme-Agnostic Tokens */
:root {
  --typography-font-families-roboto: 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --typography-font-families-montserrat: 'Montserrat', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --typography-font-weights-light: 300;
  --typography-font-weights-regular: 400;
  --typography-font-weights-medium: 500;
  --typography-font-weights-semibold: 600;
  --typography-font-weights-bold: 700;
  --typography-font-weights-black: 900;
  --typography-font-sizes-xs: clamp(10px, 0.6667rem, 16px);
  --typography-font-sizes-sm: clamp(10px, 0.7778rem, 19px);
  --typography-font-sizes-base: clamp(12px, 0.8889rem, 21px);
  --typography-font-sizes-lg: clamp(13px, 1rem, 24px);
  --typography-font-sizes-xl: clamp(15px, 1.1111rem, 27px);
  --typography-font-sizes-2xl: clamp(18px, 1.3333rem, 32px);
  --typography-font-sizes-3xl: clamp(22px, 1.6667rem, 40px);
  --typography-font-sizes-4xl: clamp(27px, 2rem, 48px);
  --typography-font-sizes-5xl: clamp(36px, 2.6667rem, 64px);
  --typography-font-sizes-6xl: clamp(45px, 3.3333rem, 80px);
  --typography-font-sizes-7xl: clamp(54px, 4rem, 96px);
  --typography-line-heights-tight: 125%;
  --typography-line-heights-normal: 150%;
  --typography-line-heights-relaxed: 175%;
  --typography-letter-spacing-snug: -0.05em;
  --typography-letter-spacing-wide: 0.025em;
  --typography-letter-spacing-wider: 0.05em;
  --typography-letter-spacing-widest: 0.1em;
  --border-radius-radius-sm: 4px;
  --border-radius-radius-md: 8px;
  --border-radius-radius-lg: 16px;
  --border-radius-radius-full: 9999px;
  --box-shadow-shadow-sm: 0px 1px 2px 0px #00000033;
  --box-shadow-shadow-md: 0px 4px 6px -1px #0000001A;
  --box-shadow-shadow-lg: 0px 10px 15px -3px #0000001A;
  --spacing-4: clamp(0px, 0.2222rem, 5px);
  --spacing-8: clamp(0px, 0.4444rem, 11px);
  --spacing-12: clamp(0px, 0.6667rem, 16px);
  --spacing-16: clamp(0px, 0.8889rem, 21px);
  --spacing-24: clamp(0px, 1.3333rem, 32px);
  --spacing-32: clamp(0px, 1.7778rem, 43px);
  --spacing-48: clamp(0px, 2.6667rem, 64px);
  --spacing-none: 0;
  --greyscale-100: #F2F2F2;
  --greyscale-200: #F5F5F5;
  --greyscale-300: #D8D8D8;
  --greyscale-400: #BFBFBF;
  --greyscale-500: #888888;
  --greyscale-600: #6D6D6D;
  --greyscale-700: #595959;
  --greyscale-800: #3D3D3D;
  --greyscale-900: #1A1A1A;
  --greyscale-white: #FFFFFF;
  --greyscale-black: #000000;
  --green-50: #E8F9E1;
  --green-100: #C7EFB4;
  --green-200: #A7E18E;
  --green-300: #8ED372;
  --green-400: #6FCA5C;
  --green-500: #4DB748;
  --green-600: #41963D;
  --green-700: #377524;
  --green-800: #29541B;
  --green-900: #1A3612;
  --teal-50: #E1F6F7;
  --teal-100: #9BE1E1;
  --teal-200: #75CFD6;
  --teal-300: #50C0CC;
  --teal-400: #47A6B8;
  --teal-500: #3794AA;
  --teal-600: #247F93;
  --teal-700: #13707F;
  --teal-800: #0D545F;
  --teal-900: #073941;
  --red-50: #FFF7F6;
  --red-100: #FFE7E5;
  --red-200: #FFC9C6;
  --red-300: #FF7871;
  --red-400: #F46866;
  --red-500: #E8585B;
  --red-600: #DC4750;
  --red-700: #D13745;
  --red-800: #AB2D39;
  --red-900: #88242D;
  --indigo-50: #F0F7FF;
  --indigo-100: #D8EAFF;
  --indigo-200: #A9D0FF;
  --indigo-300: #0A7AFF;
  --indigo-400: #0D75EE;
  --indigo-500: #0F6FDD;
  --indigo-600: #126ACC;
  --indigo-700: #1565BB;
  --indigo-800: #175FAA;
  --indigo-900: #1A5A99;
  --purple-50: #F9F8FE;
  --purple-100: #EFECFB;
  --purple-200: #DCD5F7;
  --purple-300: #9A88E8;
  --purple-400: #9280DC;
  --purple-500: #8A79D1;
  --purple-600: #8271C6;
  --purple-700: #7A69BA;
  --purple-800: #7262AE;
  --purple-900: #6A5AA3;
  --yellow-50: #FFF9E8;
  --yellow-100: #FFEDB8;
  --yellow-200: #FFD666;
  --yellow-300: #FFBB17;
  --yellow-400: #FDB317;
  --yellow-500: #FCAB17;
  --yellow-600: #FAA417;
  --yellow-700: #F89C17;
  --yellow-800: #F79417;
  --yellow-900: #F58C17;
  --orange-200: #FFFFFF;
  --orange-400: #FDB317;
  --orange-600: #FFFFFF;
  --orange-800: #FFFFFF;
  --pink-200: #FFFFFF;
  --pink-400: #FFFFFF;
  --pink-600: #FFFFFF;
  --pink-800: #FFFFFF;
  --gradients-teal-to-green-horizontal: linear-gradient(90deg, #4DB748 0%, #3794AA 100%);
  --gradients-teal-to-green-vertical: linear-gradient(180deg, #4DB748 0%, #3794AA 100%);
  --gradients-green-to-teal-horizontal: linear-gradient(90deg, #3794AA 0%, #4DB748 100%);
  --gradients-green-to-teal-vertical: linear-gradient(180deg, #3794AA 0%, #4DB748 100%);
  --page-unrelated-content: clamp(0px, 1.3333rem, 32px);
  --page-related-content: clamp(0px, 0.6667rem, 16px);
}
/* Light Theme (default) */
:root,
[data-theme="light"] {
  --text-primary: #595959;
  --text-secondary: #6D6D6D;
  --text-call-out: #247F93;
  --text-on-primary: #FFFFFF;
  --text-on-color: #3D3D3D;
  --text-on-gradient: #3D3D3D;
  --text-ghost: #888888;
  --text-negative: #AB2D39;
  --text-hyperlink: #175FAA;
  --surface-page: #F5F5F5;
  --surface-gradient: linear-gradient(90deg, #8ED372 0%, #50C0CC 100%);
  --surface-card: #FFFFFF;
  --surface-success: #A7E18E;
  --surface-failure: #FFC9C6;
  --surface-info: #D8EAFF;
  --surface-ai: #DCD5F7;
  --surface-header: #FFFFFF;
  --surface-footer: #FFFFFF;
  --surface-primary-button: #13707F;
  --surface-disabled: #F2F2F2;
  --surface-list: #FFFFFF;
  --surface-discrete-area: #F2F2F2;
  --icon-primary: #3D3D3D;
  --icon-secondary: #888888;
  --icon-call-out: #13707F;
  --icon-warning: #FDB317;
  --icon-error: #AB2D39;
  --icon-on-primary: #FFFFFF;
  --icon-success: #41963D;
  --icon-information: #175FAA;
  --line-separating-content: #BFBFBF;
  --line-highlighting-content: #13707F;
  --card-padding: clamp(0px, 0.8889rem, 21px);
  --card-related-content: clamp(0px, 0.2222rem, 5px);
  --card-border-radius: 8px;
  --overlay-padding: clamp(0px, 1.3333rem, 32px);
  --overlay-border-radius: 8px;
  --bottom-sheet-padding: clamp(0px, 1.3333rem, 32px);
  --bottom-sheet-border-radius: 8px;
  --bottom-sheet-border-radius-top: 24px;
  --page-padding: clamp(0px, 0.8889rem, 21px);
  --list-padding: clamp(0px, 0.8889rem, 21px);
  --list-complex-between: clamp(0px, 0.2222rem, 5px);
  --chip-padding: clamp(0px, 0.4444rem, 11px);
  --chip-padding-vertical: clamp(0px, 0.2222rem, 5px);
  --chip-between: clamp(0px, 0.2222rem, 5px);
  --chip-border-radius: 4px;
  --chip-padding-large: clamp(0px, 0.6667rem, 16px);
  --chip-padding-vertical-large: clamp(0px, 0.4444rem, 11px);
  --button-border-radius: 32px;
  --button-font-family: 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --button-font-weight: 700;
  --button-shadow-sm: 0px 1px 2px 0px #00000033;
  --button-shadow-md: 0px 4px 6px -1px #0000001A;
  --button-padding-xs: clamp(0px, 0.8889rem, 21px);
  --button-padding-sm: clamp(0px, 1.3333rem, 32px);
  --button-padding-base: clamp(0px, 1.7778rem, 43px);
  --button-vertical: clamp(0px, 0.4444rem, 11px);
  --button-between: clamp(0px, 0.4444rem, 11px);
  --button-font-size-xs: clamp(10px, 0.6667rem, 16px);
  --button-font-size-sm: clamp(10px, 0.7778rem, 19px);
  --button-font-size-base: clamp(12px, 0.8889rem, 21px);
  --button-primary-bg: #13707F;
  --button-primary-text: #FFFFFF;
  --button-primary-border: #13707F;
  --button-primary-hover-bg: #247F93;
  --button-primary-hover-border: #247F93;
  --button-primary-active-bg: #0D545F;
  --button-primary-active-border: #0D545F;
  --button-secondary-bg: #FFFFFF;
  --button-secondary-text: #13707F;
  --button-secondary-border: #13707F;
  --button-secondary-hover-bg: #F2F2F2;
  --button-secondary-hover-border: #247F93;
  --button-secondary-hover-text: #247F93;
  --button-secondary-active-bg: #E1F6F7;
  --button-secondary-active-border: #0D545F;
  --button-secondary-active-text: #0D545F;
  --button-tertiary-bg: #6D6D6D;
  --button-tertiary-text: #FFFFFF;
  --button-tertiary-border: #6D6D6D;
  --button-tertiary-hover-bg: #888888;
  --button-tertiary-hover-border: #888888;
  --button-tertiary-active-bg: #595959;
  --button-tertiary-active-border: #595959;
  --button-text-text: #13707F;
  --button-text-hover-bg: #F2F2F2;
  --button-text-active-bg: #E1F6F7;
  --button-success-bg: #377524;
  --button-success-text: #FFFFFF;
  --button-success-border: #377524;
  --button-success-hover-bg: #41963D;
  --button-success-hover-border: #41963D;
  --button-success-active-bg: #29541B;
  --button-success-active-border: #29541B;
  --button-link-text: #0F6FDD;
  --button-link-hover-bg: #F0F7FF;
  --button-link-active-bg: #D8EAFF;
  --button-danger-bg: #D13745;
  --button-danger-text: #FFFFFF;
  --button-danger-border: #D13745;
  --button-danger-hover-bg: #DC4750;
  --button-danger-hover-border: #DC4750;
  --button-danger-active-bg: #AB2D39;
  --button-danger-active-border: #AB2D39;
  --button-opacity-disabled: 0.5;
  --input-border-radius: 8px;
  --input-tag-border-radius: 4px;
  --input-font-family: 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --input-font-size: clamp(12px, 0.8889rem, 21px);
  --input-label-font-size: clamp(10px, 0.7778rem, 19px);
  --input-label-font-weight: 500;
  --input-helper-font-size: clamp(10px, 0.6667rem, 16px);
  --input-counter-font-size: clamp(10px, 0.6667rem, 16px);
  --input-padding: clamp(0px, 0.6667rem, 16px);
  --input-gap: clamp(0px, 0.4444rem, 11px);
  --input-label-padding: clamp(0px, 0.2222rem, 5px);
  --input-icon-position: clamp(0px, 0.6667rem, 16px);
  --input-bg-default: #FFFFFF;
  --input-bg-readonly: #F2F2F2;
  --input-text-default: #1A1A1A;
  --input-text-placeholder: #BFBFBF;
  --input-label-text-default: #3D3D3D;
  --input-border-default: #D8D8D8;
  --input-border-focus: #247F93;
  --input-border-error: #E8585B;
  --input-border-success: #41963D;
  --input-border-readonly: #1A1A1A;
  --input-opacity-disabled: 0.5;
  --input-helper-text-default: #6D6D6D;
  --input-helper-text-error: #DC4750;
  --input-helper-text-success: #377524;
  --input-counter-text-default: #6D6D6D;
  --input-counter-text-near-limit: #BFBFBF;
  --input-tag-text: #6D6D6D;
  --input-asterisk: #E8585B;
  --spinner-success: #377524;
  --spinner-neutral: #6D6D6D;
  --spinner-primary: #13707F;
  --spinner-inverse: #FFFFFF;
  --password-strength-weak: #E8585B;
  --password-strength-medium: #FDB317;
  --password-strength-strong: #41963D;
  --password-meter-bg: #F5F5F5;
  --animated-gradient-background-size: 200% 200%;
  --animated-gradient-animation-duration: 15s;
  --animated-gradient-teal-to-green-horizontal: linear-gradient(90deg, #4DB748 0%, #3794AA 100%);
  --animated-gradient-teal-to-green-vertical: linear-gradient(180deg, #4DB748 0%, #3794AA 100%);
  --animated-gradient-green-to-teal-horizontal: linear-gradient(90deg, #3794AA 0%, #4DB748 100%);
  --animated-gradient-green-to-teal-vertical: linear-gradient(180deg, #3794AA 0%, #4DB748 100%);
  --profile-border-radius: 9999px;
  --toggle-font-family: 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --toggle-track-width: 52px;
  --toggle-track-height: 32px;
  --toggle-track-border-radius: 9999px;
  --toggle-thumb-size: 24px;
  --toggle-thumb-offset: 2px;
  --toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  --toggle-gap-horizontal: 12px;
  --toggle-gap-vertical: 8px;
  --toggle-label-font-size: clamp(10px, 0.7778rem, 19px);
  --toggle-label-font-weight: 500;
  --toggle-helper-font-size: clamp(10px, 0.6667rem, 16px);
  --toggle-track-bg-default: #F5F5F5;
  --toggle-track-bg-checked: #13707F;
  --toggle-track-border-default: #D8D8D8;
  --toggle-track-border-checked: #13707F;
  --toggle-track-border-error: #E8585B;
  --toggle-thumb-bg-default: #FFFFFF;
  --toggle-thumb-bg-checked: #FFFFFF;
  --toggle-label-text-default: #3D3D3D;
  --toggle-opacity-disabled: 0.5;
  --toggle-helper-text-default: #6D6D6D;
  --toggle-helper-text-error: #DC4750;
  --toggle-asterisk: #E8585B;
  --checkbox-font-family: 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --checkbox-size: 20px;
  --checkbox-icon-size: 12px;
  --checkbox-border-radius: 4px;
  --checkbox-gap-vertical: 8px;
  --checkbox-gap-horizontal: 12px;
  --checkbox-label-font-size: clamp(10px, 0.7778rem, 19px);
  --checkbox-label-font-weight: 500;
  --checkbox-label-line-height: 1.4;
  --checkbox-label-text-default: #3D3D3D;
  --checkbox-bg-default: #F5F5F5;
  --checkbox-bg-checked: #13707F;
  --checkbox-border-default: #D8D8D8;
  --checkbox-border-checked: #13707F;
  --checkbox-border-error: #E8585B;
  --checkbox-icon-color-checked: #FFFFFF;
  --checkbox-opacity-disabled: 0.5;
  --checkbox-helper-font-size: clamp(10px, 0.6667rem, 16px);
  --checkbox-helper-text-default: #6D6D6D;
  --checkbox-helper-text-error: #DC4750;
  --checkbox-asterisk: #E8585B;
  --checkbox-transition-duration: 0.15s;
  --checkbox-transition-timing: ease-in-out;
  --radio-font-family: 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --radio-size: 20px;
  --radio-dot-size: 10px;
  --radio-gap-vertical: 8px;
  --radio-gap-horizontal: 12px;
  --radio-options-gap-vertical: clamp(0px, 0.6667rem, 16px);
  --radio-options-gap-horizontal: clamp(0px, 1.3333rem, 32px);
  --radio-label-font-size: clamp(10px, 0.7778rem, 19px);
  --radio-label-font-weight: 500;
  --radio-label-line-height: 1.4;
  --radio-label-text-default: #3D3D3D;
  --radio-bg-default: #F5F5F5;
  --radio-border-default: #D8D8D8;
  --radio-border-checked: #13707F;
  --radio-border-error: #E8585B;
  --radio-dot-bg-checked: #13707F;
  --radio-opacity-disabled: 0.5;
  --radio-helper-font-size: clamp(10px, 0.6667rem, 16px);
  --radio-helper-text-default: #6D6D6D;
  --radio-helper-text-error: #DC4750;
  --radio-asterisk: #E8585B;
  --radio-transition-duration: 0.15s;
  --radio-transition-timing: ease-in-out;
  --link-font-family: 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --link-font-weight: 700;
  --link-font-weight-subtle: 400;
  --link-text-decoration: underline;
  --link-gap: clamp(0px, 0.2222rem, 5px);
  --link-color-default: #0D545F;
  --link-color-hover: #247F93;
  --link-color-active: #0D545F;
  --link-color-subtle: #595959;
  --link-color-subtle-hover: #3D3D3D;
  --link-color-disabled: #888888;
  --link-focus-border-radius: 4px;
  --link-focus-outline-width: 2px;
  --link-focus-outline-offset: 2px;
  --link-focus-outline-color: #247F93;
  --link-opacity-disabled: 0.6;
  --link-external-icon-size: 12px;
  --link-transition-duration: 0.15s;
  --link-transition-timing: ease-in-out;
  --datepicker-calendar-width: 280px;
  --datepicker-calendar-z-index: 1000;
  --datepicker-calendar-bg: #FFFFFF;
  --datepicker-calendar-border: #D8D8D8;
  --datepicker-calendar-shadow: 0px 10px 15px -3px #0000001A;
  --datepicker-input-padding-right: 44px;
  --datepicker-clear-size: 20px;
  --datepicker-clear-right: 36px;
  --datepicker-clear-bg: #F2F2F2;
  --datepicker-clear-bg-hover: #D8D8D8;
  --datepicker-clear-icon-color: #595959;
  --datepicker-icon-right: 12px;
  --datepicker-icon-color: #595959;
  --datepicker-nav-size: 32px;
  --datepicker-nav-icon-color: #595959;
  --datepicker-nav-bg-hover: #F2F2F2;
  --datepicker-weekday-gap: 2px;
  --datepicker-weekday-color: #595959;
  --datepicker-day-size: 32px;
  --datepicker-day-gap: 2px;
  --datepicker-day-color: #3D3D3D;
  --datepicker-day-bg: transparent;
  --datepicker-day-today-color: #0D545F;
  --datepicker-day-today-font-weight: 700;
  --datepicker-day-selected-bg: #13707F;
  --datepicker-day-selected-color: #FFFFFF;
  --datepicker-day-selected-font-weight: 600;
  --datepicker-day-hover-bg: #F2F2F2;
  --datepicker-day-disabled-color: #888888;
  --datepicker-day-disabled-opacity: 0.4;
  --datepicker-month-year-color: #3D3D3D;
  --datepicker-transition-duration: 0.15s;
  --datepicker-transition-timing: ease-in-out;
  --sheet-overlay-bg: rgba(0, 0, 0, 0.3);
  --sheet-overlay-bg-notification: rgba(0, 0, 0, 0.25);
  --sheet-backdrop-blur: 8px;
  --sheet-container-bg: #FFFFFF;
  --sheet-border-radius-top: 20px;
  --sheet-shadow: 0px -4px 16px rgba(0, 0, 0, 0.1);
  --sheet-shadow-notification: 0px -8px 24px rgba(0, 0, 0, 0.15);
  --sheet-drag-indicator-width: 40px;
  --sheet-drag-indicator-height: 4px;
  --sheet-drag-indicator-border-radius: 2px;
  --sheet-drag-indicator-margin: 8px;
  --sheet-drag-indicator-bg: #E0E0E0;
  --sheet-z-index: 1000;
  --sheet-z-index-notification: 1100;
  --sheet-content-offset: 60px;
  --sheet-transition-duration: 0.3s;
  --sheet-transition-timing: ease-out;
  --modal-z-index: 1000;
  --modal-backdrop-bg: rgba(0, 0, 0, 0.55);
  --modal-bg: #FFFFFF;
  --modal-border-radius: 16px;
  --modal-width: 320px;
  --modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
  --tab-bar-item-padding-vertical: clamp(0px, 0.8889rem, 21px);
  --tab-bar-item-padding-horizontal: clamp(0px, 0.4444rem, 11px);
  --tab-bar-item-font-family: 'Montserrat', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --tab-bar-item-font-size: clamp(10px, 0.7778rem, 19px);
  --tab-bar-item-font-weight: 700;
  --tab-bar-item-color-inactive: #6D6D6D;
  --tab-bar-item-color-active: #247F93;
  --tab-bar-indicator-height: 3px;
  --tab-bar-indicator-border-radius: 2px 2px 0 0;
  --tab-bar-indicator-color: #247F93;
  --tab-bar-transition-duration: 0.3s;
  --tab-bar-transition-timing: ease;
  --page-header-z-index: 100;
  --page-header-padding-vertical: clamp(0px, 0.4444rem, 11px);
  --page-header-padding-horizontal: clamp(0px, 0.8889rem, 21px);
  --page-header-min-height: 56px;
  --page-header-min-height-mobile: 48px;
  --page-header-min-height-tablet: 64px;
  --page-header-bg-default: #FFFFFF;
  --page-header-bg-transparent: transparent;
  --page-header-bg-primary: #3794AA;
  --page-header-actions-gap: clamp(0px, 0.6667rem, 16px);
  --page-header-actions-gap-mobile: clamp(0px, 0.4444rem, 11px);
  --page-header-actions-gap-tablet: clamp(0px, 0.8889rem, 21px);
  --page-header-title-font-family: 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --page-header-title-font-size: clamp(12px, 0.8889rem, 21px);
  --page-header-title-font-weight: 700;
  --page-header-title-color: #3D3D3D;
  --page-header-back-link-font-family: 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --page-header-back-link-font-size: clamp(12px, 0.8889rem, 21px);
  --page-header-back-link-font-weight: 700;
  --page-header-back-link-gap: clamp(0px, 0.2222rem, 5px);
  --page-header-back-link-icon-size: 20px;
  --skeleton-animation-duration: 1.5s;
  --skeleton-gradient-size: 200px;
  --skeleton-gradient-color-1: #F0F0F0;
  --skeleton-gradient-color-2: #E0E0E0;
  --skeleton-box-margin-bottom: 8px;
  --skeleton-line-margin-bottom: 8px;
  --skeleton-circle-margin-bottom: 8px;
  --skeleton-card-gap: 12px;
  --skeleton-card-padding: 16px;
  --skeleton-card-border-radius: 8px;
  --skeleton-card-bg: #F9F9F9;
  --skeleton-card-border-color: #F5F5F5;
  --skeleton-card-content-gap: 8px;
  --skeleton-list-item-gap: 8px;
  --skeleton-list-item-padding-vertical: 12px;
  --error-display-border-radius: 8px;
  --error-display-content-gap: clamp(0px, 0.8889rem, 21px);
  --error-display-message-container-gap: clamp(0px, 0.6667rem, 16px);
  --error-display-text-content-gap: clamp(0px, 0.2222rem, 5px);
  --error-display-actions-gap: clamp(0px, 0.4444rem, 11px);
  --error-display-actions-margin-top: clamp(0px, 0.2222rem, 5px);
  --error-display-icon-size: 20px;
  --error-display-icon-margin-top: 2px;
  --error-display-icon-color: #DC4750;
  --error-display-dismiss-padding: clamp(0px, 0.2222rem, 5px);
  --error-display-dismiss-border-radius: 4px;
  --error-display-dismiss-color: #888888;
  --error-display-dismiss-color-hover: #1A1A1A;
  --error-display-dismiss-bg-hover: #F2F2F2;
  --error-display-dismiss-outline-width: 2px;
  --error-display-dismiss-outline-offset: 1px;
  --error-display-dismiss-outline-color: #47A6B8;
  --error-display-inline-padding: clamp(0px, 0.8889rem, 21px);
  --error-display-inline-border-color: #FFC9C6;
  --error-display-inline-bg: #FFF7F6;
  --error-display-inline-title-color: #D13745;
  --error-display-inline-message-color: #595959;
  --error-display-banner-margin-bottom: clamp(0px, 0.8889rem, 21px);
  --error-display-banner-padding-vertical: clamp(0px, 0.6667rem, 16px);
  --error-display-banner-padding-horizontal: clamp(0px, 0.8889rem, 21px);
  --error-display-banner-border-width: 4px;
  --error-display-banner-border-color: #DC4750;
  --error-display-banner-bg: #FFF7F6;
  --error-display-banner-title-color: #D13745;
  --error-display-banner-message-color: #595959;
  --error-display-toast-z-index: 9999;
  --error-display-toast-min-width: 320px;
  --error-display-toast-max-width: 400px;
  --error-display-toast-padding: clamp(0px, 0.8889rem, 21px);
  --error-display-toast-border-color: #F5F5F5;
  --error-display-toast-shadow: 0px 10px 15px -3px #0000001A;
  --error-display-toast-bg: #FFFFFF;
  --error-display-modal-z-index: 10000;
  --error-display-modal-min-width: 320px;
  --error-display-modal-max-width: 500px;
  --error-display-modal-max-height: 80vh;
  --error-display-modal-padding: clamp(0px, 1.3333rem, 32px);
  --error-display-modal-border-radius: 16px;
  --error-display-modal-shadow: 0px 10px 15px -3px #0000001A;
  --error-display-modal-bg: #FFFFFF;
  --error-display-modal-backdrop-bg: rgba(0, 0, 0, 0.5);
  --error-display-transition-duration: 0.3s;
  --info-button-padding: 0;
  --info-button-background: none;
  --info-button-border: none;
  --info-button-cursor: pointer;
  --maintenance-screen-bg: #FFFFFF;
  --maintenance-screen-container-max-width: 393px;
  --maintenance-screen-container-gap: clamp(0px, 1.3333rem, 32px);
  --maintenance-screen-container-padding-block: clamp(0px, 1.3333rem, 32px);
  --maintenance-screen-container-padding-inline: clamp(0px, 0.8889rem, 21px);
  --maintenance-screen-illustration-line-height: 0;
  --session-expired-bg: #FFFFFF;
  --session-expired-container-max-width: 393px;
  --session-expired-container-gap: clamp(0px, 1.3333rem, 32px);
  --session-expired-container-padding-block: clamp(0px, 1.3333rem, 32px);
  --session-expired-container-padding-inline: clamp(0px, 0.8889rem, 21px);
  --session-expired-illustration-line-height: 0;
  --page-transition-container-height: 100vh;
  --page-transition-slide-offset-back: -30%;
  --page-transition-slide-offset-forward: 100%;
  --page-transition-opacity-back: 0.8;
  --page-transition-opacity-forward: 1;
  --page-transition-duration: 0.35s;
  --page-transition-duration-none: 0s;
  --page-transition-easing: cubic-bezier(0.2, 0.0, 0.2, 1.0);
  --badge-font-family: 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --badge-font-weight: 600;
  --badge-font-size-sm: clamp(10px, 0.6667rem, 16px);
  --badge-font-size-md: clamp(10px, 0.7778rem, 19px);
  --badge-border-radius: 16px;
  --badge-border-radius-full: 9999px;
  --badge-height-sm: 24px;
  --badge-height-md: 28px;
  --badge-padding-horizontal: clamp(0px, 0.4444rem, 11px);
  --badge-padding-vertical: clamp(0px, 0.2222rem, 5px);
  --badge-gap: clamp(0px, 0.2222rem, 5px);
  --badge-dot-size: clamp(0px, 0.4444rem, 11px);
  --badge-icon-size-sm: 14px;
  --badge-icon-size-md: 18px;
  --badge-stat-blue-bg: #F0F7FF;
  --badge-stat-blue-text: #595959;
  --badge-stat-yellow-bg: #FFEDB8;
  --badge-stat-yellow-text: #595959;
  --badge-status-success-bg: #E8F9E1;
  --badge-status-success-text: #377524;
  --badge-status-success-dot: #4DB748;
  --badge-status-neutral-bg: #888888;
  --badge-status-neutral-text: #FFFFFF;
  --badge-status-info-bg: #F0F7FF;
  --badge-status-info-text: #1565BB;
  --badge-status-info-dot: #0F6FDD;
  --badge-status-warning-bg: #FFEDB8;
  --badge-status-warning-text: #595959;
  --badge-status-warning-dot: #FCAB17;
  --badge-status-error-bg: #FFF7F6;
  --badge-status-error-text: #D13745;
  --badge-status-error-dot: #E8585B;
  --badge-count-primary-bg: #13707F;
  --badge-count-primary-text: #FFFFFF;
  --badge-count-secondary-bg: #F5F5F5;
  --badge-count-secondary-text: #595959;
  --badge-border-color: #FFFFFF;
  --badge-border-width: 2px;
}
/* Dark Theme */
[data-theme="dark"] {
  --text-primary: #FFFFFF;
  --text-secondary: #F2F2F2;
  --text-call-out: #75CFD6;
  --text-on-primary: #1A1A1A;
  --text-on-color: #FFFFFF;
  --text-on-gradient: #FFFFFF;
  --text-ghost: #888888;
  --text-negative: #F46866;
  --text-hyperlink: #A9D0FF;
  --surface-page: #1A1A1A;
  --surface-gradient: linear-gradient(90deg, #29541B 0%, #0D545F 100%);
  --surface-card: #3D3D3D;
  --surface-success: #29541B;
  --surface-failure: #AB2D39;
  --surface-info: #1A5A99;
  --surface-ai: #7A69BA;
  --surface-header: #3D3D3D;
  --surface-footer: #3D3D3D;
  --surface-primary-button: #47A6B8;
  --surface-disabled: #3D3D3D;
  --surface-list: #3D3D3D;
  --surface-discrete-area: #595959;
  --icon-primary: #75CFD6;
  --icon-secondary: #888888;
  --icon-call-out: #75CFD6;
  --icon-warning: #FDB317;
  --icon-error: #E8585B;
  --icon-on-primary: #FFFFFF;
  --icon-success: #6FCA5C;
  --icon-information: #A9D0FF;
  --line-separating-content: #3D3D3D;
  --line-highlighting-content: #75CFD6;
  --button-border-radius: 32px;
  --button-font-family: 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --button-font-weight: 700;
  --button-shadow-sm: 0px 1px 2px 0px #00000033;
  --button-shadow-md: 0px 4px 6px -1px #0000001A;
  --button-padding-xs: clamp(0px, 0.8889rem, 21px);
  --button-padding-sm: clamp(0px, 1.3333rem, 32px);
  --button-padding-base: clamp(0px, 1.7778rem, 43px);
  --button-font-size-xs: clamp(10px, 0.6667rem, 16px);
  --button-font-size-sm: clamp(10px, 0.7778rem, 19px);
  --button-font-size-base: clamp(12px, 0.8889rem, 21px);
  --button-font-size-lg: clamp(13px, 1rem, 24px);
  --button-primary-bg: #47A6B8;
  --button-primary-text: #1A1A1A;
  --button-primary-border: #47A6B8;
  --button-primary-hover-bg: #50C0CC;
  --button-primary-hover-border: #50C0CC;
  --button-primary-active-bg: #3794AA;
  --button-primary-active-border: #3794AA;
  --button-secondary-bg: #595959;
  --button-secondary-text: #75CFD6;
  --button-secondary-border: #75CFD6;
  --button-secondary-hover-bg: #6D6D6D;
  --button-secondary-hover-border: #9BE1E1;
  --button-secondary-hover-text: #9BE1E1;
  --button-secondary-active-bg: #3D3D3D;
  --button-secondary-active-border: #50C0CC;
  --button-secondary-active-text: #50C0CC;
  --button-tertiary-bg: #BFBFBF;
  --button-tertiary-text: #1A1A1A;
  --button-tertiary-border: #BFBFBF;
  --button-tertiary-hover-bg: #D8D8D8;
  --button-tertiary-hover-border: #D8D8D8;
  --button-tertiary-active-bg: #888888;
  --button-tertiary-active-border: #888888;
  --button-text-text: #50C0CC;
  --button-text-hover-bg: #3D3D3D;
  --button-text-active-bg: #595959;
  --button-success-bg: #6FCA5C;
  --button-success-text: #1A1A1A;
  --button-success-border: #6FCA5C;
  --button-success-hover-bg: #8ED372;
  --button-success-hover-border: #8ED372;
  --button-success-active-bg: #4DB748;
  --button-success-active-border: #4DB748;
  --button-link-text: #A9D0FF;
  --button-link-hover-bg: #3D3D3D;
  --button-link-active-bg: #595959;
  --button-danger-bg: #F46866;
  --button-danger-text: #1A1A1A;
  --button-danger-border: #F46866;
  --button-danger-hover-bg: #FF7871;
  --button-danger-hover-border: #FF7871;
  --button-danger-active-bg: #E8585B;
  --button-danger-active-border: #E8585B;
  --button-opacity-disabled: 0.5;
  --input-border-radius: 8px;
  --input-tag-border-radius: 4px;
  --input-font-family: 'Roboto', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
  --input-font-size: clamp(12px, 0.8889rem, 21px);
  --input-label-font-size: clamp(10px, 0.7778rem, 19px);
  --input-label-font-weight: 500;
  --input-helper-font-size: clamp(10px, 0.6667rem, 16px);
  --input-counter-font-size: clamp(10px, 0.6667rem, 16px);
  --input-padding: clamp(0px, 0.6667rem, 16px);
  --input-gap: clamp(0px, 0.4444rem, 11px);
  --input-label-padding: clamp(0px, 0.2222rem, 5px);
  --input-icon-position: clamp(0px, 0.6667rem, 16px);
  --input-bg-default: #3D3D3D;
  --input-bg-readonly: #1A1A1A;
  --input-text-default: #F2F2F2;
  --input-text-placeholder: #888888;
  --input-label-text-default: #F5F5F5;
  --input-border-default: #6D6D6D;
  --input-border-focus: #47A6B8;
  --input-border-error: #F46866;
  --input-border-success: #6FCA5C;
  --input-border-readonly: #888888;
  --input-opacity-disabled: 0.5;
  --input-helper-text-default: #BFBFBF;
  --input-helper-text-error: #F46866;
  --input-helper-text-success: #8ED372;
  --input-counter-text-default: #BFBFBF;
  --input-counter-text-near-limit: #888888;
  --input-tag-text: #D8D8D8;
  --input-asterisk: #F46866;
  --spinner-success: #6FCA5C;
  --spinner-neutral: #BFBFBF;
  --spinner-primary: #50C0CC;
  --spinner-inverse: #1A1A1A;
  --password-strength-weak: #F46866;
  --password-strength-medium: #FFBB17;
  --password-strength-strong: #6FCA5C;
  --password-meter-bg: #595959;
  --animated-gradient-background-size: 200% 200%;
  --animated-gradient-animation-duration: 15s;
  --animated-gradient-teal-to-green-horizontal: linear-gradient(90deg, #4DB748 0%, #3794AA 100%);
  --animated-gradient-teal-to-green-vertical: linear-gradient(180deg, #4DB748 0%, #3794AA 100%);
  --animated-gradient-green-to-teal-horizontal: linear-gradient(90deg, #3794AA 0%, #4DB748 100%);
  --animated-gradient-green-to-teal-vertical: linear-gradient(180deg, #3794AA 0%, #4DB748 100%);
  --toggle-track-bg-default: #6D6D6D;
  --toggle-track-bg-checked: #47A6B8;
  --toggle-track-border-default: #6D6D6D;
  --toggle-track-border-checked: #47A6B8;
  --toggle-track-border-error: #F46866;
  --toggle-thumb-bg-default: #D8D8D8;
  --toggle-thumb-bg-checked: #1A1A1A;
  --toggle-label-text-default: #F5F5F5;
  --toggle-helper-text-default: #BFBFBF;
  --toggle-helper-text-error: #F46866;
  --toggle-asterisk: #F46866;
  --toggle-opacity-disabled: 0.5;
  --checkbox-label-text-default: #F5F5F5;
  --checkbox-bg-default: #6D6D6D;
  --checkbox-bg-checked: #47A6B8;
  --checkbox-border-default: #6D6D6D;
  --checkbox-border-checked: #47A6B8;
  --checkbox-border-error: #F46866;
  --checkbox-icon-color-checked: #1A1A1A;
  --checkbox-helper-text-default: #BFBFBF;
  --checkbox-helper-text-error: #F46866;
  --checkbox-asterisk: #F46866;
  --checkbox-opacity-disabled: 0.5;
  --radio-label-text-default: #F5F5F5;
  --radio-bg-default: #6D6D6D;
  --radio-border-default: #6D6D6D;
  --radio-border-checked: #47A6B8;
  --radio-border-error: #F46866;
  --radio-dot-bg-checked: #47A6B8;
  --radio-opacity-disabled: 0.5;
  --radio-helper-text-default: #BFBFBF;
  --radio-helper-text-error: #F46866;
  --radio-asterisk: #F46866;
  --link-color-default: #75CFD6;
  --link-color-hover: #9BE1E1;
  --link-color-active: #50C0CC;
  --link-color-subtle: #D8D8D8;
  --link-color-subtle-hover: #F2F2F2;
  --link-color-disabled: #6D6D6D;
  --link-focus-outline-color: #47A6B8;
  --datepicker-calendar-bg: #3D3D3D;
  --datepicker-calendar-border: #6D6D6D;
  --datepicker-clear-bg: #595959;
  --datepicker-clear-bg-hover: #6D6D6D;
  --datepicker-clear-icon-color: #D8D8D8;
  --datepicker-icon-color: #D8D8D8;
  --datepicker-nav-icon-color: #D8D8D8;
  --datepicker-nav-bg-hover: #595959;
  --datepicker-weekday-color: #D8D8D8;
  --datepicker-day-color: #F2F2F2;
  --datepicker-day-today-color: #75CFD6;
  --datepicker-day-selected-bg: #47A6B8;
  --datepicker-day-selected-color: #1A1A1A;
  --datepicker-day-hover-bg: #595959;
  --datepicker-day-disabled-color: #6D6D6D;
  --datepicker-month-year-color: #F2F2F2;
  --sheet-container-bg: #3D3D3D;
  --sheet-drag-indicator-bg: #6D6D6D;
  --tab-bar-item-color-inactive: #BFBFBF;
  --tab-bar-item-color-active: #50C0CC;
  --tab-bar-indicator-color: #50C0CC;
  --page-header-bg-default: #3D3D3D;
  --page-header-bg-primary: #47A6B8;
  --page-header-title-color: #F2F2F2;
  --skeleton-gradient-color-1: #3D3D3D;
  --skeleton-gradient-color-2: #595959;
  --skeleton-card-bg: #3D3D3D;
  --skeleton-card-border-color: #595959;
  --error-display-icon-color: #F46866;
  --error-display-dismiss-color: #BFBFBF;
  --error-display-dismiss-color-hover: #F2F2F2;
  --error-display-dismiss-bg-hover: #595959;
  --error-display-dismiss-outline-color: #50C0CC;
  --error-display-inline-border-color: #AB2D39;
  --error-display-inline-bg: #3D3D3D;
  --error-display-inline-title-color: #F46866;
  --error-display-inline-message-color: #D8D8D8;
  --error-display-banner-border-color: #F46866;
  --error-display-banner-bg: #3D3D3D;
  --error-display-banner-title-color: #F46866;
  --error-display-banner-message-color: #D8D8D8;
  --error-display-toast-border-color: #6D6D6D;
  --error-display-toast-bg: #3D3D3D;
  --error-display-modal-bg: #3D3D3D;
  --maintenance-screen-bg: #3D3D3D;
  --session-expired-bg: #3D3D3D;
  --badge-stat-blue-bg: #1A5A99;
  --badge-stat-blue-text: #A9D0FF;
  --badge-stat-yellow-bg: #F58C17;
  --badge-stat-yellow-text: #FFD666;
  --badge-status-success-bg: #1A3612;
  --badge-status-success-text: #A7E18E;
  --badge-status-success-dot: #6FCA5C;
  --badge-status-neutral-bg: #6D6D6D;
  --badge-status-neutral-text: #F2F2F2;
  --badge-status-info-bg: #1A5A99;
  --badge-status-info-text: #A9D0FF;
  --badge-status-info-dot: #0D75EE;
  --badge-status-warning-bg: #F58C17;
  --badge-status-warning-text: #FFD666;
  --badge-status-warning-dot: #FDB317;
  --badge-status-error-bg: #88242D;
  --badge-status-error-text: #FFC9C6;
  --badge-status-error-dot: #F46866;
  --badge-count-primary-bg: #47A6B8;
  --badge-count-primary-text: #1A1A1A;
  --badge-count-secondary-bg: #595959;
  --badge-count-secondary-text: #F5F5F5;
  --badge-border-color: #3D3D3D;
}
/* Testing Theme (QA) */
[data-theme="testing"] {
  --text-primary: #AB2D39;
  --text-secondary: #DC4750;
  --text-call-out: #88242D;
  --text-on-primary: #FFFFFF;
  --text-on-color: #88242D;
  --text-on-gradient: #88242D;
  --text-ghost: #F46866;
  --text-negative: #88242D;
  --text-hyperlink: #D13745;
  --surface-page: #FFE7E5;
  --surface-gradient: linear-gradient(90deg, #FFC9C6 0%, #F46866 100%);
  --surface-card: #FFF7F6;
  --surface-success: #FFC9C6;
  --surface-failure: #FFC9C6;
  --surface-info: #FFE7E5;
  --surface-ai: #FFC9C6;
  --surface-header: #FFF7F6;
  --surface-footer: #FFF7F6;
  --surface-primary-button: #D13745;
  --surface-disabled: #FFE7E5;
  --surface-list: #FFF7F6;
  --surface-discrete-area: #FFE7E5;
  --icon-primary: #AB2D39;
  --icon-secondary: #E8585B;
  --icon-call-out: #D13745;
  --icon-warning: #F46866;
  --icon-error: #AB2D39;
  --icon-on-primary: #FFFFFF;
  --icon-success: #DC4750;
  --icon-information: #AB2D39;
  --line-separating-content: #F46866;
  --line-highlighting-content: #D13745;
}
/* 3. Fonts - font-face declarations */
/**
 * Do not edit directly
 * Generated automatically from design tokens
 */
/* Google Fonts imports */
/* 4. Typography Utilities - typography classes (.heading-1, .text-white, etc.) */
/**
 * Typography Utility Classes
 * Lore Design System
 * 
 * Apply these classes to any HTML element to style text according to design system tokens.
 * 
 * Usage:
 *   <h1 class="heading-1">Welcome</h1>
 *   <p class="body-medium">This is body text.</p>
 */
/* Headings */
.heading-1 {
    margin: 0;
    font-family: var(--typography-font-families-montserrat);
    font-size: var(--typography-font-sizes-4xl);
    font-weight: var(--typography-font-weights-bold);
    line-height: var(--typography-line-heights-tight);
}
.heading-2 {
    margin: 0;
    font-family: var(--typography-font-families-montserrat);
    font-size: var(--typography-font-sizes-3xl);
    font-weight: var(--typography-font-weights-bold);
    line-height: var(--typography-line-heights-tight);
}
.heading-3 {
    margin: 0;
    font-family: var(--typography-font-families-montserrat);
    font-size: var(--typography-font-sizes-2xl);
    font-weight: var(--typography-font-weights-bold);
    line-height: var(--typography-line-heights-tight);
}
/* Body Text */
.body-large {
    margin: 0;
    font-family: var(--typography-font-families-roboto);
    font-size: var(--typography-font-sizes-lg);
    font-weight: var(--typography-font-weights-regular);
    line-height: var(--typography-line-heights-tight);
}
.body-medium {
    margin: 0;
    font-family: var(--typography-font-families-roboto);
    font-size: var(--typography-font-sizes-base);
    font-weight: var(--typography-font-weights-regular);
    line-height: var(--typography-line-heights-normal);
}
.body-small {
    margin: 0;
    font-family: var(--typography-font-families-roboto);
    font-size: var(--typography-font-sizes-sm);
    font-weight: var(--typography-font-weights-regular);
    line-height: var(--typography-line-heights-relaxed);
}
.body-extra-small {
    margin: 0;
    font-family: var(--typography-font-families-roboto);
    font-size: var(--typography-font-sizes-xs);
    font-weight: var(--typography-font-weights-regular);
    line-height: var(--typography-line-heights-relaxed);
}
/* Labels */
.label {
    margin: 0;
    font-family: var(--typography-font-families-roboto);
    font-size: var(--typography-font-sizes-sm);
    font-weight: var(--typography-font-weights-bold);
    line-height: var(--typography-line-heights-relaxed);
}
/* Semantic Color Utilities (Recommended - adapts to light/dark mode) */
.text-primary {
    color: var(--text-primary);
}
.text-secondary {
    color: var(--text-secondary);
}
.text-call-out {
    color: var(--text-call-out);
}
.text-on-primary {
    color: var(--text-on-primary);
}
.text-on-color {
    color: var(--text-on-color);
}
.text-on-gradient {
    color: var(--text-on-gradient);
}
/* Primitive Color Utilities */
.text-gray-900 {
    color: var(--greyscale-900);
}
.text-gray-700 {
    color: var(--greyscale-700);
}
.text-gray-600 {
    color: var(--greyscale-600);
}
.text-teal-700 {
    color: var(--teal-700);
}
.text-teal-600 {
    color: var(--teal-600);
}
.text-green-700 {
    color: var(--green-700);
}
.text-green-600 {
    color: var(--green-600);
}
.text-white {
    color: var(--greyscale-white);
}
.text-black {
    color: var(--greyscale-900);
}
/* Text Alignment Utilities */
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}
/* Font Weight Utilities */
.font-light {
    font-weight: var(--typography-font-weights-light);
}
.font-regular {
    font-weight: var(--typography-font-weights-regular);
}
.font-medium {
    font-weight: var(--typography-font-weights-medium);
}
.font-semibold {
    font-weight: var(--typography-font-weights-semibold);
}
.font-bold {
    font-weight: var(--typography-font-weights-bold);
}
.font-black {
    font-weight: var(--typography-font-weights-black);
}
/* 5. Spacing Utilities - margin and padding classes (.m-4, .p-8, etc.) */
/**
 * Spacing Utilities
 * Margin and padding utilities using design system spacing tokens
 */
/* Margin - All sides */
.m-0 {
    margin: var(--spacing-none);
}
.m-1 {
    margin: var(--spacing-4);
}
.m-2 {
    margin: var(--spacing-8);
}
.m-3 {
    margin: var(--spacing-12);
}
.m-4 {
    margin: var(--spacing-16);
}
.m-6 {
    margin: var(--spacing-24);
}
.m-8 {
    margin: var(--spacing-32);
}
.m-12 {
    margin: var(--spacing-48);
}
/* Margin - Top */
.mt-0 {
    margin-top: var(--spacing-none);
}
.mt-1 {
    margin-top: var(--spacing-4);
}
.mt-2 {
    margin-top: var(--spacing-8);
}
.mt-3 {
    margin-top: var(--spacing-12);
}
.mt-4 {
    margin-top: var(--spacing-16);
}
.mt-6 {
    margin-top: var(--spacing-24);
}
.mt-8 {
    margin-top: var(--spacing-32);
}
.mt-12 {
    margin-top: var(--spacing-48);
}
/* Margin - Right */
.mr-0 {
    margin-right: var(--spacing-none);
}
.mr-1 {
    margin-right: var(--spacing-4);
}
.mr-2 {
    margin-right: var(--spacing-8);
}
.mr-3 {
    margin-right: var(--spacing-12);
}
.mr-4 {
    margin-right: var(--spacing-16);
}
.mr-6 {
    margin-right: var(--spacing-24);
}
.mr-8 {
    margin-right: var(--spacing-32);
}
.mr-12 {
    margin-right: var(--spacing-48);
}
/* Margin - Bottom */
.mb-0 {
    margin-bottom: var(--spacing-none);
}
.mb-1 {
    margin-bottom: var(--spacing-4);
}
.mb-2 {
    margin-bottom: var(--spacing-8);
}
.mb-3 {
    margin-bottom: var(--spacing-12);
}
.mb-4 {
    margin-bottom: var(--spacing-16);
}
.mb-6 {
    margin-bottom: var(--spacing-24);
}
.mb-8 {
    margin-bottom: var(--spacing-32);
}
.mb-12 {
    margin-bottom: var(--spacing-48);
}
/* Margin - Left */
.ml-0 {
    margin-left: var(--spacing-none);
}
.ml-1 {
    margin-left: var(--spacing-4);
}
.ml-2 {
    margin-left: var(--spacing-8);
}
.ml-3 {
    margin-left: var(--spacing-12);
}
.ml-4 {
    margin-left: var(--spacing-16);
}
.ml-6 {
    margin-left: var(--spacing-24);
}
.ml-8 {
    margin-left: var(--spacing-32);
}
.ml-12 {
    margin-left: var(--spacing-48);
}
/* Margin - Horizontal (left + right) */
.mx-0 {
    margin-right: var(--spacing-none);
    margin-left: var(--spacing-none);
}
.mx-1 {
    margin-right: var(--spacing-4);
    margin-left: var(--spacing-4);
}
.mx-2 {
    margin-right: var(--spacing-8);
    margin-left: var(--spacing-8);
}
.mx-3 {
    margin-right: var(--spacing-12);
    margin-left: var(--spacing-12);
}
.mx-4 {
    margin-right: var(--spacing-16);
    margin-left: var(--spacing-16);
}
.mx-6 {
    margin-right: var(--spacing-24);
    margin-left: var(--spacing-24);
}
.mx-8 {
    margin-right: var(--spacing-32);
    margin-left: var(--spacing-32);
}
.mx-12 {
    margin-right: var(--spacing-48);
    margin-left: var(--spacing-48);
}
.mx-auto {
    margin-right: auto;
    margin-left: auto;
}
/* Margin - Vertical (top + bottom) */
.my-0 {
    margin-top: var(--spacing-none);
    margin-bottom: var(--spacing-none);
}
.my-1 {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}
.my-2 {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}
.my-3 {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-12);
}
.my-4 {
    margin-top: var(--spacing-16);
    margin-bottom: var(--spacing-16);
}
.my-6 {
    margin-top: var(--spacing-24);
    margin-bottom: var(--spacing-24);
}
.my-8 {
    margin-top: var(--spacing-32);
    margin-bottom: var(--spacing-32);
}
.my-12 {
    margin-top: var(--spacing-48);
    margin-bottom: var(--spacing-48);
}
/* Padding - All sides */
.p-0 {
    padding: var(--spacing-none);
}
.p-1 {
    padding: var(--spacing-4);
}
.p-2 {
    padding: var(--spacing-8);
}
.p-3 {
    padding: var(--spacing-12);
}
.p-4 {
    padding: var(--spacing-16);
}
.p-6 {
    padding: var(--spacing-24);
}
.p-8 {
    padding: var(--spacing-32);
}
.p-12 {
    padding: var(--spacing-48);
}
/* Padding - Top */
.pt-0 {
    padding-top: var(--spacing-none);
}
.pt-1 {
    padding-top: var(--spacing-4);
}
.pt-2 {
    padding-top: var(--spacing-8);
}
.pt-3 {
    padding-top: var(--spacing-12);
}
.pt-4 {
    padding-top: var(--spacing-16);
}
.pt-6 {
    padding-top: var(--spacing-24);
}
.pt-8 {
    padding-top: var(--spacing-32);
}
.pt-12 {
    padding-top: var(--spacing-48);
}
/* Padding - Right */
.pr-0 {
    padding-right: var(--spacing-none);
}
.pr-1 {
    padding-right: var(--spacing-4);
}
.pr-2 {
    padding-right: var(--spacing-8);
}
.pr-3 {
    padding-right: var(--spacing-12);
}
.pr-4 {
    padding-right: var(--spacing-16);
}
.pr-6 {
    padding-right: var(--spacing-24);
}
.pr-8 {
    padding-right: var(--spacing-32);
}
.pr-12 {
    padding-right: var(--spacing-48);
}
/* Padding - Bottom */
.pb-0 {
    padding-bottom: var(--spacing-none);
}
.pb-1 {
    padding-bottom: var(--spacing-4);
}
.pb-2 {
    padding-bottom: var(--spacing-8);
}
.pb-3 {
    padding-bottom: var(--spacing-12);
}
.pb-4 {
    padding-bottom: var(--spacing-16);
}
.pb-6 {
    padding-bottom: var(--spacing-24);
}
.pb-8 {
    padding-bottom: var(--spacing-32);
}
.pb-12 {
    padding-bottom: var(--spacing-48);
}
/* Padding - Left */
.pl-0 {
    padding-left: var(--spacing-none);
}
.pl-1 {
    padding-left: var(--spacing-4);
}
.pl-2 {
    padding-left: var(--spacing-8);
}
.pl-3 {
    padding-left: var(--spacing-12);
}
.pl-4 {
    padding-left: var(--spacing-16);
}
.pl-6 {
    padding-left: var(--spacing-24);
}
.pl-8 {
    padding-left: var(--spacing-32);
}
.pl-12 {
    padding-left: var(--spacing-48);
}
/* Padding - Horizontal (left + right) */
.px-0 {
    padding-right: var(--spacing-none);
    padding-left: var(--spacing-none);
}
.px-1 {
    padding-right: var(--spacing-4);
    padding-left: var(--spacing-4);
}
.px-2 {
    padding-right: var(--spacing-8);
    padding-left: var(--spacing-8);
}
.px-3 {
    padding-right: var(--spacing-12);
    padding-left: var(--spacing-12);
}
.px-4 {
    padding-right: var(--spacing-16);
    padding-left: var(--spacing-16);
}
.px-6 {
    padding-right: var(--spacing-24);
    padding-left: var(--spacing-24);
}
.px-8 {
    padding-right: var(--spacing-32);
    padding-left: var(--spacing-32);
}
.px-12 {
    padding-right: var(--spacing-48);
    padding-left: var(--spacing-48);
}
/* Padding - Vertical (top + bottom) */
.py-0 {
    padding-top: var(--spacing-none);
    padding-bottom: var(--spacing-none);
}
.py-1 {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
}
.py-2 {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}
.py-3 {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
}
.py-4 {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
}
.py-6 {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
}
.py-8 {
    padding-top: var(--spacing-32);
    padding-bottom: var(--spacing-32);
}
.py-12 {
    padding-top: var(--spacing-48);
    padding-bottom: var(--spacing-48);
}
/* 6. Background Utilities - background colors and gradients (.bg-teal-700, etc.) */
/**
 * Background Utilities
 * Background color and gradient utilities using design system tokens
 */
/* Base Colors */
.bg-white {
    background-color: var(--greyscale-white);
}
.bg-black {
    background-color: var(--greyscale-900);
}
/* Brand Green */
.bg-green-50 {
    background-color: var(--green-50);
}
.bg-green-100 {
    background-color: var(--green-100);
}
.bg-green-200 {
    background-color: var(--green-200);
}
.bg-green-300 {
    background-color: var(--green-300);
}
.bg-green-400 {
    background-color: var(--green-400);
}
.bg-green-500 {
    background-color: var(--green-500);
}
.bg-green-600 {
    background-color: var(--green-600);
}
.bg-green-700 {
    background-color: var(--green-700);
}
.bg-green-800 {
    background-color: var(--green-800);
}
.bg-green-900 {
    background-color: var(--green-900);
}
/* Brand Teal */
.bg-teal-50 {
    background-color: var(--teal-50);
}
.bg-teal-100 {
    background-color: var(--teal-100);
}
.bg-teal-200 {
    background-color: var(--teal-200);
}
.bg-teal-300 {
    background-color: var(--teal-300);
}
.bg-teal-400 {
    background-color: var(--teal-400);
}
.bg-teal-500 {
    background-color: var(--teal-500);
}
.bg-teal-600 {
    background-color: var(--teal-600);
}
.bg-teal-700 {
    background-color: var(--teal-700);
}
.bg-teal-800 {
    background-color: var(--teal-800);
}
.bg-teal-900 {
    background-color: var(--teal-900);
}
/* Greyscale */
.bg-gray-50 {
    background-color: var(--greyscale-white);
}
.bg-gray-100 {
    background-color: var(--greyscale-100);
}
.bg-gray-200 {
    background-color: var(--greyscale-200);
}
.bg-gray-300 {
    background-color: var(--greyscale-300);
}
.bg-gray-400 {
    background-color: var(--greyscale-400);
}
.bg-gray-500 {
    background-color: var(--greyscale-500);
}
.bg-gray-600 {
    background-color: var(--greyscale-600);
}
.bg-gray-700 {
    background-color: var(--greyscale-700);
}
.bg-gray-800 {
    background-color: var(--greyscale-800);
}
.bg-gray-900 {
    background-color: var(--greyscale-900);
}
/* Alert Red */
.bg-red-400 {
    background-color: var(--red-400);
}
.bg-red-700 {
    background-color: var(--red-700);
}
.bg-red-900 {
    background-color: var(--red-900);
}
/* Secondary Blue */
.bg-blue-500 {
    background-color: var(--indigo-500);
}
.bg-blue-900 {
    background-color: var(--indigo-900);
}
/* Secondary Purple */
.bg-purple-500 {
    background-color: var(--purple-500);
}
.bg-purple-900 {
    background-color: var(--purple-900);
}
/* Secondary Yellow */
.bg-yellow-500 {
    background-color: var(--yellow-500);
}
.bg-yellow-900 {
    background-color: var(--yellow-900);
}
/* Gradients - Horizontal */
.bg-gradient-teal-to-green-h {
    background: var(--gradients-teal-to-green-horizontal);
}
.bg-gradient-green-to-teal-h {
    background: var(--gradients-green-to-teal-horizontal);
}
/* Gradients - Vertical */
.bg-gradient-teal-to-green-v {
    background: var(--gradients-teal-to-green-vertical);
}
.bg-gradient-green-to-teal-v {
    background: var(--gradients-green-to-teal-vertical);
}
/* Background Transparency */
.bg-transparent {
    background-color: transparent;
}
/* 7. Layout Utilities - display, flexbox, grid (.flex, .justify-center, etc.) */
/**
 * Layout Utilities
 * Display, flexbox, and grid utilities
 */
/* Display */
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.grid {
    display: grid;
}
.inline-grid {
    display: inline-grid;
}
.hidden {
    display: none;
}
/* Flex Direction */
.flex-row {
    flex-direction: row;
}
.flex-row-reverse {
    flex-direction: row-reverse;
}
.flex-col {
    flex-direction: column;
}
.flex-col-reverse {
    flex-direction: column-reverse;
}
/* Flex Wrap */
.flex-wrap {
    flex-wrap: wrap;
}
.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
/* Justify Content */
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
.justify-evenly {
    justify-content: space-evenly;
}
/* Align Items */
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline;
}
.items-stretch {
    align-items: stretch;
}
/* Align Self */
.self-auto {
    align-self: auto;
}
.self-start {
    align-self: flex-start;
}
.self-end {
    align-self: flex-end;
}
.self-center {
    align-self: center;
}
.self-stretch {
    align-self: stretch;
}
/* Gap (using spacing tokens) */
.gap-0 {
    gap: var(--spacing-none);
}
.gap-1 {
    gap: var(--spacing-4);
}
.gap-2 {
    gap: var(--spacing-8);
}
.gap-3 {
    gap: var(--spacing-12);
}
.gap-4 {
    gap: var(--spacing-16);
}
.gap-6 {
    gap: var(--spacing-24);
}
.gap-8 {
    gap: var(--spacing-32);
}
.gap-12 {
    gap: var(--spacing-48);
}
/* Flex Grow & Shrink */
.flex-1 {
    flex: 1 1 0%;
}
.flex-auto {
    flex: 1 1 auto;
}
.flex-initial {
    flex: 0 1 auto;
}
.flex-none {
    flex: none;
}
.grow {
    flex-grow: 1;
}
.grow-0 {
    flex-grow: 0;
}
.shrink {
    flex-shrink: 1;
}
.shrink-0 {
    flex-shrink: 0;
}
/* Width */
.w-auto {
    width: auto;
}
.w-full {
    width: 100%;
}
.w-screen {
    width: 100vw;
}
/* Height */
.h-auto {
    height: auto;
}
.h-full {
    height: 100%;
}
.h-screen {
    height: 100vh;
}
/* Min/Max Width */
.min-w-0 {
    min-width: 0;
}
.min-w-full {
    min-width: 100%;
}
.max-w-full {
    max-width: 100%;
}
/* Min/Max Height */
.min-h-0 {
    min-height: 0;
}
.min-h-full {
    min-height: 100%;
}
.min-h-screen {
    min-height: 100vh;
}
.max-h-full {
    max-height: 100%;
}
.max-h-screen {
    max-height: 100vh;
}
/* Overflow */
.overflow-auto {
    overflow: auto;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-visible {
    overflow: visible;
}
.overflow-scroll {
    overflow: scroll;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
/* Position */
.static {
    position: static;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}
/* 8. Shadow Utilities - box shadows (.shadow-sm, .shadow-md, etc.) */
/**
 * Shadow Utilities
 * Box shadow utilities using design system tokens
 */
.shadow-sm {
    box-shadow: var(--box-shadow-shadow-sm);
}
.shadow-md {
    box-shadow: var(--box-shadow-shadow-md);
}
.shadow-lg {
    box-shadow: var(--box-shadow-shadow-lg);
}
.shadow-none {
    box-shadow: none;
}
/* 9. Scroll Lock - shared body scroll lock for overlay components (Sheet, Modal) */
/* Global body scroll lock - applied when any sheet/modal is open */
html:has(body.lore-scroll-lock),
body.lore-scroll-lock {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  top: calc(-1 * var(--scroll-y, 0px)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* WebKit/iOS WebView specific fixes */
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}
/* Lock Ionic IonContent when body scroll is locked (for mfe-bridge environments) */
body.lore-scroll-lock ion-content {
  --overflow: hidden !important;
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}
/* 10. Component Styles - component-specific CSS (Spinner, etc.) */
/**
 * Lore Design System - Component Styles
 * 
 * This file imports all component-specific styles.
 * Components that need custom CSS should have their styles here.
 */
/* ===== Legacy styles (in styles/components/) ===== */
/* Spinner component styles */
/* Lore Design System - Spinner Component */
.lore-spinner {
  display: inline-block;
  border-style: solid;
  border-radius: 50%;
  animation: lore-spin 1s linear infinite;
  box-sizing: border-box;
}
/* Size variants */
.lore-spinner--sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
.lore-spinner--md {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
.lore-spinner--lg {
  width: 44px;
  height: 44px;
  border-width: 4px;
}
/* Color variants */
.lore-spinner--green {
  border-color: var(--spinner-success);
  border-bottom-color: transparent;
}
.lore-spinner--neutral {
  border-color: var(--spinner-neutral);
  border-bottom-color: transparent;
}
.lore-spinner--teal {
  border-color: var(--spinner-primary);
  border-bottom-color: transparent;
}
.lore-spinner--white {
  border-color: var(--spinner-inverse);
  border-bottom-color: transparent;
}
.lore-sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(100%);
  white-space: nowrap;
}
@keyframes lore-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
/* Input component styles */
/* Hide native browser clear button for search inputs */
input[type="search"]::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
            appearance: none;
}
/* Hide native search decoration */
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
            appearance: none;
}
/* Remove rounded corners on iOS Safari */
input[type="search"] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
/* Toggle component styles */
/**
 * Toggle Component Styles
 * 
 * Additional CSS for the Toggle component.
 * Design tokens are defined in variables.css
 */
/* Ensure smooth transitions on the toggle */
.lore-toggle-track {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.lore-toggle-thumb {
    transition: left 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
/* Focus ring for accessibility */
.lore-toggle input[type="checkbox"]:focus-visible+.lore-toggle-track {
    outline: 2px solid var(--toggle-track-border-checked);
    outline-offset: 2px;
}
/* ===== Component-colocated styles (imported directly from component directories) ===== */
/* Sheet component styles */
/* Sheet Component Styles */
.lore-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--sheet-overlay-bg);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: var(--sheet-z-index);
  touch-action: none; /* Prevent page scrolling when interacting with sheet */
  overscroll-behavior: none; /* Prevent page scroll bounce/overscroll */
  
  /* iOS-style backdrop blur for modern browsers */
  backdrop-filter: blur(var(--sheet-backdrop-blur));
}
/* Notification sheets - lighter overlay, higher z-index */
.lore-sheet-overlay--notification {
  z-index: var(--sheet-z-index-notification);
  background-color: var(--sheet-overlay-bg-notification);
}
/* Notification sheet container styling */
.lore-sheet-overlay--notification .lore-sheet-container {
  box-shadow: var(--sheet-shadow-notification);
}
.lore-sheet-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--sheet-container-bg);
  border-top-left-radius: var(--sheet-border-radius-top);
  border-top-right-radius: var(--sheet-border-radius-top);
  box-shadow: var(--sheet-shadow);
  will-change: transform;
  transform: translateY(100%); /* Start hidden */
  touch-action: pan-y; /* Allow vertical dragging for sheet gestures, prevent page scroll */
  /* Force container to be viewport height for correct percentage-based transforms */
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.lore-sheet-content {
  /* Remove padding - let the content components handle their own spacing */
  padding: 0;
  /* Safe area inset for iPhone home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* Critical: Prevent touch gestures from propagating to background webview scroll */
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Wrapper for sheet content to ensure proper scrolling behavior */
.lore-sheet-content > * {
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allow flex child to shrink */
}
/* 
 * Scrollable content area - auto-applies scroll constraints
 * Usage: Add data-sheet-scrollable attribute to your scrollable content
 * 
 * The --sheet-visible-height CSS variable is set by JavaScript when the sheet
 * opens or snaps to a breakpoint, allowing content to dynamically constrain
 * its height based on the current sheet position.
 * 
 * @example
 * <div data-sheet-scrollable>
 *   {your scrollable content}
 * </div>
 */
[data-sheet-scrollable] {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* Critical for flex scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
  overscroll-behavior: contain; /* Prevent scroll chaining */
}
/* Constrain scrollable area height based on current breakpoint position */
.lore-sheet-content [data-sheet-scrollable] {
  /* 
   * Use JS-provided --sheet-visible-height variable for dynamic height constraint.
   * Subtract content offset for drag indicator + breathing room.
   * Falls back to 100vh - offset if variable not set (shouldn't happen in normal use).
   */
  max-height: calc(var(--sheet-visible-height, 100vh) - var(--sheet-content-offset));
}
.lore-sheet-drag-indicator {
  width: var(--sheet-drag-indicator-width);
  height: var(--sheet-drag-indicator-height);
  background-color: var(--sheet-drag-indicator-bg);
  border-radius: var(--sheet-drag-indicator-border-radius);
  margin: var(--sheet-drag-indicator-margin) auto;
  cursor: grab;
}
/* Animation is handled entirely by JavaScript to avoid conflicts */
.lore-sheet-overlay--open {
  /* Just controls backdrop visibility, transform handled by JS */
}
/* LoadingSkeleton component styles */
/* Generic LoadingSkeleton - Clean, reusable skeleton components */
/* Base skeleton animation */
@keyframes skeleton-pulse {
  0% {
    background-position: calc(-1 * var(--skeleton-gradient-size)) 0;
  }
  100% {
    background-position: calc(var(--skeleton-gradient-size) + 100%) 0;
  }
}
/* Base skeleton background - applied to all skeleton types */
.lore-skeleton-box,
.lore-skeleton-line,
.lore-skeleton-circle {
  background: linear-gradient(90deg, var(--skeleton-gradient-color-1) 25%, var(--skeleton-gradient-color-2) 50%, var(--skeleton-gradient-color-1) 75%);
  background-size: var(--skeleton-gradient-size) 100%;
  animation: skeleton-pulse var(--skeleton-animation-duration) infinite;
}
/* Primitive Components */
.lore-skeleton-box {
  display: block;
  margin-bottom: var(--skeleton-box-margin-bottom);
}
.lore-skeleton-line {
  display: block;
  margin-bottom: var(--skeleton-line-margin-bottom);
}
.lore-skeleton-circle {
  border-radius: 50%;
  margin-bottom: var(--skeleton-circle-margin-bottom);
}
/* Generic Layout Patterns */
.lore-card-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--skeleton-card-gap);
  padding: var(--skeleton-card-padding);
  border: 1px solid var(--skeleton-card-border-color);
  border-radius: var(--skeleton-card-border-radius);
  background-color: var(--skeleton-card-bg);
}
.lore-card-skeleton__content {
  display: flex;
  flex-direction: column;
  gap: var(--skeleton-card-content-gap);
}
.lore-list-item-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--skeleton-list-item-gap);
  padding: var(--skeleton-list-item-padding-vertical) 0;
}
/* ErrorDisplay component styles */
/* ErrorDisplay Component Styles */
/* Typography handled by Typography component - only layout and variant styles here */
.lore-error-display {
  position: relative;
  border-radius: var(--error-display-border-radius);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
/* Content container */
.lore-error-display__content {
  display: flex;
  flex-direction: column;
  gap: var(--error-display-content-gap);
}
.lore-error-display__message-container {
  display: flex;
  align-items: flex-start;
  gap: var(--error-display-message-container-gap);
}
.lore-error-display__text-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--error-display-text-content-gap);
  min-width: 0;
}
.lore-error-display__title {
  /* Typography component handles font styles */
}
.lore-error-display__message {
  /* Typography component handles font styles */
  word-wrap: break-word;
}
/* Icon styles */
.lore-error-display__icon-container {
  flex-shrink: 0;
  margin-top: var(--error-display-icon-margin-top);
}
.lore-error-display__icon {
  width: var(--error-display-icon-size);
  height: var(--error-display-icon-size);
  color: var(--error-display-icon-color);
}
/* Action buttons container */
.lore-error-display__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--error-display-actions-gap);
  margin-top: var(--error-display-actions-margin-top);
}
.lore-error-display__action-button {
  flex-shrink: 0;
}
/* Dismiss button */
.lore-error-display__dismiss-button {
  position: absolute;
  top: var(--spacing-8);
  right: var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--error-display-dismiss-padding);
  border: none;
  border-radius: var(--error-display-dismiss-border-radius);
  color: var(--error-display-dismiss-color);
  background: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.lore-error-display__dismiss-button:hover {
  color: var(--error-display-dismiss-color-hover);
  background-color: var(--error-display-dismiss-bg-hover);
}
.lore-error-display__dismiss-button:focus {
  outline: var(--error-display-dismiss-outline-width) solid var(--error-display-dismiss-outline-color);
  outline-offset: var(--error-display-dismiss-outline-offset);
}
/* Variant: Inline (default) */
.lore-error-display--inline {
  padding: var(--error-display-inline-padding);
  border: 1px solid var(--error-display-inline-border-color);
  background-color: var(--error-display-inline-bg);
}
.lore-error-display--inline .lore-error-display__title {
  color: var(--error-display-inline-title-color);
}
.lore-error-display--inline .lore-error-display__message {
  color: var(--error-display-inline-message-color);
}
/* Variant: Toast */
.lore-error-display--toast {
  position: fixed;
  top: var(--spacing-24);
  right: var(--spacing-24);
  z-index: var(--error-display-toast-z-index);
  min-width: var(--error-display-toast-min-width);
  max-width: var(--error-display-toast-max-width);
  padding: var(--error-display-toast-padding);
  border: 1px solid var(--error-display-toast-border-color);
  box-shadow: var(--error-display-toast-shadow);
  background-color: var(--error-display-toast-bg);
  transition: all var(--error-display-transition-duration) ease;
}
.lore-error-display--toast.lore-error-display--hidden {
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
}
/* Variant: Banner */
.lore-error-display--banner {
  margin-bottom: var(--error-display-banner-margin-bottom);
  padding: var(--error-display-banner-padding-vertical) var(--error-display-banner-padding-horizontal);
  border-left: var(--error-display-banner-border-width) solid var(--error-display-banner-border-color);
  background-color: var(--error-display-banner-bg);
}
.lore-error-display--banner .lore-error-display__content {
  gap: var(--error-display-message-container-gap);
}
.lore-error-display--banner .lore-error-display__title {
  color: var(--error-display-banner-title-color);
}
.lore-error-display--banner .lore-error-display__message {
  color: var(--error-display-banner-message-color);
}
.lore-error-display--banner .lore-error-display__actions {
  margin-top: 0;
}
/* Variant: Modal */
.lore-error-display--modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: var(--error-display-modal-z-index);
  min-width: var(--error-display-modal-min-width);
  max-width: var(--error-display-modal-max-width);
  max-height: var(--error-display-modal-max-height);
  padding: var(--error-display-modal-padding);
  border-radius: var(--error-display-modal-border-radius);
  box-shadow: var(--error-display-modal-shadow);
  overflow-y: auto;
  background-color: var(--error-display-modal-bg);
  transition: all var(--error-display-transition-duration) ease;
  transform: translate(-50%, -50%);
}
.lore-error-display--modal.lore-error-display--hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  pointer-events: none;
}
.lore-error-display--modal .lore-error-display__text-content {
  gap: var(--spacing-8);
}
.lore-error-display--modal .lore-error-display__actions {
  justify-content: flex-end;
  margin-top: var(--spacing-24);
}
/* Modal backdrop */
.lore-error-display--modal::before {
  position: fixed;
  z-index: -1;
  background-color: var(--error-display-modal-backdrop-bg);
  pointer-events: auto;
  content: "";
  inset: 0;
}
/* Mobile optimizations */
@media (width <= 480px) {
  .lore-error-display--toast {
    top: var(--spacing-12);
    right: var(--spacing-12);
    left: var(--spacing-12);
    min-width: auto;
    max-width: none;
  }

  .lore-error-display--modal {
    top: var(--spacing-24);
    right: var(--spacing-12);
    left: var(--spacing-12);
    min-width: auto;
    max-height: calc(100vh - 40px);
    transform: none;
  }

  .lore-error-display--modal.lore-error-display--hidden {
    transform: scale(0.95);
  }

  .lore-error-display__actions {
    flex-direction: column;
  }

  .lore-error-display__actions .lore-error-display__action-button {
    width: 100%;
  }

  .lore-error-display__message-container {
    gap: var(--spacing-8);
  }
}
/* TabBar component styles */
/* TabBar Component Styles */
.lore-tab-bar {
  position: relative;
  display: flex;
  width: 100%;
}
.lore-tab-bar__item {
  flex: 1;
  padding: var(--tab-bar-item-padding-vertical) var(--tab-bar-item-padding-horizontal);
  border: none;
  font-family: var(--tab-bar-item-font-family);
  font-size: var(--tab-bar-item-font-size);
  font-weight: var(--tab-bar-item-font-weight);
  text-align: center;
  color: var(--tab-bar-item-color-inactive);
  background: none;
  transition: color var(--tab-bar-transition-duration) var(--tab-bar-transition-timing);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Truncate long labels at large font scale */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lore-tab-bar__item:focus {
  outline: none;
}
.lore-tab-bar__item--active {
  color: var(--tab-bar-item-color-active);
}
.lore-tab-bar__indicator {
  position: absolute;
  bottom: 0;
  height: var(--tab-bar-indicator-height);
  border-radius: var(--tab-bar-indicator-border-radius);
  background-color: var(--tab-bar-indicator-color);
  transition: transform var(--tab-bar-transition-duration) var(--tab-bar-transition-timing), width var(--tab-bar-transition-duration) var(--tab-bar-transition-timing);
}
/* PageHeader component styles */
/* PageHeader Component Styles */
/* Single wrapper: padding and flex layout on the header only (no inner .navigation) */
.pageHeader {
  position: relative;
  z-index: var(--page-header-z-index);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--page-header-min-height);
  padding: var(--page-header-padding-vertical) var(--page-header-padding-horizontal);
  background-color: var(--page-header-bg-default);
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
/* Sticky positioning */
.pageHeader.sticky {
  position: sticky;
  top: 0;
}
/* Background variants */
.pageHeader.variant-default {
  background-color: var(--page-header-bg-default);
}
.pageHeader.variant-transparent {
  background-color: var(--page-header-bg-transparent);
}
.pageHeader.variant-primary {
  color: var(--text-on-primary);
  background-color: var(--page-header-bg-primary);
}
/* Action sections */
.pageHeader .leadingActions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--page-header-actions-gap);
}
.pageHeader .centerContent {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* When center content has a title, ensure proper spacing for absolute centering */
.pageHeader .centerContent--hasTitle {
  position: absolute;
  right: 0;
  left: 0;
  justify-content: center;
  pointer-events: none;
}
.pageHeader .centerContent--hasTitle > * {
  pointer-events: auto;
}
.pageHeader .trailingActions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--page-header-actions-gap);
}
/* Action wrapper for consistent spacing */
.pageHeader .actionWrapper {
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.pageHeader .actionWrapper > button {
  border: none;
  background: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
/* Back Navigation Link */
/* stylelint-disable order/properties-order */
.pageHeader .pageHeader__backLink {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: var(--page-header-back-link-gap);
  font-family: var(--page-header-back-link-font-family);
  font-size: var(--page-header-back-link-font-size);
  font-weight: var(--page-header-back-link-font-weight);
  line-height: var(--typography-line-heights-normal);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* Note: color is set via inline style to ensure it overrides inherited button colors */
}
/* stylelint-enable order/properties-order */
.pageHeader .pageHeader__backLink:focus {
  outline: none;
}
.pageHeader .pageHeader__backLink svg {
  width: var(--page-header-back-link-icon-size);
  height: var(--page-header-back-link-icon-size);
}
/* Title Styles */
.pageHeader .pageHeader__title {
  margin: 0;
  font-family: var(--page-header-title-font-family);
  font-size: var(--page-header-title-font-size);
  font-weight: var(--page-header-title-font-weight);
  line-height: var(--typography-line-heights-normal);
  color: var(--page-header-title-color);
}
.pageHeader .pageHeader__title--left {
  text-align: left;
}
.pageHeader .pageHeader__title--center {
  text-align: center;
}
/* Mobile optimizations */
@media (width <= 480px) {
  .pageHeader {
    min-height: var(--page-header-min-height-mobile);
  }

  .pageHeader .leadingActions,
  .pageHeader .trailingActions {
    gap: var(--page-header-actions-gap-mobile);
  }
}
/* Tablet optimizations */
@media (width >= 768px) {
  .pageHeader {
    min-height: var(--page-header-min-height-tablet);
  }

  .pageHeader .leadingActions,
  .pageHeader .trailingActions {
    gap: var(--page-header-actions-gap-tablet);
  }
}
/* InfoButton component styles */
.infoButton {
  padding: var(--info-button-padding);
  border: var(--info-button-border);
  background: var(--info-button-background);
  cursor: var(--info-button-cursor);
  -webkit-tap-highlight-color: transparent;
}
.infoButton:focus {
  outline: none;
}
/* MaintenanceScreen component styles */
/* MaintenanceScreen Component Styles */
/* Typography handled by Typography component - only layout styles here */
.maintenance-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--maintenance-screen-bg);
  box-sizing: border-box;
}
.maintenance-screen__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--maintenance-screen-container-gap);
  width: 100%;
  max-width: var(--maintenance-screen-container-max-width);
  padding: var(--maintenance-screen-container-padding-block) var(--maintenance-screen-container-padding-inline);
  box-sizing: border-box;
}
.maintenance-screen__illustration {
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  line-height: var(--maintenance-screen-illustration-line-height);
  place-items: start;
}
.maintenance-screen__illustration svg {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
/* SessionExpired component styles */
/* SessionExpired Component Styles */
/* Typography handled by Typography component - only layout styles here */
.session-expired {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--session-expired-bg);
  box-sizing: border-box;
}
.session-expired__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--session-expired-container-gap);
  width: 100%;
  max-width: var(--session-expired-container-max-width);
  padding: var(--session-expired-container-padding-block) var(--session-expired-container-padding-inline);
  box-sizing: border-box;
}
.session-expired__illustration {
  display: inline-grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  line-height: var(--session-expired-illustration-line-height);
  place-items: start;
}
.session-expired__illustration svg {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
/* Link component styles */
/* Link Component Styles */
.lore-link {
  display: inline-flex;
  align-items: center;
  gap: var(--link-gap);
  font-family: var(--link-font-family);
  font-size: inherit;
  font-weight: var(--link-font-weight);
  line-height: inherit;
  -webkit-text-decoration: var(--link-text-decoration);
          text-decoration: var(--link-text-decoration);
  color: var(--link-color-default);
  transition: color var(--link-transition-duration) var(--link-transition-timing);
  cursor: pointer;
}
.lore-link:hover {
  color: var(--link-color-hover);
}
.lore-link:active {
  color: var(--link-color-active);
}
.lore-link:focus-visible {
  border-radius: var(--link-focus-border-radius);
  outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
  outline-offset: var(--link-focus-outline-offset);
}
/* Default variant */
.lore-link--default {
  color: var(--link-color-default);
}
/* Subtle variant - secondary text color */
.lore-link--subtle {
  font-weight: var(--link-font-weight-subtle);
  color: var(--link-color-subtle);
}
.lore-link--subtle:hover {
  color: var(--link-color-subtle-hover);
}
/* Underline variant - always underlined (same as default now) */
.lore-link--underline {
  -webkit-text-decoration: var(--link-text-decoration);
          text-decoration: var(--link-text-decoration);
}
/* Disabled state */
.lore-link--disabled {
  color: var(--link-color-disabled);
  opacity: var(--link-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
/* External icon */
.lore-link__external-icon {
  flex-shrink: 0;
  width: var(--link-external-icon-size);
  height: var(--link-external-icon-size);
}
/* DatePicker component styles */
/* DatePicker Component Styles */
.datepicker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--input-gap);
  width: 100%;
  font-family: var(--input-font-family);
}
/* Label */
.datepicker-label {
  font-size: var(--input-label-font-size);
  font-weight: var(--input-label-font-weight);
  line-height: 1.4;
  color: var(--input-label-text-default);
}
.datepicker--disabled .datepicker-label {
  color: var(--input-label-text-disabled);
}
.datepicker-asterisk {
  color: var(--input-asterisk);
}
/* Input wrapper */
.datepicker-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.datepicker--disabled .datepicker-input-wrapper {
  cursor: not-allowed;
}
/* Input */
.datepicker-input {
  width: 100%;
  min-height: 2.222rem;
  padding: var(--input-padding);
  padding-right: var(--datepicker-input-padding-right);
  border: 2px solid var(--input-border-default);
  border-radius: var(--input-border-radius);
  font-family: inherit;
  font-size: var(--input-font-size);
  color: var(--input-text-default);
  background: var(--input-bg-default);
  transition: border-color var(--datepicker-transition-duration) var(--datepicker-transition-timing);
  cursor: pointer;
  box-sizing: border-box;
}
.datepicker-input::-moz-placeholder {
  color: var(--input-text-placeholder);
}
.datepicker-input::placeholder {
  color: var(--input-text-placeholder);
}
.datepicker-input:focus {
  border-color: var(--input-border-focus);
  outline: none;
}
.datepicker--error .datepicker-input {
  border-color: var(--input-border-error);
}
.datepicker--disabled .datepicker-input {
  border-color: var(--input-border-disabled);
  color: var(--input-text-disabled);
  background: var(--input-bg-disabled);
  cursor: not-allowed;
}
/* Clear button */
.datepicker-clear {
  position: absolute;
  right: var(--datepicker-clear-right);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--datepicker-clear-size);
  height: var(--datepicker-clear-size);
  padding: 0;
  border: none;
  border-radius: var(--border-radius-radius-full);
  color: var(--datepicker-clear-icon-color);
  background: var(--datepicker-clear-bg);
  transition: background-color var(--datepicker-transition-duration) var(--datepicker-transition-timing);
  cursor: pointer;
}
.datepicker-clear:hover {
  background: var(--datepicker-clear-bg-hover);
}
/* Calendar icon */
.datepicker-icon {
  position: absolute;
  right: var(--datepicker-icon-right);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--datepicker-icon-color);
  pointer-events: none;
}
/* Helper text */
.datepicker-helper {
  font-size: var(--input-helper-font-size);
  line-height: 1.4;
  color: var(--input-helper-text-default);
}
.datepicker--error .datepicker-helper {
  color: var(--input-helper-text-error);
}
/* Calendar dropdown */
.datepicker-calendar {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--datepicker-calendar-z-index);
  width: var(--datepicker-calendar-width);
  margin-top: var(--spacing-8);
  padding: var(--spacing-16);
  border: 1px solid var(--datepicker-calendar-border);
  border-radius: var(--input-border-radius);
  box-shadow: var(--datepicker-calendar-shadow);
  background: var(--datepicker-calendar-bg);
}
/* Calendar header */
.datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-12);
}
.datepicker-month-year {
  font-size: var(--typography-font-sizes-base);
  font-weight: var(--typography-font-weights-semibold);
  color: var(--datepicker-month-year-color);
}
.datepicker-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--datepicker-nav-size);
  height: var(--datepicker-nav-size);
  padding: 0;
  border: none;
  border-radius: var(--border-radius-radius-md);
  color: var(--datepicker-nav-icon-color);
  background: transparent;
  transition: background-color var(--datepicker-transition-duration) var(--datepicker-transition-timing);
  cursor: pointer;
}
.datepicker-nav:hover {
  background: var(--datepicker-nav-bg-hover);
}
/* Weekday headers */
.datepicker-weekdays {
  display: grid;
  gap: var(--datepicker-weekday-gap);
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--spacing-8);
}
.datepicker-weekday {
  padding: var(--spacing-4);
  font-size: var(--typography-font-sizes-xs);
  font-weight: var(--typography-font-weights-medium);
  text-align: center;
  color: var(--datepicker-weekday-color);
}
/* Days grid */
.datepicker-days {
  display: grid;
  gap: var(--datepicker-day-gap);
  grid-template-columns: repeat(7, 1fr);
}
.datepicker-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--datepicker-day-size);
  height: var(--datepicker-day-size);
  padding: 0;
  border: none;
  border-radius: var(--border-radius-radius-md);
  font-size: var(--typography-font-sizes-sm);
  color: var(--datepicker-day-color);
  background: var(--datepicker-day-bg);
  transition: background-color var(--datepicker-transition-duration) var(--datepicker-transition-timing), color var(--datepicker-transition-duration) var(--datepicker-transition-timing);
  cursor: pointer;
}
.datepicker-day:hover:not(.datepicker-day--disabled, .datepicker-day--selected) {
  background: var(--datepicker-day-hover-bg);
}
.datepicker-day--empty {
  cursor: default;
}
.datepicker-day--today {
  font-weight: var(--datepicker-day-today-font-weight);
  color: var(--datepicker-day-today-color);
}
.datepicker-day--selected {
  font-weight: var(--datepicker-day-selected-font-weight);
  color: var(--datepicker-day-selected-color);
  background: var(--datepicker-day-selected-bg);
}
.datepicker-day--disabled {
  color: var(--datepicker-day-disabled-color);
  opacity: var(--datepicker-day-disabled-opacity);
  cursor: not-allowed;
}
/* Badge component styles */
/**
 * Badge Component Styles
 * 
 * Uses design tokens for all values to ensure consistency
 * and automatic dark mode support.
 */
/* Base badge styles */
.lore-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--badge-gap);
  padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
  border-radius: var(--badge-border-radius);
  font-family: var(--badge-font-family);
  font-weight: var(--badge-font-weight);
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-sizing: border-box;
}
/* Size variants */
.lore-badge--sm {
  height: var(--badge-height-sm);
  font-size: var(--badge-font-size-sm);
}
.lore-badge--md {
  height: var(--badge-height-md);
  font-size: var(--badge-font-size-md);
}
/* Border variant */
.lore-badge--bordered {
  border: var(--badge-border-width) solid var(--badge-border-color);
}
/* Status dot */
.lore-badge__dot {
  width: var(--badge-dot-size);
  height: var(--badge-dot-size);
  border-radius: var(--badge-border-radius-full);
  flex-shrink: 0;
}
/* Icon container */
.lore-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lore-badge--sm .lore-badge__icon {
  width: var(--badge-icon-size-sm);
  height: var(--badge-icon-size-sm);
}
.lore-badge--sm .lore-badge__icon > * {
  width: 100%;
  height: 100%;
}
.lore-badge--md .lore-badge__icon {
  width: var(--badge-icon-size-md);
  height: var(--badge-icon-size-md);
}
.lore-badge--md .lore-badge__icon > * {
  width: 100%;
  height: 100%;
}
/* Text container */
.lore-badge__text {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ============================================
   STAT VARIANT
   For points, streaks, and other metrics
   ============================================ */
.lore-badge--stat {
  border-radius: var(--border-radius-radius-md);
  min-width: 3.333rem;
}
/* Stat - Blue (Streaks) */
.lore-badge--stat-blue {
  background-color: var(--badge-stat-blue-bg);
  color: var(--badge-stat-blue-text);
}
/* Stat - Yellow (Points) */
.lore-badge--stat-yellow {
  background-color: var(--badge-stat-yellow-bg);
  color: var(--badge-stat-yellow-text);
}
/* ============================================
   STATUS VARIANT
   For in-progress, completed, available, etc.
   ============================================ */
.lore-badge--status {
  border-radius: var(--badge-border-radius);
}
/* Status - Success (In Progress) */
.lore-badge--status-success {
  background-color: var(--badge-status-success-bg);
  color: var(--badge-status-success-text);
}
.lore-badge--status-success .lore-badge__dot {
  background-color: var(--badge-status-success-dot);
}
/* Status - Neutral (Completed) */
.lore-badge--status-neutral {
  background-color: var(--badge-status-neutral-bg);
  color: var(--badge-status-neutral-text);
}
/* Status - Info */
.lore-badge--status-info {
  background-color: var(--badge-status-info-bg);
  color: var(--badge-status-info-text);
}
.lore-badge--status-info .lore-badge__dot {
  background-color: var(--badge-status-info-dot);
}
/* Status - Warning */
.lore-badge--status-warning {
  background-color: var(--badge-status-warning-bg);
  color: var(--badge-status-warning-text);
}
.lore-badge--status-warning .lore-badge__dot {
  background-color: var(--badge-status-warning-dot);
}
/* Status - Error */
.lore-badge--status-error {
  background-color: var(--badge-status-error-bg);
  color: var(--badge-status-error-text);
}
.lore-badge--status-error .lore-badge__dot {
  background-color: var(--badge-status-error-dot);
}
/* ============================================
   COUNT VARIANT
   For notification counts, pagination, etc.
   ============================================ */
.lore-badge--count {
  border-radius: var(--badge-border-radius);
  min-width: var(--badge-height-sm);
}
.lore-badge--count.lore-badge--md {
  min-width: var(--badge-height-md);
}
/* Count - Primary (Teal) */
.lore-badge--count-primary {
  background-color: var(--badge-count-primary-bg);
  color: var(--badge-count-primary-text);
}
/* Count - Secondary (Gray) */
.lore-badge--count-secondary {
  background-color: var(--badge-count-secondary-bg);
  color: var(--badge-count-secondary-text);
}
/* Modal component styles */
/* Modal Component Styles */
/* Backdrop – full-screen semi-opaque layer */
.lore-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--modal-z-index, 1000);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.55));
  touch-action: none;
  overscroll-behavior: none;
}
/* Modal container – flex column so content can scroll and button stays at bottom; overflow visible so silhouette image can extend above */
.lore-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--modal-width, 320px);
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 80px);
  border-radius: var(--modal-border-radius, 16px);
  background-color: var(--modal-bg, #ffffff);
  box-shadow: var(--modal-shadow, 0 8px 32px rgba(0, 0, 0, 0.24));
  overflow: visible;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  --modal-title-color: var(--text-call-out);
}
/* When a header image is present, round the top corners to match the bottom */
.lore-modal--has-header-image {
  border-top-left-radius: var(--modal-border-radius, 16px);
  border-top-right-radius: var(--modal-border-radius, 16px);
}
/* No top padding when header image is present so the title sits directly under the image when offset is 0 */
.lore-modal--has-header-image .lore-modal__content {
  padding-top: 0;
}
/* Header image area – 8px horizontal inset so the modal box extends 8px beyond the image on the sides */
.lore-modal__header-image {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding-left: 6px;
  padding-right: 6px;
  box-sizing: border-box;
  pointer-events: none;
  line-height: 0;
}
.lore-modal__image {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
/* Text content – scrollable when tall; takes remaining space so button stays at bottom */
.lore-modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: var(--spacing-24) var(--spacing-24) 0;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Title – uses --modal-title-color (default: call-out blue); override via prop or CSS variable */
.lore-modal__title {
  color: var(--modal-title-color);
}
/* Body text – left-aligned (CSS ensures it wins over inherited or global styles) */
.lore-modal__body {
  text-align: left;
}
/* Action button area – stays at bottom of white box; button spans width of text content */
.lore-modal__actions {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-24);
  box-sizing: border-box;
}
.lore-modal__actions button {
  width: 100%;
  min-width: 0;
}
/* Mobile optimisations */
@media (width <=480px) {
  .lore-modal {
    width: calc(100vw - 32px);
  }
}
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*
! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .\!container{
    max-width: 640px !important;
  }
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  }
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .\!container{
    max-width: 1024px !important;
  }
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .\!container{
    max-width: 1280px !important;
  }
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .\!container{
    max-width: 1536px !important;
  }
  .container{
    max-width: 1536px;
  }
}
.visible{
  visibility: visible;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-0{
  inset: 0px;
}
.z-50{
  z-index: 50;
}
.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.ml-3{
  margin-left: 0.75rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.block{
  display: block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.hidden{
  display: none;
}
.h-10{
  height: 2.5rem;
}
.h-12{
  height: 3rem;
}
.h-2{
  height: 0.5rem;
}
.h-4{
  height: 1rem;
}
.h-5{
  height: 1.25rem;
}
.h-6{
  height: 1.5rem;
}
.h-\[24px\]{
  height: 24px;
}
.h-full{
  height: 100%;
}
.h-screen{
  height: 100vh;
}
.min-h-0{
  min-height: 0px;
}
.w-10{
  width: 2.5rem;
}
.w-12{
  width: 3rem;
}
.w-2{
  width: 0.5rem;
}
.w-4{
  width: 1rem;
}
.w-5{
  width: 1.25rem;
}
.w-6{
  width: 1.5rem;
}
.w-\[24px\]{
  width: 24px;
}
.w-full{
  width: 100%;
}
.min-w-\[200px\]{
  min-width: 200px;
}
.max-w-\[calc\(100vw-32px\)\]{
  max-width: calc(100vw - 32px);
}
.max-w-md{
  max-width: 28rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-shrink-0{
  flex-shrink: 0;
}
@keyframes bounce{
  0%, 100%{
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50%{
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce{
  animation: bounce 1s infinite;
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.cursor-pointer{
  cursor: pointer;
}
.resize{
  resize: both;
}
.list-inside{
  list-style-position: inside;
}
.list-decimal{
  list-style-type: decimal;
}
.flex-col{
  flex-direction: column;
}
.items-start{
  align-items: flex-start;
}
.items-center{
  align-items: center;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-2{
  gap: 0.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.overflow-y-auto{
  overflow-y: auto;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-blue-500{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-400{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-opacity-50{
  --tw-bg-opacity: 0.5;
}
.p-1{
  padding: 0.25rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-6{
  padding: 1.5rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold{
  font-weight: 700;
}
.font-medium{
  font-weight: 500;
}
.font-semibold{
  font-weight: 600;
}
.text-\[\#3794aa\]{
  --tw-text-opacity: 1;
  color: rgb(55 148 170 / var(--tw-text-opacity, 1));
}
.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-600{
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150{
  transition-duration: 150ms;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
}
body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  position: fixed;
  width: 100%;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1f2937;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#root {
  height: 100%;
  height: 100dvh;
  width: 100%;
  position: relative;
  overflow: hidden;
}
:root {
  --lore-teal: #3794AA;
  --text-dark: #111827;
  --text-medium: #374151;
  --text-light: #4b5563;
  --border-gray: #f3f4f6;
  --orange-accent: #FFBF69;
  --color-lore-teal: #3794AA;
  --color-orange-accent: #FFBF69;
  --font-family-roboto: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  --font-family-montserrat: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}
/* PDF View Styles */
.pdf-view {
  width: 100%;
  max-width: 896px;
  margin: 0 auto;
  background: #ffffff;
  min-height: 100vh;
}
.pdf-header {
  padding: 16px 16px 0;
  border-bottom: 1px solid #e5e7eb;
}
@media (min-width: 640px) {
  .pdf-header {
    padding: 32px 32px 0;
  }
}
.pdf-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
.pdf-logo {
  display: flex;
  align-items: center;
  height: 40px;
}
.pdf-logo-text {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  letter-spacing: 0.5px;
}
.pdf-content {
  padding: 16px;
}
@media (min-width: 640px) {
  .pdf-content {
    padding: 32px;
  }
}
.pdf-title-section {
  margin-bottom: 48px;
}
.pdf-title {
  font-size: 30px;
  font-weight: 700;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #3794AA;
  margin: 0 0 16px 0;
  line-height: 36px;
}
.pdf-description {
  font-size: 16px;
  line-height: 24px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #4b5563;
  margin: 0;
}
.pdf-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 14px;
}
@media (min-width: 640px) {
  .pdf-section {
    padding: 33px;
  }
}
.pdf-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.pdf-section-title {
  font-size: 24px;
  font-weight: 600;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #3794AA;
  margin: 0;
  line-height: 32px;
}
.pdf-section-content {
  margin-top: 0;
}
.pdf-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pdf-list-item {
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  line-height: 24px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
}
.pdf-bullet {
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #1f2937;
  border-radius: 50%;
  margin-right: 24px;
  margin-top: 10px;
  flex-shrink: 0;
}
.pdf-list-text {
  flex: 1;
}
.pdf-paragraph {
  font-size: 16px;
  line-height: 26px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #374151;
  margin: 0;
  white-space: pre-wrap;
}
/* Print Styles */
@media print {
  @page {
    size: letter;
    margin: 0.5in;
  }
  body {
    background: white;
  }
  .pdf-view {
    max-width: 100%;
    margin: 0;
    box-shadow: none;
  }
  .pdf-header {
    padding: 0 0 24px 0;
    border-bottom: 2px solid #e5e7eb;
  }
  .pdf-content {
    padding: 0;
  }
  .pdf-section {
    page-break-inside: avoid;
    border: none;
    padding: 0;
    margin-bottom: 32px;
  }
  .pdf-title-section {
    margin-bottom: 48px;
  }
  .no-print {
    display: none !important;
  }
}
/* PDF Preview Styles (for screen viewing) */
.pdf-preview-container {
  background: #f3f4f6;
  padding: 12px;
  min-height: 100vh;
}
@media (min-width: 640px) {
  .pdf-preview-container {
    padding: 24px;
  }
}
.pdf-preview-wrapper {
  max-width: 896px;
  margin: 0 auto;
  background: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}
/* Editor View Styles */
.editor-container {
  max-width: 832px;
  margin: 0 auto;
  padding: 16px;
}
@media (min-width: 640px) {
  .editor-container {
    padding: 32px;
  }
}
.editor-title-section {
  margin-bottom: 48px;
}
.editor-title {
  font-size: 30px;
  font-weight: 700;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #3794AA;
  margin: 0 0 16px 0;
  line-height: 36px;
}
.editor-description {
  font-size: 16px;
  line-height: 24px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #4b5563;
  margin: 0;
}
.editor-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 14px;
}
@media (min-width: 640px) {
  .editor-section {
    padding: 33px;
  }
}
.editor-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.editor-section-title {
  font-size: 24px;
  font-weight: 600;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #3794AA;
  margin: 0;
  line-height: 32px;
}
.editor-section-content {
  margin-top: 0;
}
.editor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.editor-list-item {
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  line-height: 24px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
}
.editor-bullet {
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #1f2937;
  border-radius: 50%;
  margin-right: 24px;
  margin-top: 10px;
  flex-shrink: 0;
}
.editor-list-text {
  flex: 1;
}
.editor-paragraph {
  font-size: 16px;
  line-height: 26px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #374151;
  margin: 0;
  white-space: pre-wrap;
}
/* Button Styles */
.btn-primary {
  background-color: #3794AA;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (min-width: 640px) {
  .btn-primary {
    height: 36px;
    min-height: 36px;
  }
}
.btn-primary:hover {
  background-color: #2d7a8a;
}
.btn-secondary {
  background-color: white;
  color: #3794AA;
  border: 1px solid #3794AA;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (min-width: 640px) {
  .btn-secondary {
    height: 36px;
    min-height: 36px;
  }
}
.btn-secondary:hover {
  background-color: #f0f9fa;
}
.btn-outline {
  background-color: white;
  color: #1f2937;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (min-width: 640px) {
  .btn-outline {
    height: 36px;
    min-height: 36px;
  }
}
.btn-outline:hover {
  background-color: #f8f9fa;
}
.btn-icon {
  background-color: #FFBF69;
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
}
@media (min-width: 640px) {
  .btn-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
}
.btn-icon:hover {
  background-color: #ffa855;
}
/* Mobile-Specific Utilities */
.mobile-safe-top {
  padding-top: env(safe-area-inset-top);
}
.mobile-safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.touch-target {
  min-width: 44px;
  min-height: 44px;
}
/* Mobile Scroll Behavior */
@media (max-width: 639px) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  * {
    -webkit-overflow-scrolling: touch;
  }
  body {
    font-size: 16px;
  }
  button {
    min-height: 44px;
  }
  input:focus {
    margin-bottom: 8px;
  }
}
/* Safe area handling for iOS devices */
@supports (padding: max(0px)) {
  .safe-area-top {
    padding-top: max(env(safe-area-inset-top), 0px);
  }
  .safe-area-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
  }
}
/* Better viewport height handling for mobile */
@supports (height: 100dvh) {
  html {
    height: 100dvh;
  }
}
/* Fix for iOS Safari viewport issues */
@supports (-webkit-touch-callout: none) {
  html {
    height: -webkit-fill-available;
  }
}
/* ========================================
   Landing Page Styles
   ======================================== */
.landing-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(138deg, #e6f7f9 0%, #e8f4f8 50%, #e8f8f5 100%);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
}
/* Header */
.landing-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  border-bottom: 1px solid #d0ebef;
  padding: 16px 24px;
}
@media (min-width: 640px) {
  .landing-header {
    padding: 24px 104px;
  }
}
.landing-logo {
  height: 40px;
  width: auto;
}
@media (min-width: 640px) {
  .landing-logo {
    height: 48px;
  }
}
/* Main Content */
.landing-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 16px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 640px) {
  .landing-main {
    gap: 24px;
    padding: 24px 24px;
  }
}
/* Welcome Section */
.welcome-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: 672px;
}
.welcome-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #b3e8ee;
  border-radius: 50%;
  padding: 12px;
}
.welcome-icon svg {
  width: 24px;
  height: 24px;
  color: #3794AA;
}
.welcome-title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: #212529;
  margin: 0;
}
@media (min-width: 640px) {
  .welcome-title {
    font-size: 48px;
  }
}
.welcome-subtitle {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #343a40;
  margin: 0;
  max-width: 472px;
}
@media (min-width: 640px) {
  .welcome-subtitle {
    font-size: 20px;
    line-height: 1.6;
  }
}
/* Login Card */
.login-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 24px 24px;
  width: 100%;
  max-width: 672px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 640px) {
  .login-card {
    padding: 24px;
  }
}
.login-card-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.login-icon-wrapper {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #e6f7f9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-header-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login-title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  color: #212529;
  margin: 0;
}
@media (min-width: 640px) {
  .login-title {
    font-size: 24px;
  }
}
.login-description {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #495057;
  margin: 0;
}
@media (min-width: 640px) {
  .login-description {
    font-size: 16px;
  }
}
.login-error {
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 16px;
}
.login-error p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: #dc2626;
  margin: 0;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-group {
  display: flex;
  flex-direction: column;
}
.form-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.form-input-wrapper .input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none;
}
.form-input-wrapper .input-icon svg {
  width: 20px;
  height: 20px;
}
.form-input-wrapper .form-input {
  padding-left: 48px;
}
.form-input {
  width: 100%;
  padding: 14px 16px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  color: #212529;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 8px;
  outline: none;
  transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.form-input::-moz-placeholder {
  color: #6b7280;
  font-size: 14px;
}
.form-input::placeholder {
  color: #6b7280;
  font-size: 14px;
}
.form-input:focus {
  border-color: #4dcad8;
  background: #fff;
  font-size: 16px;
  outline: none;
}
.form-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (max-width: 639px) {
  .form-input {
    font-size: 16px;
  }
  .form-input:focus {
    font-size: 16px;
  }
  .form-input {
    min-height: 44px;
  }
}
.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: #3794AA;
  color: white;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
  min-height: 48px;
}
@media (min-width: 640px) {
  .login-button {
    font-size: 18px;
  }
}
.login-button:hover:not(:disabled) {
  background: #2d7a8a;
}
.login-button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}
/* Feature Cards */
.feature-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
}
@media (min-width: 640px) {
  .feature-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
.feature-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.feature-icon {
  width: 48px;
  height: 48px;
  background: #b3e8ee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: #212529;
  margin: 0;
}
@media (min-width: 640px) {
  .feature-title {
    font-size: 18px;
  }
}
.feature-description {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #495057;
  margin: 0;
}
@media (min-width: 640px) {
  .feature-description {
    font-size: 14px;
  }
}
/* Footer */
.landing-footer {
  background: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  padding: 20px 24px;
  text-align: center;
}
@media (min-width: 640px) {
  .landing-footer {
    padding: 25px 104px;
  }
}
.landing-footer p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: #495057;
  margin: 0;
}
.footer-link {
  color: #2c7689;
  text-decoration: underline;
}
.footer-link:hover {
  color: #3794AA;
}
.hover\:bg-blue-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
@media (min-width: 640px){
  .sm\:mx-4{
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .sm\:mb-4{
    margin-bottom: 1rem;
  }
  .sm\:mb-6{
    margin-bottom: 1.5rem;
  }
  .sm\:mt-6{
    margin-top: 1.5rem;
  }
  .sm\:h-16{
    height: 4rem;
  }
  .sm\:h-6{
    height: 1.5rem;
  }
  .sm\:h-8{
    height: 2rem;
  }
  .sm\:max-h-\[90vh\]{
    max-height: 90vh;
  }
  .sm\:w-16{
    width: 4rem;
  }
  .sm\:w-6{
    width: 1.5rem;
  }
  .sm\:w-8{
    width: 2rem;
  }
  .sm\:w-auto{
    width: auto;
  }
  .sm\:flex-row{
    flex-direction: row;
  }
  .sm\:gap-3{
    gap: 0.75rem;
  }
  .sm\:space-x-0 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(0px * var(--tw-space-x-reverse));
    margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
  }
  .sm\:space-y-3 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
  }
  .sm\:rounded-lg{
    border-radius: 0.5rem;
  }
  .sm\:p-4{
    padding: 1rem;
  }
  .sm\:p-6{
    padding: 1.5rem;
  }
  .sm\:p-8{
    padding: 2rem;
  }
  .sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .sm\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .sm\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .sm\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .sm\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .sm\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
.artifact-content {
  width: 100%;
  max-width: 806px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.artifact-content__section {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  padding: 16px 32px;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
}

.artifact-content__heading {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: #3794AA;
  margin: 0;
}

.artifact-content__text {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 25.5px;
  color: #212529;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.artifact-content__text p {
  margin: 0;
}
.artifact-content__text p + p {
  margin-top: 1em;
}

.artifact-content__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 25.5px;
  color: #212529;
  width: 100%;
}

.artifact-content__list-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.artifact-content__bullet {
  color: #3794AA;
  flex-shrink: 0;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.artifact-content__pairs,
.artifact-content__groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.artifact-content__pair,
.artifact-content__group {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 25.5px;
  color: #212529;
  width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.artifact-content__pair p,
.artifact-content__group p {
  margin: 0;
}
.artifact-content__pair h4,
.artifact-content__group h4 {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin: 0 0 12px;
  color: #2d7a8a;
}

.artifact-content__pair {
  position: relative;
  padding-left: calc(12px + 10px);
}
.artifact-content__pair::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #3794AA;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.artifact-content__pair-prompt {
  font-weight: 500;
  color: #2d7a8a;
  margin-bottom: 4px !important;
}

.artifact-content__pair-response {
  color: #364153;
}

.artifact-content__textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px;
  border: 1px solid #3794AA;
  border-radius: 8px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 25.5px;
  color: #212529;
  background: #ffffff;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.artifact-content__textarea:focus {
  border-color: #13707f;
  box-shadow: 0 0 0 2px rgba(19, 112, 127, 0.2);
}

.artifact-content__textarea--small {
  min-height: 72px;
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .artifact-content__heading {
    font-size: 20px;
    line-height: 28px;
  }
  .artifact-content__section {
    padding: 16px;
  }
  .artifact-content__text,
  .artifact-content__list,
  .artifact-content__pair,
  .artifact-content__group {
    font-size: 16px;
    line-height: 24px;
  }
}
.lore-note-pdf .artifact-content {
  gap: 32px;
}
.lore-note-pdf .artifact-content__section {
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}.kebab-menu {
  position: relative;
  display: inline-flex;
}
.kebab-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: #3794AA;
  cursor: pointer;
  transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
}
.kebab-menu__trigger:hover {
  background-color: #f3f4f6;
  color: #2d7a8a;
}
.kebab-menu__trigger:focus {
  outline: 2px solid #3794AA;
  outline-offset: 2px;
}
.kebab-menu__trigger[aria-expanded=true] {
  background-color: #f3f4f6;
  color: #2d7a8a;
}
.kebab-menu__trigger--with-label {
  width: auto;
  height: 40px;
  padding: 10px 16px 10px 12px;
  gap: 4px;
  border-radius: 8px;
}
@media (max-width: 1024px) {
  .kebab-menu__trigger--with-label {
    padding: 8px 12px 8px 10px;
    height: 36px;
  }
  .kebab-menu__trigger--with-label svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 768px) {
  .kebab-menu__trigger--with-label {
    width: 40px;
    height: 40px;
    padding: 8px;
    justify-content: center;
  }
}
.kebab-menu__label {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #3794AA;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .kebab-menu__label {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .kebab-menu__label {
    display: none;
  }
}.lore-note-metadata-container {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  width: -moz-fit-content;
  width: fit-content;
  flex-wrap: wrap;
  margin-left: auto;
  position: relative;
  z-index: 10;
}
.lore-note-metadata-container label {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #374151;
  white-space: nowrap;
}
.lore-note-metadata-container input[type=date] {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #111827;
  cursor: pointer;
}
.lore-note-metadata-container input[type=date]:focus {
  outline: none;
  border-color: #3794AA;
  box-shadow: 0 0 0 2px rgba(19, 112, 127, 0.1);
}
.lore-note-metadata-container input[type=date]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.lore-note-metadata-container .saving-indicator {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
  white-space: nowrap;
}

.lore-note-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
}
.lore-note-page.lore-note-pdf {
  background: white;
}
.lore-note-page.lore-note-pdf .lore-note-header {
  display: none;
}
.lore-note-page.lore-note-pdf .lore-note-body {
  background: white;
}
@media print {
  .lore-note-page {
    min-height: auto;
  }
}

.lore-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 83px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid #dee2e6;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .lore-note-header {
    padding: 0 12px;
  }
}
@media (max-width: 480px) {
  .lore-note-header {
    padding: 0 8px;
  }
}
@media print {
  .lore-note-header {
    display: none !important;
  }
}

.lore-note-body {
  flex: 1;
  background: #f8f9fa;
  width: 100%;
  overflow-y: auto;
}
@media print {
  .lore-note-body {
    background: white;
    overflow: visible;
  }
}

.lore-note-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  padding: 32px;
  width: 896px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .lore-note-content {
    width: 100%;
    padding: 24px;
  }
}
@media (max-width: 600px) {
  .lore-note-content {
    padding: 16px;
  }
}
@media print {
  .lore-note-content {
    padding: 0;
    width: 100%;
    max-width: 100%;
    page-break-inside: avoid;
  }
}

.lore-note-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 1;
  min-width: 0;
}
@media (max-width: 480px) {
  .lore-note-header-left {
    gap: 4px;
  }
}

.lore-note-logo {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}
.lore-note-logo img {
  height: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.lore-note-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .lore-note-header-actions {
    gap: 4px;
  }
}
@media print {
  .lore-note-header-actions {
    display: none !important;
  }
}

.btn-filled,
.btn-outlined {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 10px 24px;
  border-radius: 8px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  cursor: pointer;
  border: 2px solid;
  transition: all 200ms ease-in-out;
  white-space: nowrap;
}
.btn-filled svg,
.btn-outlined svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-filled {
  background: #13707f;
  border-color: #13707f;
  color: white;
  padding-left: 16px;
}
.btn-filled:hover {
  background: #0f5a6a;
  border-color: #0f5a6a;
}

.btn-outlined {
  background: transparent;
  border-color: #d8d8d8;
  color: #000000;
  padding-left: 24px;
  padding-right: 24px;
}
.btn-outlined:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.lore-note-title-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .lore-note-title-section {
    padding: 0 16px;
  }
}

.lore-note-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 600px) {
  .lore-note-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

.lore-note-title-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .lore-note-title-actions {
    gap: 12px;
  }
}
@media (max-width: 600px) {
  .lore-note-title-actions {
    gap: 8px;
  }
}
@media print {
  .lore-note-title-actions {
    display: none !important;
  }
}

.lore-note-action-btn {
  font-size: 18px !important;
  white-space: nowrap;
}
.lore-note-action-btn svg {
  width: 24px !important;
  height: 24px !important;
}
@media (max-width: 1024px) {
  .lore-note-action-btn {
    font-size: 16px !important;
  }
  .lore-note-action-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
}

.lore-note-logout-btn {
  font-size: 18px !important;
  color: #3794AA !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.lore-note-logout-btn svg {
  width: 24px !important;
  height: 24px !important;
}
.lore-note-logout-btn:hover {
  color: #2d7a8a !important;
}
@media (max-width: 1024px) {
  .lore-note-logout-btn {
    font-size: 16px !important;
  }
  .lore-note-logout-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
}
@media (max-width: 768px) {
  .lore-note-logout-btn {
    font-size: 0 !important;
    gap: 0 !important;
    padding: 8px !important;
    min-width: 40px !important;
  }
  .lore-note-logout-btn svg {
    width: 24px !important;
    height: 24px !important;
  }
}

.lore-note-title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  color: #3794AA;
  margin: 0;
  white-space: nowrap;
}

.btn-edit-title,
.btn-save-title {
  background: white;
  border: 1px solid #3794AA;
  border-radius: 8px;
  height: 36px;
  width: 78.922px;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  padding: 0;
  box-sizing: border-box;
}
.btn-edit-title:hover,
.btn-save-title:hover {
  background-color: rgba(55, 148, 170, 0.08);
}
.btn-edit-title svg,
.btn-save-title svg {
  width: 16px;
  height: 16px;
  color: #3794AA;
  margin-left: 12px;
}
.btn-edit-title span,
.btn-save-title span {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #3794AA;
  margin-left: 8px;
  margin-right: 12px;
}
@media print {
  .btn-edit-title,
  .btn-save-title {
    display: none !important;
  }
}

.lore-note-points-banner {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 8px 12px;
  width: 100%;
  text-align: center;
}

.lore-note-subtitle {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: #4a5565;
  margin: 0;
  width: 100%;
}

.lore-note-artifact-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.lore-note-artifact-selector label {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4a5565;
}
.lore-note-artifact-selector select {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #ffffff;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  color: #1f2937;
}

.lore-note-summary,
.lore-note-questions,
.lore-note-artifact-content {
  width: 100%;
  max-width: 806.39px;
}
@media print {
  .lore-note-summary,
  .lore-note-questions,
  .lore-note-artifact-content {
    page-break-inside: avoid;
  }
}.chat-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 24px;
  box-sizing: border-box;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
}
@media (max-width: 700px) {
  .chat-message {
    padding: 12px 16px;
  }
}
.chat-message {
  /* User message variant (blue background) - right-aligned */
}
.chat-message-user {
  background: #3794AA;
  border-radius: 16px 16px 6px 16px;
  align-self: flex-end;
  max-width: 80%;
  margin-left: auto;
}
.chat-message {
  /* Builder message variant (white background) - left-aligned */
}
.chat-message-builder {
  background: white;
  border-radius: 16px 16px 16px 6px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  gap: 8px;
  align-self: flex-start;
  max-width: 80%;
  margin-right: auto;
}
.chat-message-header {
  display: flex;
  gap: 8px;
  align-items: center;
  height: 24px;
  width: 100%;
}
.chat-message-icon {
  background: #b3e8ee;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-message-icon svg {
  width: 16px;
  height: 16px;
  color: #13707f;
}
.chat-message-speaker {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: #13707f;
  margin: 0;
  white-space: nowrap;
}
.chat-message-text-user {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: white;
  margin: 0;
  width: 100%;
  max-width: 616px;
  white-space: pre-wrap;
}
@media (max-width: 700px) {
  .chat-message-text-user {
    max-width: 100%;
    font-size: 15px;
    line-height: 24px;
  }
}
.chat-message-text-builder {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: #212529;
  margin: 0;
  width: 100%;
  max-width: 627px;
  white-space: pre-line;
}
@media (max-width: 700px) {
  .chat-message-text-builder {
    max-width: 100%;
    font-size: 15px;
    line-height: 24px;
  }
}.text-entry-container {
  background: white;
  border-top: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 17px 24px 24px 24px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}
@media (max-width: 768px) {
  .text-entry-container {
    padding: 12px 16px 16px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

.text-entry-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.text-entry-input-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  min-height: 56px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .text-entry-input-wrapper {
    gap: 8px;
    min-height: 56px;
  }
}

.text-entry-input-shell {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}
.text-entry-input-shell.can-expand .text-entry-input {
  padding-right: 46px;
}

.text-entry-input {
  width: 100%;
  background: #f3f4f6;
  border: 2px solid #ced4da;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: #000000;
  min-height: 56px;
  max-height: 200px;
  resize: none;
  outline: none;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-y: hidden;
  transition: background 200ms ease-in-out, border-color 200ms ease-in-out;
}
.text-entry-input.expanded {
  min-height: 160px;
  max-height: 360px;
}
.text-entry-input:focus {
  border-color: #13707f;
  background: white;
}
.text-entry-input::-moz-placeholder {
  color: #717182;
  font-size: 16px;
  line-height: 22.857px;
}
.text-entry-input::placeholder {
  color: #717182;
  font-size: 16px;
  line-height: 22.857px;
}
@media (max-width: 768px) {
  .text-entry-input {
    min-height: 48px;
    font-size: 16px;
    line-height: 24px;
  }
}

.text-entry-expand-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #595959;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms ease-in-out, color 200ms ease-in-out;
}
.text-entry-expand-btn:hover, .text-entry-expand-btn:focus-visible {
  background: rgba(19, 112, 127, 0.1);
  color: #13707f;
  outline: none;
}
.text-entry-expand-btn:active {
  background: rgba(19, 112, 127, 0.16);
}
@media (max-width: 768px) {
  .text-entry-expand-btn {
    width: 36px;
    height: 36px;
  }
}

.text-entry-send-btn {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 200ms ease-in-out;
  padding: 8px 12px;
  box-sizing: border-box;
}
.text-entry-send-btn.enabled {
  background: #13707f;
  color: white;
}
.text-entry-send-btn.enabled:hover {
  background: #0f5a6a;
}
.text-entry-send-btn.enabled:active {
  background: #0d4a57;
}
.text-entry-send-btn.disabled {
  background: rgba(29, 27, 32, 0.12);
  color: rgba(0, 0, 0, 0.38);
  cursor: not-allowed;
}
.text-entry-send-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .text-entry-send-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }
}

.text-entry-voice-btn {
  position: relative;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 8px;
  border: 2px solid #13707f;
  background: white;
  color: #13707f;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms ease-in-out, border-color 200ms ease-in-out, color 200ms ease-in-out;
}
.text-entry-voice-btn::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: calc(8px + 7px);
  border: 2px solid transparent;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.86);
}
.text-entry-voice-btn:hover, .text-entry-voice-btn:focus-visible {
  background: rgba(19, 112, 127, 0.1);
  outline: none;
}
.text-entry-voice-btn:active {
  background: rgba(19, 112, 127, 0.16);
}
.text-entry-voice-btn.active {
  border-color: #9f2d3f;
  background: #9f2d3f;
  color: white;
  box-shadow: 0 0 0 4px rgba(159, 45, 63, 0.14);
}
.text-entry-voice-btn.active::after {
  border-color: rgba(159, 45, 63, 0.38);
  animation: voice-listening-pulse 1.35s ease-out infinite;
  opacity: 1;
}
.text-entry-voice-btn.active:hover, .text-entry-voice-btn.active:focus-visible {
  background: #852637;
  border-color: #852637;
}
.text-entry-voice-btn.disabled {
  border-color: rgba(29, 27, 32, 0.12);
  background: rgba(29, 27, 32, 0.06);
  color: rgba(0, 0, 0, 0.38);
  cursor: not-allowed;
  box-shadow: none;
}
.text-entry-voice-btn.disabled::after {
  animation: none;
  opacity: 0;
}
.text-entry-voice-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .text-entry-voice-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }
}

.text-entry-voice-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 92px;
  padding: 16px;
  border: 2px solid rgba(19, 112, 127, 0.2);
  border-radius: 8px;
  background: #f7fbfc;
  box-shadow: 0 1px 0 rgba(19, 112, 127, 0.08);
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .text-entry-voice-panel {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 12px;
  }
}

.text-entry-voice-panel__status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.text-entry-voice-panel__pulse {
  position: relative;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 9999px;
  background: #13707f;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(19, 112, 127, 0.14);
}
.text-entry-voice-panel__pulse::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  border: 2px solid rgba(19, 112, 127, 0.34);
  animation: voice-listening-pulse 1.35s ease-out infinite;
  pointer-events: none;
}
.text-entry-voice-panel__pulse svg {
  width: 24px;
  height: 24px;
}
@media (max-width: 768px) {
  .text-entry-voice-panel__pulse {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }
  .text-entry-voice-panel__pulse svg {
    width: 22px;
    height: 22px;
  }
}

.text-entry-voice-panel__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.text-entry-voice-panel__state {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  color: #1f2937;
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  .text-entry-voice-panel__state {
    font-size: 24px;
    line-height: 30px;
  }
}

.text-entry-voice-stop-btn {
  min-width: 104px;
  min-height: 48px;
  border: 1px solid rgba(159, 45, 63, 0.28);
  border-radius: 8px;
  background: white;
  color: #9f2d3f;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  box-sizing: border-box;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms ease-in-out, border-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}
.text-entry-voice-stop-btn:hover, .text-entry-voice-stop-btn:focus-visible {
  background: #fff4f6;
  border-color: rgba(159, 45, 63, 0.52);
  box-shadow: 0 0 0 4px rgba(159, 45, 63, 0.1);
  outline: none;
}
.text-entry-voice-stop-btn:active {
  background: #ffe9ee;
}
.text-entry-voice-stop-btn:disabled {
  background: rgba(29, 27, 32, 0.12);
  border-color: transparent;
  color: rgba(0, 0, 0, 0.38);
  cursor: not-allowed;
  box-shadow: none;
}
.text-entry-voice-stop-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .text-entry-voice-stop-btn {
    width: 100%;
  }
}

@keyframes voice-listening-pulse {
  0% {
    opacity: 0.72;
    transform: scale(0.86);
  }
  65% {
    opacity: 0.18;
    transform: scale(1.16);
  }
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}
.text-entry-voice-status {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #595959;
  margin: -4px 0 0 0;
  width: 100%;
  text-align: right;
}
.text-entry-voice-status.active {
  color: #9f2d3f;
}
@media (max-width: 768px) {
  .text-entry-voice-status {
    text-align: left;
  }
}

.text-entry-subtitle {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #6b7280;
  text-align: center;
  margin: 0;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.voice-intro-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  padding: 16px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .voice-intro-modal {
    align-items: flex-end;
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

.voice-intro-modal__dialog {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 520px;
  width: 100%;
  animation: voiceIntroSlideIn 0.2s ease-out;
  overflow: hidden;
}

.voice-intro-modal__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 32px;
  border-bottom: 1px solid #e5e7eb;
}
@media (max-width: 768px) {
  .voice-intro-modal__header {
    padding: 16px 24px;
  }
}

.voice-intro-modal__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 9999px;
  background: #f0f9fa;
  color: #13707f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-intro-modal__icon svg {
  width: 22px;
  height: 22px;
}

.voice-intro-modal__title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: #1f2937;
  margin: 0;
}

.voice-intro-modal__body {
  padding: 32px;
}
@media (max-width: 768px) {
  .voice-intro-modal__body {
    padding: 24px;
  }
}

.voice-intro-modal__message {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
  margin: 0;
}

.voice-intro-modal__list {
  margin: 16px 0 0 0;
  padding-left: 20px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: #374151;
}
.voice-intro-modal__list li + li {
  margin-top: 8px;
}

.voice-intro-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px 32px;
  border-top: 1px solid #e5e7eb;
}
@media (max-width: 768px) {
  .voice-intro-modal__footer {
    flex-direction: column-reverse;
    padding: 16px 24px 24px;
  }
}

.voice-intro-modal__button {
  min-height: 44px;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  padding: 8px 16px;
  border: 1px solid transparent;
  transition: background 200ms ease-in-out, border-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}
.voice-intro-modal__button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(19, 112, 127, 0.18);
}
.voice-intro-modal__button:disabled {
  background: rgba(29, 27, 32, 0.12);
  border-color: transparent;
  color: rgba(0, 0, 0, 0.38);
  cursor: not-allowed;
  box-shadow: none;
}
@media (max-width: 768px) {
  .voice-intro-modal__button {
    width: 100%;
  }
}

.voice-intro-modal__button--primary {
  background: #13707f;
  border-color: #13707f;
  color: white;
}
.voice-intro-modal__button--primary:hover {
  background: #0f5a6a;
  border-color: #0f5a6a;
}
.voice-intro-modal__button--primary:active {
  background: #0d4a57;
  border-color: #0d4a57;
}

.voice-intro-modal__button--secondary {
  background: white;
  border-color: #d1d5db;
  color: #374151;
}
.voice-intro-modal__button--secondary:hover {
  background: #f8f9fa;
  border-color: #9ca3af;
}

@keyframes voiceIntroSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.note-illustration {
  position: relative;
  width: 100%;
  max-width: 273px;
  height: 256px;
  padding: 18px;
  border: 2px solid #D8D8D8;
  border-radius: 10px;
  background-color: rgba(245, 245, 245, 0.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  box-sizing: border-box;
}
.note-illustration--complete {
  background-color: rgba(55, 148, 170, 0.1);
}
.note-illustration__top-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 60%;
}
.note-illustration__line {
  height: 6px;
  border-radius: 9999px;
  background-color: #D8D8D8;
  transition: background-color 200ms ease-in-out;
}
.note-illustration__line--filled {
  background-color: #50C0CC;
}
.note-illustration__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.note-illustration__section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}
.note-illustration__header-line {
  width: 70px;
  height: 6px;
  border-radius: 9999px;
  background-color: #D8D8D8;
}
.note-illustration__section-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.note-illustration__divider {
  width: 100%;
  height: 1px;
  background-color: #dee2e6;
  opacity: 0.3;
}
.note-illustration__note-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
}
.note-illustration__note-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.note-illustration__bullet {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #D8D8D8;
  flex-shrink: 0;
  transition: background-color 200ms ease-in-out;
}
.note-illustration__bullet--filled {
  background-color: #50C0CC;
}
.note-illustration__complete-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #3794AA;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}.progress-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.progress-bar__track {
  flex: 1;
  background-color: #d4e0e3;
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background-color: #3794AA;
  border-radius: 4px;
  transition: width 200ms ease-in-out;
}
.progress-bar__label {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  min-width: 36px;
  text-align: right;
}
.progress-bar--medium .progress-bar__track {
  height: 8px;
}
.progress-bar--small .progress-bar__track {
  height: 4px;
}
.progress-bar--small .progress-bar__label {
  font-size: 12px;
  min-width: 28px;
}.step-status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step-status__indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 200ms ease-in-out;
}
.step-status__label {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  transition: color 200ms ease-in-out;
}
.step-status--complete .step-status__indicator {
  background-color: #3794AA;
  color: white;
}
.step-status--complete .step-status__label {
  color: #4b5563;
}
.step-status--current .step-status__indicator {
  border: 2px solid #3794AA;
  background-color: transparent;
}
.step-status--current .step-status__label {
  color: #1f2937;
  font-weight: 500;
}
.step-status--todo .step-status__indicator {
  background-color: #d1d5db;
}
.step-status--todo .step-status__label {
  color: #9ca3af;
}.lorenote-progress-card {
  width: 329px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  height: -moz-fit-content;
  height: fit-content;
}
.lorenote-progress-card__content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lorenote-progress-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lorenote-progress-card__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f9fa;
  border-radius: 6px;
}
.lorenote-progress-card__title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 24px;
}
.lorenote-progress-card__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lorenote-progress-card__illustration {
  display: flex;
  justify-content: center;
}
.lorenote-progress-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lorenote-progress-card__progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lorenote-progress-card__progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.lorenote-progress-card__status-text {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: #4b5563;
  line-height: 21px;
  min-width: 0;
}
.lorenote-progress-card__percentage {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  line-height: 21px;
  flex-shrink: 0;
}
.lorenote-progress-card__steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lorenote-progress-card__reminder {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}
.lorenote-progress-card__reminder-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #2d7a8a;
  background: #f0f9fa;
  border-radius: 6px;
}
.lorenote-progress-card__reminder-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lorenote-progress-card__reminder-label {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #1f2937;
}
.lorenote-progress-card__reminder-time {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #4b5563;
  overflow-wrap: anywhere;
}.mobile-progress-header {
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 16px;
}
@media (min-width: 1024px) {
  .mobile-progress-header {
    display: none;
  }
}
.mobile-progress-header__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-progress-header__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.mobile-progress-header__status-text {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #4b5563;
  line-height: 16px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-progress-header__percentage {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #3794AA;
  line-height: 16px;
  flex-shrink: 0;
}
.mobile-progress-header__reminder {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #2d7a8a;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 16px;
}
.mobile-progress-header__reminder svg {
  flex-shrink: 0;
}
.mobile-progress-header__reminder span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.lore-note-builder-flow {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: -webkit-fill-available;
  width: 100%;
  margin: 0 auto;
  background: #f8f9fa;
  box-sizing: border-box;
}
@supports not (height: 100dvh) {
  .lore-note-builder-flow {
    height: 100vh;
  }
  @media (max-width: 768px) {
    .lore-note-builder-flow {
      height: calc(100vh - env(safe-area-inset-bottom));
    }
  }
}
@media (min-width: 1024px) {
  .lore-note-builder-flow {
    max-width: 1400px;
  }
}
@media (max-width: 1023px) {
  .lore-note-builder-flow {
    max-width: 1024px;
  }
}

.chat-content-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .chat-content-wrapper {
    gap: 24px;
    padding-right: 24px;
  }
}

.chat-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  box-sizing: border-box;
  min-width: 0;
}
@media (max-width: 900px) {
  .chat-messages-container {
    padding: 16px;
  }
}

.chat-progress-card {
  display: none;
}
@media (min-width: 1024px) {
  .chat-progress-card {
    display: block;
    margin-top: 24px;
  }
}

.chat-message-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.component-in-chat {
  width: 100%;
  max-width: 806.39px;
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 900px) {
  .component-in-chat {
    max-width: 100%;
  }
}

.summary-in-chat,
.questions-in-chat {
  width: 100%;
  max-width: 100%;
}

.artifact-chat-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 8px;
  width: 100%;
  max-width: 806px;
  box-sizing: border-box;
  margin-top: 12px;
}
@media (max-width: 850px) {
  .artifact-chat-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    padding: 0;
  }
}

.btn-view-lorenote {
  background: #13707f;
  border: none;
  border-radius: 8px;
  color: white;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  padding: 10px 24px;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  white-space: nowrap;
}
.btn-view-lorenote:hover {
  background: #0f5a6a;
}
.btn-view-lorenote:active {
  background: #0d4a57;
}

.chat-text-entry {
  flex-shrink: 0;
}.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 9999px;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}
.status-chip--upcoming {
  background-color: #dbeafe;
  color: #1447e6;
}
.status-chip--past {
  background-color: #f3f4f6;
  color: #364153;
}.lorenote-card {
  display: flex;
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 0 16px 4px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
  width: 100%;
  position: relative;
  overflow: visible;
}
.lorenote-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.lorenote-card:focus {
  outline: 2px solid #3794AA;
  outline-offset: 2px;
}
.lorenote-card__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.lorenote-card__header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 40px;
}
@media (min-width: 768px) {
  .lorenote-card__header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding-right: 0;
    gap: 16px;
  }
}
.lorenote-card__kebab-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}
@media (min-width: 768px) {
  .lorenote-card__kebab-menu {
    display: none;
  }
}
.lorenote-card__title-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
@media (min-width: 768px) {
  .lorenote-card__title-section {
    gap: 0;
  }
}
.lorenote-card__title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.15px;
  color: #13707f;
  margin: 0;
  padding-right: 8px;
}
@media (min-width: 768px) {
  .lorenote-card__title {
    padding-right: 0;
  }
}
.lorenote-card__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.lorenote-card__chips--desktop {
  display: none;
}
@media (min-width: 768px) {
  .lorenote-card__chips--desktop {
    display: flex;
  }
  .lorenote-card__chips--mobile {
    display: none;
  }
}
.lorenote-card__header-actions {
  display: none;
}
@media (min-width: 768px) {
  .lorenote-card__header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
}
.lorenote-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  position: relative;
}
.lorenote-card__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #595959;
}
.lorenote-card__meta-item svg {
  flex-shrink: 0;
  color: #595959;
}
.lorenote-card__meta-item--reminder {
  color: #13707f;
  font-weight: 500;
}
.lorenote-card__meta-item--reminder svg {
  color: #13707f;
}
.lorenote-card__preview {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #4a5565;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lorenote-card__artifacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lorenote-card__artifact {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgba(19, 112, 127, 0.24);
  background: rgba(19, 112, 127, 0.06);
  color: #13707f;
  border-radius: 4px;
  padding: 6px 10px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;
}
.lorenote-card__artifact:hover, .lorenote-card__artifact:focus-visible {
  background: rgba(19, 112, 127, 0.12);
  border-color: rgba(19, 112, 127, 0.4);
  outline: none;
}.search-filter {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: white;
  border: 1px solid #f3f4f6;
  border-radius: 14px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.search-filter:focus-within {
  border: 1px solid #f3f4f6;
  outline: none;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 639px) {
  .search-filter {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .search-filter:focus-within {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}
.search-filter__top-row {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
  min-width: 0;
}
@media (max-width: 639px) {
  .search-filter__top-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
}
.search-filter__search {
  display: flex;
  flex: 1;
  align-items: center;
  background: #eeeeee;
  border-radius: 8px;
  overflow: hidden;
  min-height: 44px;
  min-width: 0;
  border: 2px solid transparent;
  box-sizing: border-box;
}
.search-filter__search:focus-within {
  border: 2px solid rgba(55, 148, 170, 0.2);
  outline: none;
  min-width: 0;
}
@media (max-width: 639px) {
  .search-filter__search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  .search-filter__search:focus-within {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
}
.search-filter__search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: #3f484b;
}
.search-filter__input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.25px;
  color: #2e3132;
  padding: 14px 16px 14px 0;
  outline: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.search-filter__input:focus {
  outline: none;
  border: none;
  font-size: 16px;
}
.search-filter__input::-moz-placeholder {
  color: #2e3132;
  font-size: 14px;
}
.search-filter__input::placeholder {
  color: #2e3132;
  font-size: 14px;
}
@media (max-width: 639px) {
  .search-filter__input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 0%;
  }
  .search-filter__input:focus {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
.search-filter__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px 10px 24px;
  border: 2px solid #13707f;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
  min-height: 44px;
  flex-shrink: 0;
}
.search-filter__button:hover {
  background: rgba(55, 148, 170, 0.1);
}
.search-filter__button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(55, 148, 170, 0.3);
}
.search-filter__button--expanded {
  background: rgba(55, 148, 170, 0.1);
}
.search-filter__button svg {
  color: #3794aa;
  flex-shrink: 0;
}
.search-filter__button span {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #13707f;
}
@media (max-width: 639px) {
  .search-filter__button span {
    display: none;
  }
  .search-filter__button {
    padding: 10px 8px;
    gap: 4px;
    min-width: 0;
    flex-shrink: 1;
  }
  .search-filter__button svg {
    width: 16px;
    height: 16px;
  }
}
.search-filter__divider {
  height: 1px;
  background: #e1e3e3;
  width: calc(100% + 32px);
  margin: 0 -16px;
}
.search-filter__filter-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .search-filter__filter-row {
    flex-direction: column;
  }
}
.search-filter__filter-dropdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: visible;
}
@media (max-width: 639px) {
  .search-filter__filter-dropdown {
    width: 100%;
    max-width: none !important;
    gap: 4px;
  }
}
@media (max-width: 767px) {
  .search-filter__filter-dropdown {
    width: 100%;
    max-width: none !important;
    gap: 4px;
  }
}
@media (min-width: 768px) {
  .search-filter__filter-dropdown {
    min-width: 140px;
    flex: 1 1 auto;
  }
}
.search-filter__filter-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #364153;
}
@media (max-width: 639px) {
  .search-filter__filter-label {
    font-size: 12px;
    line-height: 16px;
  }
}
.search-filter__filter-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 8px;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  min-width: 140px;
  width: 100%;
}
.search-filter__filter-select:hover:not(.search-filter__filter-select--disabled) {
  border-color: rgb(190.5, 190.5, 190.5);
}
.search-filter__filter-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(19, 112, 127, 0.2);
}
.search-filter__filter-select--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.search-filter__filter-select--disabled svg {
  opacity: 0.5;
}
.search-filter__filter-select span {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.1px;
  color: #000000;
}
@media (max-width: 639px) {
  .search-filter__filter-select span {
    font-size: 12px;
    line-height: 16px;
  }
}
.search-filter__filter-select svg {
  flex-shrink: 0;
  color: #000000;
}
@media (max-width: 639px) {
  .search-filter__filter-select svg {
    width: 12px;
    height: 12px;
  }
  .search-filter__filter-select {
    padding: 4px 8px;
    gap: 6px;
    min-width: 0;
    min-height: 32px;
  }
}
.search-filter__filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  z-index: 10;
  overflow: hidden;
}
.search-filter__filter-menu-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #2e3132;
  transition: background-color 200ms ease-in-out;
}
.search-filter__filter-menu-item:hover {
  background: rgba(55, 148, 170, 0.1);
}
.search-filter__filter-menu-item--active {
  background: rgba(55, 148, 170, 0.15);
  font-weight: 500;
  color: #13707f;
}.create-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border: 2px solid rgba(55, 148, 170, 0.2);
  border-radius: 14px;
  background: linear-gradient(168deg, rgba(55, 148, 170, 0.1) 0%, rgba(55, 148, 170, 0.05) 100%);
  text-align: left;
  width: 100%;
  max-width: 842px;
  margin-left: auto;
}
@media (max-width: 639px) {
  .create-banner {
    margin-left: 0;
    max-width: 100%;
    width: 100%;
  }
}
.create-banner__header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: flex-start;
}
.create-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3794AA;
  flex-shrink: 0;
}
.create-banner__icon svg {
  color: white;
}
.create-banner__title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: #13707F;
  margin: 0;
}
.create-banner__message {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.252px;
  color: #4A5565;
  margin: 0;
  width: 100%;
  text-align: center;
}
.create-banner__button {
  align-self: stretch;
  width: 100%;
}
.create-banner--empty-state {
  align-items: center;
  text-align: center;
  margin-left: 0;
  max-width: none;
  background: white;
  border-color: #F3F4F6;
}
.create-banner--empty-state .create-banner__header {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.create-banner--empty-state .create-banner__message {
  color: #595959;
  text-align: center;
}
.create-banner--empty-state .create-banner__icon {
  background: transparent;
}
.create-banner--empty-state .create-banner__icon svg {
  color: #D8D8D8;
}
.create-banner--empty-state .create-banner__title {
  color: #595959;
  text-align: center;
}
@media (max-width: 639px) {
  .create-banner--empty-state {
    max-width: 100%;
  }
}
.create-banner--disabled .create-banner__icon {
  background: #D8D8D8;
}
.create-banner--disabled .create-banner__title {
  color: #595959;
}
.create-banner--disabled .create-banner__button {
  background: rgba(29, 27, 32, 0.12) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  color: rgba(46, 49, 50, 0.38) !important;
}
.create-banner--disabled .create-banner__button svg {
  color: rgba(46, 49, 50, 0.38) !important;
}.direct-create-lorenote {
  flex-shrink: 0;
  white-space: nowrap;
}
.direct-create-lorenote svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 639px) {
  .direct-create-lorenote {
    width: 100%;
    justify-content: center;
  }
}
.direct-create-lorenote--empty {
  width: auto;
  min-width: 188px;
}
@media (max-width: 639px) {
  .direct-create-lorenote--empty {
    width: 100%;
  }
}.confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  padding: 16px;
}
.confirm-modal__dialog {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 440px;
  width: 100%;
  animation: modalSlideIn 0.2s ease-out;
}
.confirm-modal__dialog--danger {
  border-top: 4px solid #ef4444;
}
.confirm-modal__dialog--warning {
  border-top: 4px solid #fbbf24;
}
.confirm-modal__header {
  padding: 24px 32px;
  border-bottom: 1px solid #e5e7eb;
}
.confirm-modal__title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #1f2937;
  margin: 0;
}
.confirm-modal__body {
  padding: 32px;
}
.confirm-modal__message {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
  margin: 0;
}
.confirm-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px 32px;
  border-top: 1px solid #e5e7eb;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.classification-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.classification-selector--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.classification-selector__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.classification-selector__trigger svg {
  flex-shrink: 0;
  color: #4b5563;
}
.classification-selector__trigger:hover:not(.classification-selector--disabled .classification-selector__trigger) {
  background-color: rgba(19, 112, 127, 0.08);
}
.classification-selector__trigger:hover:not(.classification-selector--disabled .classification-selector__trigger) .classification-selector__value {
  color: #3794AA;
}
.classification-selector__trigger:focus {
  outline: 2px solid #3794AA;
  outline-offset: 2px;
}
.classification-selector__value {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #374151;
  white-space: nowrap;
  transition: color 200ms ease-in-out;
}
.classification-selector__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.classification-selector__option {
  padding: 8px 12px;
  cursor: pointer;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: #374151;
  transition: all 200ms ease-in-out;
}
.classification-selector__option:hover {
  background: #f8f9fa;
  color: #111827;
}
.classification-selector__option--active {
  background: rgba(19, 112, 127, 0.1);
  color: #3794AA;
  font-weight: 500;
}
.classification-selector__option--active:hover {
  background: rgba(19, 112, 127, 0.15);
}
.classification-selector__option:first-child {
  border-radius: 6px 6px 0 0;
}
.classification-selector__option:last-child {
  border-radius: 0 0 6px 6px;
}
.classification-selector__saving {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
  white-space: nowrap;
  pointer-events: none;
}/**
 * Maintenance Screen Styles
 */
.maintenance-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f8f9fa;
  padding: 20px;
}
.maintenance-screen__container {
  max-width: 600px;
  text-align: center;
  padding: 40px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.maintenance-screen__illustration {
  margin-bottom: 32px;
}
.maintenance-screen__illustration svg {
  max-width: 280px;
  height: auto;
}
.maintenance-screen__header {
  margin-bottom: 16px;
}
.maintenance-screen__title {
  font-size: 28px;
  font-weight: 600;
  color: #263238;
  margin: 0;
  font-family: "Montserrat", sans-serif;
}
.maintenance-screen__subtext {
  max-width: 500px;
  margin: 0 auto;
}
.maintenance-screen__message {
  font-size: 16px;
  line-height: 1.6;
  color: #546e7a;
  margin: 0;
  font-family: "Roboto", sans-serif;
}.rename-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  padding: 16px;
}
.rename-modal__dialog {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
  animation: modalSlideIn 0.2s ease-out;
}
.rename-modal__header {
  padding: 24px 32px;
  border-bottom: 1px solid #e5e7eb;
}
.rename-modal__title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #1f2937;
  margin: 0;
}
.rename-modal__body {
  padding: 32px;
}
.rename-modal__label {
  display: block;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}
.rename-modal__input {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  color: #1f2937;
  transition: border-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}
.rename-modal__input:focus {
  outline: none;
  border-color: #3794AA;
  box-shadow: 0 0 0 3px rgba(55, 148, 170, 0.1);
}
.rename-modal__input::-moz-placeholder {
  color: #9ca3af;
}
.rename-modal__input::placeholder {
  color: #9ca3af;
}
.rename-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px 32px;
  border-top: 1px solid #e5e7eb;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.my-lorenotes {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f8f9fa;
}
.my-lorenotes__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 83px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid #dee2e6;
}
.my-lorenotes__logo {
  height: 40px;
}
.my-lorenotes__logo-img {
  height: 40px;
  width: auto;
}
.my-lorenotes__sign-out {
  color: #3794AA !important;
  font-size: 18px !important;
}
.my-lorenotes__sign-out svg {
  width: 24px !important;
  height: 24px !important;
}
.my-lorenotes__sign-out:hover {
  color: #2d7a8a !important;
}
@media (max-width: 768px) {
  .my-lorenotes__sign-out {
    font-size: 0 !important;
    gap: 0 !important;
    padding: 8px !important;
    min-width: 40px !important;
  }
  .my-lorenotes__sign-out svg {
    width: 24px !important;
    height: 24px !important;
  }
}
.my-lorenotes__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  max-width: 1488px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 639px) {
  .my-lorenotes__content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding-left: 16px;
    padding-right: 16px;
  }
}
.my-lorenotes__section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 639px) {
  .my-lorenotes__section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
}
.my-lorenotes__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 639px) {
  .my-lorenotes__header-row {
    gap: 12px;
  }
}
.my-lorenotes__banner-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
@media (max-width: 639px) {
  .my-lorenotes__banner-row {
    justify-content: flex-start;
  }
}
.my-lorenotes__title {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  color: #3794aa;
  margin: 0;
}
.my-lorenotes__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.my-lorenotes__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.my-lorenotes__empty p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  color: #4b5563;
  margin: 0;
}
.my-lorenotes__empty--action {
  flex-direction: column;
  gap: 16px;
}
.my-lorenotes__load-more {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  margin-top: 16px;
}
.my-lorenotes__error {
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.my-lorenotes__error p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: #dc2626;
  margin: 0;
}
.my-lorenotes__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.my-lorenotes__loading p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  color: #4b5563;
}.session-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin-bottom: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 200ms ease-in-out;
  cursor: default;
}
.session-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}
.session-card--in-progress {
  border-left: 4px solid #10b981;
}
.session-card--completed {
  border-left: 4px solid #6366f1;
}
.session-card__header {
  display: flex;
  align-items: center;
  flex: 1;
}
.session-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.session-card__info h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.session-card__title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.session-card__meta {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.session-card__actions {
  display: flex;
  gap: 8px;
}
.session-card__btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  border: none;
}
.session-card__btn--continue {
  background: #3b82f6;
  color: white;
}
.session-card__btn--continue:hover {
  background: #1e40af;
}
.session-card__btn--view {
  background: #6366f1;
  color: white;
}
.session-card__btn--view:hover {
  background: #4f46e5;
}
.session-card__btn--download {
  background: #10b981;
  color: white;
}
.session-card__btn--download:hover {
  background: #065f46;
}
.session-card__btn--delete {
  background: white;
  color: #ef4444;
  border: 1px solid #ef4444;
}
.session-card__btn--delete:hover {
  background: #fee2e2;
}